change dashboard ui to use api instead of inertia props

package-lock.json

@@ -46,8 +46,8 @@
                 "typescript": "^5.7.3",
                 "vite": "^6.0.11",
                 "vite-plugin-checker": "^0.8.0",
-                "vue": "^3.5.0",
+                "vue": "^3.4.0",
-                "vue-tsc": "^2.2.0"
+                "vue-tsc": "^2.0.28"
             }
         },
         "node_modules/@alloc/quick-lru": {

resources/css/app.css

@@ -1,7 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-:root.dark {
+
+:root {
     --color-bg-primary: #0f1011;
     --color-bg-secondary: #17181a;
     --color-bg-tertiary: #2A2C32;
@@ -11,114 +12,38 @@
     --color-text-secondary: #e3e4e6;
     --color-text-tertiary: #969799;
     --color-text-quaternary: #595a5c;
-
     --color-border-primary: #191b1f;
     --color-border-secondary: #23252a;
     --color-border-tertiary: #2c2e33;
     --color-border-quaternary: #393B42;
     --color-input-border-active: rgba(255,255,255,0.3);
 
-    --theme-color-chart: var(--color-accent-200);
+    --color-accent-primary: 14, 165, 233;  /* sky-500 */
+    --color-accent-secondary: 56, 189, 248;
+    --color-accent-tertiary: 125, 211, 252;
+    --color-accent-quaternary: 186, 230, 253;
 
-    --theme-color-menu-active: var(--color-bg-secondary);
-    --theme-color-card-background: var(--color-bg-secondary);
-    --theme-shadow-card: 0 4px 7px 0px rgb(0 0 0 / 30%);
-    --theme-shadow-dropdown: 0 4px 7px 0px rgb(0 0 0 / 40%);
-
-    --theme-color-muted-text: var(--color-text-secondary);
-
-    --theme-color-row-background: var(--color-bg-primary);
-    --theme-color-row-heading-background: var(--theme-color-card-background);
-    --theme-color-row-heading-border: var(--theme-color-card-border);
-    --theme-color-icon-default: var(--color-text-tertiary);
-
-    --theme-color-ring: rgba(255,255,255,0.5);
-
-    --theme-color-button-primary-background: rgba(var(--color-accent-300), 0.1);
-    --theme-color-button-primary-background-hover: rgba(var(--color-accent-300), 0.2);
-    --theme-color-button-primary-border: rgba(var(--color-accent-300), 0.2);
-    --theme-color-button-primary-text: var(--color-text-primary);
-
-    --theme-color-input-background: var(--color-bg-secondary);
-
-    --theme-color-input-select-active: rgb(var(--color-accent-300));
-    --theme-color-input-select-active-hover: rgb(var(--color-accent-200));
-}
-
-:root.light {
-    --color-bg-primary: #F5F5F5;
-    --color-bg-secondary: #f7f7f8;
-    --color-bg-tertiary: #e1e1e3;
-    --color-bg-quaternary: #ffffff;
-    --color-bg-background: #ffffff;
-    --color-text-primary: #18181b;
-    --color-text-secondary: #3f3f46;
-    --color-text-tertiary: #71717a;
-    --color-text-quaternary: #a1a1aa;
-    --color-border-primary: #e7e7e7;
-    --color-border-secondary: #e5e5e5;
-    --color-border-tertiary: #dfdfdf;
-    --color-border-quaternary: #d1d1d1;
-    --color-input-border-active: rgba(0,0,0,0.3);
-    --theme-color-menu-active: var(--color-bg-tertiary);
-
-    --theme-color-card-background: var(--color-bg-quaternary);
-    --theme-color-card-background-active: var(--color-bg-primary);
-
-    --theme-color-chart: var(--color-accent-400);
-
-    --theme-shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --theme-shadow-dropdown: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-
-    --theme-color-muted-text: var(--color-text-secondary);
-
-    --theme-color-row-background: var(--theme-color-card-background);
-    --theme-color-row-heading-background: var(--color-bg-secondary);
-    --theme-color-row-heading-border: var(--color-border-tertiary);
-    --theme-color-icon-default: var(--color-text-quaternary);
-
-    --theme-color-ring: rgba(0,0,0, 0.7);
-
-    --theme-color-button-primary-background: rgba(var(--color-accent-600), 0.9);
-    --theme-color-button-primary-background-hover: rgba(var(--color-accent-600), 1);
-    --theme-color-button-primary-border: rgba(var(--color-accent-600), 1);
-    --theme-color-button-primary-text: #FFFFFF;
-
-    --theme-color-input-background: var(--color-bg-quaternary);
-
-    --theme-color-input-select-active: rgb(var(--color-accent-400));
-    --theme-color-input-select-active-hover: rgb(var(--color-accent-500));
-}
-
-:root {
     --theme-color-default-background: var(--color-bg-primary);
+    --theme-color-icon-default: var(--color-text-tertiary);
     --theme-color-icon-active: rgb(var(--color-text-tertiary));
+    --theme-color-card-background: var(--color-bg-secondary);
+    --theme-color-card-background-active: var(--color-bg-tertiary);
     --theme-color-card-background-separator: var(--color-border-tertiary);
     --theme-color-card-border: var(--color-border-secondary);
     --theme-color-card-border-active: var(--color-border-tertiary);
     --theme-color-default-background-separator: var(--color-border-primary);
     --theme-color-primary-text: var(--color-text-primary);
+    --theme-color-muted-text: var(--color-text-secondary);
+    --theme-color-menu-active: var(--color-bg-secondary);
     --theme-color-input-border: var(--color-border-quaternary);
+    --theme-color-input-background: var(--color-bg-secondary);
     --theme-color-tab-background: var(--theme-color-card-background);
     --theme-color-tab-background-active: var(--theme-color-card-background-active);
     --theme-color-tab-border: var(--theme-color-card-border);
     --theme-color-row-separator-background: var(--theme-color-default-background-separator);
+    --theme-color-row-heading-background: var(--theme-color-card-background);
     --theme-color-row-border: var(--theme-color-card-border);
-
+    --theme-color-row-heading-border: var(--theme-color-card-border);
-    --color-accent-50: 240, 249, 255;    /* sky-50 */
-    --color-accent-100: 224, 242, 254;   /* sky-100 */
-    --color-accent-200: 186, 230, 253;   /* sky-200 */
-    --color-accent-300: 125, 211, 252;   /* sky-300 */
-    --color-accent-400: 56, 189, 248;    /* sky-400 */
-    --color-accent-500: 14, 165, 233;    /* sky-500 */
-    --color-accent-600: 2, 132, 199;     /* sky-600 */
-    --color-accent-700: 3, 105, 161;     /* sky-700 */
-    --color-accent-800: 7, 89, 133;      /* sky-800 */
-    --color-accent-900: 12, 74, 110;     /* sky-900 */
-    --color-accent-950: 8, 47, 73;       /* sky-950 */
-
-    --theme-button-secondary-background: var(--theme-color-card-background);
-    --theme-button-secondary-background-active: var(--theme-color-card-background-active);
 }
 
 * {

resources/js/Components/AuthenticationCard.vue

@@ -1,16 +1,3 @@
-<script setup lang="ts">
-import { onMounted, watch } from "vue";
-import { theme } from "@/utils/theme.js";
-
-onMounted(async () => {
-    document.documentElement.classList.add(theme.value);
-    watch(theme, (newTheme, oldTheme) => {
-        document.documentElement.classList.remove(oldTheme);
-        document.documentElement.classList.add(newTheme);
-    });
-});
-</script>
-
 <template>
     <div
         class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-default-background">

resources/js/Components/AuthenticationCardLogo.vue

@@ -5,37 +5,37 @@ import { Link } from '@inertiajs/vue3';
 <template>
     <Link :href="'/'">
         <svg
-            class="h-12 py-2 text-text-primary"
+            class="h-12 py-2"
             viewBox="0 0 168 30"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M54.4081 6.78783C55.0812 7.46093 55.9225 7.79748 56.9322 7.79748C57.9936 7.79748 58.8479 7.46093 59.4951 6.78783C60.1682 6.08885 60.5048 5.22159 60.5048 4.18606C60.5048 3.17642 60.1682 2.3221 59.4951 1.62312C58.8479 0.924138 57.9936 0.574646 56.9322 0.574646C55.9225 0.574646 55.0812 0.924138 54.4081 1.62312C53.735 2.3221 53.3984 3.17642 53.3984 4.18606C53.3984 5.22159 53.735 6.08885 54.4081 6.78783Z"
-                fill="currentColor" />
+                fill="white" />
             <path
                 d="M158.028 29.4272C155.905 29.4272 154.028 29.0129 152.397 28.1845C150.766 27.3302 149.485 26.1523 148.553 24.6508C147.621 23.1492 147.155 21.4277 147.155 19.4861C147.155 17.5703 147.608 15.8746 148.514 14.399C149.42 12.8975 150.65 11.7196 152.203 10.8653C153.782 9.98505 155.556 9.54495 157.523 9.54495C159.439 9.54495 161.134 9.95916 162.61 10.7876C164.112 11.5901 165.277 12.7163 166.105 14.166C166.959 15.5899 167.386 17.2208 167.386 19.0589C167.386 19.4472 167.361 19.8485 167.309 20.2627C167.283 20.651 167.205 21.1041 167.076 21.6218L150.339 21.6995V17.3503L164.396 17.2338L161.367 19.1366C161.342 18.0751 161.186 17.2079 160.901 16.5348C160.617 15.8358 160.202 15.3051 159.659 14.9427C159.115 14.5802 158.429 14.399 157.601 14.399C156.746 14.399 156.009 14.6061 155.387 15.0203C154.766 15.4345 154.287 16.017 153.95 16.7678C153.614 17.5185 153.446 18.4246 153.446 19.4861C153.446 20.5734 153.627 21.5053 153.989 22.282C154.352 23.0327 154.869 23.6023 155.543 23.9906C156.216 24.3789 157.044 24.5731 158.028 24.5731C158.96 24.5731 159.775 24.4178 160.474 24.1071C161.199 23.7964 161.846 23.3175 162.416 22.6703L165.95 26.2041C165.018 27.2655 163.879 28.068 162.532 28.6117C161.212 29.1553 159.711 29.4272 158.028 29.4272Z"
-                fill="currentColor" />
+                fill="white" />
             <path
                 d="M114.306 29V10.0109H121.063V29H114.306ZM126.228 29V18.0104C126.228 17.2079 125.982 16.5866 125.49 16.1465C124.998 15.6805 124.39 15.4475 123.665 15.4475C123.147 15.4475 122.694 15.551 122.306 15.7581C121.917 15.9652 121.607 16.263 121.374 16.6513C121.167 17.0137 121.063 17.4668 121.063 18.0104L118.422 16.9619C118.422 15.4345 118.759 14.1272 119.432 13.0399C120.105 11.9526 121.011 11.1112 122.15 10.5158C123.289 9.92034 124.584 9.62262 126.034 9.62262C127.328 9.62262 128.493 9.93328 129.528 10.5546C130.59 11.15 131.431 11.9914 132.053 13.0787C132.674 14.166 132.985 15.4475 132.985 16.9231V29H126.228ZM138.149 29V18.0104C138.149 17.2079 137.903 16.5866 137.411 16.1465C136.92 15.6805 136.311 15.4475 135.586 15.4475C135.094 15.4475 134.641 15.551 134.227 15.7581C133.839 15.9652 133.528 16.263 133.295 16.6513C133.088 17.0137 132.985 17.4668 132.985 18.0104L129.024 17.8163C129.075 16.1076 129.451 14.6449 130.15 13.4282C130.849 12.2114 131.807 11.2795 133.023 10.6323C134.266 9.95917 135.664 9.62262 137.217 9.62262C138.693 9.62262 140.013 9.93328 141.178 10.5546C142.343 11.1759 143.249 12.082 143.896 13.2729C144.57 14.4378 144.906 15.8358 144.906 17.4668V29H138.149Z"
-                fill="currentColor" />
+                fill="white" />
-            <path d="M103.573 29V10.011H110.369V29H103.573Z" fill="currentColor" />
+            <path d="M103.573 29V10.011H110.369V29H103.573Z" fill="white" />
             <path
                 d="M104.428 6.78783C105.101 7.46093 105.942 7.79748 106.952 7.79748C108.013 7.79748 108.867 7.46093 109.515 6.78783C110.188 6.08885 110.524 5.22159 110.524 4.18606C110.524 3.17642 110.188 2.3221 109.515 1.62312C108.867 0.924138 108.013 0.574646 106.952 0.574646C105.942 0.574646 105.101 0.924138 104.428 1.62312C103.755 2.3221 103.418 3.17642 103.418 4.18606C103.418 5.22159 103.755 6.08885 104.428 6.78783Z"
-                fill="currentColor" />
+                fill="white" />
             <path
                 d="M90.2867 29V2.16681H97.0435V29H90.2867ZM86.0928 15.6417V10.011H101.237V15.6417H86.0928Z"
-                fill="currentColor" />
+                fill="white" />
             <path
                 d="M72.4414 29.3883C70.6033 29.3883 68.9853 28.9612 67.5873 28.1068C66.1893 27.2525 65.0891 26.0876 64.2866 24.6119C63.5099 23.1104 63.1216 21.4147 63.1216 19.5249C63.1216 17.6091 63.5099 15.9005 64.2866 14.399C65.0891 12.8975 66.1764 11.7325 67.5485 10.9041C68.9464 10.0498 70.5774 9.62262 72.4414 9.62262C73.6322 9.62262 74.7454 9.84267 75.781 10.2828C76.8165 10.697 77.6837 11.2924 78.3827 12.0691C79.0817 12.8457 79.4959 13.7259 79.6254 14.7097V23.9906C79.4959 24.9744 79.0817 25.8805 78.3827 26.7089C77.6837 27.5373 76.8165 28.1975 75.781 28.6893C74.7454 29.1553 73.6322 29.3883 72.4414 29.3883ZM73.6452 23.3693C74.3959 23.3693 75.0431 23.214 75.5868 22.9033C76.1304 22.5668 76.5576 22.1137 76.8683 21.5442C77.2048 20.9487 77.3731 20.2627 77.3731 19.4861C77.3731 18.7353 77.2177 18.0751 76.9071 17.5056C76.5964 16.9361 76.1563 16.483 75.5868 16.1465C75.0431 15.8099 74.4089 15.6416 73.684 15.6416C72.9591 15.6416 72.3119 15.8099 71.7424 16.1465C71.1987 16.483 70.7586 16.949 70.4221 17.5444C70.1114 18.114 69.9561 18.7612 69.9561 19.4861C69.9561 20.2368 70.1114 20.9099 70.4221 21.5053C70.7327 22.0749 71.1728 22.5279 71.7424 22.8645C72.3119 23.201 72.9462 23.3693 73.6452 23.3693ZM83.7416 29H77.1012V23.9129L78.0721 19.2531L76.9848 14.6708V0.691162H83.7416V29Z"
-                fill="currentColor" />
+                fill="white" />
-            <path d="M53.5537 29V10.011H60.3494V29H53.5537Z" fill="currentColor" />
+            <path d="M53.5537 29V10.011H60.3494V29H53.5537Z" fill="white" />
-            <path d="M42.8608 29V0.691162H49.6177V29H42.8608Z" fill="currentColor" />
+            <path d="M42.8608 29V0.691162H49.6177V29H42.8608Z" fill="white" />
             <path
                 d="M29.6176 29.4272C27.5724 29.4272 25.7473 29 24.1423 28.1457C22.5631 27.2655 21.3075 26.0746 20.3755 24.5731C19.4435 23.0457 18.9775 21.3371 18.9775 19.4472C18.9775 17.5574 19.4306 15.8746 20.3367 14.399C21.2687 12.8975 22.5372 11.7196 24.1423 10.8653C25.7473 9.98505 27.5595 9.54495 29.5788 9.54495C31.5981 9.54495 33.3973 9.98505 34.9765 10.8653C36.5816 11.7196 37.8501 12.8975 38.7821 14.399C39.714 15.8746 40.18 17.5574 40.18 19.4472C40.18 21.3371 39.714 23.0457 38.7821 24.5731C37.876 26.0746 36.6204 27.2655 35.0153 28.1457C33.4361 29 31.6369 29.4272 29.6176 29.4272ZM29.5788 23.4081C30.3295 23.4081 30.9768 23.2528 31.5204 22.9421C32.09 22.6056 32.5301 22.1396 32.8407 21.5442C33.1514 20.9487 33.3067 20.2627 33.3067 19.4861C33.3067 18.7094 33.1384 18.0363 32.8019 17.4668C32.4912 16.8713 32.0641 16.4183 31.5204 16.1076C30.9768 15.7711 30.3295 15.6028 29.5788 15.6028C28.8539 15.6028 28.2067 15.7711 27.6372 16.1076C27.0676 16.4442 26.6275 16.9102 26.3169 17.5056C26.0062 18.0751 25.8509 18.7482 25.8509 19.5249C25.8509 20.2756 26.0062 20.9487 26.3169 21.5442C26.6275 22.1396 27.0676 22.6056 27.6372 22.9421C28.2067 23.2528 28.8539 23.4081 29.5788 23.4081Z"
-                fill="currentColor" />
+                fill="white" />
             <path
                 d="M9.20323 29.5437C8.03825 29.5437 6.88622 29.3883 5.74714 29.0777C4.63394 28.767 3.58547 28.3528 2.60172 27.835C1.64385 27.2914 0.828369 26.6701 0.155273 25.9711L3.84435 22.2043C4.46567 22.8515 5.20349 23.3564 6.0578 23.7188C6.938 24.0812 7.86998 24.2624 8.85373 24.2624C9.42328 24.2624 9.85043 24.1848 10.1352 24.0295C10.4459 23.8741 10.6012 23.6541 10.6012 23.3693C10.6012 22.9551 10.3811 22.6444 9.94104 22.4373C9.52683 22.2043 8.97023 22.0102 8.27125 21.8548C7.59815 21.6736 6.88623 21.4665 6.13547 21.2335C5.38471 20.9746 4.65983 20.6381 3.96085 20.2239C3.26187 19.8097 2.69232 19.2272 2.25222 18.4764C1.83801 17.7257 1.63091 16.7678 1.63091 15.6028C1.63091 14.3861 1.95451 13.3247 2.60172 12.4186C3.27481 11.4866 4.20679 10.7617 5.39765 10.2439C6.58851 9.70029 7.98648 9.42847 9.59155 9.42847C11.2225 9.42847 12.7758 9.71324 14.2514 10.2828C15.7271 10.8264 16.9179 11.6549 17.824 12.7681L14.0961 16.5348C13.4748 15.8358 12.7888 15.3569 12.038 15.098C11.2872 14.8132 10.6012 14.6708 9.97987 14.6708C9.38444 14.6708 8.95729 14.7615 8.6984 14.9427C8.43952 15.098 8.31008 15.318 8.31008 15.6028C8.31008 15.9394 8.51719 16.2112 8.9314 16.4183C9.3715 16.6254 9.9281 16.8196 10.6012 17.0008C11.3002 17.1561 12.0121 17.3632 12.737 17.6221C13.4877 17.881 14.1997 18.2434 14.8728 18.7094C15.5717 19.1495 16.1283 19.7449 16.5426 20.4957C16.9827 21.2465 17.2027 22.2173 17.2027 23.4081C17.2027 25.298 16.4778 26.7995 15.0281 27.9127C13.5783 29 11.6367 29.5437 9.20323 29.5437Z"
-                fill="currentColor" />
+                fill="white" />
         </svg>
     </Link>
 </template>

resources/js/Components/Banner.vue

@@ -47,7 +47,7 @@ watchEffect(async () => {
 
                             <svg
                                 v-if="style == 'danger'"
-                                class="h-5 w-5 text-text-primary"
+                                class="h-5 w-5 text-white"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
                                 viewBox="0 0 24 24"
@@ -60,7 +60,7 @@ watchEffect(async () => {
                             </svg>
                         </span>
 
-                        <p class="ms-3 font-medium text-sm text-text-primary truncate">
+                        <p class="ms-3 font-medium text-sm text-white truncate">
                             {{ message }}
                         </p>
                     </div>
@@ -72,7 +72,7 @@ watchEffect(async () => {
                             aria-label="Dismiss"
                             @click.prevent="show = false">
                             <svg
-                                class="h-5 w-5 text-text-primary"
+                                class="h-5 w-5 text-white"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
                                 viewBox="0 0 24 24"

resources/js/Components/Billing/BillingBanner.vue

@@ -108,7 +108,7 @@ const showBlackFridayBanner = computed(() => {
             <div class="flex items-center space-x-2">
                 <Link v-if="canManageBilling()" href="/billing">
                     <div
-                        class="text-text-primary font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
+                        class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>
@@ -124,7 +124,7 @@ const showBlackFridayBanner = computed(() => {
         class="bg-accent-600/50 text-xs lg:text-sm py-0.5 border-b border-border-secondary">
         <MainContainer class="flex items-center justify-between">
             <div class="flex items-center space-x-1.5">
-                <CheckBadgeIcon class="w-4 text-text-primary/50"></CheckBadgeIcon>
+                <CheckBadgeIcon class="w-4 text-white/50"></CheckBadgeIcon>
                 <div class="flex-1 space-x-1">
                     <span class="font-medium">
                         Your trial expires in {{ daysLeftInTrial() }} days.
@@ -138,7 +138,7 @@ const showBlackFridayBanner = computed(() => {
             <div class="flex items-center space-x-2">
                 <Link v-if="canManageBilling()" href="/billing">
                     <div
-                        class="text-text-primary font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
+                        class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>
@@ -154,7 +154,7 @@ const showBlackFridayBanner = computed(() => {
         class="bg-red-600/50 text-xs lg:text-sm py-0.5 border-b border-border-secondary">
         <MainContainer class="flex items-center justify-between">
             <div class="flex items-center space-x-1.5">
-                <XCircleIcon class="w-4 text-text-primary/50"></XCircleIcon>
+                <XCircleIcon class="w-4 text-white/50"></XCircleIcon>
                 <div class="flex-1 space-x-1">
                     <span class="font-medium">
                         Your organization is currently blocked.
@@ -170,7 +170,7 @@ const showBlackFridayBanner = computed(() => {
                     v-if="isBillingActivated() && canManageBilling()"
                     href="/billing">
                     <div
-                        class="text-text-primary font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
+                        class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>
@@ -186,7 +186,7 @@ const showBlackFridayBanner = computed(() => {
         class="bg-tertiary text-xs lg:text-sm py-0.5 border-b border-border-secondary">
         <MainContainer class="flex items-center justify-between">
             <div class="flex items-center space-x-1.5">
-                <XCircleIcon class="w-4 text-text-primary/50"></XCircleIcon>
+                <XCircleIcon class="w-4 text-white/50"></XCircleIcon>
                 <div class="flex-1 space-x-1">
                     <span class="font-medium">
                         You are currently using the Free Plan.
@@ -202,7 +202,7 @@ const showBlackFridayBanner = computed(() => {
                     v-if="isBillingActivated() && canManageBilling()"
                     href="/billing">
                     <div
-                        class="text-text-primary font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
+                        class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>

resources/js/Components/Common/Card.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div class="rounded-lg border overflow-hidden border-card-border bg-card-background shadow-card">
+    <div class="rounded-lg border border-card-border">
         <slot></slot>
     </div>
 </template>

resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue

@@ -25,7 +25,7 @@ const props = defineProps<{
                 v-if="canUpdateClients()"
                 :aria-label="'Edit Client ' + props.client.name"
                 data-testid="client_edit"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
@@ -34,7 +34,7 @@ const props = defineProps<{
             <button
                 v-if="canUpdateClients()"
                 :aria-label="'Archive Client ' + props.client.name"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click.prevent="emit('archive')">
                 <ArchiveBoxIcon class="w-5 text-icon-active"></ArchiveBoxIcon>
                 <span>{{ client.is_archived ? 'Unarchive' : 'Archive' }}</span>
@@ -43,7 +43,7 @@ const props = defineProps<{
                 v-if="canDeleteClients()"
                 :aria-label="'Delete Client ' + props.client.name"
                 data-testid="client_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>

resources/js/Components/Common/Client/ClientTable.vue

@@ -29,7 +29,7 @@ const createClient = ref(false);
                     class="col-span-2 py-24 text-center">
                     <UserCircleIcon
                         class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
-                    <h3 class="text-text-primary font-semibold">No clients found</h3>
+                    <h3 class="text-white font-semibold">No clients found</h3>
                     <p v-if="canCreateClients()" class="pb-5">
                         Create your first client now!
                     </p>

resources/js/Components/Common/Client/ClientTableHeading.vue

@@ -5,11 +5,11 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <template>
     <TableHeading>
         <div
-            class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary"></div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white"></div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Status</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Client/ClientTableRow.vue

@@ -41,13 +41,13 @@ const showEditModal = ref(false);
             v-model:show="showEditModal"
             :client="client"></ClientEditModal>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span>
                 {{ client.name }}
             </span>
         </div>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span class="text-muted"> {{ projectCount }} Projects </span>
         </div>
         <div

resources/js/Components/Common/Invitation/InvitationMoreOptionsDropdown.vue

@@ -11,14 +11,14 @@ const emit = defineEmits<{
     <MoreOptionsDropdown label="Actions for the invitation">
         <button
             data-testid="invitation_delete"
-            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
             @click="emit('resend')">
             <ArrowPathIcon class="w-5 text-icon-active"></ArrowPathIcon>
             <span>Resend Invitation</span>
         </button>
         <button
             data-testid="invitation_delete"
-            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
             @click="emit('delete')">
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Delete</span>

resources/js/Components/Common/Invitation/InvitationTableHeading.vue

@@ -5,10 +5,10 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <template>
     <TableHeading>
         <div
-            class="px-3 py-1.5 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="px-3 py-1.5 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Email
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Role</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Role</div>
         <div
             class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
             <span class="sr-only">Edit</span>

resources/js/Components/Common/Member/MemberCombobox.vue

@@ -63,7 +63,7 @@ const currentValue = computed(() => {
         <template #trigger>
             <Badge
                 tag="button"
-                class="flex w-full text-base text-left space-x-3 px-3 text-text-secondary bg-input-background font-normal cursor py-1.5">
+                class="flex w-full text-base text-left space-x-3 px-3 text-text-secondary font-normal cursor py-1.5">
                 <UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
                 <div v-if="currentValue" class="flex-1 truncate">
                     {{ currentValue }}

resources/js/Components/Common/Member/MemberInviteModal.vue

@@ -145,7 +145,7 @@ useFocus(clientNameInput, { initialValue: true });
                     <InputError :message="errors.role" class="mt-2" />
 
                     <div
-                        class="relative z-0 mt-1 border border-card-border rounded-lg bg-card-background cursor-pointer">
+                        class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
                         <button
                             v-for="(role, i) in filterRoles(availableRoles)"
                             :key="role.key"
@@ -167,7 +167,7 @@ useFocus(clientNameInput, { initialValue: true });
                                 <!-- Role Name -->
                                 <div class="flex items-center">
                                     <div
-                                        class="text-sm text-text-primary"
+                                        class="text-sm text-white"
                                         :class="{
                                             'font-semibold':
                                                 addTeamMemberForm.role ==

resources/js/Components/Common/Member/MemberMoreOptionsDropdown.vue

@@ -24,7 +24,7 @@ const props = defineProps<{
             <button
                 v-if="canUpdateMembers()"
                 :aria-label="'Edit Member ' + props.member.name"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
@@ -34,7 +34,7 @@ const props = defineProps<{
                 v-if="canDeleteMembers()"
                 :aria-label="'Delete Member ' + props.member.name"
                 data-testid="member_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
@@ -43,7 +43,7 @@ const props = defineProps<{
                 v-if="props.member.role === 'placeholder' && canMergeMembers()"
                 :aria-label="'Merge Member ' + props.member.name"
                 data-testid="member_merge"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('merge')">
                 <ArrowDownOnSquareStackIcon class="w-5 text-icon-active"></ArrowDownOnSquareStackIcon>
                 <span>Merge</span>
@@ -51,7 +51,7 @@ const props = defineProps<{
             <button
                 v-if="props.member.role !== 'placeholder' && canMakeMembersPlaceholders()"
                 :aria-label="'Make Member ' + props.member.name + ' a placeholder'"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('makePlaceholder')">
                 <UserCircleIcon class="w-5 text-icon-active"></UserCircleIcon>
                 <span>Deactivate</span>

resources/js/Components/Common/Member/MemberTableHeading.vue

@@ -5,15 +5,15 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <template>
     <TableHeading>
         <div
-            class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Email</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Email</div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Role</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Role</div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Billable Rate
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Status</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
         <div
             class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
             <span class="sr-only">Edit</span>

resources/js/Components/Common/Member/MemberTableRow.vue

@@ -59,7 +59,7 @@ const userHasValidMailAddress = computed(() => {
 <template>
     <TableRow>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span>
                 {{ member.name }}
             </span>

resources/js/Components/Common/Notification/Notification.vue

@@ -10,7 +10,7 @@
         leave-to-class="opacity-0">
         <div
             v-if="show"
-            class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border border-card-border bg-card-background shadow-lg ring-1 ring-black text-text-primary ring-opacity-5">
+            class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border border-card-border bg-card-background shadow-lg ring-1 ring-black text-white ring-opacity-5">
             <div class="p-4">
                 <div class="flex items-start">
                     <div class="flex-shrink-0">
@@ -24,7 +24,7 @@
                             aria-hidden="true" />
                     </div>
                     <div class="ml-3 w-0 flex-1 pt-0.5">
-                        <p class="text-sm font-medium text-text-primary">
+                        <p class="text-sm font-medium text-white">
                             {{ title }}
                         </p>
                         <p v-if="message" class="mt-1 text-sm text-muted">
@@ -34,7 +34,7 @@
                     <div class="ml-4 flex flex-shrink-0">
                         <button
                             type="button"
-                            class="inline-flex rounded-md bg-card-background text-muted hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                            class="inline-flex rounded-md bg-card-background text-muted hover:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                             @click="show = false">
                             <span class="sr-only">Close</span>
                             <XMarkIcon class="h-5 w-5" aria-hidden="true" />

resources/js/Components/Common/PageTitle.vue

@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
     <h3
-        class="text-text-primary font-semibold text-sm sm:text-base flex items-center space-x-2 sm:space-x-2.5">
+        class="text-white font-bold text-sm sm:text-base flex items-center space-x-2 sm:space-x-2.5">
         <component :is="icon" class="w-5 sm:w-6 text-icon-default"></component>
         <span> {{ title }} </span>
     </h3>

resources/js/Components/Common/Project/ProjectDropdown.vue

@@ -1,33 +1,32 @@
 <script setup lang="ts">
-import ProjectBadge from "@/packages/ui/src/Project/ProjectBadge.vue";
+import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from 'vue';
-import { useProjectsStore } from "@/utils/useProjects";
+import { useProjectsStore } from '@/utils/useProjects';
-import Dropdown from "@/packages/ui/src/Input/Dropdown.vue";
+import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import {
     ComboboxAnchor,
     ComboboxContent,
     ComboboxInput,
     ComboboxItem,
     ComboboxRoot,
-    ComboboxViewport
+    ComboboxViewport,
-} from "radix-vue";
+} from 'radix-vue';
-import { PlusCircleIcon } from "@heroicons/vue/20/solid";
+import { PlusCircleIcon } from '@heroicons/vue/20/solid';
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia';
-import { api } from "@/packages/api/src";
+import { api } from '@/packages/api/src';
-import { usePage } from "@inertiajs/vue3";
+import { usePage } from '@inertiajs/vue3';
-import { getRandomColor } from "@/packages/ui/src/utils/color";
+import { getRandomColor } from '@/packages/ui/src/utils/color';
-import type { Project } from "@/packages/api/src";
+import type { Project } from '@/packages/api/src';
-import ProjectDropdownItem from "@/packages/ui/src/Project/ProjectDropdownItem.vue";
+import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
-import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
 
-const searchValue = ref("");
+const searchValue = ref('');
 const searchInput = ref<HTMLElement | null>(null);
 const model = defineModel<string | null>({
-    default: null
+    default: null,
 });
 const open = ref(false);
 const projectsStore = useProjectsStore();
-const emit = defineEmits(["update:modelValue", "changed"]);
+const emit = defineEmits(['update:modelValue', 'changed']);
 
 const { projects } = storeToRefs(projectsStore);
 const projectDropdownTrigger = ref<HTMLElement | null>(null);
@@ -35,7 +34,7 @@ const shownProjects = computed(() => {
     return projects.value.filter((project) => {
         return project.name
             .toLowerCase()
-            .includes(searchValue.value?.toLowerCase()?.trim() || "");
+            .includes(searchValue.value?.toLowerCase()?.trim() || '');
     });
 });
 
@@ -44,7 +43,7 @@ withDefaults(
         border?: boolean;
     }>(),
     {
-        border: true
+        border: true,
     }
 );
 
@@ -62,13 +61,13 @@ async function addProjectIfNoneExists() {
             {
                 name: searchValue.value,
                 color: getRandomColor(),
-                is_billable: false
+                is_billable: false,
             },
             { params: { organization: page.props.auth.user.current_team_id } }
         );
         projects.value.unshift(response.data);
         model.value = response.data.id;
-        searchValue.value = "";
+        searchValue.value = '';
         open.value = false;
     }
 }
@@ -95,16 +94,16 @@ function isProjectSelected(project: Project) {
 }
 
 const selectedProjectName = computed(() => {
-    return currentProject.value?.name || "No Project";
+    return currentProject.value?.name || 'No Project';
 });
 
 const selectedProjectColor = computed(() => {
-    return currentProject.value?.color || "var(--theme-color-icon-default)";
+    return currentProject.value?.color || 'var(--theme-color-icon-default)';
 });
 
 function updateValue(project: Project) {
     model.value = project.id;
-    emit("changed");
+    emit('changed');
 }
 </script>
 
@@ -114,66 +113,76 @@ function updateValue(project: Project) {
             <ProjectBadge
                 ref="projectDropdownTrigger"
                 :color="selectedProjectColor"
-                size="xlarge"
+                size="large"
                 :border
                 tag="button"
                 :name="selectedProjectName"
-                class="focus:border-input-border-active bg-input-background focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator"></ProjectBadge>
+                class="focus:border-input-border-active focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator"></ProjectBadge>
         </template>
 
         <template #content>
-            <UseFocusTrap
+            <ComboboxRoot
-                v-if="open"
+                :open="open"
-                :options="{ immediate: true, allowOutsideClick: true }">
+                :model-value="currentProject"
-                <ComboboxRoot
+                :search-term="searchValue"
-                    v-model:search-term="searchValue"
+                class="relative"
-                    :open="open"
+                @update:model-value="updateValue"
-                    :model-value="currentProject"
+                @update:search-term="(e) => console.log(e)">
-                    class="relative"
+                <ComboboxAnchor>
-                    @update:model-value="updateValue"
+                    <ComboboxInput
-                    >
+                        ref="searchInput"
-                    <ComboboxAnchor>
+                        class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
-                        <ComboboxInput
+                        placeholder="Search for a project..."
-                            ref="searchInput"
+                        @keydown.enter="addProjectIfNoneExists" />
-                            class="bg-card-background border-0 placeholder-muted text-sm text-text-primary py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                </ComboboxAnchor>
-                            placeholder="Search for a project..."
+                <ComboboxContent>
-                            @keydown.enter="addProjectIfNoneExists" />
+                    <ComboboxViewport
-                    </ComboboxAnchor>
+                        ref="dropdownViewport"
-                    <ComboboxContent>
+                        class="w-60 max-h-60 overflow-y-scroll">
-                        <ComboboxViewport
+                        <ComboboxItem
-                            ref="dropdownViewport"
+                            v-if="searchValue === ''"
-                            class="w-60 max-h-60 overflow-y-scroll">
+                            class="data-[highlighted]:bg-card-background-active"
-                            <ComboboxItem
+                            :data-project-id="null"
-                                v-for="project in shownProjects"
+                            :value="{
-                                :key="project.id"
+                                id: null,
-                                :value="project"
+                                name: 'No Project',
-                                class="data-[highlighted]:bg-card-background-active"
+                                color: 'var(--theme-color-icon-default)',
-                                :data-project-id="project.id">
+                            }">
-                                <ProjectDropdownItem
+                            <ProjectDropdownItem
-                                    :selected="isProjectSelected(project)"
+                                name="No Project"
-                                    :color="project.color"
+                                color="var(--theme-color-icon-default)"
-                                    :name="project.name"></ProjectDropdownItem>
+                                selected></ProjectDropdownItem>
-                            </ComboboxItem>
+                        </ComboboxItem>
-                            <div
+                        <ComboboxItem
-                                v-if="
+                            v-for="project in shownProjects"
+                            :key="project.id"
+                            :value="project"
+                            class="data-[highlighted]:bg-card-background-active"
+                            :data-project-id="project.id">
+                            <ProjectDropdownItem
+                                :selected="isProjectSelected(project)"
+                                :color="project.color"
+                                :name="project.name"></ProjectDropdownItem>
+                        </ComboboxItem>
+                        <div
+                            v-if="
                                 searchValue.length > 0 &&
                                 shownProjects.length === 0
                             "
-                                class="bg-card-background-active">
+                            class="bg-card-background-active">
-                                <div
+                            <div
-                                    class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
+                                class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
-                                    <PlusCircleIcon
+                                <PlusCircleIcon
-                                        class="w-5 flex-shrink-0"></PlusCircleIcon>
+                                    class="w-5 flex-shrink-0"></PlusCircleIcon>
-                                    <span
+                                <span
                                     >Add "{{ searchValue }}" as a new
                                     Project</span
-                                    >
+                                >
-                                </div>
                             </div>
-                        </ComboboxViewport>
+                        </div>
-                    </ComboboxContent>
+                    </ComboboxViewport>
-                </ComboboxRoot>
+                </ComboboxContent>
-            </UseFocusTrap>
+            </ComboboxRoot>
         </template>
     </Dropdown>
 </template>

resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue

@@ -24,7 +24,7 @@ const props = defineProps<{
                 v-if="canUpdateProjects()"
                 :aria-label="'Edit Project ' + props.project.name"
                 data-testid="project_edit"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click.prevent="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
@@ -33,7 +33,7 @@ const props = defineProps<{
             <button
                 v-if="canUpdateProjects()"
                 :aria-label="'Archive Project ' + props.project.name"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click.prevent="emit('archive')">
                 <ArchiveBoxIcon class="w-5 text-icon-active"></ArchiveBoxIcon>
                 <span>{{ project.is_archived ? 'Unarchive' : 'Archive' }}</span>
@@ -42,7 +42,7 @@ const props = defineProps<{
                 v-if="canDeleteProjects()"
                 :aria-label="'Delete Project ' + props.project.name"
                 data-testid="project_delete"
-                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click.prevent="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>

resources/js/Components/Common/Project/ProjectTable.vue

@@ -65,7 +65,7 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
                     class="col-span-5 py-24 text-center">
                     <FolderPlusIcon
                         class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
-                    <h3 class="text-text-primary font-semibold">
+                    <h3 class="text-white font-semibold">
                         {{
                             canCreateProjects()
                                 ? 'No projects found'

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -8,22 +8,22 @@ defineProps<{
 <template>
     <TableHeading>
         <div
-            class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Client</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Client</div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Total Time
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Progress
         </div>
         <div
             v-if="showBillableRate"
-            class="px-3 py-1.5 text-left font-semibold text-text-primary">
+            class="px-3 py-1.5 text-left font-semibold text-white">
             Billable Rate
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Status</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -69,7 +69,7 @@ const showEditProjectModal = ref(false);
         :original-project="project"></ProjectEditModal>
     <TableRow :href="route('projects.show', { project: project.id })">
         <div
-            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <div
                 :style="{
                     backgroundColor: project.color,

resources/js/Components/Common/ProjectMember/ProjectMemberMoreOptionsDropdown.vue

@@ -28,7 +28,7 @@ const currentMember = computed(() => {
         :label="'Actions for Project Member ' + currentMember?.name">
         <button
             :aria-label="'Edit Project Member ' + currentMember?.name"
-            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
             @click.prevent="emit('edit')">
             <PencilSquareIcon class="w-5 text-icon-active"></PencilSquareIcon>
             <span>Edit</span>
@@ -36,7 +36,7 @@ const currentMember = computed(() => {
         <button
             :aria-label="'Delete Project Member ' + currentMember?.name"
             data-testid="project_delete"
-            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
             @click.prevent="emit('delete')">
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Remove from Team</span>

resources/js/Components/Common/ProjectMember/ProjectMemberTable.vue

@@ -33,7 +33,7 @@ const createProjectMember = ref(false);
                     class="col-span-5 py-24 text-center">
                     <UserGroupIcon
                         class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
-                    <h3 class="text-text-primary font-semibold">No project members</h3>
+                    <h3 class="text-white font-semibold">No project members</h3>
                     <p class="pb-5">Add the first project member!</p>
                     <SecondaryButton
                         :icon="PlusIcon"

resources/js/Components/Common/ProjectMember/ProjectMemberTableHeading.vue

@@ -5,13 +5,13 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <template>
     <TableHeading>
         <div
-            class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Billable Rate
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Role</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Role</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue

@@ -41,7 +41,7 @@ const showEditModal = ref(false);
             :name="member?.name"
             :project-member="projectMember"></ProjectMemberEditModal>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span>
                 {{ member?.name }}
             </span>

resources/js/Components/Common/Report/ReportMoreOptionsDropdown.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
             <button
                 v-if="canUpdateReport()"
                 :aria-label="'Edit Report ' + props.report.name"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click.prevent="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
@@ -28,7 +28,7 @@ const props = defineProps<{
             <button
                 v-if="canDeleteReport()"
                 :aria-label="'Delete Report ' + props.report.name"
-                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click.prevent="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>

resources/js/Components/Common/Report/ReportTable.vue

@@ -31,7 +31,7 @@ const gridTemplate = computed(() => {
                     class="col-span-5 py-24 text-center">
                     <FolderPlusIcon
                         class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
-                    <h3 class="text-text-primary font-semibold">
+                    <h3 class="text-white font-semibold">
                         No shared reports found
                     </h3>
                     <p v-if="canCreateProjects()" class="pb-5">

resources/js/Components/Common/Report/ReportTableHeading.vue

@@ -5,16 +5,16 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <template>
     <TableHeading>
         <div
-            class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Description
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Visibility
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Public URL
         </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

resources/js/Components/Common/Report/ReportTableRow.vue

@@ -62,7 +62,7 @@ async function deleteReport() {
         :original-report="report"></ReportEditModal>
     <TableRow>
         <div
-            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span class="overflow-ellipsis overflow-hidden">
                 {{ report.name }}
             </span>

resources/js/Components/Common/Reporting/ReportingChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { computed, provide } from 'vue';
+import { computed, provide, ref } from 'vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import {
     formatDate,
@@ -43,8 +43,7 @@ const xAxisLabels = computed(() => {
     }
     return props?.groupedData?.map((el) => formatDate(el.key ?? ''));
 });
-const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
+const accentColor = useCssVar('--color-accent-quaternary');
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 
 const seriesData = computed(() => {
     return props?.groupedData?.map((el) => {
@@ -91,7 +90,7 @@ const seriesData = computed(() => {
     });
 });
 
-const option = computed(() => ({
+const option = ref({
     tooltip: {
         trigger: 'item',
     },
@@ -104,7 +103,7 @@ const option = computed(() => ({
     backgroundColor: 'transparent',
     xAxis: {
         type: 'category',
-        data: xAxisLabels.value,
+        data: xAxisLabels,
         markLine: {
             lineStyle: {
                 color: 'rgba(125,156,188,0.1)',
@@ -119,7 +118,7 @@ const option = computed(() => ({
         axisLabel: {
             fontSize: 12,
             fontWeight: 600,
-            color: labelColor.value,
+            color: 'rgba(255,255,255,0.7)',
             margin: 16,
             fontFamily: 'Outfit, sans-serif',
         },
@@ -139,7 +138,7 @@ const option = computed(() => ({
     },
     series: [
         {
-            data: seriesData.value,
+            data: seriesData,
             type: 'bar',
             tooltip: {
                 valueFormatter: (value: number) => {
@@ -148,7 +147,7 @@ const option = computed(() => ({
             },
         },
     ],
-}));
+});
 </script>
 
 <template>
@@ -159,7 +158,7 @@ const option = computed(() => ({
             class="chart"
             :option="option" />
         <div v-else class="chart flex flex-col items-center justify-center">
-            <p class="text-lg text-text-primary font-semibold">
+            <p class="text-lg text-white font-semibold">
                 No time entries found
             </p>
             <p>Try to change the filters and time range</p>

resources/js/Components/Common/Reporting/ReportingFilterBadge.vue

@@ -24,11 +24,11 @@ const activeClass = computed(() => {
         tag="button"
         :class="
             twMerge(
-                'cursor-pointer bg-input-background hover:bg-card-background transition flex',
+                'cursor-pointer hover:bg-card-background transition flex',
                 activeClass
             )
         ">
-        <component :is="icon" class="-ml-0.5 h-4 w-4 text-text-quaternary"></component>
+        <component :is="icon" class="h-4 text-muted"></component>
         <span> {{ title }} </span>
         <div
             v-if="count"

resources/js/Components/Common/Reporting/ReportingPieChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { computed, provide } from 'vue';
+import { computed, provide, ref } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -11,7 +11,6 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVar } from "@vueuse/core";
 
 use([
     CanvasRenderer,
@@ -33,7 +32,6 @@ type ReportingChartDataEntry = {
 const props = defineProps<{
     data: ReportingChartDataEntry | null;
 }>();
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 
 const seriesData = computed(() => {
     return props.data?.map((el) => {
@@ -52,16 +50,13 @@ const seriesData = computed(() => {
         };
     });
 });
-const option = computed(() => ({
+const option = ref({
     tooltip: {
         trigger: 'item',
     },
     legend: {
         show: true,
         top: '250px',
-        textStyle: {
-            color: labelColor.value,
-        },
     },
     backgroundColor: 'transparent',
     series: [
@@ -74,13 +69,13 @@ const option = computed(() => ({
                     return formatHumanReadableDuration(value);
                 },
             },
-            data: seriesData.value,
+            data: seriesData,
             radius: ['30%', '60%'],
             top: '-45%',
             type: 'pie',
         },
     ],
-}));
+});
 </script>
 
 <template>

resources/js/Components/Common/Reporting/ReportingRow.vue

@@ -26,7 +26,7 @@ const expanded = ref(false);
 
 <template>
     <div
-        class="contents text-text-primary [&>*]:transition [&>*]:border-card-background-separator [&>*]:border-b [&>*]:h-[50px]">
+        class="contents text-white [&>*]:transition [&>*]:border-card-background-separator [&>*]:border-b [&>*]:h-[50px]">
         <div
             :class="
                 twMerge(

resources/js/Components/Common/StatCard.vue

@@ -7,9 +7,9 @@ defineProps<{
 
 <template>
     <div
-        class="rounded-lg bg-card-background border-card-border shadow-card border px-3.5 py-2.5">
+        class="rounded-lg bg-card-background border-card-border border px-3.5 py-2.5">
-        <dt class="font-semibold text-sm text-muted">{{ title }}</dt>
+        <dt class="font-bold text-sm text-muted">{{ title }}</dt>
-        <dd class="text-2xl text-text-primary pt-1 font-semibold">
+        <dd class="text-2xl text-white pt-1 font-bold">
             {{ value }}
         </dd>
     </div>

resources/js/Components/Common/TabBar/TabBarItem.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 
 const activeClass = computed(() => {
     if (props.active) {
-        return 'bg-tab-background border border-tab-border text-text-primary font-semibold';
+        return 'bg-tab-background border border-tab-border text-white font-semibold';
     }
     return '';
 });
@@ -19,7 +19,7 @@ const activeClass = computed(() => {
         role="tab"
         :class="
             twMerge(
-                'rounded-md px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium hover:text-text-primary focus-visible:outline-none',
+                'rounded-md px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium hover:text-white focus-visible:outline-none',
                 activeClass
             )
         ">

resources/js/Components/Common/Tag/TagMoreOptionsDropdown.vue

@@ -16,7 +16,7 @@ const props = defineProps<{
         <button
             :aria-label="'Delete Tag ' + props.tag.name"
             data-testid="tag_delete"
-            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
             @click="emit('delete')">
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Delete</span>

resources/js/Components/Common/Tag/TagTable.vue

@@ -33,7 +33,7 @@ const showCreateTagModal = ref(false);
                     class="col-span-5 py-24 text-center">
                     <FolderPlusIcon
                         class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
-                    <h3 class="text-text-primary font-semibold">No tags found</h3>
+                    <h3 class="text-white font-semibold">No tags found</h3>
                     <p v-if="canCreateTags()" class="pb-5">
                         Create your first tag now!
                     </p>

resources/js/Components/Common/Tag/TagTableHeading.vue

@@ -5,7 +5,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <template>
     <TableHeading>
         <div
-            class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
         </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

resources/js/Components/Common/Tag/TagTableRow.vue

@@ -17,7 +17,7 @@ function deleteTag() {
 <template>
     <TableRow>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span>
                 {{ tag.name }}
             </span>

resources/js/Components/Common/Task/TaskCreateModal.vue

@@ -2,7 +2,7 @@
 import TextInput from '@/packages/ui/src/Input/TextInput.vue';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
-import { ref, watch } from "vue";
+import { ref } from 'vue';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import { useTasksStore } from '@/utils/useTasks';
@@ -21,16 +21,10 @@ const props = defineProps<{
     projectId: string;
 }>();
 
-const taskProjectId = ref<string>(props.projectId);
-
-watch(() => props.projectId, (value) => {
-    taskProjectId.value = value;
-});
-
 async function submit() {
     await createTask({
         name: taskName.value,
-        project_id: taskProjectId.value,
+        project_id: props.projectId,
         estimated_time: estimatedTime.value,
     });
     show.value = false;
@@ -59,13 +53,13 @@ useFocus(taskNameInput, { initialValue: true });
                         v-model="taskName"
                         type="text"
                         placeholder="Task Name"
-                        class="block w-full"
+                        class="mt-1 block w-full"
                         required
                         autocomplete="taskName"
                         @keydown.enter="submit()" />
                 </div>
                 <div class="col-span-6 sm:col-span-4">
-                    <ProjectDropdown v-model="taskProjectId"></ProjectDropdown>
+                    <ProjectDropdown :model-value="projectId"></ProjectDropdown>
                 </div>
             </div>
             <EstimatedTimeSection

resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue

@@ -24,7 +24,7 @@ const props = defineProps<{
                 v-if="canUpdateTasks()"
                 :aria-label="'Edit Task ' + props.task.name"
                 data-testid="task_edit"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
@@ -33,7 +33,7 @@ const props = defineProps<{
             <button
                 v-if="canUpdateTasks()"
                 :aria-label="'Mark Task ' + props.task.name + ' as done'"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('done')">
                 <CheckCircleIcon class="w-5 text-icon-active"></CheckCircleIcon>
                 <span v-if="props.task.is_done">Mark as active</span>
@@ -43,7 +43,7 @@ const props = defineProps<{
                 v-if="canDeleteTasks()"
                 :aria-label="'Delete Task ' + props.task.name"
                 data-testid="task_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
                 @click="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>

resources/js/Components/Common/Task/TaskTable.vue

@@ -41,7 +41,7 @@ const createTask = ref(false);
                     class="col-span-5 py-24 text-center">
                     <PlusCircleIcon
                         class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
-                    <h3 class="text-text-primary font-semibold">No tasks found</h3>
+                    <h3 class="text-white font-semibold">No tasks found</h3>
                     <p v-if="canCreateTasks()" class="pb-5">
                         Create your first task now!
                     </p>

resources/js/Components/Common/Task/TaskTableHeading.vue

@@ -5,16 +5,16 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <template>
     <TableHeading>
         <div
-            class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Task Name
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Total Time
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
             Progress
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Status</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Task/TaskTableRow.vue

@@ -33,7 +33,7 @@ const showTaskEditModal = ref(false);
 <template>
     <TableRow>
         <div
-            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span class="overflow-ellipsis overflow-hidden">
                 {{ task.name }}
             </span>

resources/js/Components/ConfirmationModal.vue

@@ -48,7 +48,7 @@ const close = () => {
                 </div>
 
                 <div class="mt-3 text-center sm:mt-0 sm:ms-4 sm:text-start">
-                    <h3 class="text-lg font-medium text-text-primary">
+                    <h3 class="text-lg font-medium text-white">
                         <slot name="title" />
                     </h3>
 

resources/js/Components/CurrentSidebarTimer.vue

@@ -37,14 +37,14 @@ const isRunningInDifferentOrganization = computed(() => {
             <div
                 class="w-full h-[calc(100%+10px)] absolute bg-default-background opacity-75 backdrop-blur-sm"></div>
             <div class="flex space-x-3 items-center w-full z-20 justify-center">
-                <span class="text-xs text-center text-text-primary">
+                <span class="text-xs text-center text-white">
                     The Timer is running in a different organization.
                 </span>
             </div>
         </div>
         <div>
             <div class="text-muted font-extrabold text-xs">Current Timer</div>
-            <div class="text-text-primary font-medium text-lg">
+            <div class="text-white font-medium text-lg">
                 {{ currentTime }}
             </div>
         </div>

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -64,9 +64,8 @@ const max = computed(() => {
     }
 );
 
-const backgroundColor = useCssVar('--color-card-background', null, { observe: true });
+const backgroundColor = useCssVar("--color-bg-secondary");
-const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, { observe: true });
+const itemBackgroundColor = useCssVar("--color-bg-tertiary");
-
 const option = computed(() => {
         return {
             tooltip: {},

resources/js/Components/Dashboard/DayOverviewCardChart.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import VChart from 'vue-echarts';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useCssVar } from '@vueuse/core';
 
 const props = defineProps<{
     history: number[];
 }>();
 
-const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
+const accentColor = useCssVar('--color-accent-quaternary');
 
-const seriesData = computed(() => props.history.map((el) => {
+const seriesData = props.history.map((el) => {
     return {
         value: el,
         ...{
@@ -21,7 +21,7 @@ const seriesData = computed(() => props.history.map((el) => {
             },
         },
     };
-}));
+});
 const option = ref({
     grid: {
         top: 0,

resources/js/Components/Dashboard/DayOverviewCardEntry.vue

@@ -16,7 +16,7 @@ import {
     <div
         class="px-3.5 py-2 flex justify-between @container border-b border-card-background-separator">
         <div class="flex items-center min-w-[70px]">
-            <p class="font-semibold text-sm text-text-primary">
+            <p class="font-semibold text-sm text-white">
                 {{ formatHumanReadableDate(date) }}
             </p>
         </div>

resources/js/Components/Dashboard/ProjectsChartCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -11,7 +11,6 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVar } from "@vueuse/core";
 
 use([
     CanvasRenderer,
@@ -23,7 +22,6 @@ use([
 ]);
 
 provide(THEME_KEY, 'dark');
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 
 const props = defineProps<{
     weeklyProjectOverview: {
@@ -48,18 +46,13 @@ const seriesData = props.weeklyProjectOverview.map((el) => {
         },
     };
 });
-import { computed } from 'vue';
+const option = ref({
-
-const option = computed(() => ({
     tooltip: {
         trigger: 'item',
     },
     legend: {
         bottom: 'bottom',
         top: '250px',
-        textStyle: {
-            color: labelColor.value,
-        },
     },
     backgroundColor: 'transparent',
     series: [
@@ -78,7 +71,7 @@ const option = computed(() => ({
             type: 'pie',
         },
     ],
-}));
+});
 </script>
 
 <template>

resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue

@@ -82,7 +82,7 @@ window.addEventListener("dashboard:refresh", () => {
             <div>
                 <PlusCircleIcon
                     class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
-                <h3 class="text-text-primary font-semibold text-sm">
+                <h3 class="text-white font-semibold text-sm">
                     No recent tasks found
                 </h3>
                 <p class="pb-5 text-sm">Create tasks inside of a project!</p>
@@ -97,7 +97,7 @@ window.addEventListener("dashboard:refresh", () => {
             <div>
                 <PlusCircleIcon
                     class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
-                <h3 class="text-text-primary font-semibold">Add more tasks</h3>
+                <h3 class="text-white font-semibold">Add more tasks</h3>
                 <p class="pb-5">Create tasks inside of a project!</p>
                 <SecondaryButton @click="router.visit(route('projects'))"
                 >Go to Projects

resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue

@@ -7,8 +7,6 @@ import { computed } from 'vue';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { getDayJsInstance } from '@/packages/ui/src/utils/time';
 import type { TimeEntry } from "@/packages/api/src";
-import { useTasksStore } from "@/utils/useTasks";
-import { ChevronRightIcon } from "@heroicons/vue/16/solid";
 
 const props = defineProps<{
     timeEntry: TimeEntry
@@ -20,12 +18,6 @@ const project = computed(() => {
     return projects.value.find((project) => project.id === props.timeEntry.project_id);
 });
 
-const {tasks} = storeToRefs(useTasksStore());
-
-const task = computed(() => {
-    return tasks.value.find((task) => task.id === props.timeEntry.task_id);
-});
-
 const { currentTimeEntry } = storeToRefs(useCurrentTimeEntryStore());
 const { setActiveState } = useCurrentTimeEntryStore();
 
@@ -49,28 +41,13 @@ async function startTaskTimer() {
     <div
         class="px-3.5 py-2 grid grid-cols-5 border-b border-b-card-background-separator">
         <div class="col-span-4">
-            <p class="font-medium text-text-primary text-sm pb-1 truncate">
+            <p class="font-medium text-white text-sm pb-1 truncate">
                 <span v-if="timeEntry.description"> {{ timeEntry.description }}</span>
                 <span v-else class="text-text-tertiary">No description</span>
             </p>
             <ProjectBadge
-                size="base"
+                :name="project?.name ?? 'No Project'"
-                class="min-w-0 max-w-full"
+                :color="project?.color"></ProjectBadge>
-                :color="project?.color">
-                <div class="flex items-center lg:space-x-0.5 min-w-0">
-                    <span class="whitespace-nowrap ">
-                        {{ project?.name ?? 'No Project' }}
-                    </span>
-                    <ChevronRightIcon
-                        v-if="task"
-                        class="w-4 text-muted shrink-0"></ChevronRightIcon>
-                    <div
-                        v-if="task"
-                        class="min-w-0 shrink truncate">
-                        {{ task.name }}
-                    </div>
-                </div>
-            </ProjectBadge>
         </div>
         <div class="flex items-center justify-center">
             <TimeTrackerStartStop

resources/js/Components/Dashboard/TeamActivityCard.vue

@@ -51,7 +51,7 @@ const { data: latestTeamActivity, isLoading } = useQuery({
             <div>
                 <UserGroupIcon
                     class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
-                <h3 class="text-text-primary font-semibold text-sm">
+                <h3 class="text-white font-semibold text-sm">
                     Invite your co-workers
                 </h3>
                 <p class="pb-5 text-sm">You can invite your entire team.</p>

resources/js/Components/Dashboard/TeamActivityCardEntry.vue

@@ -10,7 +10,7 @@ defineProps<{
     <div class="px-4 py-2 2xl:py-3 border-b border-card-background-separator">
         <div class="col-span-2">
             <div class="flex justify-between">
-                <p class="font-semibold text-sm text-text-primary">
+                <p class="font-semibold text-sm text-white">
                     {{ name }}
                 </p>
                 <div

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -2,7 +2,12 @@
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { BarChart } from "echarts/charts";
-import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import {
+    GridComponent,
+    LegendComponent,
+    TitleComponent,
+    TooltipComponent
+} from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
 import { computed, provide } from "vue";
 import StatCard from "@/Components/Common/StatCard.vue";
@@ -29,6 +34,7 @@ use([
 ]);
 
 provide(THEME_KEY, "dark");
+const accentColor = useCssVar("--color-accent-quaternary");
 
 const weekdays = computed(() => {
     const daysOrder = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
@@ -41,6 +47,7 @@ const weekdays = computed(() => {
         saturday: "Sat",
         sunday: "Sun"
     };
+
     if (dayMapping[getWeekStart()]) {
         const customOrder = [];
         const startIndex = daysOrder.indexOf(dayMapping[getWeekStart()]);
@@ -53,11 +60,10 @@ const weekdays = computed(() => {
     } else {
         return daysOrder;
     }
-
 });
 
+const markLineColor = useCssVar("--color-border-secondary");
 
-const accentColor = useCssVar("--theme-color-chart", null, { observe: true });
 
 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
@@ -174,8 +180,6 @@ const seriesData = computed(() => {
 });
 
 
-const markLineColor = useCssVar("--color-border-secondary", null, { observe: true });
-const labelColor = useCssVar("--color-text-secondary", null, { observe: true });
 const option = computed(() => {
     return {
         tooltip: {
@@ -183,35 +187,34 @@ const option = computed(() => {
         },
         grid: {
             top: 0,
-            right: 0,
+                right: 0,
-            bottom: 50,
+                bottom: 50,
-            left: 0
+                left: 0
         },
         backgroundColor: "transparent",
-        xAxis: {
+            xAxis: {
-            type: "category",
+        type: "category",
             data: weekdays.value,
             axisLine: {
-                lineStyle: {
+            lineStyle: {
-                    color: "transparent" // Set desired color here
+                color: "transparent" // Set desired color here
-                }
-            },
-            axisLabel: {
-                fontSize: 16,
-                fontWeight: 600,
-                margin: 24,
-                fontFamily: "Outfit, sans-serif",
-                color: labelColor.value
-            },
-            axisTick: {
-                lineStyle: {
-                    color: "transparent" // Set desired color here
-                }
             }
         },
+        axisLabel: {
+            fontSize: 16,
+                fontWeight: 600,
+                margin: 24,
+                fontFamily: "Outfit, sans-serif"
+        },
+        axisTick: {
+            lineStyle: {
+                color: "transparent" // Set desired color here
+            }
+        }
+    },
         yAxis: {
             type: "value",
-            splitLine: {
+                splitLine: {
                 lineStyle: {
                     color: markLineColor.value
                 }
@@ -228,7 +231,7 @@ const option = computed(() => {
                 }
             }
         ]
-    };
+    }
 });
 
 

resources/js/Components/DropdownLink.vue

@@ -13,20 +13,20 @@ defineProps<{
             v-if="as == 'button'"
             type="submit"
             v-bind="$attrs"
-            class="block w-full px-4 py-2 text-start text-sm leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            class="block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
             <slot />
         </button>
         <a
             v-else-if="as == 'a'"
             :href="href"
-            class="block px-4 py-2 text-sm leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            class="block px-4 py-2 text-sm leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
             <slot />
         </a>
 
         <Link
             v-else
             :href="href ?? ''"
-            class="block px-4 py-2 text-sm leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            class="block px-4 py-2 text-sm leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
             <slot />
         </Link>
     </div>

resources/js/Components/NavigationSidebarItem.vue

@@ -32,7 +32,7 @@ const open = useSessionStorage('nav-collapse-state-' + props.title, true);
         <CollapsibleRoot v-else v-model:open="open"
             ><CollapsibleTrigger class="w-full group py-0.5">
                 <div
-                    class="text-muted group-hover:text-text-primary group-hover:bg-menu-active group flex gap-x-2 rounded-md transition leading-6 py-1 px-2 font-medium text-sm items-center justify-between">
+                    class="text-muted group-hover:text-white group-hover:bg-menu-active group flex gap-x-2 rounded-md transition leading-6 py-1 px-2 font-medium text-sm items-center justify-between">
                     <div class="flex items-center gap-x-2">
                         <component
                             :is="icon"

resources/js/Components/NavigationSidebarLink.vue

@@ -14,8 +14,8 @@ defineProps<{
         <div
             :class="[
                 current
-                    ? 'bg-menu-active text-text-primary'
+                    ? 'bg-menu-active text-white'
-                    : 'text-muted group-hover:text-text-primary group-hover:bg-menu-active ',
+                    : 'text-muted group-hover:text-white group-hover:bg-menu-active ',
                 'group flex gap-x-2 rounded-md transition leading-6 py-1 px-2 font-medium text-sm items-center',
             ]">
             <component

resources/js/Components/SectionTitle.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="md:col-span-1 flex justify-between">
         <div class="px-4 sm:px-0">
-            <h3 class="text-lg font-medium text-text-primary">
+            <h3 class="text-lg font-medium text-white">
                 <slot name="title" />
             </h3>
 

resources/js/Components/TableRow.vue

@@ -14,7 +14,7 @@ defineProps<{
         role="row"
         :class="
             twMerge(
-                'contents group [&>*]:transition [&>*]:border-row-separator [&>*]:bg-row-background [&>*]:border-b',
+                'contents group [&>*]:transition [&>*]:border-row-separator [&>*]:border-b',
                 href ? '[&>*]:cursor-pointer [&>*]:hover:bg-white/5' : ''
             )
         ">

resources/js/Layouts/AppLayout.vue

@@ -19,7 +19,7 @@ import {
 import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from 'vue';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores, refreshStores } from '@/utils/init';
 import {
@@ -36,7 +36,6 @@ import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
 import { fetchToken, isTokenValid } from '@/utils/session';
 import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
 import BillingBanner from '@/Components/Billing/BillingBanner.vue';
-import { theme } from "@/utils/theme";
 
 defineProps({
     title: String,
@@ -45,13 +44,6 @@ defineProps({
 const showSidebarMenu = ref(false);
 const isUnloading = ref(false);
 onMounted(async () => {
-
-    document.documentElement.classList.add(theme.value);
-    watch(theme, (newTheme, oldTheme) => {
-        document.documentElement.classList.remove(oldTheme);
-        document.documentElement.classList.add(newTheme);
-    });
-
     // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
     if (window.initialDataLoaded !== true) {
         window.initialDataLoaded = true;

resources/js/Pages/API/Index.vue

@@ -13,7 +13,7 @@ defineProps<{
 <template>
     <AppLayout title="API Tokens">
         <template #header>
-            <h2 class="font-semibold text-xl text-text-primary leading-tight">
+            <h2 class="font-semibold text-xl text-white leading-tight">
                 API Tokens
             </h2>
         </template>

resources/js/Pages/API/Partials/ApiTokenManager.vue

@@ -173,7 +173,7 @@ const deleteApiToken = () => {
                                 v-for="token in tokens"
                                 :key="token.id"
                                 class="flex items-center justify-between">
-                                <div class="break-all text-text-primary">
+                                <div class="break-all text-white">
                                     {{ token.name }}
                                 </div>
 

resources/js/Pages/Auth/Login.vue

@@ -46,7 +46,7 @@ const page = usePage<{
             <Link
                 class="py-8 text-muted text-sm font-medium opacity-90 hover:opacity-100 transition"
                 :href="route('register')">
-                No account yet? <span class="text-text-primary">Register here!</span>
+                No account yet? <span class="text-white">Register here!</span>
             </Link>
         </template>
 
@@ -89,7 +89,7 @@ const page = usePage<{
                 <Link
                     v-if="canResetPassword"
                     :href="route('password.request')"
-                    class="underline text-sm text-muted hover:text-text-primary rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    class="underline text-sm text-muted hover:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                     Forgot your password?
                 </Link>
 

resources/js/Pages/Auth/Register.vue

@@ -52,7 +52,7 @@ const page = usePage<{
                 class="py-8 text-muted text-sm font-medium opacity-90 hover:opacity-100 transition"
                 :href="route('login')">
                 Already have an account?
-                <span class="text-text-primary">Login here!</span>
+                <span class="text-white">Login here!</span>
             </Link>
         </template>
 

resources/js/Pages/Dashboard.vue

@@ -23,7 +23,6 @@ const refreshDashboardData = () => {
     queryClient.invalidateQueries({ queryKey: ["totalWeeklyBillableTime"] });
     queryClient.invalidateQueries({ queryKey: ["totalWeeklyBillableAmount"] });
     queryClient.invalidateQueries({ queryKey: ["weeklyHistory"] });
-    queryClient.invalidateQueries({ queryKey: ["timeEntries"] });
 };
 
 </script>

resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue

@@ -70,7 +70,7 @@ const closeModal = () => {
                     <div>
                         <svg
                             v-if="session.agent.is_desktop"
-                            class="w-8 h-8 text-text-primary"
+                            class="w-8 h-8 text-white"
                             xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
@@ -98,7 +98,7 @@ const closeModal = () => {
                     </div>
 
                     <div class="ms-3">
-                        <div class="text-sm text-text-primary font-medium">
+                        <div class="text-sm text-white font-medium">
                             {{
                                 session.agent.platform
                                     ? session.agent.platform

resources/js/Pages/Profile/Partials/ThemeForm.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-
-import InputLabel from "../../../packages/ui/src/Input/InputLabel.vue";
-import FormSection from "@/Components/FormSection.vue";
-import { usePreferredColorScheme } from '@vueuse/core';
-import { themeSetting } from "@/utils/theme";
-
-const preferredColor = usePreferredColorScheme()
-
-</script>
-
-<template>
-    <FormSection>
-        <template #title> Theme</template>
-
-        <template #description>
-            Choose how you want solidtime to look on your device
-        </template>
-
-        <template #form>
-
-            <div class="col-span-6 sm:col-span-4">
-                <InputLabel for="theme" value="Theme" />
-                <select
-                    id="theme"
-                    v-model="themeSetting"
-                    name="theme"
-                    required
-                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
-                    <option value="system">System</option>
-                    <option value="light">Light</option>
-                    <option value="dark">Dark</option>
-                </select>
-                <p v-if="themeSetting === 'system'" class="w-full text-sm text-text-tertiary font-medium mt-2">
-                    System default: {{ preferredColor }}
-                </p>
-            </div>
-        </template>
-    </FormSection>
-
-</template>
-
-<style scoped>
-
-</style>

resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -208,7 +208,7 @@ const page = usePage<{
                     v-model="form.timezone"
                     name="timezone"
                     required
-                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
+                    class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
                     <option value="" disabled>Select a Timezone</option>
                     <option
                         v-for="(timezoneTranslated, timezoneKey) in $page.props
@@ -229,26 +229,7 @@ const page = usePage<{
                     v-model="form.week_start"
                     name="week_start"
                     required
-                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
+                    class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
-                    <option value="" disabled>Select a week day</option>
-                    <option
-                        v-for="(weekdayTranslated, weekdayKey) in $page.props
-                            .weekdays"
-                        :key="weekdayKey"
-                        :value="weekdayKey">
-                        {{ weekdayTranslated }}
-                    </option>
-                </select>
-                <InputError :message="form.errors.week_start" class="mt-2" />
-            </div>
-            <div class="col-span-6 sm:col-span-4">
-                <InputLabel for="week_start" value="Start of the week" />
-                <select
-                    id="week_start"
-                    v-model="form.week_start"
-                    name="week_start"
-                    required
-                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
                     <option value="" disabled>Select a week day</option>
                     <option
                         v-for="(weekdayTranslated, weekdayKey) in $page.props

resources/js/Pages/Profile/Show.vue

@@ -10,7 +10,6 @@ import { usePage } from '@inertiajs/vue3';
 import type { User } from '@/types/models';
 import type { Session } from '@/types/jetstream';
 import ApiTokensForm from "@/Pages/Profile/Partials/ApiTokensForm.vue";
-import ThemeForm from "@/Pages/Profile/Partials/ThemeForm.vue";
 
 defineProps<{
     confirmsTwoFactorAuthentication: boolean;
@@ -33,7 +32,7 @@ const page = usePage<{
 <template>
     <AppLayout title="Profile">
         <template #header>
-            <h2 class="font-semibold text-xl text-text-primary leading-tight">
+            <h2 class="font-semibold text-xl text-white leading-tight">
                 Profile
             </h2>
         </template>
@@ -47,12 +46,6 @@ const page = usePage<{
                     <SectionBorder />
                 </div>
 
-                <div>
-                    <ThemeForm />
-
-                    <SectionBorder />
-                </div>
-
                 <div v-if="page.props.jetstream.canUpdatePassword">
                     <UpdatePasswordForm class="mt-10 sm:mt-0" />
 

resources/js/Pages/ProjectShow.vue

@@ -95,7 +95,7 @@ const shownTasks = computed(() => {
                     </li>
                     <li>
                         <div
-                            class="flex items-center space-x-3 text-text-primary font-semibold text-base">
+                            class="flex items-center space-x-3 text-white font-bold text-base">
                             <ChevronRightIcon
                                 class="h-5 w-5 flex-shrink-0 text-muted"
                                 aria-hidden="true" />

resources/js/Pages/Reporting.vue

@@ -410,7 +410,7 @@ const tableData = computed(() => {
                 <div
                     class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
                     <div
-                        class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
+                        class="text-sm flex text-white items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
                         <span>Group by</span>
                         <ReportingGroupBySelect
                             v-model="group"
@@ -476,7 +476,7 @@ const tableData = computed(() => {
                         <div
                             v-else
                             class="chart flex flex-col items-center justify-center py-12 col-span-3">
-                            <p class="text-lg text-text-primary font-semibold">
+                            <p class="text-lg text-white font-semibold">
                                 No time entries found
                             </p>
                             <p>Try to change the filters and time range</p>

resources/js/Pages/ReportingDetailed.vue

@@ -421,7 +421,7 @@ async function downloadExport(format: ExportFormat) {
                 <div class="text-center pt-12">
                     <ClockIcon
                         class="w-8 text-icon-default inline pb-2"></ClockIcon>
-                    <h3 class="text-text-primary font-semibold">
+                    <h3 class="text-white font-semibold">
                         No time entries found
                     </h3>
                     <p class="pb-5">
@@ -493,6 +493,6 @@ async function downloadExport(format: ExportFormat) {
     @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
 }
 .pagination-item[data-selected] {
-    @apply text-text-primary bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
+    @apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
 }
 </style>

resources/js/Pages/ReportingShared.vue

@@ -181,6 +181,6 @@ watch(currentPage, () => {
     @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
 }
 .pagination-item[data-selected] {
-    @apply text-text-primary bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
+    @apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
 }
 </style>

resources/js/Pages/SharedReport.vue

@@ -162,7 +162,7 @@ function getGroupLabel(key: string) {
                 <div
                     class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
                     <div
-                        class="text-sm flex text-text-primary items-center font-medium px-6 border-b border-card-background-separator pb-3">
+                        class="text-sm flex text-white items-center font-medium px-6 border-b border-card-background-separator pb-3">
                         Group by
                         <strong class="px-2">{{ getGroupLabel(group) }}</strong>
                         and
@@ -219,7 +219,7 @@ function getGroupLabel(key: string) {
                         <div
                             v-else
                             class="chart flex flex-col items-center justify-center py-12 col-span-3">
-                            <p class="text-lg text-text-primary font-semibold">
+                            <p class="text-lg text-white font-semibold">
                                 No time entries found
                             </p>
                             <p>Try to change the filters and time range</p>

resources/js/Pages/Teams/Create.vue

@@ -6,7 +6,7 @@ import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
 <template>
     <AppLayout title="Create Organization">
         <template #header>
-            <h2 class="font-semibold text-xl text-text-primary leading-tight">
+            <h2 class="font-semibold text-xl text-white leading-tight">
                 Create Organization
             </h2>
         </template>

resources/js/Pages/Teams/Partials/CreateTeamForm.vue

@@ -47,7 +47,7 @@ const page = usePage<{
                         :alt="page.props.auth.user.name" />
 
                     <div class="ms-4 leading-tight">
-                        <div class="text-text-primary">
+                        <div class="text-white">
                             {{ page.props.auth.user.name }}
                         </div>
                         <div class="text-sm text-muted">

resources/js/Pages/Teams/Partials/ExportData.vue

@@ -89,7 +89,7 @@ async function exportData() {
         </Card>
         <Card>
             <div
-                class="py-6 flex-col items-center flex space-y-5 text-center text-sm">
+                class="py-6 flex-col bg-card-background items-center flex space-y-5 text-center text-sm">
                 <div>
                     The following organization will be exported: <br />
                     <strong class="font-semibold">{{

resources/js/Pages/Teams/Partials/ImportData.vue

@@ -142,7 +142,7 @@ const showResultModal = ref(false);
 
             <div
                 class="py-2.5 px-3 border-t border-t-card-background-separator">
-                <span class="text-text-primary font-semibold">Clients created:</span>
+                <span class="text-white font-semibold">Clients created:</span>
                 {{ reportResult?.report.clients.created }}
             </div>
             <div
@@ -187,14 +187,14 @@ const showResultModal = ref(false);
 
         <Card>
             <div
-                class="px-4 py-5 sm:px-5">
+                class="px-4 py-5 sm:px-5 bg-card-background shadow sm:rounded-tl-md sm:rounded-tr-md">
                 <div>
                     <InputLabel for="importType" value="Import Type" />
                     <select
                         id="importType"
                         v-model="importType"
                         name="importType"
-                        class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
+                        class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
                         <option :value="null" selected disabled>
                             Select an import type to get instructions...
                         </option>
@@ -218,7 +218,7 @@ const showResultModal = ref(false);
                 </div>
 
                 <div
-                    class="mt-2 flex justify-center rounded-lg border border-dashed border-border-primary px-6 py-10">
+                    class="mt-2 flex justify-center rounded-lg border border-dashed border-white/30 px-6 py-10">
                     <div class="text-center">
                         <DocumentIcon
                             class="mx-auto h-8 w-8 text-muted"
@@ -227,7 +227,7 @@ const showResultModal = ref(false);
                         <div class="mt-4 flex text-sm leading-6 text-muted">
                             <label
                                 for="file-upload"
-                                class="relative cursor-pointer rounded-md font-semibold text-text-primary focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 focus-within:ring-offset-gray-900 hover:text-indigo-500">
+                                class="relative cursor-pointer rounded-md bg-gray-900 font-semibold text-white focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 focus-within:ring-offset-gray-900 hover:text-indigo-500">
                                 <span v-if="files">{{ filenames }}</span>
                                 <span v-else
                                     >Upload a Toggl/Clockify Export</span

resources/js/Pages/Teams/Partials/TeamMemberManager.vue

@@ -191,7 +191,7 @@ const displayableRole = (role: string) => {
                                     <!-- Role Name -->
                                     <div class="flex items-center">
                                         <div
-                                            class="text-sm text-text-primary"
+                                            class="text-sm text-white"
                                             :class="{
                                                 'font-semibold':
                                                     addTeamMemberForm.role ==

resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue

@@ -51,7 +51,7 @@ const updateTeamName = () => {
                             :alt="team.owner.name" />
 
                         <div class="ms-4 leading-tight">
-                            <div class="text-text-primary">
+                            <div class="text-white">
                                 {{ team.owner.name }}
                             </div>
                             <div class="text-muted text-sm">
@@ -93,7 +93,7 @@ const updateTeamName = () => {
                     v-model="form.currency"
                     name="currency"
                     :disabled="!permissions.canUpdateTeam"
-                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
+                    class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
                     <option value="" disabled>Select a currency</option>
                     <option
                         v-for="(currencyTranslated, currencyKey) in $page.props

resources/js/Pages/Teams/Show.vue

@@ -18,7 +18,7 @@ defineProps<{
 <template>
     <AppLayout title="Organization Settings">
         <template #header>
-            <h2 class="font-semibold text-xl text-text-primary leading-tight">
+            <h2 class="font-semibold text-xl text-white leading-tight">
                 Organization Settings
             </h2>
         </template>

resources/js/Pages/Time.vue

@@ -132,7 +132,7 @@ function deleteSelected() {
         :clients></TimeEntryCreateModal>
     <AppLayout title="Dashboard" data-testid="time_view">
         <MainContainer
-            class="pt-5 lg:pt-8 pb-4 lg:pb-6">
+            class="pt-5 lg:pt-8 pb-4 lg:pb-6 border-b border-default-background-separator">
             <div
                 class="lg:flex items-end lg:divide-x divide-default-background-separator divide-y lg:divide-y-0 space-y-2 lg:space-y-0 lg:space-x-2">
                 <div class="flex-1">
@@ -191,13 +191,13 @@ function deleteSelected() {
             :tags="tags"></TimeEntryGroupedTable>
         <div v-if="timeEntries.length === 0" class="text-center pt-12">
             <ClockIcon class="w-8 text-icon-default inline pb-2"></ClockIcon>
-            <h3 class="text-text-primary font-semibold">No time entries found</h3>
+            <h3 class="text-white font-semibold">No time entries found</h3>
             <p class="pb-5">Create your first time entry now!</p>
         </div>
         <div ref="loadMoreContainer">
             <div
                 v-if="loading && !allTimeEntriesLoaded"
-                class="flex justify-center items-center py-5 text-text-primary font-medium">
+                class="flex justify-center items-center py-5 text-white font-medium">
                 <LoadingSpinner></LoadingSpinner>
                 <span> Loading more time entries... </span>
             </div>

resources/js/Pages/Welcome.vue

@@ -23,21 +23,21 @@ const user = computed(() => page?.props?.auth?.user);
     <Head title="Welcome" />
 
     <div
-        class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-text-primary">
+        class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
         <div
             v-if="canLogin"
             class="sm:fixed sm:top-0 sm:end-0 p-6 text-end z-10">
             <Link
                 v-if="user"
                 :href="route('dashboard')"
-                class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-text-primary focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                 >Dashboard</Link
             >
 
             <template v-else>
                 <Link
                     :href="route('login')"
-                    class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-text-primary focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                    class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                     >Log in</Link
                 >
 

resources/js/packages/ui/src/Badge.vue

@@ -47,7 +47,7 @@ const tagClasses = computed(() => {
                 tagClasses,
                 badgeClasses[size],
                 borderClasses,
-                'rounded transition inline-flex items-center font-semibold text-text-primary disabled:text-text-quaternary outline-0  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                'rounded transition inline-flex items-center font-semibold text-white disabled:text-text-quaternary outline-0  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                 props.class
             )
         ">

resources/js/packages/ui/src/Buttons/PrimaryButton.vue

@@ -21,7 +21,7 @@ const props = withDefaults(
     <button
         :type="type"
         :disabled="loading"
-        class="inline-flex items-center px-2 sm:px-3 py-1 sm:py-2 bg-button-primary-background border border-button-primary-border rounded-md font-medium text-xs sm:text-sm text-button-primary-text hover:bg-button-primary-background-hover active:bg-button-primary-background-hover focus:outline-none focus-visible:ring-2 focus-visible:border-transparent focus-visible:ring-ring transition ease-in-out duration-150">
+        class="inline-flex items-center px-2 sm:px-3 py-1 sm:py-2 bg-accent-300/10 border border-accent-300/20 rounded-md font-medium text-xs sm:text-sm text-white hover:bg-accent-300/20 active:bg-accent-300/20 focus:outline-none focus-visible:ring-2 focus-visible:border-transparent focus-visible:ring-ring transition ease-in-out duration-150">
         <span
             :class="
                 twMerge('flex items-center ', props.icon ? 'space-x-1.5' : '')

resources/js/packages/ui/src/Buttons/SecondaryButton.vue

@@ -31,7 +31,7 @@ const sizeClasses = {
         :disabled="loading"
         :class="
             twMerge(
-                'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-text-primary rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring focus:border-transparent disabled:opacity-25 ease-in-out',
+                'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring focus:border-transparent disabled:opacity-25 ease-in-out',
                 sizeClasses[props.size],
                 props.class
             )

resources/js/packages/ui/src/CardTitle.vue

@@ -10,7 +10,7 @@ defineProps<{
 <template>
     <div class="flex w-full items-center justify-between pb-2.5 lg:pb-4">
         <h3
-            class="text-text-primary font-semibold text-sm lg:text-base flex items-center space-x-2 lg:space-x-2.5">
+            class="text-white font-bold text-sm lg:text-base flex items-center space-x-2 lg:space-x-2.5">
             <component
                 :is="icon"
                 v-if="icon"

resources/js/packages/ui/src/Client/ClientDropdown.vue

@@ -136,7 +136,7 @@ const highlightedItem = computed(() => {
                 ref="searchInput"
                 :value="searchValue"
                 data-testid="client_dropdown_search"
-                class="bg-card-background border-0 placeholder-muted text-sm text-text-primary py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
                 placeholder="Search for a client..."
                 @input="updateSearchValue"
                 @keydown.enter="addClientIfNoneExists"
@@ -150,7 +150,7 @@ const highlightedItem = computed(() => {
                     class="bg-card-background-active"
                     @click="addClientIfNoneExists">
                     <div
-                        class="flex space-x-3 items-center px-4 py-3 text-xs text-text-primary font-medium border-t rounded-b-lg border-card-background-separator">
+                        class="flex space-x-3 items-center px-4 py-3 text-xs text-white font-medium border-t rounded-b-lg border-card-background-separator">
                         <PlusCircleIcon
                             class="w-5 flex-shrink-0"></PlusCircleIcon>
                         <span>Add "{{ searchValue }}" as a new Client</span>

resources/js/packages/ui/src/Client/ClientDropdownItem.vue

@@ -19,7 +19,7 @@ const iconClasses = computed(() => {
 
 <template>
     <div
-        class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+        class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
         <CheckCircleIcon :class="twMerge(iconClasses, 'w-5')"></CheckCircleIcon>
         <span>{{ name }}</span>
     </div>

resources/js/packages/ui/src/DialogModal.vue

@@ -30,7 +30,7 @@ const close = () => {
         :closeable="closeable"
         @close="close">
         <div class="px-6 py-4">
-            <div class="text-lg font-medium text-text-primary" role="heading">
+            <div class="text-lg font-medium text-white" role="heading">
                 <slot name="title" />
             </div>
 

resources/js/packages/ui/src/GroupedItemsCountButton.vue

@@ -15,7 +15,7 @@ const props = withDefaults(
 
 const expandedStatusClasses = computed(() => {
     if (props.expanded) {
-        return 'border-card-border border bg-card-background-active text-text-primary';
+        return 'border-card-border border bg-card-background-active text-white';
     }
     return 'border-card-border border bg-card-background hover:bg-card-background-active hover:text-text-primary transition text-muted';
 });

resources/js/packages/ui/src/Input/BillableToggleButton.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
 
 const iconColorClasses = computed(() => {
     if (active.value) {
-        return 'text-input-select-active focus:text-input-select-active-hover hover:text-input-select-active-hover';
+        return 'text-accent-300 focus:text-accent-200 hover:text-accent-200';
     } else {
         return 'text-icon-default focus:text-icon-active hover:text-icon-active';
     }

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -54,7 +54,7 @@ const emit = defineEmits(['changed']);
             :tabindex="tabindex"
             :class="
                 twMerge(
-                    'bg-input-background border text-text-primary border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
+                    'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
                     props.class
                 )
             "

resources/js/packages/ui/src/Input/DateRangePicker.vue

@@ -107,7 +107,7 @@ function setLastYear() {
             <button
                 class="px-2 py-1 bg-input-background border border-input-border font-medium rounded-lg flex items-center space-x-2">
                 <CalendarIcon class="w-5"></CalendarIcon>
-                <div class="text-text-primary">
+                <div class="text-white">
                     {{ formatDateLocalized(start) }}
                     <span class="px-1.5 text-muted">-</span>
                     {{ formatDateLocalized(end) }}
@@ -119,7 +119,7 @@ function setLastYear() {
                 <div
                     class="flex divide-x divide-border-secondary justify-between">
                     <div
-                        class="text-text-primary text-sm flex flex-col space-y-0.5 items-start py-2 [&_button:hover]:bg-tertiary [&_button]:rounded [&_button]:px-2 [&_button]:py-1">
+                        class="text-white text-sm flex flex-col space-y-0.5 items-start py-2 [&_button:hover]:bg-tertiary [&_button]:rounded [&_button]:px-2 [&_button]:py-1">
                         <button @click="setToday">Today</button>
                         <button @click="setThisWeek">This Week</button>
                         <button @click="setLastWeek">Last Week</button>

resources/js/packages/ui/src/Input/Dropdown.vue

@@ -94,7 +94,7 @@ const { floatingStyles } = useFloating(reference, floating, {
 
 <template>
     <div class="min-w-0 isolate">
-        <div ref="reference" class="min-w-0 flex items-center" @click.prevent="toggleOpen">
+        <div ref="reference" class="min-w-0" @click.prevent="toggleOpen">
             <slot name="trigger" />
         </div>
 
@@ -118,7 +118,7 @@ const { floatingStyles } = useFloating(reference, floating, {
                     :style="floatingStyles"
                     @click="onContentClick">
                     <div
-                        class="rounded-lg overflow-hidden relative border border-card-border overflow-none shadow-dropdown bg-card-background">
+                        class="rounded-lg ring-1 relative ring-black ring-opacity-5 border border-card-border overflow-none shadow-dropdown bg-card-background">
                         <slot name="content" />
                     </div>
                 </div>