From 5a05ee35e0787e4e0a1f7d9e660414648a896c0d Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Fri, 9 Jan 2026 01:16:23 +0100
Subject: [PATCH] change dashboard card colors and input background colors

---
 resources/js/Components/Dashboard/DashboardCard.vue       | 3 +--
 resources/js/Pages/Dashboard.vue                          | 2 +-
 .../js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue | 2 +-
 resources/js/packages/ui/src/Input/Dropdown.vue           | 2 +-
 resources/js/packages/ui/src/MainContainer.vue            | 2 +-
 .../packages/ui/src/TimeTracker/TimeTrackerControls.vue   | 2 +-
 .../ui/src/TimeTracker/TimeTrackerRangeSelector.vue       | 2 +-
 resources/js/packages/ui/styles.css                       | 8 ++++----
 8 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/resources/js/Components/Dashboard/DashboardCard.vue b/resources/js/Components/Dashboard/DashboardCard.vue
index c5f43c31..ecb8d3da 100644
--- a/resources/js/Components/Dashboard/DashboardCard.vue
+++ b/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>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 325cb2b0..88f1fbbb 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/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>
diff --git a/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue b/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue
index 4a54434a..f6e124dc 100644
--- a/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue
+++ b/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) {
diff --git a/resources/js/packages/ui/src/Input/Dropdown.vue b/resources/js/packages/ui/src/Input/Dropdown.vue
index 003d9c46..3283eb9c 100644
--- a/resources/js/packages/ui/src/Input/Dropdown.vue
+++ b/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" />
diff --git a/resources/js/packages/ui/src/MainContainer.vue b/resources/js/packages/ui/src/MainContainer.vue
index b0a52fdc..430683f3 100644
--- a/resources/js/packages/ui/src/MainContainer.vue
+++ b/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>
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
index 0c469c2b..cd974bd6 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
+++ b/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"
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
index b1a3f178..4ed01613 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
+++ b/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"
diff --git a/resources/js/packages/ui/styles.css b/resources/js/packages/ui/styles.css
index f9d4c640..eda9be4e 100644
--- a/resources/js/packages/ui/styles.css
+++ b/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);