Lightmode, Layout Change

kubelab-ui/src/app.css

@@ -52,7 +52,23 @@ table {
     width: 100%;
 }
 
-td, th {
+td,
+th {
     border: 1px solid #ddd;
     padding: 0.5em;
 }
+
+@layer utilities {
+    @layer components {
+        /* Hide scrollbar for Chrome, Safari and Opera */
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+
+        /* Hide scrollbar for IE, Edge and Firefox */
+        .no-scrollbar {
+            -ms-overflow-style: none; /* IE and Edge */
+            scrollbar-width: none; /* Firefox */
+        }
+    }
+}

kubelab-ui/src/lib/components/Console.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from "$app/stores";
   import { client } from "$lib/pocketbase";
   import { layout_store } from "$lib/stores/layout_store";
   import { terminal_size } from "$lib/stores/terminal";
@@ -15,26 +14,27 @@
     fontFamily: "monospace",
     fontSize: 14,
     theme: {
-      foreground: "#d2d2d2",
-      background: "#2B3441",
-      cursor: "#adadad",
-      black: "#000000",
+      foreground: "#2B3441",
+      background: "#ffffff",
+      cursor: "#2B3441",
+      black: "#2B3441",
       red: "#d81e00",
       green: "#5ea702",
       yellow: "#cfae00",
       blue: "#427ab3",
       magenta: "#89658e",
       cyan: "#00a7aa",
-      white: "#dbded8",
+      white: "#000000",
       brightBlack: "#686a66",
       brightRed: "#f54235",
       brightGreen: "#99e343",
       brightYellow: "#fdeb61",
       brightBlue: "#84b0d8",
       brightMagenta: "#bc94b7",
       brightCyan: "#37e6e8",
-      brightWhite: "#f1f1f0"
+      brightWhite: "#2B3441"
     },
+
     scrollOnUserInput: true
   });
 
@@ -150,5 +150,4 @@
   div :global(.xterm) {
     height: 100%;
   }
-
 </style>

kubelab-ui/src/lib/components/base/Desktop.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import PlaceholderComponent from "$lib/components/base/PlaceholderComponent.svelte";
-    import type { ComponentType, SvelteComponentTyped } from "svelte";
+  import type { ComponentType, SvelteComponentTyped } from "svelte";
   // eslint-disable-next-line @typescript-eslint/naming-convention
   export let Console: ComponentType<SvelteComponentTyped>;
 </script>

kubelab-ui/src/lib/stores/tableView.ts

@@ -1,15 +1,15 @@
 import { writable } from "svelte/store";
 
 const defaultValue = false;
-const initialTableViewValue =
-    localStorage.getItem("tableView") === null
+const initialHorizontalViewValue =
+    localStorage.getItem("horizontalView") === null
         ? defaultValue
-        : localStorage.getItem("tableView") === "true";
+        : localStorage.getItem("horizontalView") === "true";
 
-const tableView = writable<boolean>(initialTableViewValue);
+const horizontalView = writable<boolean>(initialHorizontalViewValue);
 
-tableView.subscribe((value) => {
-    localStorage.setItem("tableView", value.toString());
+horizontalView.subscribe((value) => {
+    localStorage.setItem("horizontalView", value.toString());
 });
 
-export default tableView;
+export default horizontalView;

kubelab-ui/src/routes/labs/[id]/[id]/+layout.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import { metadata } from "$lib/stores/metadata";
   import { goto } from "$app/navigation";
-  import { ArrowLeft, Check, RotateCw, StopCircle } from "lucide-svelte";
+  import {
+    ArrowLeft,
+    Check,
+    RotateCw,
+    StopCircle,
+    StretchHorizontal,
+    StretchVertical
+  } from "lucide-svelte";
   import { client } from "$lib/pocketbase/index.js";
   import toast from "svelte-french-toast";
   import {
@@ -16,6 +23,7 @@
   // @ts-ignore
   import { Confetti } from "svelte-confetti";
   import ToggleConfetti from "$lib/components/base/ToggleConfetti.svelte";
+  import horizontalView from "$lib/stores/tableView.js";
 
   $metadata.title = "Exercises";
 
@@ -137,13 +145,31 @@
   }
 </script>
 
-<div class="absolute top-0 h-20 left-0 right-0 bg-neutral">
+<div class="absolute top-0 h-20 left-0 right-0 ">
   <div class="mt-5 flex justify-between px-2">
     <!-- add back button -->
-    <button class="btn " on:click={() => goto("/labs/" + data.pathname.split("/")[2])}>
+    <button class="btn btn-neutral" on:click={() => goto("/labs/" + data.pathname.split("/")[2])}>
       <ArrowLeft class="inline-block w-4 h-4 mr-2" />
       Exercises
     </button>
+    <div class="join grid grid-cols-2">
+      <button
+        on:click={() => {
+          horizontalView.set(true);
+        }}
+        class="join-item btn {$horizontalView ? 'btn-neutral' : 'btn-outline'} "
+      >
+        <StretchHorizontal />
+      </button>
+      <button
+        on:click={() => {
+          horizontalView.set(false);
+        }}
+        class="join-item btn {$horizontalView ? 'btn-outline' : 'btn-neutral'}"
+      >
+        <StretchVertical />
+      </button>
+    </div>
     <ToggleConfetti>
       <button
         slot="label"
@@ -157,14 +183,14 @@
         style="position: fixed; top: -10px; left: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; overflow: hidden; z-index: 10;"
       >
         {#if $exercise_session.endTime}
-        <Confetti
-          x={[-5, 5]}
-          y={[0, 0.1]}
-          delay={[0, 2000]}
-          duration="3000"
-          amount="100"
-          fallDistance="100vh"
-        />
+          <Confetti
+            x={[-5, 5]}
+            y={[0, 0.1]}
+            delay={[0, 2000]}
+            duration="3000"
+            amount="100"
+            fallDistance="100vh"
+          />
         {/if}
       </div>
     </ToggleConfetti>
@@ -173,7 +199,7 @@
 <div class="absolute top-16 bottom-16 left-0 right-0 z-0">
   <slot />
 </div>
-<div class="absolute h-16 bottom-0 left-0 right-0 bg-neutral">
+<div class="absolute h-16 bottom-0 left-0 right-0">
   <div class="mt-2 flex justify-between px-2">
     <div>
       <button
@@ -208,8 +234,7 @@
                 class="step
           {checkIfExerciseIsDone(currentExercise.id) ? 'step-success' : ''}
           "
-              >
-              </button>
+              />
             {/each}
           {/key}
         {/key}