Minor UI improvements

grammyjs · Mar 26, 2024 · 03db8da · 03db8da
1 parent 4833f93
commit 03db8da
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/islands/ConnectivityTest.tsx b/islands/ConnectivityTest.tsx
@@ -214,7 +214,7 @@ function TestView() {
         ))}
       </main>
       {
-        <div class="bg-gradient-to-t fixed bottom-0 p-5 from-[#0002] to-[#0000] w-full dark:(from-[#aaa1] to-[#fff0])">
+        <div class="bg-gradient-to-t fixed bottom-0 left-0 p-5 from-[#0002] to-[#0000] w-full dark:(from-[#aaa1] to-[#fff0])">
           <div class="max-w-sm mx-auto">
             <Button onClick={restart}>
               {(Object.values(tests.value).length == dcsToCheck.value.size &&

diff --git a/islands/UpdateExplorer.tsx b/islands/UpdateExplorer.tsx
@@ -58,26 +58,24 @@ export function UpdateExplorer() {
 
 function Home() {
   return (
-    <main class="mx-auto w-full max-w-[900px] p-5 xl:p-10">
-      <div class="w-full max-w-lg mx-auto">
-        <form
-          class="gap-4 flex flex-col"
-          onSubmit={(e) => {
-            e.preventDefault();
-            setHash(`/${new FormData(e.currentTarget).get("token")}`);
-          }}
-        >
-          <div class="flex flex-col gap-1.5">
-            <Input placeholder="Bot token" name="token" required />
-            <Caption>
-              The bot tokens you enter are stored in your browser and used only
-              in requests made directly to Telegram.
-            </Caption>
-          </div>
-          <Button>Open Update Explorer</Button>
-        </form>
-        <div class=""></div>
-      </div>
+    <main class="w-full max-w-lg mx-auto">
+      <form
+        class="gap-4 flex flex-col"
+        onSubmit={(e) => {
+          e.preventDefault();
+          setHash(`/${new FormData(e.currentTarget).get("token")}`);
+        }}
+      >
+        <div class="flex flex-col gap-1.5">
+          <Input placeholder="Bot token" name="token" required />
+          <Caption>
+            The bot tokens you enter are stored in your browser and used only in
+            requests made directly to Telegram.
+          </Caption>
+        </div>
+        <Button>Open Update Explorer</Button>
+      </form>
+      <div class=""></div>
     </main>
   );
 }

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -1,8 +1,12 @@
 import { type PageProps } from "$fresh/server.ts";
+import { cn } from "../lib/cn.ts";
 
 const metricsSnippet = Deno.env.get("METRICS_SNIPPET");
 
 export default function App({ Component, url }: PageProps) {
+  const layout = !["/update-explorer", "/connectivity-test"].includes(
+    url.pathname,
+  );
   return (
     <html>
       <head>
@@ -19,16 +23,20 @@ export default function App({ Component, url }: PageProps) {
           ? <script dangerouslySetInnerHTML={{ __html: metricsSnippet }} />
           : null}
       </head>
-      <body class="font-inter bg-background text-foreground select-none" // f-client-nav
+      <body
+        class={cn(
+          "font-inter bg-background text-foreground select-none",
+          layout && "p-5 xl:p-10",
+        )} // f-client-nav
       >
         {/* <Partial name="body"> */}
-        {["/update-explorer", "/connectivity-test"].includes(url.pathname)
-          ? <Component />
-          : (
-            <main class="mx-auto w-full max-w-[900px] p-5 xl:(p-10) flex flex-col">
+        {layout
+          ? (
+            <main class="mx-auto w-full max-w-[900px] flex flex-col">
               <Component />
             </main>
-          )}
+          )
+          : <Component />}
         {/* </Partial> */}
       </body>
     </html>