💄 UI Changes

assets/style.css

@@ -11,11 +11,12 @@
 
 html {
     --primary-color: rgb(87, 75, 255);
-    background-color: #f1f1f1;
+    --tile-color: rgb(255, 255, 255);
-    --tile-color: rgb(226, 226, 226);
+    background-color: rgb(240, 240, 240);
 }
+
 html * {
-    color: rgb(31, 31, 31);
+    color: black;
 }
 
 html, body, #__nuxt {
@@ -27,7 +28,7 @@ html, body, #__nuxt {
     display: grid;
     grid-template-columns: auto auto auto 1fr auto auto;
     align-content: start;
-    background-color: rgb(228, 228, 228);
+    background-color: rgb(247, 247, 247);
 }
 .resource, .header {
     display: contents;
@@ -45,10 +46,13 @@ html, body, #__nuxt {
     display: flex;
     align-items: center;
 }
+.resource:hover > .grid-element {
+    background-color: #c2c2c2;
+}
 .resource p {
     font-weight: 600;
     font-family: "Source Code Pro", monospace;
 }
 .even > .grid-element {
-    background-color: rgb(202, 202, 202);
+    background-color: rgb(233, 233, 233);
 }

components/ui/UiInput.vue

@@ -27,7 +27,7 @@ defineProps<{
 .field input, .field .input, .field textarea, .field select {
     min-height: 2.5rem;
     border-radius: 0.25rem;
-    background-color: rgb(51, 51, 51);
+    background-color: rgb(255, 255, 255);
     width: 100%;
     border: 2px solid #444444;
     outline: none;

pages/account/inspect/statefulsets.vue

@@ -0,0 +1,14 @@
+<template>
+    <p>{{ namespace }}</p>
+</template>
+
+<script setup lang="ts">
+const namespace = computed(() => {
+    const namespace = useRoute().params.namespace;
+    if (namespace)
+    {
+        return namespace;
+    }
+    return "Alle";
+});
+</script>

pages/account/inspect/statefulsets/[namespace].vue

@@ -0,0 +1,3 @@
+<template>
+    
+</template>

pages/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="login-wrapper">
+        <div class="tile-l login-window">
             <h2>Kubooboo</h2>
             <img class="logo" src="@/assets/logo.png" alt="">
             <form class="login content-xl" @submit.prevent="doLogin()">
@@ -19,6 +20,8 @@
                 </div>
             </form>
         </div>
+        
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -61,12 +64,13 @@ function setSessionCookie(session: Session, exp: number)
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    
 }
-.login {
+.login-window {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     width: 640px;
-    background-color: #f1f1f1;
-    padding: 2rem;
-    border-radius: 0.5rem;
 }
 .logo {
     width: 10rem;