@necrolab/dashboard 0.4.35 → 0.4.36

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.4.35",
+    "version": "0.4.36",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.js",
         "dev": "vite",

package/src/App.vue

@@ -50,14 +50,17 @@
             <div v-else key="main-components" class="flex">
                 <Navbar v-if="layout == 'dashboard'" class="fixed" />
                 <div :class="['router-wrapper', { '-mt-[60px]': ui.pullChange > 1 }]"></div>
-                <router-view v-slot="{ Component }">
-                    <component
-                        :is="Component"
-                        :class="[
-                            'component-container pb-2 mt-0 lg:mt-4 ios-wrapper',
-                            { 'w-full': landscapeIos }
-                        ]"
-                    />
+                <router-view v-slot="{ Component, route }">
+                    <transition name="page-transition" mode="out-in">
+                        <component
+                            :is="Component"
+                            :key="route.path"
+                            :class="[
+                                'component-container pb-2 mt-0 lg:mt-4 ios-wrapper',
+                                { 'w-full': landscapeIos }
+                            ]"
+                        />
+                    </transition>
                 </router-view>
             </div>
         </transition>
@@ -296,4 +299,25 @@ const layout = computed(() => router.currentRoute.value.meta.layout);
 .component-container {
     @apply w-full mx-auto px-4 xs:px-4 md:px-2 lg:px-6 xl:px-10;
 }
