From b783ea9ecd765c70eed9f4c81ec5c2078f91b8a1 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 27 Jan 2025 14:12:56 +0100
Subject: [PATCH] improve focus state styling

---
 .../Common/Report/ReportTableRow.vue          |   2 +-
 .../Common/Reporting/ReportingExportModal.vue |   2 +-
 resources/js/Pages/ReportingDetailed.vue      |   6 +-
 resources/js/Pages/ReportingShared.vue        |   6 +-
 resources/js/packages/ui/src/Badge.vue        |  10 +-
 .../packages/ui/src/Buttons/PrimaryButton.vue |   2 +-
 .../ui/src/Buttons/SecondaryButton.vue        |   2 +-
 .../ui/src/GroupedItemsCountButton.vue        |   4 +-
 .../ui/src/Input/BillableToggleButton.vue     |   4 +-
 .../js/packages/ui/src/Input/Checkbox.vue     |   2 +-
 .../js/packages/ui/src/Input/TextInput.vue    |   2 +-
 .../ui/src/Input/TimePickerSimple.vue         | 119 +++++++++
 .../ui/src/Input/TimeRangeSelector.vue        |  14 +-
 .../packages/ui/src/MoreOptionsDropdown.vue   |   4 +-
 resources/js/packages/ui/src/Tag/TagBadge.vue |   6 +-
 .../src/TimeEntry/TimeEntryAggregateRow.vue   |  22 +-
 .../TimeEntry/TimeEntryDescriptionInput.vue   |   2 +-
 .../src/TimeEntry/TimeEntryMassActionRow.vue  |   4 +-
 .../src/TimeEntry/TimeEntryRangeSelector.vue  |   4 +-
 .../ui/src/TimeEntry/TimeEntryRow.vue         |  23 +-
 .../TimeEntry/TimeEntryRowDurationInput.vue   |   2 +-
 .../ui/src/TimeEntry/TimeEntryRowHeading.vue  |   2 +-
 .../src/TimeEntry/TimeEntryRowTagDropdown.vue |   4 +-
 .../TimeTrackerProjectTaskDropdown.vue        | 240 +++++++++---------
 .../TimeTracker/TimeTrackerTagDropdown.vue    |   2 +-
 .../packages/ui/src/TimeTrackerStartStop.vue  |   6 +-
 tailwind.config.js                            |   1 +
 27 files changed, 319 insertions(+), 178 deletions(-)
 create mode 100644 resources/js/packages/ui/src/Input/TimePickerSimple.vue

