Clean up the auth warning page

Center content vertically and horizontally. Don't show a link but directly the Repos view when authenticated.
radicle-dev · Aug 29, 2024 · 16cede1 · 16cede1
1 parent bb68d6c
commit 16cede1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -60,7 +60,6 @@
   </head>
 
   <body>
-    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/public/index.css b/public/index.css
@@ -4,8 +4,21 @@
 
 body {
   height: 100%;
+  width: 100%;
   margin: 0;
   padding: 0;
   color: var(--color-foreground-contrast);
   background-color: var(--color-background-default);
 }
+
+html {
+  height: 100%;
+  width: 100%;
+}
+
+code {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  background-color: var(--color-fill-ghost);
+  padding: 0.125rem 0.25rem;
+}
diff --git a/src/main.ts b/src/main.ts
@@ -1,7 +1,7 @@
 import App from "./App.svelte";
 
 const app = new App({
-  target: document.getElementById("app")!,
+  target: document.body,
 });
 
 export default app;
diff --git a/src/views/Startup.svelte b/src/views/Startup.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { invoke } from "@tauri-apps/api/core";
   import { onMount } from "svelte";
-  import { Link } from "svelte-routing";
 
+  import Repos from "@app/views/Repos.svelte";
   import Icon from "@app/components/Icon.svelte";
 
   let loading = true;
@@ -22,24 +22,26 @@
 
 <style>
   main {
-    padding-top: 7rem;
-    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
     width: 100%;
-    text-align: center;
+    row-gap: 0.5rem;
   }
 </style>
 
-<main>
-  {#if error}
-    <div style="display: flex; justify-content: center;">
-      <Icon name="warning" size="32" />
+{#if error}
+  <main>
+    <Icon name="warning" size="32" />
+    <div class="txt-medium txt-semibold">
+      {error.err}
     </div>
-    <p class="txt-medium">{error.err}</p>
     {#if error.hint}
-      <p class="txt-small">{@html error.hint}</p>
+      <div class="txt-small">{@html error.hint}</div>
     {/if}
-  {:else if !loading}
-    <p class="txt-medium">You are all set!</p>
-    <Link to="/repos">Repos</Link>
-  {/if}
-</main>
+  </main>
+{:else if !loading}
+  <Repos />
+{/if}
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,6 @@ @@
       </head>
       <body>
-        <div id="app"></div>
         <script type="module" src="/src/main.ts"></script>
       </body>
     </html>