change dashboard card colors and input background colors

Author: Onatcer

resources/js/Components/Dashboard/DashboardCard.vue

@@ -1,8 +1,7 @@
 <template>
     <section class="flex flex-col">
         <CardTitle :title="title" :icon="icon"></CardTitle>
-        <div
-            class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch shadow-card">
+        <div class="rounded-lg border border-card-border flex-1 flex items-stretch">
             <div class="w-full flex flex-col">
                 <slot></slot>
             </div>

resources/js/Pages/Dashboard.vue

@@ -35,7 +35,7 @@ const refreshDashboardData = () => {
         </MainContainer>
 
         <MainContainer
-            class="grid gap-5 sm:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-3 sm:pt-5 pb-4 sm:pb-6 border-b border-default-background-separator items-stretch">
+            class="grid gap-2 sm:gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-3 sm:pt-5 pb-4 sm:pb-6 border-b border-default-background-separator items-stretch">
             <RecentlyTrackedTasksCard></RecentlyTrackedTasksCard>
             <LastSevenDaysCard></LastSevenDaysCard>
             <ActivityGraphCard></ActivityGraphCard>

resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue

@@ -548,7 +548,7 @@ onUnmounted(() => {
 }
 
 .fullcalendar :deep(.fc-day-today.fc-col-header-cell) {
-    background-color: var(--color-accent-default);
+    background-color: var(--color-bg-secondary);
 }
 
 .fullcalendar :deep(.fc-day-today) {

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

@@ -52,7 +52,7 @@ watch(open, (value) => {
             </PopoverTrigger>
             <PopoverContent
                 :align="align"
-                class="rounded-lg overflow-hidden relative border border-card-border overflow-none shadow-dropdown bg-card-background"
+                class="rounded-lg overflow-hidden relative border border-card-border overflow-none shadow-dropdown bg-secondary"
                 @open-auto-focus="handleAutofocus"
                 @click="onContentClick">
                 <slot name="content" />

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

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div class="px-3 sm:px-4 lg:px-8 3xl:px-12 mx-auto">
+    <div class="px-3 sm:px-4 lg:px-6 mx-auto">
         <slot></slot>
     </div>
 </template>

resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue

@@ -207,7 +207,7 @@ useSelectEvents(
 <template>
     <div class="flex items-center relative @container" data-testid="dashboard_timer">
         <div
-            class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
+            class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-secondary border-card-border border transition shadow-card">
             <div class="flex flex-1 items-center pr-6 relative">
                 <input
                     ref="currentTimeEntryDescriptionInput"

resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue

@@ -154,7 +154,7 @@ function closeAndFocusInput() {
                     v-model="currentTime"
                     placeholder="00:00:00"
                     data-testid="time_entry_time"
-                    class="w-[110px] lg:w-[130px] h-full text-text-primary py-2.5 rounded-lg border-border-secondary border text-center px-4 text-base lg:text-lg font-semibold bg-card-background border-none placeholder-text-tertiary focus:ring-0 transition"
+                    class="w-[110px] lg:w-[130px] h-full text-text-primary py-2.5 rounded-lg border-border-secondary border text-center px-4 text-base lg:text-lg font-semibold bg-secondary border-none placeholder-text-tertiary focus:ring-0 transition"
                     type="text"
                     @focusin="openModalOnTab"
                     @click="openModalOnClick"

resources/js/packages/ui/styles.css

@@ -33,7 +33,7 @@
     --theme-color-chart: var(--color-accent-200);
 
     --theme-color-menu-active: var(--color-bg-secondary);
-    --theme-color-card-background: var(--color-bg-secondary);
+    --theme-color-card-background: var(--color-bg-primary);
     --theme-shadow-card: 0 4px 7px 0px rgb(0 0 0 / 15%);
     --theme-shadow-dropdown: 0 4px 7px 0px rgb(0 0 0 / 40%);
 
@@ -51,7 +51,7 @@
     --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-background: transparent;
 
     --theme-color-input-select-active: rgb(var(--color-accent-300));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-200));
@@ -98,7 +98,7 @@
     --theme-color-button-primary-border: rgba(var(--color-accent-600), 1);
     --theme-color-button-primary-text: #ffffff;
 
-    --theme-color-input-background: var(--color-bg-primary);
+    --theme-color-input-background: transparent;
 
     --theme-color-input-select-active: rgb(var(--color-accent-400));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-500));
@@ -187,7 +187,7 @@ body {
         --foreground: var(--color-text-primary);
         --card: var(--theme-color-card-background);
         --card-foreground: var(--color-text-primary);
-        --popover: var(--theme-color-card-background);
+        --popover: var(--color-bg-tertiary);
         --popover-foreground: var(--color-text-primary);
         --primary: var(--color-bg-primary);
         --primary-foreground: var(--color-text-primary);