update admin homepage (#59)

* use ico instead of svg for favicon * update admin homepage; make alert closable and change button text
amalshaji · May 5, 2024 · 11ece50 · 11ece50
1 parent 6a060c6
commit 11ece50
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 18 deletions.
diff --git a/admin/src/portr_admin/static/favicon.ico b/admin/src/portr_admin/static/favicon.ico
diff --git a/admin/src/portr_admin/static/favicon.svg b/admin/src/portr_admin/static/favicon.svg
diff --git a/admin/src/portr_admin/static/logo.svg b/admin/src/portr_admin/static/logo.svg
diff --git a/admin/src/portr_admin/templates/index.html b/admin/src/portr_admin/templates/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
+    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
     <title>Portr - Expose local ports to public URLs</title>
     <style>
       @font-face {

diff --git a/admin/src/web/src/pages/home.svelte b/admin/src/web/src/pages/home.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { onMount } from "svelte";
-
   import {
     ExclamationTriangle,
     LockClosed,
     GithubLogo,
   } from "radix-icons-svelte";
+  import { X } from "lucide-svelte";
 
   import * as Alert from "$lib/components/ui/alert";
   import { Button } from "$lib/components/ui/button";
@@ -55,21 +55,17 @@
 
 <div class="grid h-screen place-items-center">
   <div
-    class="w-full max-w-sm p-6 m-auto mx-auto rounded-md dark:bg-gray-800 py-8 border"
+    class="w-full max-w-sm p-6 m-auto mx-auto rounded-md dark:bg-gray-800 py-8"
   >
-    <div class="flex justify-center mx-auto py-8 items-center space-x-2">
-      <img class="w-auto h-12" src="/static/logo.svg" alt="" />
-    </div>
-
     <Button
-      variant="default"
+      variant="outline"
       class="w-full"
       href={encodeURIComponent(next) !== "null"
         ? `/api/v1/auth/github?next=${encodeURIComponent(next)}`
         : `/api/v1/auth/github`}
     >
       <GithubLogo class="mr-2 h-4 w-4" />
-      Continue with GitHub
+      Login with GitHub
     </Button>
 
     <div class="my-4">
@@ -87,10 +83,20 @@
     </div>
 
     {#if message}
-      <div class="mt-4">
+      <div class="mt-4" id="error-message-box">
         <Alert.Root variant="destructive">
           <ExclamationTriangle class="h-4 w-4" />
-          <Alert.Title>Error</Alert.Title>
+          <Alert.Title>
+            <p class="flex justify-between">
+              <span>Error</span>
+              <span
+                on:click={() => {
+                  const element = document.getElementById("error-message-box");
+                  element?.remove();
+                }}><X class="h-3 hover:cursor-pointer" /></span
+              >
+            </p>
+          </Alert.Title>
           <Alert.Description>
             {message}
           </Alert.Description>