theme

src/app.css

@@ -6,73 +6,44 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+    --popover: 0 0% 100%;
-    --border: 214.3 31.8% 91.4%;
+    --popover-foreground: 222.2 84% 4.9%;
-    --input: 214.3 31.8% 91.4%;
+    --primary: 221.2 83.2% 53.3%;
- 
-    --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+    --destructive: 0 72.22% 50.59%;
-    --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 210 40% 98%;
- 
+    --border: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --input: 214.3 31.8% 91.4%;
- 
+    --ring: 221.2 83.2% 53.3%;
-    --radius: 0.5rem;
+    --radius: 0.75rem;
   }
- 
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+    --popover: 222.2 84% 4.9%;
-    --border: 217.2 32.6% 17.5%;
+    --popover-foreground: 210 40% 98%;
-    --input: 217.2 32.6% 17.5%;
+    --primary: 217.2 91.2% 59.8%;
- 
-    --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+    --border: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --input: 217.2 32.6% 17.5%;
-  }
+    --ring: 224.3 76.3% 48%;
-}
- 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
   }
 }

src/routes/(components)/signup.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import sampleQR from "./sampleqrlfkselfservice.png";
   import { Button } from "$lib/components/ui/button/index.js";
   import * as Card from "$lib/components/ui/card/index.js";
   import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
   import { Progress } from "$lib/components/ui/progress";
+  import sampleQR from "./sampleqrlfkselfservice.png";
 
   const Steps = {
     WELCOME: {
@@ -62,35 +62,6 @@
   let firstname = $state<string>("");
   let lastname = $state<string>("");
   let remainingseconds = $state<number>(5);
-
-  // Function to handle automatic return to welcome screen
-  function startCountdown() {
-    if (currentStep.progress === 100) {
-      remainingseconds = 10;
-      const timer = setInterval(() => {
-        remainingseconds -= 1;
-        if (remainingseconds <= 0) {
-          clearInterval(timer);
-          currentStep = Steps.WELCOME;
-        }
-      }, 1000);
-      return timer;
-    }
-    return null;
-  }
-
-  import { onDestroy } from "svelte";
-
-  // Watch for changes to currentStep
-  $effect(() => {
-    if (currentStep.progress === 100) {
-      const timer = startCountdown();
-      // Cleanup when component is destroyed
-      onDestroy(() => {
-        if (timer) clearInterval(timer);
-      });
-    }
-  });
 </script>
 
 <div class="pt-48">
@@ -216,9 +187,9 @@
             Alright that's it, just walk up to the next available person and
             tell them your name.<br />
             You can scan this qr code to login to our selfservice.
+            <!-- TODO: generate actual qr code -->
+            <img src={sampleQR} alt="" />
           </p>
-          <img src={sampleQR} alt="">
-          TODO:
         {:else if currentStep.name == Steps.SIGNIN.name}
           <div class="grid gap-2">
             <Button
@@ -306,9 +277,6 @@
               currentStep = Steps.WELCOME;
             }}>Done</Button
           >
-          <p class="text-center">
-            Returning to the home screen in {remainingseconds} seconds...
-          </p>
         {/if}
       </Card.Footer>
     </Card.Root>