From 673b7553e06bb6d2be52b0262bce8c4ced29d2ec Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Sun, 12 Nov 2023 20:52:31 +0100
Subject: [PATCH] chore: add disclaimer

---
 src/components/App.tsx       | 17 +++++++++++++----
 src/components/StartPage.tsx | 21 ++++++++++++++++++---
 src/pages/index.astro        |  4 +---
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 85dc95f..b826036 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -41,8 +41,15 @@ const App: React.FC = () => {
         <div className="py-4 -mb-4 flex flex-row gap-x-3">
           {ethStatus?.syncState === "syncing" ? (
             <span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
-              <CircleProgressBar radius={5} strokeWidth={3} percentage={Math.floor(ethStatus.sync)} />
-              <span className="font-bold font-mono text-orange-400 mr-2">{ethStatus.sync.toFixed(1)}%</span> Syncing Ethereum Network
+              <CircleProgressBar
+                radius={5}
+                strokeWidth={3}
+                percentage={Math.floor(ethStatus.sync)}
+              />
+              <span className="font-bold font-mono text-orange-400 mr-2">
+                {ethStatus.sync.toFixed(1)}%
+              </span>{" "}
+              Syncing Ethereum Network
             </span>
           ) : ethStatus?.syncState === "done" ? (
             <span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
@@ -132,8 +139,10 @@ const Root = () => {
       <LumeStatusProvider>
         <NetworksProvider>
           <AuthProvider>
-            <App />
-            <Browser />
+            <main className="bg-neutral-950 w-full min-h-screen h-full pt-2 pb-5">
+              <App />
+              <Browser />
+            </main>
           </AuthProvider>
         </NetworksProvider>
       </LumeStatusProvider>
diff --git a/src/components/StartPage.tsx b/src/components/StartPage.tsx
index 1ce77d6..005c8f2 100644
--- a/src/components/StartPage.tsx
+++ b/src/components/StartPage.tsx
@@ -8,7 +8,7 @@ type Props = {
 const AVAILABLE_PAGES = [
   "blockranger.eth",
   "esteroids.eth",
-  "ens.eth",
+  // "ens.eth",
   "sogola.eth",
   "vitalik.eth",
 ];
@@ -17,7 +17,7 @@ const StartPage = ({ setUrl }: Props) => {
   const { ready, inited } = useLumeStatus();
   const { isLoggedIn } = useAuth();
   return (
-    <div className="mx-4 relative border rounded-md mt-2 border-neutral-800 p-10 w-[calc(100%-32px)] bg-neutral-900 flex flex-col">
+    <div className="mx-4 relative border rounded-md mt-2 border-neutral-800 p-10 pb-5 w-[calc(100%-32px)] bg-neutral-900 flex flex-col">
       <h2 className="font-bold text-2xl text-white">
         Welcome to the Lume Browser
       </h2>
@@ -28,7 +28,7 @@ const StartPage = ({ setUrl }: Props) => {
       </p>
       <p className="text-gray-400 my-4">
         For further documentation, see:{" "}
-        <a href="https://docs.lumeweb.com/browser-webapp">
+        <a href="https://docs.lumeweb.com/browser-webapp" className="underline text-white">
           https://docs.lumeweb.com/browser-webapp
         </a>
       </p>
@@ -37,6 +37,21 @@ const StartPage = ({ setUrl }: Props) => {
       {inited && ready ? (
         <div>
           <hr className="my-3 border-neutral-700" />
+          <div
+            className="bg-yellow-800/40 rounded-md border border-yellow-500 text-yellow-500 p-4"
+            role="alert"
+          >
+            <p className="font-bold">Disclaimer</p>
+            <p>
+              The sites listed below are the ones we currently support. We're a
+              small team working hard to make this technology possible. We don't
+              endorse any ideological views. Our focus is on building for a free
+              web. The listed sites are examples of what our technology can do
+              today. Please note that we are not hosting or serving any content
+              ourselves and have no control over the content as it's
+              decentralized.
+            </p>
+          </div>
           <h3 className="text-white text-lg font-bold mt-4">
             Currently Accessible Websites:
           </h3>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6101db6..30c4c8e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,9 +12,7 @@ import "@/styles/globals.scss";
     <meta name="generator" content={Astro.generator} />
     <title>Web3 Browser - Powered By Lume Web</title>
   </head>
-  <body>
-    <main class="bg-neutral-950 w-full">
+  <body class="min-h-screen p-0 m-0">
       <App client:only="react" />
-    </main>
   </body>
 </html>