refactor: remove signin step and related buttons from signup process

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: {
@@ -34,11 +34,6 @@
       showback: false,
     },
     SIGNIN: {
-      name: "Signin",
-      progress: 50,
-      showback: true,
-    },
-    SIGNIN_BARCODE: {
       name: "Signin with Barcode",
       progress: 100,
       showback: false,
@@ -62,35 +57,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">
@@ -101,7 +67,9 @@
         <Card.Description
           >Let me guide you through the signup process.</Card.Description
         >
-        <Progress value={currentStep.progress} />
+        {#if currentStep.name !== Steps.WELCOME.name}
+          <Progress value={currentStep.progress} />
+        {/if}
       </Card.Header>
       <Card.Content class="grid gap-4">
         {#if currentStep.name == Steps.WELCOME.name}
@@ -216,29 +184,10 @@
             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 class="mx-auto h-56" src={sampleQR} alt="" />
           </p>
-          <img src={sampleQR} alt="">
-          TODO:
         {:else if currentStep.name == Steps.SIGNIN.name}
-          <div class="grid gap-2">
-            <Button
-              autofocus
-              class="w-full"
-              on:click={() => {
-                currentStep = Steps.SIGNIN_BARCODE;
-              }}>I brought my Barcode</Button
-            >
-          </div>
-          <div class="grid gap-2">
-            <Button
-              variant="secondary"
-              class="w-full"
-              on:click={() => {
-                currentStep = Steps.SIGNIN_MAIL;
-              }}>I don't have my barcode with me</Button
-            >
-          </div>
-        {:else if currentStep.name == Steps.SIGNIN_BARCODE.name}
           Just walk up to the next available person and show them your barcode.
         {:else if currentStep.name == Steps.SIGNIN_MAIL.name}
           <div class="grid gap-2">
@@ -267,7 +216,7 @@
           and tell them your name.
         {/if}
       </Card.Content>
-      <Card.Footer class="grid gap-4">
+      <Card.Footer class="grid gap-2">
         {#if currentStep.showback}
           <Button
             variant="destructive"
@@ -286,9 +235,6 @@
                 case Steps.SIGNIN.name:
                   currentStep = Steps.WELCOME;
                   break;
-                case Steps.SIGNIN_BARCODE.name:
-                  currentStep = Steps.SIGNIN;
-                  break;
                 case Steps.SIGNIN_MAIL.name:
                   currentStep = Steps.SIGNIN;
                   break;
@@ -306,9 +252,6 @@
               currentStep = Steps.WELCOME;
             }}>Done</Button
           >
-          <p class="text-center">
-            Returning to the home screen in {remainingseconds} seconds...
-          </p>
         {/if}
       </Card.Footer>
     </Card.Root>

src/routes/+layout.svelte

@@ -18,7 +18,7 @@
 	  <div class="container flex items-center justify-between py-2">
 		<h1 class="text-xl font-bold">Lauf für Kaya! Kiosk</h1>
 		<div class="flex items-center gap-2">
-		  <Button on:click={toggleMode} variant="outline" size="icon">
+		  <!-- <Button on:click={toggleMode} variant="outline" size="icon">
 			<Sun
 			  class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 			/>
@@ -26,7 +26,7 @@
 			  class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
 			/>
 			<span class="sr-only">Toggle theme</span>
-		  </Button>
+		  </Button> -->
 		  <Button
 			variant="outline"
 			size="icon"