diff --git a/resources/js/Components/Common/Report/ReportTableRow.vue b/resources/js/Components/Common/Report/ReportTableRow.vue
index 71624c16..bac9492c 100644
--- a/resources/js/Components/Common/Report/ReportTableRow.vue
+++ b/resources/js/Components/Common/Report/ReportTableRow.vue
@@ -87,7 +87,7 @@ async function deleteReport() {
                     <span v-else>Copied!</span>
                 </SecondaryButton>
                 <button
-                    class="outline-0 focus-visible:ring-2 w-6 h-6 flex items-center justify-center rounded focus-visible:ring-white/80"
+                    class="outline-0 focus-visible:ring-2 w-6 h-6 flex items-center justify-center rounded focus-visible:ring-ring"
                     @click="openSharableLink">
                     <ArrowTopRightOnSquareIcon
                         class="w-4 text-text-tertiary hover:text-text-secondary transition"></ArrowTopRightOnSquareIcon>
diff --git a/resources/js/Components/Common/Reporting/ReportingExportModal.vue b/resources/js/Components/Common/Reporting/ReportingExportModal.vue
index 68a990c5..8460c77c 100644
--- a/resources/js/Components/Common/Reporting/ReportingExportModal.vue
+++ b/resources/js/Components/Common/Reporting/ReportingExportModal.vue
@@ -25,7 +25,7 @@ function downloadCurrentExport() {
         @close="showExportModal = false"
         :show="showExportModal">
         <button
-            class="text-text-tertiary w-6 mx-auto absolute focus-visible:outline-none focus-visible:ring-2 rounded-full focus-visible:ring-white/80 transition focus-visible:text-text-primary hover:text-text-primary top-2 right-2">
+            class="text-text-tertiary w-6 mx-auto absolute focus-visible:outline-none focus-visible:ring-2 rounded-full focus-visible:ring-ring transition focus-visible:text-text-primary hover:text-text-primary top-2 right-2">
             <XMarkIcon @click="showExportModal = false"></XMarkIcon>
         </button>
         <div class="text-center text-text-primary py-6">
diff --git a/resources/js/Pages/ReportingDetailed.vue b/resources/js/Pages/ReportingDetailed.vue
index c644049c..31ab62e7 100644
--- a/resources/js/Pages/ReportingDetailed.vue
+++ b/resources/js/Pages/ReportingDetailed.vue
@@ -485,13 +485,13 @@ async function downloadExport(format: ExportFormat) {
 </template>
 <style lang="postcss">
 .navigation-item {
-    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary 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-white/80;
+    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary 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 {
-    @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-white/80;
+    @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-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-white/80 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>
diff --git a/resources/js/Pages/ReportingShared.vue b/resources/js/Pages/ReportingShared.vue
index 316c6bbe..92efa929 100644
--- a/resources/js/Pages/ReportingShared.vue
+++ b/resources/js/Pages/ReportingShared.vue
@@ -174,13 +174,13 @@ watch(currentPage, () => {
 </template>
 <style lang="postcss">
 .navigation-item {
-    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary 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-white/80;
+    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary 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 {
-    @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-white/80;
+    @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-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-white/80 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>
diff --git a/resources/js/packages/ui/src/Badge.vue b/resources/js/packages/ui/src/Badge.vue
index 24674f77..9761b37b 100644
--- a/resources/js/packages/ui/src/Badge.vue
+++ b/resources/js/packages/ui/src/Badge.vue
@@ -30,6 +30,13 @@ const borderClasses = computed(() => {
     }
     return '';
 });
+
+const tagClasses = computed(() => {
+    if (props.tag === 'button') {
+        return 'hover:bg-tertiary';
+    }
+    return '';
+});
 </script>
 
 <template>
@@ -37,9 +44,10 @@ const borderClasses = computed(() => {
         :is="tag"
         :class="
             twMerge(
+                tagClasses,
                 badgeClasses[size],
                 borderClasses,
-                'rounded 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-white/80',
+                '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
             )
         ">
diff --git a/resources/js/packages/ui/src/Buttons/PrimaryButton.vue b/resources/js/packages/ui/src/Buttons/PrimaryButton.vue
index d938bf0c..2e2d1bc7 100644
--- a/resources/js/packages/ui/src/Buttons/PrimaryButton.vue
+++ b/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-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:ring-2 focus:ring-indigo-500 focus:ring-offset-2 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' : '')
diff --git a/resources/js/packages/ui/src/Buttons/SecondaryButton.vue b/resources/js/packages/ui/src/Buttons/SecondaryButton.vue
index 1a9d80c5..21b1d833 100644
--- a/resources/js/packages/ui/src/Buttons/SecondaryButton.vue
+++ b/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-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:border-input-border-active focus:outline-none focus:ring-0 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
             )
diff --git a/resources/js/packages/ui/src/GroupedItemsCountButton.vue b/resources/js/packages/ui/src/GroupedItemsCountButton.vue
index 1a8d66e9..c0caaffc 100644
--- a/resources/js/packages/ui/src/GroupedItemsCountButton.vue
+++ b/resources/js/packages/ui/src/GroupedItemsCountButton.vue
@@ -17,7 +17,7 @@ const expandedStatusClasses = computed(() => {
     if (props.expanded) {
         return 'border-card-border border bg-card-background-active text-white';
     }
-    return 'border-card-border border bg-card-background text-muted';
+    return 'border-card-border border bg-card-background hover:bg-card-background-active hover:text-text-primary transition text-muted';
 });
 </script>
 
@@ -25,7 +25,7 @@ const expandedStatusClasses = computed(() => {
     <button
         :class="
             twMerge(
-                'font-medium rounded flex items-center transition justify-center',
+                'font-medium rounded flex items-center transition justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent',
                 expandedStatusClasses,
                 props.size
             )
diff --git a/resources/js/packages/ui/src/Input/BillableToggleButton.vue b/resources/js/packages/ui/src/Input/BillableToggleButton.vue
index a6bd777d..a2db38cb 100644
--- a/resources/js/packages/ui/src/Input/BillableToggleButton.vue
+++ b/resources/js/packages/ui/src/Input/BillableToggleButton.vue
@@ -35,7 +35,7 @@ const iconSizeClasses = computed(() => {
 });
 
 const iconSizeWrapperClasses =
-    props.size === 'small' ? 'w-6 sm:w-8 h-6 sm:h-8' : 'w-11 h-11';
+    props.size === 'small' ? 'w-6 sm:w-8 h-6 sm:h-8' : 'w-10 h-10';
 </script>
 
 <template>
@@ -45,7 +45,7 @@ const iconSizeWrapperClasses =
             twMerge(
                 iconColorClasses,
                 iconSizeWrapperClasses,
-                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
+                'flex-shrink-0 ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
             )
         ">
         <BillableIcon :class="iconSizeClasses"></BillableIcon>
diff --git a/resources/js/packages/ui/src/Input/Checkbox.vue b/resources/js/packages/ui/src/Input/Checkbox.vue
index e8633514..519b526d 100644
--- a/resources/js/packages/ui/src/Input/Checkbox.vue
+++ b/resources/js/packages/ui/src/Input/Checkbox.vue
@@ -35,5 +35,5 @@ const proxyChecked = computed({
         type="checkbox"
         :id="id"
         :value="value"
-        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
+        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:outline-none focus:ring-ring/50 focus-visible:outline-none focus-visible:ring-ring/50" />
 </template>
diff --git a/resources/js/packages/ui/src/Input/TextInput.vue b/resources/js/packages/ui/src/Input/TextInput.vue
index f29d9f1b..351324ac 100644
--- a/resources/js/packages/ui/src/Input/TextInput.vue
+++ b/resources/js/packages/ui/src/Input/TextInput.vue
@@ -24,7 +24,7 @@ const model = defineModel();
         ref="input"
         :class="
             twMerge(
-                'border-input-border border bg-input-background text-white focus:ring-input-border-active focus:ring-0 focus-visible:border-input-border-active rounded-md shadow-sm',
+                'border-input-border border bg-input-background text-white focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
                 props.class
             )
         "
diff --git a/resources/js/packages/ui/src/Input/TimePickerSimple.vue b/resources/js/packages/ui/src/Input/TimePickerSimple.vue
new file mode 100644
index 00000000..40a71ebb
--- /dev/null
+++ b/resources/js/packages/ui/src/Input/TimePickerSimple.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
+import { useFocus } from '@vueuse/core';
+import { TextInput } from '@/packages/ui/src';
+import { twMerge } from 'tailwind-merge';
+
+// This has to be a localized timestamp, not UTC
+const model = defineModel<string | null>({
+    default: null,
+});
+
+const props = withDefaults(
+    defineProps<{
+        size: 'base' | 'large';
+        focus: boolean;
+    }>(),
+    {
+        size: 'base',
+        focus: false,
+    }
+);
+
+function updateTime(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const newValue = target.value.trim();
+    if (newValue.split(':').length === 2) {
+        const [hours, minutes] = newValue.split(':');
+        if (!isNaN(parseInt(hours)) && !isNaN(parseInt(minutes))) {
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
+        }
+    }
+    // check if input is only numbers
+    else if (/^\d+$/.test(newValue)) {
+        if (newValue.length === 4) {
+            // parse 1300 to 13:00
+            const [hours, minutes] = [
+                newValue.slice(0, 2),
+                newValue.slice(2, 4),
+            ];
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
+        } else if (newValue.length === 3) {
+            // parse 130 to 01:30
+            const [hours, minutes] = [
+                newValue.slice(0, 1),
+                newValue.slice(1, 3),
+            ];
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
+        } else if (newValue.length === 2) {
+            // parse 13 to 13:00
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(newValue), 23))
+                .set('minutes', 0)
+                .format();
+            emit('changed', model.value);
+        } else if (newValue.length === 1) {
+            // parse 1 to 01:00
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(newValue), 23))
+                .set('minutes', 0)
+                .format();
+            emit('changed', model.value);
+        }
+    }
+
+    inputValue.value = getLocalizedDayJs(model.value).format('HH:mm');
+}
+
+watch(model, (value) => {
+    inputValue.value = value ? getLocalizedDayJs(value).format('HH:mm') : null;
+});
+
+const timeInput = ref<HTMLInputElement | null>(null);
+const emit = defineEmits(['changed']);
+
+useFocus(timeInput, { initialValue: props.focus });
+
+const inputValue = ref(
+    model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null
+);
+const open = ref(false);
+</script>
+
+<template>
+    <TextInput
+        v-bind="$attrs"
+        v-model="inputValue"
+        ref="timeInput"
+        :class="
+            twMerge('text-center w-24 px-3 py-2', size === 'large' && 'w-28')
+        "
+        @blur="updateTime"
+        @keydown.enter="
+            updateTime($event);
+            open = false;
+        "
+        @keydown.tab="open = false"
+        @focus="($event.target as HTMLInputElement).select()"
+        @mouseup="($event.target as HTMLInputElement).select()"
+        @click="($event.target as HTMLInputElement).select()"
+        @pointerup="($event.target as HTMLInputElement).select()"
+        @focusin="open = true"
+        data-testid="time_picker_input"
+        type="text" />
+</template>
+
+<style scoped></style>
diff --git a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
index 756bca2f..30c9c644 100644
--- a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
+++ b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { defineProps, ref, watch } from 'vue';
-import TimePicker from '@/packages/ui/src/Input/TimePicker.vue';
 import { useFocusWithin } from '@vueuse/core';
 import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import {
@@ -8,6 +7,7 @@ import {
     getLocalizedDayJs,
 } from '@/packages/ui/src/utils/time';
 import dayjs from 'dayjs';
+import TimePickerSimple from '@/packages/ui/src/Input/TimePickerSimple.vue';
 
 const props = defineProps<{
     start: string;
@@ -16,7 +16,7 @@ const props = defineProps<{
 }>();
 
 // The timestamps for the changed event are UTC
-const emit = defineEmits(['changed']);
+const emit = defineEmits(['changed', 'close']);
 
 const tempStart = ref(
     props.start ? getLocalizedDayJs(props.start).format() : dayjs().format()
@@ -58,24 +58,26 @@ watch(focused, (newValue, oldValue) => {
         <div class="px-2">
             <div class="font-bold text-white text-sm pb-2">Start</div>
             <div class="space-y-2">
-                <TimePicker
+                <TimePickerSimple
                     data-testid="time_entry_range_start"
+                    tabindex="0"
                     :focus
                     @changed="updateTimeEntry"
-                    v-model="tempStart"></TimePicker>
+                    v-model="tempStart"></TimePickerSimple>
                 <DatePicker
                     class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
                     @changed="updateTimeEntry"
+                    @blur.stop.prevent="emit('close')"
                     v-model="tempStart"></DatePicker>
             </div>
         </div>
         <div class="px-2">
             <div class="font-bold text-white text-sm pb-2">End</div>
             <div v-if="tempEnd !== null" class="space-y-2">
-                <TimePicker
+                <TimePickerSimple
                     data-testid="time_entry_range_end"
                     @changed="updateTimeEntry"
-                    v-model="tempEnd"></TimePicker>
+                    v-model="tempEnd"></TimePickerSimple>
                 <DatePicker
                     class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
                     @changed="updateTimeEntry"
diff --git a/resources/js/packages/ui/src/MoreOptionsDropdown.vue b/resources/js/packages/ui/src/MoreOptionsDropdown.vue
index ac82851e..708f64e9 100644
--- a/resources/js/packages/ui/src/MoreOptionsDropdown.vue
+++ b/resources/js/packages/ui/src/MoreOptionsDropdown.vue
@@ -10,10 +10,10 @@ defineProps<{
     <Dropdown align="bottom-end">
         <template #trigger>
             <button
-                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity text-muted"
+                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity text-muted"
                 :aria-label="label">
                 <svg
-                    class="h-10 w-10 p-2 rounded-full"
+                    class="h-8 w-8 p-1 rounded-full"
                     viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                     <path
diff --git a/resources/js/packages/ui/src/Tag/TagBadge.vue b/resources/js/packages/ui/src/Tag/TagBadge.vue
index 10be350d..4b501f90 100644
--- a/resources/js/packages/ui/src/Tag/TagBadge.vue
+++ b/resources/js/packages/ui/src/Tag/TagBadge.vue
@@ -28,10 +28,8 @@ const indicatorClasses = {
 
 <template>
     <Badge :name :size :tag :class="props.class" :color :border>
-        <TagIcon
-            :style="{ color: color }"
-            :class="twMerge(indicatorClasses[size])"></TagIcon>
-        <span>
+        <TagIcon :class="twMerge(indicatorClasses[size])"></TagIcon>
+        <span v-if="name">
             {{ name }}
         </span>
     </Badge>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
index 1d18fffb..e4bd5eeb 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
@@ -23,6 +23,7 @@ import {
 import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
 import GroupedItemsCountButton from '@/packages/ui/src/GroupedItemsCountButton.vue';
 import type { TimeEntriesGroupedByType } from '@/types/time-entries';
+import { Checkbox } from '@/packages/ui/src';
 
 const props = defineProps<{
     timeEntry: TimeEntriesGroupedByType;
@@ -76,6 +77,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
 }
 
 const expanded = ref(false);
+
 function onSelectChange(event: Event) {
     const target = event.target as HTMLInputElement;
     if (target.checked) {
@@ -92,10 +94,10 @@ function onSelectChange(event: Event) {
         data-testid="time_entry_row">
         <MainContainer class="min-w-0">
             <div
-                class="sm:flex py-0.5 items-center min-w-0 justify-between group">
+                class="sm:flex py-2 items-center min-w-0 justify-between group">
                 <div class="flex space-x-3 items-center min-w-0">
-                    <input
-                        @change="onSelectChange"
+                    <Checkbox
+                        @update:checked="onSelectChange"
                         :checked="
                             timeEntry.timeEntries.every(
                                 (aggregateTimeEntry: TimeEntry) =>
@@ -103,9 +105,7 @@ function onSelectChange(event: Event) {
                                         aggregateTimeEntry
                                     )
                             )
-                        "
-                        type="checkbox"
-                        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
+                        " />
                     <div class="flex items-center min-w-0">
                         <GroupedItemsCountButton
                             :expanded="expanded"
@@ -113,7 +113,7 @@ function onSelectChange(event: Event) {
                             {{ timeEntry?.timeEntries?.length }}
                         </GroupedItemsCountButton>
                         <TimeEntryDescriptionInput
-                            class="min-w-0"
+                            class="min-w-0 mr-4"
                             @changed="updateTimeEntryDescription"
                             :modelValue="
                                 timeEntry.description
@@ -130,6 +130,7 @@ function onSelectChange(event: Event) {
                             :project="timeEntry.project_id"
                             :enableEstimatedTime
                             :currency="currency"
+                            class="border border-border-primary"
                             :task="
                                 timeEntry.task_id
                             "></TimeTrackerProjectTaskDropdown>
@@ -143,6 +144,7 @@ function onSelectChange(event: Event) {
                         :modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
                     <BillableToggleButton
                         :modelValue="timeEntry.billable"
+                        class="opacity-50 focus-visible:opacity-100 group-hover:opacity-100"
                         size="small"
                         @changed="
                             updateTimeEntryBillable
@@ -150,13 +152,13 @@ function onSelectChange(event: Event) {
                     <div class="flex-1">
                         <button
                             @click="expanded = !expanded"
-                            class="hidden lg:block text-muted w-[110px] px-2 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium">
+                            class="hidden lg:block text-muted w-[105px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary">
                             {{ formatStartEnd(timeEntry.start, timeEntry.end) }}
                         </button>
                     </div>
                     <button
                         @click="expanded = !expanded"
-                        class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold">
+                        class="text-white min-w-[90px] px-2 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary">
                         {{
                             formatHumanReadableDuration(timeEntry.duration ?? 0)
                         }}
@@ -165,7 +167,7 @@ function onSelectChange(event: Event) {
                     <TimeTrackerStartStop
                         @changed="onStartStopClick(timeEntry)"
                         :active="!!(timeEntry.start && !timeEntry.end)"
-                        class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
+                        class="opacity-20 hidden sm:flex group-hover:opacity-100 focus-visible:opacity-100"></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="
                             deleteTimeEntries(timeEntry?.timeEntries ?? [])
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
index 6436037f..09805d2a 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
@@ -36,7 +36,7 @@ const displaysPlaceholder = computed(() => {
         <div class="relative text-sm font-medium min-w-0">
             <div
                 :class="[
-                    'opacity-0 py-2 text-sm whitespace-pre min-w-0 pl-3 pr-1',
+                    'opacity-0 h-4 text-sm whitespace-pre font-medium min-w-0 pl-3 pr-1',
                     { 'min-w-[130px]': displaysPlaceholder },
                 ]">
                 {{ liveDataValue }}
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue
index 5f8b0160..a0bb13a3 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue
@@ -88,14 +88,14 @@ const showMassUpdateModal = ref(false);
             >Select All</InputLabel
         >
         <button
-            class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-white/80 rounded h-full px-2"
+            class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-ring rounded h-full px-2"
             @click="showMassUpdateModal = true"
             v-if="selectedTimeEntries.length">
             <PencilSquareIcon class="w-4"></PencilSquareIcon>
             <span> Edit </span>
         </button>
         <button
-            class="text-red-400 h-full px-2 space-x-1 items-center flex hover:text-red-500 transition focus-visible:ring-2 outline-0 focus-visible:text-red-500 focus-visible:ring-white/80 rounded"
+            class="text-red-400 h-full px-2 space-x-1 items-center flex hover:text-red-500 transition focus-visible:ring-2 outline-0 focus-visible:text-red-500 focus-visible:ring-ring rounded"
             @click="deleteSelected"
             v-if="selectedTimeEntries.length">
             <TrashIcon class="w-3.5"></TrashIcon>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
index 017c30ef..2834e021 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
@@ -33,10 +33,10 @@ const open = ref(false);
                     data-testid="time_entry_range_selector"
                     :class="
                         twMerge(
-                            'text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
+                            'text-muted w-[105px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:text-text-primary focus-visible:ring-ring focus-visible:bg-tertiary',
                             showDate
                                 ? 'text-xs py-1.5 font-semibold'
-                                : 'text-sm py-2 font-medium',
+                                : 'text-sm py-1.5 font-medium',
                             open && 'border-card-border bg-card-background'
                         )
                     ">
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
index c79a7680..b00085c2 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
@@ -19,6 +19,7 @@ import TimeEntryMoreOptionsDropdown from '@/packages/ui/src/TimeEntry/TimeEntryM
 import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
 import { computed } from 'vue';
 import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
+import { Checkbox } from '@/packages/ui/src';
 
 const props = defineProps<{
     timeEntry: TimeEntry;
@@ -96,16 +97,15 @@ function onSelectChange(event: Event) {
         data-testid="time_entry_row">
         <MainContainer class="min-w-0">
             <div
-                class="sm:flex py-0.5 min-w-0 items-center justify-between group">
-                <div class="flex space-x-1 items-center min-w-0">
-                    <input
-                        @change="onSelectChange"
-                        :checked="selected"
-                        type="checkbox"
-                        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
-                    <div class="w-7 h-7" v-if="indent === true"></div>
+                class="sm:flex py-2 min-w-0 items-center justify-between group">
+                <div class="flex items-center min-w-0">
+                    <Checkbox
+                        @update:checked="onSelectChange"
+                        :checked="selected" />
+                    <div class="w-10 h-7" v-if="indent === true"></div>
                     <TimeEntryDescriptionInput
                         @changed="updateTimeEntryDescription"
+                        class="min-w-0 mr-4"
                         :modelValue="
                             timeEntry.description
                         "></TimeEntryDescriptionInput>
@@ -120,12 +120,14 @@ function onSelectChange(event: Event) {
                         @changed="updateProjectAndTask"
                         :project="timeEntry.project_id"
                         :currency="currency"
+                        class="border border-border-primary"
                         :enableEstimatedTime
                         :task="
                             timeEntry.task_id
                         "></TimeTrackerProjectTaskDropdown>
                 </div>
-                <div class="flex items-center font-medium lg:space-x-2">
+                <div
+                    class="flex items-center font-medium space-x-1 lg:space-x-2">
                     <div class="text-sm px-2" v-if="showMember && members">
                         {{ memberName }}
                     </div>
@@ -136,6 +138,7 @@ function onSelectChange(event: Event) {
                         :modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
                     <BillableToggleButton
                         :modelValue="timeEntry.billable"
+                        class="opacity-50 group-hover:opacity-100 focus-visible:opacity-100"
                         size="small"
                         @changed="
                             updateTimeEntryBillable
@@ -159,7 +162,7 @@ function onSelectChange(event: Event) {
                     <TimeTrackerStartStop
                         @changed="onStartStopClick"
                         :active="!!(timeEntry.start && !timeEntry.end)"
-                        class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
+                        class="opacity-20 hidden sm:flex focus-visible:opacity-100 group-hover:opacity-100"></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="
                             deleteTimeEntry
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
index e50beb51..ed8b0011 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
@@ -71,7 +71,7 @@ function selectInput(event: Event) {
         <template #trigger>
             <input
                 data-testid="time_entry_duration_input"
-                class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-white/80"
+                class="text-white w-[90px] px-2 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
                 @focus="selectInput"
                 @keydown.tab="open = false"
                 @blur="updateTimerAndStartLiveTimerUpdate"
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
index 5fd05ab8..b02516ce 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
@@ -56,7 +56,7 @@ function selectUnselectAll(value: boolean) {
                         {{ formatDate(date) }}
                     </span>
                 </div>
-                <div class="text-muted pr-[90px] lg:pr-[108px]">
+                <div class="text-muted pr-[90px] lg:pr-[92px]">
                     <span class="font-semibold">
                         {{ formatHumanReadableDuration(duration) }}
                     </span>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue
index f1ab9926..78e913a3 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue
@@ -31,11 +31,11 @@ const timeEntryTags = computed<Tag[]>(() => {
         <template #trigger>
             <button
                 data-testid="time_entry_tag_dropdown"
-                class="opacity-50 group-hover:opacity-100 transition">
+                class="opacity-50 group-hover:opacity-100 group/dropdown focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center">
                 <TagBadge
                     :border="false"
                     size="large"
-                    class="border-0"
+                    class="border-0 sm:px-1.5 text-icon-default group-focus-within/dropdown:text-text-primary"
                     :name="
                         timeEntryTags.map((tag: Tag) => tag.name).join(', ')
                     "></TagBadge>
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index 3bca421a..0640b583 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -32,6 +32,7 @@ const project = defineModel<string | null>('project', {
 const searchInput = ref<HTMLInputElement | null>(null);
 const open = ref(false);
 const dropdownViewport = ref<HTMLElement | null>(null);
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component';
 
 const searchValue = ref('');
 
@@ -586,132 +587,139 @@ const showCreateProject = ref(false);
             </ProjectBadge>
         </template>
         <template #content>
-            <input
-                :value="searchValue"
-                @input="updateSearchValue"
-                @keydown.enter="addClientIfNoneExists"
-                @click.prevent="searchInput?.focus()"
-                data-testid="client_dropdown_search"
-                @keydown.up.prevent="moveHighlightUp"
-                @keydown.down.prevent="moveHighlightDown"
-                @keydown.right.prevent="expandProject"
-                @keydown.left.prevent="collapseProject"
-                ref="searchInput"
-                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 project or task..." />
-            <div
-                ref="dropdownViewport"
-                @mousemove="mouseEnterHighlightActivated = true"
-                class="min-w-[350px] max-h-[350px] overflow-y-scroll relative">
-                <template v-for="client in filteredResults" :key="client.id">
-                    <div
-                        v-if="client.id !== 'no_project_no_client'"
-                        class="w-full pb-1 pt-2 px-2 text-text-tertiary text-xs font-semibold flex space-x-1 items-center">
-                        <span>
-                            {{ client.name }}
-                        </span>
-                    </div>
+            <UseFocusTrap
+                v-if="open"
+                :options="{ immediate: true, allowOutsideClick: true }">
+                <input
+                    :value="searchValue"
+                    @input="updateSearchValue"
+                    @keydown.enter.prevent="addClientIfNoneExists"
+                    data-testid="client_dropdown_search"
+                    @keydown.up.prevent="moveHighlightUp"
+                    @keydown.down.prevent="moveHighlightDown"
+                    @keydown.right.prevent="expandProject"
+                    @keydown.left.prevent="collapseProject"
+                    ref="searchInput"
+                    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 project or task..." />
+                <div
+                    ref="dropdownViewport"
+                    @mousemove="mouseEnterHighlightActivated = true"
+                    class="min-w-[350px] max-h-[350px] overflow-y-scroll relative">
                     <template
-                        v-for="projectWithTasks in client.projects"
-                        :key="projectWithTasks.id">
+                        v-for="client in filteredResults"
+                        :key="client.id">
                         <div
-                            role="option"
-                            class="px-1 py-0.5 cursor-default"
-                            :value="projectWithTasks.id"
-                            @click="selectProject(projectWithTasks.id)"
-                            :data-project-id="projectWithTasks.id">
+                            v-if="client.id !== 'no_project_no_client'"
+                            class="w-full pb-1 pt-2 px-2 text-text-tertiary text-xs font-semibold flex space-x-1 items-center">
+                            <span>
+                                {{ client.name }}
+                            </span>
+                        </div>
+                        <template
+                            v-for="projectWithTasks in client.projects"
+                            :key="projectWithTasks.id">
                             <div
-                                class="rounded-lg"
-                                :class="{
-                                    'bg-card-background-active':
-                                        projectWithTasks.id ===
-                                        highlightedItemId,
-                                }">
-                                <ProjectDropdownItem
-                                    class="hover:!bg-transparent"
-                                    :selected="
-                                        isProjectSelected(projectWithTasks)
-                                    "
-                                    @mouseenter="
-                                        setHighlightItemId(projectWithTasks.id)
-                                    "
-                                    :name="projectWithTasks.name"
-                                    :color="projectWithTasks.color">
-                                    <template #actions>
-                                        <button
-                                            tabindex="-1"
-                                            v-if="
-                                                projectWithTasks.tasks.length >
-                                                0
-                                            "
-                                            @click.prevent.stop="
-                                                () => {
-                                                    projectWithTasks.expanded =
-                                                        !projectWithTasks.expanded;
-                                                    searchInput?.focus();
-                                                }
-                                            "
-                                            class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs"
-                                            :class="{
-                                                'bg-white/5 text-text-secondary':
-                                                    projectWithTasks.expanded,
-                                                'hover:bg-white/5 hover:text-text-secondary text-text-tertiary':
-                                                    !projectWithTasks.expanded,
-                                            }">
-                                            <span
-                                                >{{
+                                role="option"
+                                class="px-1 py-0.5 cursor-default"
+                                :value="projectWithTasks.id"
+                                @click="selectProject(projectWithTasks.id)"
+                                :data-project-id="projectWithTasks.id">
+                                <div
+                                    class="rounded-lg"
+                                    :class="{
+                                        'bg-card-background-active':
+                                            projectWithTasks.id ===
+                                            highlightedItemId,
+                                    }">
+                                    <ProjectDropdownItem
+                                        class="hover:!bg-transparent"
+                                        :selected="
+                                            isProjectSelected(projectWithTasks)
+                                        "
+                                        @mouseenter="
+                                            setHighlightItemId(
+                                                projectWithTasks.id
+                                            )
+                                        "
+                                        :name="projectWithTasks.name"
+                                        :color="projectWithTasks.color">
+                                        <template #actions>
+                                            <button
+                                                tabindex="-1"
+                                                v-if="
                                                     projectWithTasks.tasks
-                                                        .length
-                                                }}
-                                                Tasks</span
-                                            >
-                                            <ChevronDownIcon
+                                                        .length > 0
+                                                "
+                                                @click.prevent.stop="
+                                                    () => {
+                                                        projectWithTasks.expanded =
+                                                            !projectWithTasks.expanded;
+                                                        searchInput?.focus();
+                                                    }
+                                                "
+                                                class="px-2 py-0.5 mr-2 relative transition items-center rounded flex space-x-0.5 text-xs"
                                                 :class="{
-                                                    'transform rotate-180':
+                                                    'bg-white/5 text-text-secondary':
                                                         projectWithTasks.expanded,
-                                                }"
-                                                class="w-4"></ChevronDownIcon>
-                                        </button>
-                                    </template>
-                                </ProjectDropdownItem>
+                                                    'hover:bg-white/5 hover:text-text-secondary text-text-tertiary':
+                                                        !projectWithTasks.expanded,
+                                                }">
+                                                <span
+                                                    >{{
+                                                        projectWithTasks.tasks
+                                                            .length
+                                                    }}
+                                                    Tasks</span
+                                                >
+                                                <ChevronDownIcon
+                                                    :class="{
+                                                        'transform rotate-180':
+                                                            projectWithTasks.expanded,
+                                                    }"
+                                                    class="w-4"></ChevronDownIcon>
+                                            </button>
+                                        </template>
+                                    </ProjectDropdownItem>
+                                </div>
                             </div>
-                        </div>
-                        <div
-                            v-if="projectWithTasks.expanded"
-                            class="bg-quaternary">
                             <div
-                                v-for="task in projectWithTasks.tasks"
-                                :key="task.id"
-                                @click="selectTask(task.id)"
-                                @mouseenter="setHighlightItemId(task.id)"
-                                :data-task-id="task.id"
-                                :class="{
-                                    'bg-card-background-active':
-                                        task.id === highlightedItemId,
-                                }"
-                                class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                                <MinusIcon
-                                    class="w-3 h-3 text-text-quaternary"></MinusIcon>
-                                <span>{{ task.name }}</span>
+                                v-if="projectWithTasks.expanded"
+                                class="bg-quaternary">
+                                <div
+                                    v-for="task in projectWithTasks.tasks"
+                                    :key="task.id"
+                                    @click="selectTask(task.id)"
+                                    @mouseenter="setHighlightItemId(task.id)"
+                                    :data-task-id="task.id"
+                                    :class="{
+                                        'bg-card-background-active':
+                                            task.id === highlightedItemId,
+                                    }"
+                                    class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                                    <MinusIcon
+                                        class="w-3 h-3 text-text-quaternary"></MinusIcon>
+                                    <span>{{ task.name }}</span>
+                                </div>
                             </div>
-                        </div>
+                        </template>
                     </template>
-                </template>
-            </div>
-            <div
-                v-if="canCreateProject"
-                class="hover:bg-card-background-active rounded-b-lg">
-                <button
-                    @click="
-                        open = false;
-                        showCreateProject = true;
-                    "
-                    class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator">
-                    <PlusCircleIcon
-                        class="w-5 flex-shrink-0 text-icon-default"></PlusCircleIcon>
-                    <span>Create new Project</span>
-                </button>
-            </div>
+                </div>
+                <div
+                    v-if="canCreateProject"
+                    class="hover:bg-card-background-active rounded-b-lg">
+                    <button
+                        @click="
+                            open = false;
+                            showCreateProject = true;
+                        "
+                        class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator">
+                        <PlusCircleIcon
+                            class="w-5 flex-shrink-0 text-icon-default"></PlusCircleIcon>
+                        <span>Create new Project</span>
+                    </button>
+                </div>
+            </UseFocusTrap>
         </template>
     </Dropdown>
     <ProjectCreateModal
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerTagDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerTagDropdown.vue
index e2f22b43..5055351b 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerTagDropdown.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerTagDropdown.vue
@@ -37,7 +37,7 @@ defineProps<{
                 :class="
                     twMerge(
                         iconColorClasses,
-                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus-visible:bg-card-background-separator hover:bg-card-background-separator rounded-full w-11 h-11 flex items-center justify-center'
+                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-2 focus:ring-ring transition focus-visible:bg-card-background-separator hover:bg-card-background-separator rounded-full w-10 h-10 flex items-center justify-center'
                     )
                 ">
                 <TagIcon class="w-5 h-5 lg:h-6 lg:w-6"></TagIcon>
diff --git a/resources/js/packages/ui/src/TimeTrackerStartStop.vue b/resources/js/packages/ui/src/TimeTrackerStartStop.vue
index 3f3dd6d6..8ac0320d 100644
--- a/resources/js/packages/ui/src/TimeTrackerStartStop.vue
+++ b/resources/js/packages/ui/src/TimeTrackerStartStop.vue
@@ -16,8 +16,8 @@ const props = withDefaults(
 );
 const buttonSizeClasses = {
     small: 'w-6 h-6 bg-accent-200/40 hover:bg-accent-300/70',
-    base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus-visible:ring-white/80 ring-4 hover:ring-4',
-    large: 'w-11 h-11 ring-accent-200/10 focus-visible:ring-white/80 ring-4 sm:ring-[6px] hover:scale-110',
+    base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus-visible:ring-ring ring-4 hover:ring-4',
+    large: 'w-11 h-11 ring-accent-200/10 focus-visible:ring-ring focus-visible:ring-2 ring-4 sm:ring-[6px] hover:scale-110',
 };
 const iconClass = {
     small: 'w-2.5 h-2.5',
@@ -29,7 +29,7 @@ const buttonColorClasses = computed(() => {
     if (props.active) {
         return 'bg-red-400/80 hover:bg-red-500/80 focus:bg-red-500/80';
     } else {
-        return 'bg-accent-300/70 hover:bg-accent-400/70 focus:bg-accent-500/70';
+        return 'bg-accent-300/70 hover:bg-accent-400/70 focus:bg-accent-700';
     }
 });
 
diff --git a/tailwind.config.js b/tailwind.config.js
index a19daeeb..159c239c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,6 +24,7 @@ export default {
                 sans: ['Outfit', ...defaultTheme.fontFamily.sans],
             },
             colors: {
+                'ring': 'rgba(255,255,255,0.5)',
                 'primary': 'var(--color-bg-primary)',
                 'secondary': 'var(--color-bg-secondary)',
                 'tertiary': 'var(--color-bg-tertiary)',