+
+// Page navigation transitions
+.page-transition-enter-active {
+    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.page-transition-leave-active {
+    transition: all 0.15s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+
+.page-transition-enter-from {
+    opacity: 0;
+    transform: translateX(15px) scale(0.98);
+    filter: blur(1px);
+}
+
+.page-transition-leave-to {
+    opacity: 0;
+    transform: translateX(-10px) scale(1.02);
+    filter: blur(0.5px);
+}
 </style>

package/src/components/Editors/Account/AccountView.vue

@@ -35,7 +35,7 @@
                 :items="toRender"
                 :item-size="64"
                 key-field="_id"
-                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y-2 divide-border max-h-big overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650 max-h-big overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
             >
                 <template #default="props">
                     <div class="task" :key="i[props.item._id]">
@@ -48,7 +48,7 @@
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border">
+        <div v-else class="flex justify-center py-8 bg-dark-400 empty-state">
             No accounts found
         </div>
     </Table>
@@ -64,6 +64,12 @@ h4 {
 .stop-pan {
     touch-action: pan-y pan-up pan-down;
 }
+
+.empty-state {
+    color: #969696;
+    font-size: 14px;
+    font-weight: 500;
+}
 </style>
 <script setup>
 import { Table, Header } from "@/components/Table";

package/src/components/Editors/Profile/ProfileView.vue

@@ -39,7 +39,7 @@
                 :items="toRender"
                 :item-size="64"
                 key-field="index"
-                class="scroller max-h-big vue-recycle-scroller ready direction-vertical flex flex-col divide-y-2 divide-border overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+                class="scroller max-h-big vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650 overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
             >
                 <template #default="props">
                     <div class="task" :key="i[props.item.index]">
@@ -52,7 +52,7 @@
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border">
+        <div v-else class="flex justify-center py-8 bg-dark-400 empty-state">
             No profiles found
         </div>
     </Table>
@@ -73,6 +73,12 @@ h4 {
     max-height: calc(100vh - 20rem);
     overflow: hidden;
 }
+
+.empty-state {
+    color: #969696;
+    font-size: 14px;
+    font-weight: 500;
+}
 </style>
 <script setup>
 import { Table, Header } from "@/components/Table";

package/src/components/Editors/TagLabel.vue

@@ -1,16 +1,78 @@
 <template>
-    <div class="flex rounded-2xl w-fit shadow-3xl items-center justify-center bg-dark-600">
-        <span class="font-bold p-2 truncate small">{{ props.text }}</span>
+    <div class="tag-pill">
+        <span class="tag-text">{{ formatText(props.text) }}</span>
     </div>
 </template>
 
-<style scoped>
-.small {
-    font-size: 0.6rem;
-    line-height: 0.8rem;
+<style lang="scss" scoped>
+.tag-pill {
+    @apply inline-flex items-center justify-center rounded-md transition-all duration-200;
+    background: linear-gradient(145deg, #3d3e44, #35363c);
+    border: 1px solid #4b4c53;
+    padding: 0.1875rem 0.5rem;
+    min-width: 2rem;
+    max-width: 4.5rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    
+    &:hover {
+        background: linear-gradient(145deg, #44454b, #3d3e44);
+        border-color: #52535a;
+        transform: translateY(-0.5px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    }
+}
+
+.tag-text {
+    @apply text-white font-semibold truncate;
+    font-size: 0.6875rem;
+    line-height: 1.1;
+    letter-spacing: 0.025em;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+// Ultra responsive design
+@media (max-width: 1024px) {
+    .tag-pill {
+        padding: 0.1rem 0.3rem;
+        max-width: 3.5rem;
+    }
+    
+    .tag-text {
+        font-size: 0.575rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .tag-pill {
+        padding: 0.075rem 0.25rem;
+        max-width: 3rem;
+        min-width: 1.25rem;
+    }
+    
+    .tag-text {
+        font-size: 0.55rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .tag-pill {
+        padding: 0.05rem 0.2rem;
+        max-width: 2.5rem;
+        min-width: 1rem;
+    }
+    
+    .tag-text {
+        font-size: 0.5rem;
+    }
 }
 </style>
 
 <script setup>
 const props = defineProps({ text: { type: String } });
+
+const formatText = (text) => {
+    if (!text) return '';
+    // Capitalize first letter and keep rest as-is
+    return text.charAt(0).toUpperCase() + text.slice(1);
+};
 </script>

package/src/components/Table/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="border-b-2 border-border w-full px-2 md:px-4 text-white text-xs py-4 grid items-center">
+    <div class="border-b border-dark-600 w-full px-2 md:px-4 text-white text-xs py-4 grid items-center">
         <slot />
     </div>
 </template>

package/src/components/Table/Row.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="px-2 md:px-4 text-xs grid text-white py-4 items-center h-full">
+    <div class="px-2 md:px-4 text-xs grid text-white py-4 items-center h-full bg-dark-400 even:bg-dark-350 hover:bg-dark-500 transition-colors">
         <slot />
     </div>
 </template>

package/src/components/Table/Table.vue

@@ -5,12 +5,12 @@
 </template>
 <style lang="scss">
 .table-component {
-    @apply flex-col bg-clip-padding rounded relative box-border border border-b-0 border-dark-650 bg-dark-400;
+    @apply flex-col bg-clip-padding rounded relative box-border border border-dark-600 bg-dark-500;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .table-component > .grid {
-    @apply bg-dark-500;
+    @apply bg-dark-400;
     border-bottom: 1px solid #3d3e44;
 }
 </style>

package/src/components/Tasks/TaskView.vue

@@ -24,10 +24,7 @@
                 <TicketIcon class="mr-0 ipadlg:mr-3" />
                 <h4 class="hidden ipadlg:flex">Tickets</h4>
             </div>
-            <div
-                class="col-span-6 md:col-span-4 lg:col-span-3 flex-center"
-                @click="ui.toggleSort('status')"
-            >
+            <div class="col-span-6 md:col-span-4 lg:col-span-3 flex-center" @click="ui.toggleSort('status')">
                 <StatusIcon class="mr-0 ipadlg:mr-3" />
                 <h4 class="hidden ipadlg:flex">Status</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'status' && !ui.sortData.reversed" class="ml-1" />
@@ -44,22 +41,19 @@
             </div>
         </Header>
         <div
-            class="flex flex-col divide-y divide-border overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+            class="flex flex-col divide-y divide-dark-650 overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
             :style="{ maxHeight: dynamicTableHeight }"
         >
-            <div 
-                v-for="(task, i) in getTasksInOrder()" 
-                :key="task.taskId" 
+            <div
+                v-for="(task, i) in getTasksInOrder()"
+                :key="task.taskId"
                 :class="[i % 2 == 1 ? 'task-row-odd' : 'task-row-even']"
                 class="task-row-container"
             >
                 <Task :task="task" />
             </div>
-            <div
-                v-if="getTasksInOrder().length === 0"
-                class="flex justify-center py-8 empty-state"
-            >
-                <span v-if="ui.queueStats.total === 0"> No tasks yet.</span>
+            <div v-if="getTasksInOrder().length === 0" class="flex justify-center py-8 empty-state">
+                <span v-if="ui.queueStats.total === 0"> No tasks yet</span>
                 <span v-else>{{ ui.queueStats.total }} hidden task{{ ui.queueStats.total === 1 ? "" : "s" }}</span>
             </div>
         </div>
@@ -78,11 +72,11 @@ h4 {
     min-height: 69px;
     flex-shrink: 0;
     transition: background-color 0.15s ease;
-    
+
     &:hover {
         @apply bg-dark-550 !important;
     }
-    
+
     @media (max-width: 768px) {
         min-height: 58px;
     }
@@ -159,11 +153,11 @@ const updateDimensions = () => {
 };
 
 onMounted(() => {
-    window.addEventListener('resize', updateDimensions);
+    window.addEventListener("resize", updateDimensions);
 });
 
 onUnmounted(() => {
-    window.removeEventListener('resize', updateDimensions);
+    window.removeEventListener("resize", updateDimensions);
 });
 
 const dynamicTableHeight = computed(() => {
@@ -174,20 +168,22 @@ const dynamicTableHeight = computed(() => {
     const controlsHeight = windowWidth.value >= 650 ? 60 : 0; // Desktop controls
     const filtersHeight = 50; // Event dropdown and filter toggle
     const utilitiesHeight = windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 150 : 200; // Reduce utilities height in mobile portrait
-    const margins = windowWidth.value >= 1024 ? 40 : (windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 15 : 20); // Reduce margins in mobile portrait
-    
-    const totalUsedSpace = headerHeight + titleHeight + statsHeight + controlsHeight + filtersHeight + utilitiesHeight + margins;
+    const margins =
+        windowWidth.value >= 1024 ? 40 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 15 : 20; // Reduce margins in mobile portrait
+
+    const totalUsedSpace =
+        headerHeight + titleHeight + statsHeight + controlsHeight + filtersHeight + utilitiesHeight + margins;
     const availableHeight = windowHeight.value - totalUsedSpace;
-    
+
     // Calculate row height based on screen size
     const rowHeight = windowWidth.value <= 768 ? 58 : 69; // Mobile vs desktop row height
     const minRowsToShow = 2; // Always show at least 2 rows
     const minHeight = minRowsToShow * rowHeight;
-    
+
     // Calculate how many complete rows can fit
     const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
     const exactHeight = maxCompleteRows * rowHeight;
-    
-    return exactHeight + 'px';
+
+    return exactHeight + "px";
 });
 </script>

package/src/components/ui/Navbar.vue

@@ -127,16 +127,55 @@
         @apply gap-x-4;
         
         li a {
-            @apply flex text-white text-sm border-none h-10 items-center px-4 rounded-lg;
+            @apply flex text-white text-sm border-none h-10 items-center rounded-lg;
             
             svg {
                 @apply mr-2;
+                width: 20px;
+                height: 20px;
             }
             
             &.router-link-exact-active {
                 @apply border-solid border border-light-300;
             }
         }
+        
+        // Desktop mode (lg to xl): adjust padding and border for icon-only view
+        @media (min-width: 1024px) and (max-width: 1279px) {
+            li a {
+                @apply px-3;
+                
+                &.router-link-exact-active {
+                    @apply border-none bg-transparent;
+                    
+                    svg {
+                        @apply border border-light-300 rounded-lg;
+                        padding: 6px;
+                        width: 32px;
+                        height: 32px;
+                    }
+                }
+                
+                svg {
+                    @apply mr-0;
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
+        
+        // XL and above: full width with text
+        @media (min-width: 1280px) {
+            li a {
+                @apply px-4;
+                
+                svg {
+                    @apply mr-2;
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
     }
 }
 

package/src/components/ui/ReconnectIndicator.vue

@@ -1,23 +1,98 @@
 <template>
-    <div class="my-auto relative flex justify-center flex-col items-center" style="height: 80vh">
-        <div class="spinner-container">
-            <div class="spinner"></div>
-            <img :src="logoIcon" alt="Beaker Logo" class="logo" />
+    <div class="reconnect-overlay">
+        <transition name="background-fill" appear>
+            <div class="background-layer"></div>
+        </transition>
+        <transition name="reconnect-content" appear>
+            <div class="reconnect-container">
+        <div class="loading-system">
+            <!-- Geometric loading rings -->
+            <div class="ring-system">
+                <div class="ring ring-outer"></div>
+                <div class="ring ring-middle"></div>
+                <div class="ring ring-inner"></div>
+                <!-- Central logo -->
+                <img :src="logoIcon" alt="Logo" class="logo" />
+            </div>
+            
+            <!-- Progress indicators -->
+            <div class="progress-dots">
+                <div class="dot" :class="{ active: dotIndex >= 0 }"></div>
+                <div class="dot" :class="{ active: dotIndex >= 1 }"></div>
+                <div class="dot" :class="{ active: dotIndex >= 2 }"></div>
+                <div class="dot" :class="{ active: dotIndex >= 3 }"></div>
+            </div>
         </div>
-        <span class="text-white text-3xl font-light mt-3">{{ props.message }}{{ dots }}</span>
+        
+        <div class="message-container">
+            <h2 class="message-text">{{ props.message }}</h2>
+            <div class="status-bar">
+                <div class="status-fill"></div>
+            </div>
+        </div>
+            </div>
+        </transition>
     </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import logoIcon from "@/assets/img/logo_icon.png";
 
-const dots = ref(".");
+const dotIndex = ref(0);
+const progressWidth = ref(0);
+let dotInterval;
+let progressInterval;
+
+// Animate progress dots
+const animateDots = () => {
+    dotIndex.value = (dotIndex.value + 1) % 5; // 0-4, with 4 being all off
+};
+
+// Animate progress bar
+onMounted(() => {
+    dotInterval = setInterval(animateDots, 600);
+});
+
+// Add page fade-in effect when modal closes
+const addPageFadeIn = () => {
+    // Add global style for underlying page fade-in
+    const style = document.createElement('style');
+    style.textContent = `
+        .page-fade-in {
+            animation: pageReveal 0.6s ease-out forwards;
+        }
+        @keyframes pageReveal {
+            from {
+                opacity: 0.7;
+                transform: scale(0.98);
+                filter: blur(1px);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+                filter: blur(0);
+            }
+        }
+    `;
+    document.head.appendChild(style);
+    
+    // Apply the class to the body
+    document.body.classList.add('page-fade-in');
+    
+    // Remove the class and style after animation
+    setTimeout(() => {
+        document.body.classList.remove('page-fade-in');
+        if (document.head.contains(style)) {
+            document.head.removeChild(style);
+        }
+    }, 600);
+};
 
-setInterval(() => {
-    dots.value += ".";
-    if (dots.value.length > 3) dots.value = ".";
-}, 1000);
+onUnmounted(() => {
+    if (dotInterval) clearInterval(dotInterval);
+    addPageFadeIn();
+});
 
 const props = defineProps({
     message: {
@@ -27,64 +102,285 @@ const props = defineProps({
 });
 </script>
 
-<style scoped>
-.spinner-container {
+<style lang="scss" scoped>
+.reconnect-overlay {
+    position: fixed;
+    top: -100vh;
+    left: -100vw;
+    right: -100vw;
+    bottom: -100vh;
+    z-index: 9999;
+    --tw-ring-color: transparent !important;
+}
+
+.background-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(26, 27, 30, 0.98);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+.reconnect-container {
+    position: absolute;
+    top: 100vh;
+    left: 100vw;
+    right: 100vw;
+    bottom: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3rem;
+    --tw-ring-color: transparent !important;
+}
+
+.loading-system {
     position: relative;
-    width: 200px;
-    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
-.logo {
+
+.ring-system {
+    position: relative;
+    width: 160px;
+    height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ring {
     position: absolute;
-    width: 180px;
-    height: 180px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: transparent !important;
+    --tw-ring-color: transparent !important;
+    border: 4px solid transparent;
+}
+
+.ring-outer {
+    width: 160px;
+    height: 160px;
+    border-top: 4px solid #9dd3a8;
+    border-right: 4px solid rgba(157, 211, 168, 0.3);
+    border-bottom: 4px solid transparent;
+    border-left: 4px solid transparent;
+    animation: breathe-slow 3s ease-in-out infinite;
+    top: 0;
+    left: 0;
+}
+
+.ring-middle {
+    width: 120px;
+    height: 120px;
+    border-top: 4px solid #88c999;
+    border-right: 4px solid rgba(136, 201, 153, 0.4);
+    border-bottom: 4px solid transparent;
+    border-left: 4px solid transparent;
+    animation: breathe-medium 2.5s ease-in-out infinite reverse;
+    top: 20px;
+    left: 20px;
+}
+
+.ring-inner {
+    width: 80px;
+    height: 80px;
+    border-top: 4px solid #7bc187;
+    border-right: 4px solid rgba(123, 193, 135, 0.5);
+    border-bottom: 4px solid transparent;
+    border-left: 4px solid transparent;
+    animation: breathe-fast 2s ease-in-out infinite;
+    top: 40px;
+    left: 40px;
+}
+
+.logo {
+    width: 72px;
+    height: 72px;
     border-radius: 50%;
     object-fit: cover;
-    object-position: center;
-    z-index: 2;
+    z-index: 10;
+    border: 2px solid rgba(136, 201, 153, 0.3);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
-.spinner {
+
+.progress-dots {
     position: absolute;
-    width: 185px;
-    height: 185px;
-    top: 50%;
+    bottom: -40px;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    border-top: 2px solid #ffffff;
-    animation: spin 1s linear infinite;
+    background: #44454b;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &.active {
+        background: #88c999;
+        transform: scale(1.2);
+    }
+}
+
+.message-container {
+    text-align: center;
+    max-width: 400px;
+}
+
+.message-text {
+    color: #e2e2e5;
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    letter-spacing: 0.025em;
+}
+
+.status-bar {
+    width: 300px;
+    height: 8px;
+    background: #35363c;
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+}
+
+.status-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #88c999 0%, #9dd3a8 50%, #88c999 100%);
+    border-radius: 4px;
+    width: 30%;
+    animation: infinite-slide 2s ease-in-out infinite;
+    position: relative;
+    overflow: hidden;
 }
-.glow {
+
+.status-fill::after {
+    content: '';
     position: absolute;
-    width: 220px;
-    height: 220px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
-    animation: pulse 2s ease-in-out infinite;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: shimmer 2s ease-in-out infinite;
+}
+
+// Smooth beautiful animations
+@keyframes breathe-slow {
+    0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
+    50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
+    100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
+}
+
+@keyframes breathe-medium {
+    0% { transform: rotate(0deg) scale(1); opacity: 0.9; }
+    50% { transform: rotate(-180deg) scale(0.95); opacity: 1; }
+    100% { transform: rotate(-360deg) scale(1); opacity: 0.9; }
+}
+
+@keyframes breathe-fast {
+    0% { transform: rotate(0deg) scale(1); opacity: 1; }
+    50% { transform: rotate(180deg) scale(1.08); opacity: 0.7; }
+    100% { transform: rotate(360deg) scale(1); opacity: 1; }
+}
+
+@keyframes infinite-slide {
+    0% { transform: translateX(-100%); }
+    50% { transform: translateX(250%); }
+    100% { transform: translateX(-100%); }
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    50% { transform: translateX(100%); }
+    100% { transform: translateX(300%); }
+}
+
+// Staged beautiful transitions
+.background-fill-enter-active {
+    transition: all 0.15s ease-out;
 }
-@keyframes spin {
-    0% {
-        transform: translate(-50%, -50%) rotate(0deg);
+
+.background-fill-leave-active {
+    transition: all 0.3s ease-in;
+}
+
+.background-fill-enter-from {
+    opacity: 0;
+    transform: scale(0.8);
+}
+
+.background-fill-leave-to {
+    opacity: 0;
+    transform: scale(1.2);
+}
+
+.reconnect-content-enter-active {
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0.1s;
+}
+
+.reconnect-content-leave-active {
+    transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+
+.reconnect-content-enter-from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+    filter: blur(4px);
+}
+
+.reconnect-content-leave-to {
+    opacity: 0;
+    transform: scale(1.1) translateY(-10px);
+    filter: blur(2px);
+}
+
+// Responsive design
+@media (max-width: 768px) {
+    .ring-system {
+        width: 120px;
+        height: 120px;
     }
-    100% {
-        transform: translate(-50%, -50%) rotate(360deg);
+    
+    .ring-outer {
+        width: 120px;
+        height: 120px;
     }
-}
-@keyframes pulse {
-    0%,
-    100% {
-        transform: translate(-50%, -50%) scale(1);
-        opacity: 0.5;
+    
+    .ring-middle {
+        width: 90px;
+        height: 90px;
+        top: 15px;
+        left: 15px;
+    }
+    
+    .ring-inner {
+        width: 60px;
+        height: 60px;
+        top: 30px;
+        left: 30px;
+    }
+    
+    .logo {
+        width: 54px;
+        height: 54px;
+    }
+    
+    .message-text {
+        font-size: 1.25rem;
     }
-    50% {
-        transform: translate(-50%, -50%) scale(1.05);
-        opacity: 0.7;
+    
+    .status-bar {
+        width: 250px;
     }
 }
 </style>

package/src/components/ui/controls/CountryChooser.vue

@@ -68,10 +68,10 @@ const open = ref(false);
 .dropdown-content {
     left: -1.25rem;
     background-clip: border-box !important;
-    @apply border border-light-300;
+    @apply border border-dark-650;
     border-width: 2px;
     --tw-border-opacity: 1;
-    border-color: rgb(41 42 67 / var(--tw-border-opacity));
+    border-color: rgb(61 62 68 / var(--tw-border-opacity));
     max-height: 13rem;
 }
 

package/src/components/ui/controls/atomic/Checkbox.vue

@@ -47,12 +47,12 @@
     }
 
     &.checked {
-        background: #5d7cc0;
-        border-color: #5d7cc0;
+        background: #88c999;
+        border-color: #88c999;
 
         &:hover {
-            background: #6985c8;
-            border-color: #6985c8;
+            background: #9dd3a8;
+            border-color: #9dd3a8;
         }
     }
 
@@ -62,23 +62,23 @@
         border-color: #52535a;
 
         &:hover {
-            border-color: #5d7cc0;
-            background: rgba(93, 124, 192, 0.1);
+            border-color: #88c999;
+            background: rgba(136, 201, 153, 0.1);
         }
 
         &.checked {
-            background: #5d7cc0;
-            border-color: #5d7cc0;
+            background: #88c999;
+            border-color: #88c999;
 
             &:hover {
-                background: #6985c8;
-                border-color: #6985c8;
+                background: #9dd3a8;
+                border-color: #9dd3a8;
             }
         }
     }
 
     &:focus-visible {
-        outline: 2px solid #5d7cc0;
+        outline: 2px solid #88c999;
         outline-offset: 2px;
     }
 }

package/src/views/Editor.vue

@@ -92,7 +92,19 @@
                         </div>
                     </div>
 
-                    <p class="text-red-400 text-bold">{{ errorMessage }}</p>
+                    <div v-if="errorMessage" class="error-container">
+                        <div class="error-icon">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/>
+                                <line x1="15" y1="9" x2="9" y2="15"/>
+                                <line x1="9" y1="9" x2="15" y2="15"/>
+                            </svg>
+                        </div>
+                        <div class="error-content">
+                            <div class="error-title">JSON Syntax Error</div>
+                            <div class="error-text">{{ errorMessage }}</div>
+                        </div>
+                    </div>
                 </div>
             </transition>
             <div class="border border-dark-650 my-8" />
@@ -782,4 +794,52 @@ pre[class*="language-"] {
 .token.entity {
     cursor: help;
 }
+
+/* Modern error message styling */
+.error-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
+    margin-top: 12px;
+    border-radius: 8px;
+    border: 1px solid #dc2626;
+    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05));
+    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
+}
+
+.error-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: rgba(220, 38, 38, 0.2);
+    border: 1px solid rgba(220, 38, 38, 0.4);
+    color: #ef4444;
+    flex-shrink: 0;
+}
+
+.error-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.error-title {
+    color: #fca5a5;
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 4px;
+    letter-spacing: 0.015em;
+}
+
+.error-text {
+    color: #fecaca;
+    font-size: 12px;
+    line-height: 1.5;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
+    word-break: break-word;
+    opacity: 0.9;
+}
 </style>

package/src/views/FilterBuilder.vue

@@ -101,7 +101,7 @@
                                     </div>
                                 </div>
                             </Header>
-                            <div class="overflow-auto hidden-scrollbars flex-1">
+                            <div class="bg-dark-400 overflow-auto hidden-scrollbars flex-1">
                                 <div v-if="filterBuilder.filters.length" class="filters-container">
                                     <draggable
                                         :list="filterBuilder.filters"
@@ -136,8 +136,8 @@
                                     class="empty-state flex flex-col items-center justify-center py-8 text-center"
                                 >
                                     <FilterIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50" />
-                                    <p class="text-dark-400 text-sm">No filters yet</p>
-                                    <p class="text-dark-500 text-xs mt-1">Click on the map to create filters</p>
+                                    <p class="text-light-400 text-sm">No filters yet</p>
+                                    <p class="text-light-500 text-xs mt-1">Click on the map to create filters</p>
                                 </div>
                             </div>
                         </Table>

package/static/offline.html

@@ -4,14 +4,14 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <title>Site Offline</title>
-        <meta name="theme-color" content="rgba(28, 28, 49, 1)" />
+        <meta name="theme-color" content="#1a1b1e" />
         <style>
             body,
             html {
                 margin: 0;
                 padding: 0;
                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-                background-color: rgba(28, 28, 49, 1);
+                background-color: #1a1b1e;
                 color: #fff;
                 height: 100%;
             }
@@ -46,7 +46,7 @@
                 min-height: 100vh;
             }
             .error-card {
-                background-color: rgba(39, 39, 67, 0.4);
+                background-color: #2e2f34;
                 border-radius: 0.5rem;
                 padding: 2rem;
                 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -56,7 +56,7 @@
                 margin: auto;
             }
             .icon-wrapper {
-                background-color: #4a4a61;
+                background-color: #3d3e44;
                 width: 4rem;
                 height: 4rem;
                 border-radius: 50%;
@@ -65,18 +65,18 @@
                 align-items: center;
                 margin: 0 auto 1rem;
                 font-size: 2rem;
-                color: #ee8282;
+                color: #f87171;
             }
             h1 {
                 font-size: 1.5rem;
                 margin-bottom: 0.5rem;
             }
             p {
-                color: rgba(255, 255, 255, 0.7);
+                color: #d0d0d3;
                 margin-bottom: 1.5rem;
             }
             .refresh-button {
-                background-color: #4a4a61;
+                background-color: #3d3e44;
                 color: white;
                 border: none;
                 padding: 0.5rem 1rem;