fix styling inconsistencies

resources/js/Components/CurrentSidebarTimer.vue

@@ -51,7 +51,7 @@ const isRunningInDifferentOrganization = computed(() => {
         <TimeTrackerStartStop
             :active="isActive"
             size="base"
-            variant="outline"
+            variant="secondary"
             @changed="setActiveState"></TimeTrackerStartStop>
     </div>
 </template>

resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue

@@ -65,9 +65,11 @@ async function startTaskTimer() {
                 </div>
             </ProjectBadge>
         </div>
-        <div class="flex items-center justify-center">
+        <div class="flex items-center justify-end pr-1">
             <TimeTrackerStartStop
-                variant="outline"
+                variant="secondary"
+                size="base"
+                class="w-9 h-9"
                 @changed="startTaskTimer"></TimeTrackerStartStop>
         </div>
     </div>

resources/js/Pages/Time.vue

@@ -159,7 +159,7 @@ function deleteSelected() {
             </div>
             <div
                 v-else-if="!hasNextPage"
-                class="flex justify-center items-center py-5 text-text-secondary font-medium">
+                class="flex justify-center items-center py-5 text-sm text-text-tertiary">
                 All time entries are loaded!
             </div>
         </div>

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

@@ -17,7 +17,7 @@ const expandedStatusClasses = computed(() => {
     if (props.expanded) {
         return 'border-card-border border bg-quaternary text-text-primary';
     }
-    return 'border-card-border border hover:bg-tertiary hover:text-text-primary transition text-text-secondary';
+    return 'border-card-border bg-secondary border hover:bg-tertiary hover:text-text-primary transition text-text-secondary';
 });
 </script>
 

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

@@ -10,13 +10,11 @@ const timeTrackerVariants = cva(
                 primary:
                     'text-white ring-accent-200/10 focus-visible:ring-ring focus-visible:ring-2 ring-4 sm:ring-[6px]',
                 secondary:
-                    'bg-tertiary text-text-tertiary hover:text-text-primary focus:ring-2 focus:ring-border-tertiary',
-                outline:
-                    'border border-border-primary text-text-tertiary hover:text-text-primary hover:bg-tertiary/50',
+                    'bg-quaternary text-text-tertiary hover:text-text-primary focus:ring-2 focus:ring-border-tertiary',
             },
             size: {
                 small: 'w-6 h-6',
-                base: 'w-9 h-9 hover:scale-110',
+                base: 'w-8 h-8',
                 large: 'w-11 h-11 hover:scale-110',
             },
             active: {