@necrolab/dashboard 0.4.220 → 0.5.1

package/src/views/Login.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="flex flex-col justify-center mt-20" v-once>
-        <div class="mx-auto flex w-auto rounded-xl mb-8">
-            <img src="@/assets/img/logo_trans.png" class="h-14 mr-4 z-30 object-cover" alt="Logo: Necro" />
-        </div>
-        <h2 class="text-3xl text-white text-center font-bold mb-4">Login</h2>
+    <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>
+            <h2 class="text-l text-white text-center font-bold mb-6">Please login to proceed</h2>
 
-        <div class="login">
             <LoginForm />
         </div>
     </div>
@@ -14,14 +14,76 @@
 import LoginForm from "@/components/Auth/LoginForm.vue";
 </script>
 <style lang="scss" scoped>
-.login {
-    //   @apply m-auto;
-    @media (min-width: 900px) {
-        width: 400px;
-        @apply m-auto;
-    }
-    @media (max-width: 899px) {
-        @apply px-6;
+.login-container {
+    @apply flex flex-col items-center min-h-screen px-4;
+    margin-top: 3vh;
+
+    // Mobile devices
+    @media (max-width: 480px) {
+        margin-top: 2vh;
+    }
+
+    // Landscape mode
+    @media (orientation: landscape) {
+        margin-top: 1vh;
+        justify-content: flex-start;
+        min-height: 100vh;
+        min-height: 100dvh;
+    }
+}
+
+.login-card {
+    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-xl;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    max-width: 420px;
+    padding: 1.75rem;
+
+    // Mobile devices
+    @media (max-width: 480px) {
+        max-width: 380px;
+        padding: 1.5rem;
+    }
+
+    // Landscape mode
+    @media (orientation: landscape) {
+        padding: 1.25rem;
+        margin: 0.25rem 0;
+
+        h2 {
+            @apply text-lg mb-2;
+        }
+
+        .flex.justify-center {
+            @apply mb-2;
+
+            img {
+                @apply h-10;
+            }
+        }
+    }
+}
+
+// Logo responsive sizing
+.login-card img {
+    @media (max-width: 480px) {
+        @apply h-12;
+    }
+
+    @media (orientation: landscape) {
+        @apply h-10;
+    }
+}
+
+// Title responsive sizing
+.login-card h2 {
+    @media (max-width: 480px) {
+        @apply text-lg mb-3;
+    }
+
+    @media (orientation: landscape) {
+        @apply text-base mb-2;
     }
 }
 </style>

package/src/views/Profiles.vue

@@ -1,11 +1,14 @@
 <template>
     <div>
-        <div class="flex items-center justify-between">
+        <div class="flex items-center justify-between pt-5 pb-2">
             <!-- Heading -->
-            <h4 class="text-white text-base font-bold mb-5 pt-5">
-                Profiles
-                <span class="text-light-300 pl-1">{{ ui.getSelectedProfiles().length }}</span>
-            </h4>
+            <div class="flex items-center justify-center gap-4">
+                <GroupIcon class="cursor-pointer smooth-hover text-white" />
+                <h4 class="text-base font-semibold text-light-300">
+                    Profiles
+                    <span class="text-sm font-medium text-light-400 pl-1">{{ ui.getSelectedProfiles().length }}</span>
+                </h4>
+            </div>
             <ul class="mobile-icons">
                 <li>
                     <EyeToggle v-model="privacy" />
@@ -14,62 +17,68 @@
                     <button
                         :disabled="ui.disabledButtons['add-profiles']"
                         @click="ui.toggleModal('create-profile', true)"
+                        class="smooth-hover"
                     >
-                        <PlusIcon />
+                        <PlusIcon class="w-4 h-4" />
                     </button>
                 </li>
                 <li>
-                    <button :disabled="ui.disabledButtons['add-profiles']" @click="disable">
-                        <img width="15px" src="/img/controls/disable.svg" />
+                    <button
+                        :disabled="ui.disabledButtons['add-profiles']"
+                        @click="disable"
+                        class="smooth-hover text-red-400"
+                    >
+                        <CloseXIcon />
                     </button>
                 </li>
                 <li>
-                    <button :disabled="ui.disabledButtons['add-profiles']" @click="enable">
-                        <img width="15px" src="/img/controls/enable.svg" />
+                    <button
+                        :disabled="ui.disabledButtons['add-profiles']"
+                        @click="enable"
+                        class="smooth-hover text-green-400"
+                    >
+                        <CheckIcon />
                     </button>
                 </li>
             </ul>
         </div>
 
         <div class="flex justify-between mb-3">
-            <div class="sm:w-auto w-full flex items-center justify-start gap-1">
+            <div class="unified-search-group sm:w-auto w-full flex items-center justify-start">
                 <TagToggle
-                    class="smooth-hover rounded-l min-w-9"
+                    class="smooth-hover"
                     :options="['All', 'Enabled', 'Disabled']"
                     @change="(f) => (ui.search.profiles.show = f)"
+                    :noBorder="true"
                 />
                 <TagToggle
-                    class="smooth-hover min-w-14"
+                    class="smooth-hover"
                     :options="['Name', 'Card']"
                     @change="(f) => (ui.search.profiles.field = f)"
+                    :noBorder="true"
                 />
 
                 <input
-                    class="h-10 min-w-32 lg:min-w-38 text-white text-sm p-2 bg-dark-500 relative border-2 border-dark-550"
+                    class="min-w-32 lg:min-w-38 text-white text-sm"
                     :placeholder="`Search ${ui.search.profiles.field}s`"
                     v-model="ui.search.profiles.query"
                 />
 
-                <!-- <TagToggle
-                    class="smooth-hover w-32 rounded-r"
-                    :options="allTags"
-                    @change="(f) => (ui.search.profiles.tag = f)"
-                /> -->
                 <Dropdown
-                    class="rounded-r w-32 bg-dark-500 relative z-50 border-2 border-dark-550"
-                    style="margin-left: 0 !important; border-width: 2px !important"
+                    class="dropdown-unified w-32 relative z-50"
                     rightAmount="right-1"
                     default="Any"
                     :value="ui.search.profiles.tag"
                     :onClick="(f) => (ui.search.profiles.tag = f)"
                     :options="allTags"
+                    :includeAdjacentButtons="true"
                     :capitalize="true"
                 />
             </div>
 
             <div class="gap-3 lg:flex hidden">
                 <div
-                    class="bg-dark-400 justify-between px-4 w-36 flex text-white text-sm items-center py-1 rounded-lg ml-auto h-10"
+                    class="bg-dark-400 border border-dark-650 justify-between px-4 w-36 flex text-white text-xs font-medium items-center rounded-md ml-auto h-10"
                 >
                     <p>Privacy</p>
                     <Switch class="scale-75" v-model="privacy" />
@@ -77,20 +86,20 @@
                 <button
                     :disabled="ui.disabledButtons['disable-profiles']"
                     @click="disable"
-                    class="bg-red-400 disabled:opacity-70 smooth-hover w-36 flex text-white text-sm justify-center items-center py-1 px-2 rounded-lg ml-auto h-10"
+                    class="bg-red-400 disabled:opacity-70 smooth-hover border-none w-36 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
                 >
-                    Disable <img width="16px" src="/img/controls/disable.svg" class="ml-2" />
+                    Disable <img class="w-4 h-4 ml-2" src="/img/controls/disable.svg" />
                 </button>
                 <button
                     :disabled="ui.disabledButtons['enable-profiles']"
                     @click="enable"
-                    class="bg-green-400 disabled:opacity-70 smooth-hover w-36 flex text-white text-sm justify-center items-center py-1 px-2 rounded-lg ml-auto h-10"
+                    class="bg-green-400 disabled:opacity-70 smooth-hover border-none w-36 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
                 >
-                    Enable <img width="16px" src="/img/controls/enable.svg" class="ml-2" />
+                    Enable <img class="w-4 h-4 ml-2" src="/img/controls/enable.svg" />
                 </button>
                 <button
                     :disabled="ui.disabledButtons['add-profiles']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover w-36 flex text-white text-sm justify-center items-center py-1 px-2 rounded-lg ml-auto h-10"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover w-36 flex text-white text-xs font-medium justify-center items-center rounded-md border border-dark-650 hover:border-dark-700 ml-auto h-10"
                     @click="ui.toggleModal('create-profile')"
                 >
                     Add Profile
@@ -100,10 +109,10 @@
         </div>
 
         <!-- Tasks (Table) -->
-        <ProfileView :tasks="processedTasks" />
+        <ProfileView :profiles="processedTasks" />
 
         <!-- Modal -->
-        <transition-group name="fade" mode="out-in">
+        <transition-group name="fade">
             <CreateProfile v-if="activeModal === 'create-profile'" />
         </transition-group>
     </div>
@@ -112,18 +121,94 @@
 .custom-dropdown-content {
     top: 2.6rem !important;
     left: -13px;
-    @apply border border-light-300;
+    @apply border border-dark-650;
+}
+
+/* Unified search component group */
+.unified-search-group {
+    border: 2px solid oklch(0.2809 0 0);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: oklch(0.2603 0 0);
+    transition: all 0.15s ease;
+    display: flex;
+
+    :deep(.tag-toggle),
+    :deep(.dropdown),
+    input {
+        border: none !important;
+        border-width: 0 !important;
+        border-radius: 0 !important;
+        height: 40px !important;
+        background: transparent !important;
+        box-shadow: none !important;
+        min-width: fit-content !important;
+    }
+
+    :deep(.tag-toggle) {
+        padding: 0;
+        border: 0 solid transparent !important;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+        border-left: 0 !important;
+        border-right: 0 !important;
+    }
+
+    :deep(.tag-toggle button) {
+        font-size: 0.875rem;
+        padding: 0.5rem 0.75rem;
+        min-width: fit-content;
+        border: 0 solid transparent !important;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+        border-left: 0 !important;
+        border-right: 0 !important;
+    }
+
+    :deep(.dropdown) {
+        width: 120px !important;
+        min-width: 120px !important;
+    }
+
+    :deep(.dropdown-display) {
+        padding: 0 0.75rem;
+        font-size: 0.875rem;
+    }
+
+    input {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        flex: 1;
+
+        &::placeholder {
+            color: oklch(0.50 0 0);
+        }
+
+        &:focus {
+            outline: none !important;
+        }
+    }
+
+    &:hover {
+        border-color: oklch(0.30 0 0);
+    }
+
+    &:focus-within {
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
 }
 </style>
 <script setup>
 import { computed, ref, watch } from "vue";
-import ProfileView from "@/components/editors/Profile/ProfileView.vue";
-import CreateProfile from "@/components/editors/Profile/CreateProfile.vue";
+import ProfileView from "@/components/Editors/Profile/ProfileView.vue";
+import CreateProfile from "@/components/Editors/Profile/CreateProfile.vue";
 import { useUIStore } from "@/stores/ui";
-import { PlusIcon } from "@/components/icons";
+import { PlusIcon, GroupIcon, CloseXIcon, CheckIcon } from "@/components/icons";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
-import TagToggle from "@/components/editors/TagToggle.vue";
+import TagToggle from "@/components/Editors/TagToggle.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 
 const ui = useUIStore();