@necrolab/dashboard 0.5.1 → 0.5.2

package/index.html

@@ -8,6 +8,8 @@
             content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
         />
         <meta name="description" content="Necro Lab - dashboard" />
+        <meta name="darkreader-lock" />
+        <meta name="color-scheme" content="dark" />
         <title>Necro Lab - Dashboard</title>
         <!-- DNS prefetch for external resources -->
         <link rel="dns-prefetch" href="https://fonts.googleapis.com" />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.1",
+    "version": "0.5.2",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",

package/src/assets/css/main.scss

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   NECRO DASHBOARD - MAIN STYLES
+   NECRO DASHBOARD
    Modular SCSS architecture with @use imports
    ========================================================================== */
 
@@ -47,14 +47,14 @@ img {
 
 /* Global icon color consistency */
 svg {
-    color: oklch(0.90 0 0) !important;
+    color: oklch(0.9 0 0) !important;
 }
 
 /* For stroke icons (Eye, etc) - stroke on svg element */
 svg[stroke] path,
 svg[stroke] circle,
 svg[stroke] line {
-    stroke: oklch(0.90 0 0) !important;
+    stroke: oklch(0.9 0 0) !important;
 }
 
 /* For filled icons with explicit fill */
@@ -62,7 +62,7 @@ svg path[fill]:not([fill="none"]),
 svg circle[fill]:not([fill="none"]),
 svg rect[fill]:not([fill="none"]),
 svg polygon[fill]:not([fill="none"]) {
-    fill: oklch(0.90 0 0) !important;
+    fill: oklch(0.9 0 0) !important;
 }
 
 /* For filled icons without explicit fill attribute */
@@ -70,7 +70,7 @@ svg:not([stroke]):not([fill="none"]) path:not([fill]),
 svg:not([stroke]):not([fill="none"]) circle:not([fill]),
 svg:not([stroke]):not([fill="none"]) rect:not([fill]),
 svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
-    fill: oklch(0.90 0 0) !important;
+    fill: oklch(0.9 0 0) !important;
 }
 
 /* ==========================================================================
@@ -82,31 +82,32 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 }
 
 .status-indicator {
-    @apply w-2 h-2 rounded-full flex-shrink-0;
+    @apply h-2 w-2 flex-shrink-0 rounded-full;
     min-width: 4px;
     min-height: 4px;
 }
 
 .mobile-icons {
-    @apply flex lg:hidden ml-auto items-center gap-x-2;
+    @apply ml-auto flex items-center gap-x-2 lg:hidden;
 
     button {
-        @apply w-8 h-8 flex items-center justify-center rounded transition-all duration-150;
+        @apply flex h-8 w-8 items-center justify-center rounded transition-all duration-150;
         background-color: oklch(0.2046 0 0);
         border: 2px solid oklch(0.2809 0 0);
         color: oklch(0.82 0 0);
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
             border-color: oklch(0.72 0.15 145);
             outline: 1px solid oklch(0.72 0.15 145);
             outline-offset: 0;
-            color: oklch(0.90 0 0);
+            color: oklch(0.9 0 0);
         }
     }
 }
 
 .loading-spinner {
-    @apply animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full;
+    @apply h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent;
 }
 
 /* ==========================================================================
@@ -114,7 +115,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
    ========================================================================== */
 
 .label-override {
-    @apply flex items-center text-xs mb-2;
+    @apply mb-2 flex items-center text-xs;
     color: oklch(0.65 0 0);
 
     svg {
@@ -128,10 +129,10 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 .task-switches {
     h4 {
-        color: oklch(0.90 0 0);
+        color: oklch(0.9 0 0);
         font-size: 0.8125rem;
         font-weight: 500;
-        @apply text-center flex items-center gap-x-2 mx-auto mb-2;
+        @apply mx-auto mb-2 flex items-center gap-x-2 text-center;
     }
 
     .switch-wrapper {
@@ -141,7 +142,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     svg {
         width: 15px !important;
         height: 15px !important;
-        color: oklch(0.90 0 0) !important;
+        color: oklch(0.9 0 0) !important;
         margin-left: 0.25rem !important;
     }
 }
@@ -223,11 +224,11 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 @screen md {
     .btn-primary,
     .btn-secondary {
-        @apply text-sm px-3 py-1.5;
+        @apply px-3 py-1.5 text-sm;
     }
 
     .btn-action {
-        @apply text-sm px-6 h-12;
+        @apply h-12 px-6 text-sm;
         min-height: 48px;
     }
 
@@ -241,7 +242,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 @screen mobile-portrait {
     .btn-action {
-        @apply text-base px-8 h-14;
+        @apply h-14 px-8 text-base;
         min-height: 56px;
         font-weight: 600;
         border-radius: 8px;
@@ -257,7 +258,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 @screen mobile-landscape {
     .btn-action {
-        @apply text-base px-8 h-14;
+        @apply h-14 px-8 text-base;
         min-height: 56px;
         font-weight: 600;
     }

package/src/components/Auth/LoginForm.vue

@@ -1,31 +1,42 @@
 <template>
     <div class="form-section">
         <!-- Username -->
-        <div class="input-wrapper mb-4">
-            <label class="label-override">
-                <span>Username</span>
-                <ProfileIcon class="ml-2" />
-            </label>
-            <div class="input-default">
-                <input v-model="user" placeholder="Username" />
+        <div class="input-container mb-3">
+            <div class="flex items-center gap-2">
+                <ProfileIcon class="w-4 h-4" />
+                <span class="text-light-300 font-medium text-sm">Username</span>
+            </div>
+            <div class="flex-1 flex items-center">
+                <input
+                    type="text"
+                    class="login-input"
+                    v-model="user"
+                />
             </div>
         </div>
         <!-- Password -->
-        <div class="input-wrapper">
-            <label class="label-override">
-                <span>Password</span>
-                <KeyIcon class="ml-2" />
-            </label>
-            <div class="input-default">
-                <input v-model="password" type="password" placeholder="Password" />
+        <div class="input-container mb-4">
+            <div class="flex items-center gap-2">
+                <KeyIcon class="w-4 h-4" />
+                <span class="text-light-300 font-medium text-sm">Password</span>
+            </div>
+            <div class="flex-1 flex items-center">
+                <input
+                    type="password"
+                    class="login-input"
+                    v-model="password"
+                />
             </div>
         </div>
         <button
-            class="bg-green-400 hover:bg-green-500 smooth-hover text-white font-medium px-4 py-2 rounded transition-all duration-150 w-full mt-4 h-10 flex items-center justify-center"
+            class="login-btn mt-6 mx-auto"
             @click="login()"
             :disabled="buttonDisabled"
         >
             <span v-if="!buttonDisabled">Login</span>
+            <svg v-if="!buttonDisabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
+                <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M13.8 12H3"/>
+            </svg>
             <div v-else class="loading-spinner"></div>
         </button>
     </div>
@@ -56,43 +67,65 @@ async function login() {
 </script>
 
 <style lang="scss" scoped>
-.label-override {
-    @apply flex items-center text-sm mb-2;
-    color: #e1e1e4 !important;
+.login-btn {
+    @apply flex items-center justify-center gap-2 rounded-lg transition-all duration-150;
+    background: oklch(0.72 0.15 145);
+    border: 2px solid oklch(0.72 0.15 145);
+    color: oklch(1 0 0);
+    height: 3rem;
+    width: 12rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+
+    &:hover:not(:disabled) {
+        background: oklch(0.68 0.15 145);
+        border-color: oklch(0.68 0.15 145);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px oklch(0.72 0.15 145 / 0.3);
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: 0 2px 4px oklch(0.72 0.15 145 / 0.2);
+    }
 
-    svg {
-        width: 16px;
-        height: 16px;
-        path {
-            fill: #e1e1e4 !important;
-        }
+    &:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
     }
 }
 
-.input-default {
-    @apply bg-dark-400 border border-dark-650 rounded-lg px-4 py-2 flex items-center;
-    min-height: 40px;
+.input-container {
+    @apply text-white bg-dark-500 px-3 rounded-lg border-2 border-dark-550 flex items-center justify-between h-11;
+    overflow: visible;
+    transition: border-color 0.15s ease;
 
-    input {
-        @apply bg-transparent border-none outline-none w-full text-white;
-        &::placeholder {
-            color: oklch(0.65 0 0);
-        }
+    &:hover {
+        border-color: oklch(0.30 0 0);
+    }
+
+    &:focus-within {
+        border-color: oklch(0.72 0.15 145) !important;
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
     }
 }
 
-@media (max-height: 500px) and (orientation: landscape) {
-    .label-override {
-        @apply text-xs mb-1;
-        
-        svg {
-            width: 14px;
-            height: 14px;
-        }
+.login-input {
+    @apply w-full h-full text-sm text-white bg-transparent border-0 outline-none px-2 py-1;
+
+    &:focus {
+        @apply outline-none border-0 shadow-none bg-transparent;
+    }
+
+    &:hover:not(:focus) {
+        background: transparent;
     }
 
-    .input-default {
-        min-height: 36px;
+    &::placeholder {
+        color: oklch(0.50 0 0);
     }
 }
 </style>

package/src/components/ui/ReconnectIndicator.vue

@@ -37,7 +37,7 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-import logoIcon from "/android-chrome-192x192.png";
+import logoIcon from "/reconnect-logo.png";
 
 const dotIndex = ref(0);
 const progressWidth = ref(0);
@@ -119,7 +119,7 @@ const props = defineProps({
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(26, 27, 30, 0.98);
+    background: oklch(0.1822 0 0 / 0.98);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
 }
@@ -269,7 +269,7 @@ const props = defineProps({
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.2), transparent);
     animation: shimmer 2s ease-in-out infinite;
 }
 

package/src/views/Login.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="login-container" v-once>
         <div class="login-card">
-            <div class="flex justify-center mb-8">
-                <img src="@/assets/img/logo_trans.png" class="h-16 object-cover" alt="Logo: Necro" />
+            <div class="mb-10 flex justify-center">
+                <img src="@/assets/img/logo_trans.png" class="mb-3 h-16 object-cover" alt="Logo: NecroLab" />
             </div>
-            <h2 class="text-l text-white text-center font-bold mb-6">Please login to proceed</h2>
 
             <LoginForm />
         </div>
@@ -15,7 +14,7 @@ import LoginForm from "@/components/Auth/LoginForm.vue";
 </script>
 <style lang="scss" scoped>
 .login-container {
-    @apply flex flex-col items-center min-h-screen px-4;
+    @apply flex min-h-screen flex-col items-center px-4;
     margin-top: 3vh;
 
     // Mobile devices
@@ -33,7 +32,7 @@ import LoginForm from "@/components/Auth/LoginForm.vue";
 }
 
 .login-card {
-    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-xl;
+    @apply rounded-lg border border-dark-650 bg-dark-400 shadow-xl;
     backdrop-filter: blur(10px);
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     width: 100%;
@@ -52,7 +51,7 @@ import LoginForm from "@/components/Auth/LoginForm.vue";
         margin: 0.25rem 0;
 
         h2 {
-            @apply text-lg mb-2;
+            @apply mb-2 text-lg;
         }
 
         .flex.justify-center {
@@ -79,11 +78,11 @@ import LoginForm from "@/components/Auth/LoginForm.vue";
 // Title responsive sizing
 .login-card h2 {
     @media (max-width: 480px) {
-        @apply text-lg mb-3;
+        @apply mb-3 text-lg;
     }
 
     @media (orientation: landscape) {
-        @apply text-base mb-2;
+        @apply mb-2 text-base;
     }
 }
 </style>