+
{{ message }}
Create your first client now!
{{ title }}
@@ -34,7 +34,7 @@
Add the first project member!
diff --git a/resources/js/Components/Common/Report/ReportTableHeading.vue b/resources/js/Components/Common/Report/ReportTableHeading.vue index ccbd5a8d..b4bb2eee 100644 --- a/resources/js/Components/Common/Report/ReportTableHeading.vue +++ b/resources/js/Components/Common/Report/ReportTableHeading.vue @@ -5,16 +5,16 @@ import TableHeading from '@/Components/Common/TableHeading.vue'; + class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"> Name - + Description - + Visibility - + Public URL diff --git a/resources/js/Components/Common/Report/ReportTableRow.vue b/resources/js/Components/Common/Report/ReportTableRow.vue index bac9492c..32667f6c 100644 --- a/resources/js/Components/Common/Report/ReportTableRow.vue +++ b/resources/js/Components/Common/Report/ReportTableRow.vue @@ -62,7 +62,7 @@ async function deleteReport() { :original-report="report"> + 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"> {{ report.name }} diff --git a/resources/js/Components/Common/Reporting/ReportingChart.vue b/resources/js/Components/Common/Reporting/ReportingChart.vue index 682f9554..3cdefa4b 100644 --- a/resources/js/Components/Common/Reporting/ReportingChart.vue +++ b/resources/js/Components/Common/Reporting/ReportingChart.vue @@ -1,6 +1,6 @@ @@ -158,7 +159,7 @@ const option = ref({ class="chart" :option="option" /> - + No time entries found Try to change the filters and time range diff --git a/resources/js/Components/Common/Reporting/ReportingFilterBadge.vue b/resources/js/Components/Common/Reporting/ReportingFilterBadge.vue index 2484e8fb..52eac01d 100644 --- a/resources/js/Components/Common/Reporting/ReportingFilterBadge.vue +++ b/resources/js/Components/Common/Reporting/ReportingFilterBadge.vue @@ -24,11 +24,11 @@ const activeClass = computed(() => { tag="button" :class=" twMerge( - 'cursor-pointer hover:bg-card-background transition flex', + 'cursor-pointer bg-input-background hover:bg-card-background transition flex', activeClass ) "> - + {{ title }} import VChart, { THEME_KEY } from 'vue-echarts'; -import { computed, provide, ref } from 'vue'; +import { computed, provide } from 'vue'; import { use } from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; import { PieChart } from 'echarts/charts'; @@ -11,6 +11,7 @@ import { TooltipComponent, } from 'echarts/components'; import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time'; +import { useCssVar } from "@vueuse/core"; use([ CanvasRenderer, @@ -32,6 +33,7 @@ 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) => { @@ -50,13 +52,16 @@ const seriesData = computed(() => { }; }); }); -const option = ref({ +const option = computed(() => ({ tooltip: { trigger: 'item', }, legend: { show: true, top: '250px', + textStyle: { + color: labelColor.value, + }, }, backgroundColor: 'transparent', series: [ @@ -69,13 +74,13 @@ const option = ref({ return formatHumanReadableDuration(value); }, }, - data: seriesData, + data: seriesData.value, radius: ['30%', '60%'], top: '-45%', type: 'pie', }, ], -}); +})); diff --git a/resources/js/Components/Common/Reporting/ReportingRow.vue b/resources/js/Components/Common/Reporting/ReportingRow.vue index 63ec536a..7759f752 100644 --- a/resources/js/Components/Common/Reporting/ReportingRow.vue +++ b/resources/js/Components/Common/Reporting/ReportingRow.vue @@ -26,7 +26,7 @@ const expanded = ref(false); + class="contents text-text-primary [&>*]:transition [&>*]:border-card-background-separator [&>*]:border-b [&>*]:h-[50px]"> - {{ title }} - + class="rounded-lg bg-card-background border-card-border shadow-card border px-3.5 py-2.5"> + {{ title }} + {{ value }} diff --git a/resources/js/Components/Common/TabBar/TabBarItem.vue b/resources/js/Components/Common/TabBar/TabBarItem.vue index efed8635..d268eae8 100644 --- a/resources/js/Components/Common/TabBar/TabBarItem.vue +++ b/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-white font-semibold'; + return 'bg-tab-background border border-tab-border text-text-primary 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-white 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-text-primary focus-visible:outline-none', activeClass ) "> diff --git a/resources/js/Components/Common/Tag/TagMoreOptionsDropdown.vue b/resources/js/Components/Common/Tag/TagMoreOptionsDropdown.vue index 361d3f51..6622e922 100644 --- a/resources/js/Components/Common/Tag/TagMoreOptionsDropdown.vue +++ b/resources/js/Components/Common/Tag/TagMoreOptionsDropdown.vue @@ -16,7 +16,7 @@ const props = defineProps<{ Delete diff --git a/resources/js/Components/Common/Tag/TagTable.vue b/resources/js/Components/Common/Tag/TagTable.vue index d02de7b2..6bbae8a4 100644 --- a/resources/js/Components/Common/Tag/TagTable.vue +++ b/resources/js/Components/Common/Tag/TagTable.vue @@ -33,7 +33,7 @@ const showCreateTagModal = ref(false); class="col-span-5 py-24 text-center"> - No tags found + No tags found Create your first tag now! diff --git a/resources/js/Components/Common/Tag/TagTableHeading.vue b/resources/js/Components/Common/Tag/TagTableHeading.vue index 93755b62..cd766166 100644 --- a/resources/js/Components/Common/Tag/TagTableHeading.vue +++ b/resources/js/Components/Common/Tag/TagTableHeading.vue @@ -5,7 +5,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue'; + class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"> Name diff --git a/resources/js/Components/Common/Tag/TagTableRow.vue b/resources/js/Components/Common/Tag/TagTableRow.vue index e113db08..8fae5759 100644 --- a/resources/js/Components/Common/Tag/TagTableRow.vue +++ b/resources/js/Components/Common/Tag/TagTableRow.vue @@ -17,7 +17,7 @@ function deleteTag() { + 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"> {{ tag.name }} diff --git a/resources/js/Components/Common/Task/TaskCreateModal.vue b/resources/js/Components/Common/Task/TaskCreateModal.vue index f69d5848..1dfcfd3a 100644 --- a/resources/js/Components/Common/Task/TaskCreateModal.vue +++ b/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 } from 'vue'; +import { ref, watch } from "vue"; import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue'; import { useFocus } from '@vueuse/core'; import { useTasksStore } from '@/utils/useTasks'; @@ -21,10 +21,16 @@ const props = defineProps<{ projectId: string; }>(); +const taskProjectId = ref(props.projectId); + +watch(() => props.projectId, (value) => { + taskProjectId.value = value; +}); + async function submit() { await createTask({ name: taskName.value, - project_id: props.projectId, + project_id: taskProjectId.value, estimated_time: estimatedTime.value, }); show.value = false; @@ -53,13 +59,13 @@ useFocus(taskNameInput, { initialValue: true }); v-model="taskName" type="text" placeholder="Task Name" - class="mt-1 block w-full" + class="block w-full" required autocomplete="taskName" @keydown.enter="submit()" /> - + @@ -33,7 +33,7 @@ const props = defineProps<{ Mark as active @@ -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-white 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-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out" @click="emit('delete')"> Delete diff --git a/resources/js/Components/Common/Task/TaskTable.vue b/resources/js/Components/Common/Task/TaskTable.vue index 5a175633..6f046a26 100644 --- a/resources/js/Components/Common/Task/TaskTable.vue +++ b/resources/js/Components/Common/Task/TaskTable.vue @@ -41,7 +41,7 @@ const createTask = ref(false); class="col-span-5 py-24 text-center"> - No tasks found + No tasks found Create your first task now! diff --git a/resources/js/Components/Common/Task/TaskTableHeading.vue b/resources/js/Components/Common/Task/TaskTableHeading.vue index 4afe5032..d48dc4b9 100644 --- a/resources/js/Components/Common/Task/TaskTableHeading.vue +++ b/resources/js/Components/Common/Task/TaskTableHeading.vue @@ -5,16 +5,16 @@ import TableHeading from '@/Components/Common/TableHeading.vue'; + class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"> Task Name - + Total Time - + Progress - Status + Status Edit diff --git a/resources/js/Components/Common/Task/TaskTableRow.vue b/resources/js/Components/Common/Task/TaskTableRow.vue index a1be457d..330fb258 100644 --- a/resources/js/Components/Common/Task/TaskTableRow.vue +++ b/resources/js/Components/Common/Task/TaskTableRow.vue @@ -33,7 +33,7 @@ const showTaskEditModal = ref(false); + 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"> {{ task.name }} diff --git a/resources/js/Components/ConfirmationModal.vue b/resources/js/Components/ConfirmationModal.vue index f645f9d8..622ded02 100644 --- a/resources/js/Components/ConfirmationModal.vue +++ b/resources/js/Components/ConfirmationModal.vue @@ -48,7 +48,7 @@ const close = () => { - + diff --git a/resources/js/Components/CurrentSidebarTimer.vue b/resources/js/Components/CurrentSidebarTimer.vue index a9a18945..75399b78 100644 --- a/resources/js/Components/CurrentSidebarTimer.vue +++ b/resources/js/Components/CurrentSidebarTimer.vue @@ -37,14 +37,14 @@ const isRunningInDifferentOrganization = computed(() => { - + The Timer is running in a different organization. Current Timer - + {{ currentTime }} diff --git a/resources/js/Components/Dashboard/ActivityGraphCard.vue b/resources/js/Components/Dashboard/ActivityGraphCard.vue index 1ea89f07..4b4b392f 100644 --- a/resources/js/Components/Dashboard/ActivityGraphCard.vue +++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue @@ -64,8 +64,9 @@ const max = computed(() => { } ); -const backgroundColor = useCssVar("--color-bg-secondary"); -const itemBackgroundColor = useCssVar("--color-bg-tertiary"); +const backgroundColor = useCssVar('--color-card-background', null, { observe: true }); +const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, { observe: true }); + const option = computed(() => { return { tooltip: {}, diff --git a/resources/js/Components/Dashboard/DayOverviewCardChart.vue b/resources/js/Components/Dashboard/DayOverviewCardChart.vue index 5f38f7d3..0de64a41 100644 --- a/resources/js/Components/Dashboard/DayOverviewCardChart.vue +++ b/resources/js/Components/Dashboard/DayOverviewCardChart.vue @@ -1,15 +1,15 @@ diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue index 2ee3bd76..6d7d3911 100644 --- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue +++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue @@ -82,7 +82,7 @@ window.addEventListener("dashboard:refresh", () => { - + No recent tasks found Create tasks inside of a project! @@ -97,7 +97,7 @@ window.addEventListener("dashboard:refresh", () => { - Add more tasks + Add more tasks Create tasks inside of a project! Go to Projects diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue index bebd9eeb..5b57ebf7 100644 --- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue +++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue @@ -49,7 +49,7 @@ async function startTaskTimer() { - + {{ timeEntry.description }} No description diff --git a/resources/js/Components/Dashboard/TeamActivityCard.vue b/resources/js/Components/Dashboard/TeamActivityCard.vue index f1807fed..88de3a85 100644 --- a/resources/js/Components/Dashboard/TeamActivityCard.vue +++ b/resources/js/Components/Dashboard/TeamActivityCard.vue @@ -51,7 +51,7 @@ const { data: latestTeamActivity, isLoading } = useQuery({ - + Invite your co-workers You can invite your entire team. diff --git a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue index c14bb922..5c3324a9 100644 --- a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue +++ b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue @@ -10,7 +10,7 @@ defineProps<{ - + {{ name }} { const daysOrder = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; @@ -47,7 +41,6 @@ const weekdays = computed(() => { saturday: "Sat", sunday: "Sun" }; - if (dayMapping[getWeekStart()]) { const customOrder = []; const startIndex = daysOrder.indexOf(dayMapping[getWeekStart()]); @@ -60,10 +53,11 @@ 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()); @@ -180,6 +174,8 @@ 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: { @@ -187,34 +183,35 @@ const option = computed(() => { }, grid: { top: 0, - right: 0, - bottom: 50, - left: 0 + right: 0, + bottom: 50, + left: 0 }, backgroundColor: "transparent", - xAxis: { - type: "category", + xAxis: { + type: "category", data: weekdays.value, axisLine: { - lineStyle: { - color: "transparent" // Set desired color here - } - }, - axisLabel: { - fontSize: 16, + 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 + fontFamily: "Outfit, sans-serif", + color: labelColor.value + }, + axisTick: { + lineStyle: { + color: "transparent" // Set desired color here + } } - } - }, + }, yAxis: { type: "value", - splitLine: { + splitLine: { lineStyle: { color: markLineColor.value } @@ -231,7 +228,7 @@ const option = computed(() => { } } ] - } + }; }); diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue index 28b09c83..a9ff415d 100644 --- a/resources/js/Components/DropdownLink.vue +++ b/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-white 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-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-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-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"> diff --git a/resources/js/Components/NavigationSidebarItem.vue b/resources/js/Components/NavigationSidebarItem.vue index 3cb16c22..4b10f63d 100644 --- a/resources/js/Components/NavigationSidebarItem.vue +++ b/resources/js/Components/NavigationSidebarItem.vue @@ -32,7 +32,7 @@ const open = useSessionStorage('nav-collapse-state-' + props.title, true); + 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"> - + diff --git a/resources/js/Components/TableRow.vue b/resources/js/Components/TableRow.vue index ba96d1ca..1c772220 100644 --- a/resources/js/Components/TableRow.vue +++ b/resources/js/Components/TableRow.vue @@ -14,7 +14,7 @@ defineProps<{ role="row" :class=" twMerge( - 'contents group [&>*]:transition [&>*]:border-row-separator [&>*]:border-b', + 'contents group [&>*]:transition [&>*]:border-row-separator [&>*]:bg-row-background [&>*]:border-b', href ? '[&>*]:cursor-pointer [&>*]:hover:bg-white/5' : '' ) "> diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue index c5a7caf4..78fa10b1 100644 --- a/resources/js/Layouts/AppLayout.vue +++ b/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 } from 'vue'; +import { onMounted, ref, watch } from "vue"; import NotificationContainer from '@/Components/NotificationContainer.vue'; import { initializeStores, refreshStores } from '@/utils/init'; import { @@ -36,6 +36,7 @@ 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, @@ -44,6 +45,13 @@ 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; diff --git a/resources/js/Pages/API/Index.vue b/resources/js/Pages/API/Index.vue index ca4b8912..97195ab7 100644 --- a/resources/js/Pages/API/Index.vue +++ b/resources/js/Pages/API/Index.vue @@ -13,7 +13,7 @@ defineProps<{ - + API Tokens diff --git a/resources/js/Pages/API/Partials/ApiTokenManager.vue b/resources/js/Pages/API/Partials/ApiTokenManager.vue index 7cb746cf..1f788849 100644 --- a/resources/js/Pages/API/Partials/ApiTokenManager.vue +++ b/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"> - + {{ token.name }} diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue index 0b7a3c4d..818f6a85 100644 --- a/resources/js/Pages/Auth/Login.vue +++ b/resources/js/Pages/Auth/Login.vue @@ -46,7 +46,7 @@ const page = usePage<{ - No account yet? Register here! + No account yet? Register here! @@ -89,7 +89,7 @@ const page = usePage<{ + 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"> Forgot your password? diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue index 38a93cc5..ce239ba9 100644 --- a/resources/js/Pages/Auth/Register.vue +++ b/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? - Login here! + Login here! diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue index 99a53f6b..b3c7af10 100644 --- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue +++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue @@ -70,7 +70,7 @@ const closeModal = () => { { - + {{ session.agent.platform ? session.agent.platform diff --git a/resources/js/Pages/Profile/Partials/ThemeForm.vue b/resources/js/Pages/Profile/Partials/ThemeForm.vue new file mode 100644 index 00000000..7bcfe0bd --- /dev/null +++ b/resources/js/Pages/Profile/Partials/ThemeForm.vue @@ -0,0 +1,45 @@ + + + + + Theme + + + Choose how you want solidtime to look on your device + + + + + + + + System + Light + Dark + + + System default: {{ preferredColor }} + + + + + + + + diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue index d5dc27ae..1c0ca031 100644 --- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue +++ b/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-white focus:border-input-border-active rounded-md shadow-sm"> + class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm"> Select a Timezone + class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm"> + Select a week day + + {{ weekdayTranslated }} + + + + + + + Select a week day - + Profile @@ -46,6 +47,12 @@ const page = usePage<{ + + + + + + diff --git a/resources/js/Pages/ProjectShow.vue b/resources/js/Pages/ProjectShow.vue index 04411ae7..aae23989 100644 --- a/resources/js/Pages/ProjectShow.vue +++ b/resources/js/Pages/ProjectShow.vue @@ -95,7 +95,7 @@ const shownTasks = computed(() => { + class="flex items-center space-x-3 text-text-primary font-semibold text-base"> diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue index ef9804e9..38ee1640 100644 --- a/resources/js/Pages/Reporting.vue +++ b/resources/js/Pages/Reporting.vue @@ -410,7 +410,7 @@ const tableData = computed(() => { + class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3"> Group by { - + No time entries found Try to change the filters and time range diff --git a/resources/js/Pages/ReportingDetailed.vue b/resources/js/Pages/ReportingDetailed.vue index c597ba3b..9c49bed4 100644 --- a/resources/js/Pages/ReportingDetailed.vue +++ b/resources/js/Pages/ReportingDetailed.vue @@ -421,7 +421,7 @@ async function downloadExport(format: ExportFormat) { - + No time entries found @@ -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-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; + @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; } diff --git a/resources/js/Pages/ReportingShared.vue b/resources/js/Pages/ReportingShared.vue index c24930e2..e0c811e8 100644 --- a/resources/js/Pages/ReportingShared.vue +++ b/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-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; + @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; } diff --git a/resources/js/Pages/SharedReport.vue b/resources/js/Pages/SharedReport.vue index 284bf30c..7caf2f8b 100644 --- a/resources/js/Pages/SharedReport.vue +++ b/resources/js/Pages/SharedReport.vue @@ -162,7 +162,7 @@ function getGroupLabel(key: string) { + class="text-sm flex text-text-primary items-center font-medium px-6 border-b border-card-background-separator pb-3"> Group by {{ getGroupLabel(group) }} and @@ -219,7 +219,7 @@ function getGroupLabel(key: string) { - + No time entries found Try to change the filters and time range diff --git a/resources/js/Pages/Teams/Create.vue b/resources/js/Pages/Teams/Create.vue index 3251bc73..3e99a616 100644 --- a/resources/js/Pages/Teams/Create.vue +++ b/resources/js/Pages/Teams/Create.vue @@ -6,7 +6,7 @@ import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue'; - + Create Organization diff --git a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue b/resources/js/Pages/Teams/Partials/CreateTeamForm.vue index 7c7389a6..e86e92f1 100644 --- a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue +++ b/resources/js/Pages/Teams/Partials/CreateTeamForm.vue @@ -47,7 +47,7 @@ const page = usePage<{ :alt="page.props.auth.user.name" /> - + {{ page.props.auth.user.name }} diff --git a/resources/js/Pages/Teams/Partials/ExportData.vue b/resources/js/Pages/Teams/Partials/ExportData.vue index 75f27ccb..f70e0165 100644 --- a/resources/js/Pages/Teams/Partials/ExportData.vue +++ b/resources/js/Pages/Teams/Partials/ExportData.vue @@ -89,7 +89,7 @@ async function exportData() { + class="py-6 flex-col items-center flex space-y-5 text-center text-sm"> The following organization will be exported: {{ diff --git a/resources/js/Pages/Teams/Partials/ImportData.vue b/resources/js/Pages/Teams/Partials/ImportData.vue index 1a8cd6f4..0f4eda80 100644 --- a/resources/js/Pages/Teams/Partials/ImportData.vue +++ b/resources/js/Pages/Teams/Partials/ImportData.vue @@ -142,7 +142,7 @@ const showResultModal = ref(false); - Clients created: + Clients created: {{ reportResult?.report.clients.created }} + class="px-4 py-5 sm:px-5"> + class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm"> Select an import type to get instructions... @@ -218,7 +218,7 @@ const showResultModal = ref(false); + class="mt-2 flex justify-center rounded-lg border border-dashed border-border-primary px-6 py-10"> + 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"> {{ filenames }} Upload a Toggl/Clockify Export { - + {{ team.owner.name }} @@ -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-white focus:border-input-border-active rounded-md shadow-sm"> + class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm"> Select a currency - + Organization Settings diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue index e81b510a..f6740daa 100644 --- a/resources/js/Pages/Time.vue +++ b/resources/js/Pages/Time.vue @@ -132,7 +132,7 @@ function deleteSelected() { :clients> + class="pt-5 lg:pt-8 pb-4 lg:pb-6"> @@ -191,13 +191,13 @@ function deleteSelected() { :tags="tags"> - No time entries found + No time entries found Create your first time entry now! + class="flex justify-center items-center py-5 text-text-primary font-medium"> Loading more time entries... diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue index b48ed13f..ce0935cb 100644 --- a/resources/js/Pages/Welcome.vue +++ b/resources/js/Pages/Welcome.vue @@ -23,21 +23,21 @@ const user = computed(() => page?.props?.auth?.user); + 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"> Dashboard Log in diff --git a/resources/js/packages/ui/src/Badge.vue b/resources/js/packages/ui/src/Badge.vue index 5982d2a7..3b1aa7fe 100644 --- a/resources/js/packages/ui/src/Badge.vue +++ b/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-white 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-text-primary 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 45a6471c..3c32ca5b 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( + 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="text-text-primary font-semibold text-sm lg:text-base flex items-center space-x-2 lg:space-x-2.5"> { ref="searchInput" :value="searchValue" data-testid="client_dropdown_search" - 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" + 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" placeholder="Search for a client..." @input="updateSearchValue" @keydown.enter="addClientIfNoneExists" @@ -150,7 +150,7 @@ const highlightedItem = computed(() => { class="bg-card-background-active" @click="addClientIfNoneExists"> + 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"> Add "{{ searchValue }}" as a new Client diff --git a/resources/js/packages/ui/src/Client/ClientDropdownItem.vue b/resources/js/packages/ui/src/Client/ClientDropdownItem.vue index 74d8a79f..812c592b 100644 --- a/resources/js/packages/ui/src/Client/ClientDropdownItem.vue +++ b/resources/js/packages/ui/src/Client/ClientDropdownItem.vue @@ -19,7 +19,7 @@ const iconClasses = computed(() => { + 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"> {{ name }} diff --git a/resources/js/packages/ui/src/DialogModal.vue b/resources/js/packages/ui/src/DialogModal.vue index bebab7a6..db888376 100644 --- a/resources/js/packages/ui/src/DialogModal.vue +++ b/resources/js/packages/ui/src/DialogModal.vue @@ -30,7 +30,7 @@ const close = () => { :closeable="closeable" @close="close"> - + diff --git a/resources/js/packages/ui/src/GroupedItemsCountButton.vue b/resources/js/packages/ui/src/GroupedItemsCountButton.vue index b70b8925..096bfd8d 100644 --- a/resources/js/packages/ui/src/GroupedItemsCountButton.vue +++ b/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-white'; + return 'border-card-border border bg-card-background-active text-text-primary'; } return 'border-card-border border bg-card-background hover:bg-card-background-active hover:text-text-primary transition text-muted'; }); diff --git a/resources/js/packages/ui/src/Input/BillableToggleButton.vue b/resources/js/packages/ui/src/Input/BillableToggleButton.vue index 257b8cc8..44226b47 100644 --- a/resources/js/packages/ui/src/Input/BillableToggleButton.vue +++ b/resources/js/packages/ui/src/Input/BillableToggleButton.vue @@ -20,7 +20,7 @@ const props = withDefaults( const iconColorClasses = computed(() => { if (active.value) { - return 'text-accent-300 focus:text-accent-200 hover:text-accent-200'; + return 'text-input-select-active focus:text-input-select-active-hover hover:text-input-select-active-hover'; } else { return 'text-icon-default focus:text-icon-active hover:text-icon-active'; } diff --git a/resources/js/packages/ui/src/Input/DatePicker.vue b/resources/js/packages/ui/src/Input/DatePicker.vue index 88aea11d..e75745d6 100644 --- a/resources/js/packages/ui/src/Input/DatePicker.vue +++ b/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-white border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md', + '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', props.class ) " diff --git a/resources/js/packages/ui/src/Input/DateRangePicker.vue b/resources/js/packages/ui/src/Input/DateRangePicker.vue index 42cebd22..7b503fe5 100644 --- a/resources/js/packages/ui/src/Input/DateRangePicker.vue +++ b/resources/js/packages/ui/src/Input/DateRangePicker.vue @@ -107,7 +107,7 @@ function setLastYear() { - + {{ formatDateLocalized(start) }} - {{ formatDateLocalized(end) }} @@ -119,7 +119,7 @@ function setLastYear() { + 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"> Today This Week Last Week diff --git a/resources/js/packages/ui/src/Input/Dropdown.vue b/resources/js/packages/ui/src/Input/Dropdown.vue index f05029ee..a694d856 100644 --- a/resources/js/packages/ui/src/Input/Dropdown.vue +++ b/resources/js/packages/ui/src/Input/Dropdown.vue @@ -118,7 +118,7 @@ const { floatingStyles } = useFloating(reference, floating, { :style="floatingStyles" @click="onContentClick"> + class="rounded-lg overflow-hidden relative border border-card-border overflow-none shadow-dropdown bg-card-background"> diff --git a/resources/js/packages/ui/src/Input/InputLabel.vue b/resources/js/packages/ui/src/Input/InputLabel.vue index ecd4d4f3..adbc12a2 100644 --- a/resources/js/packages/ui/src/Input/InputLabel.vue +++ b/resources/js/packages/ui/src/Input/InputLabel.vue @@ -9,7 +9,7 @@ const props = defineProps<{ + :class="twMerge('block font-medium text-sm text-text-primary', props.class)"> {{ value }} diff --git a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue index 8c252c5f..22d47986 100644 --- a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue +++ b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue @@ -159,7 +159,7 @@ const highlightedItem = computed(() => { { if (props.selected) { - return 'text-accent-200'; + return 'text-input-select-active'; } else { - return 'text-white/10'; + return 'text-text-quaternary opacity-50'; } }); + 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"> {{ name diff --git a/resources/js/packages/ui/src/Input/SelectDropdownItem.vue b/resources/js/packages/ui/src/Input/SelectDropdownItem.vue index 77b37790..3873b220 100644 --- a/resources/js/packages/ui/src/Input/SelectDropdownItem.vue +++ b/resources/js/packages/ui/src/Input/SelectDropdownItem.vue @@ -13,7 +13,7 @@ const props = defineProps<{ - + { - Start + Start { - End + End ({ default: '' }); - + + class="flex justify-between items-center w-full 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"> {{ formatHumanReadableDuration(timeEntry.duration ?? 0) diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue index 7ccf2146..f22f6d0c 100644 --- a/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue +++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue @@ -45,7 +45,7 @@ const displaysPlaceholder = computed(() => { data-testid="time_entry_description" :value="liveDataValue" placeholder="Add a description" - class="absolute px-0 h-full min-w-0 pl-3 pr-1 left-0 top-0 w-full text-sm text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" + class="absolute px-0 h-full min-w-0 pl-3 pr-1 left-0 top-0 w-full text-sm text-text-primary font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" @blur="onChange" @input="onInput" @keydown.enter="onChange" /> diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue index 3f12e149..4962e484 100644 --- a/resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue +++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue @@ -65,7 +65,7 @@ const showMassUpdateModal = ref(false); :class=" twMerge( props.class, - 'text-sm py-1.5 font-medium border-b border-t border-border-secondary flex items-center space-x-3' + 'text-sm py-1.5 font-medium border-t border-b bg-secondary border-border-secondary flex items-center space-x-3' ) "> Delete diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue index 21bd3ccc..4cdfacb4 100644 --- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue +++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue @@ -93,7 +93,7 @@ function onSelectChange(event: Event) { + class="bg-row-heading-background border-t border-b border-row-heading-border py-1 text-xs sm:text-sm"> @@ -49,7 +49,7 @@ function selectUnselectAll(value: boolean) { class="group-hover:block hidden" @update:checked="selectUnselectAll"> - + {{ formatWeekday(date) }} diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue index b174fb9d..c063540d 100644 --- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue +++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue @@ -211,7 +211,7 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries, v-model="tempDescription" placeholder="What are you working on?" data-testid="time_entry_description" - class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-white font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition" + class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-text-primary font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition" type="text" @keydown.enter="startTimerIfNotActive" @keydown.esc="showDropdown = false" @@ -222,7 +222,7 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries, class="z-50 w-full max-w-2xl" :style="floatingStyles"> + class="rounded-lg w-full fixed min-w-xl top-0 left-0 border border-card-border overflow-none shadow-dropdown bg-card-background"> Recently Tracked Time Entries diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue index 4d58ff07..c25f4ef5 100644 --- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue +++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue @@ -594,7 +594,7 @@ const showCreateProject = ref(false); ref="searchInput" :value="searchValue" data-testid="client_dropdown_search" - 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" + 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" placeholder="Search for a project or task..." @input="updateSearchValue" @keydown.enter.prevent="addClientIfNoneExists" @@ -694,7 +694,7 @@ const showCreateProject = ref(false); '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" + class="flex items-center space-x-2 w-full px-5 py-1.5 text-start text-xs font-semibold leading-5 text-text-primary focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out" @click="selectTask(task.id)" @mouseenter="setHighlightItemId(task.id)"> - + The Timer is running in a different organization. ({ }); const iconColorClasses = computed(() => { if (model.value.length > 0) { - return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200'; + return 'text-input-select-active focus:text-input-select-active-hover hover:text-input-select-active-hover'; } else { return 'text-icon-default hover:text-icon-active focus:text-icon-active'; } diff --git a/resources/js/utils/theme.ts b/resources/js/utils/theme.ts new file mode 100644 index 00000000..5b17a83c --- /dev/null +++ b/resources/js/utils/theme.ts @@ -0,0 +1,25 @@ +import { usePreferredColorScheme, useStorage } from "@vueuse/core"; +import { computed, watch } from "vue"; + +type themeOption = "system" | "light" | "dark"; +const themeSetting = useStorage("theme", "system"); +// reload page when themeSettingChanges +watch( + themeSetting, + () => { + location.reload(); + } +) +const preferredColor = usePreferredColorScheme(); +const theme = computed(() => { + if(themeSetting.value === "system"){ + console.log(preferredColor.value); + if (preferredColor.value === 'no-preference') { + return 'dark'; + } + return preferredColor.value; + } + return themeSetting.value +}); + +export { type themeOption, themeSetting, theme }; diff --git a/tailwind.config.js b/tailwind.config.js index 159c239c..8f2a9574 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,7 @@ import typography from '@tailwindcss/typography'; /** @type {import("tailwindcss").Config} */ export default { + darkMode: 'selector', content: [ './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', './vendor/laravel/jetstream/**/*.blade.php', @@ -14,8 +15,8 @@ export default { theme: { extend: { boxShadow: { - 'card': '0 4px 7px 0px rgb(0 0 0 / 30%)', - 'dropdown': '0 4px 7px 0px rgb(0 0 0 / 40%)', + 'card': 'var(--theme-shadow-card)', + 'dropdown': 'var(--theme-shadow-dropdown)', }, containers: { '2xs': '16rem', @@ -24,7 +25,7 @@ export default { sans: ['Outfit', ...defaultTheme.fontFamily.sans], }, colors: { - 'ring': 'rgba(255,255,255,0.5)', + 'ring': 'var(--theme-color-ring)', 'primary': 'var(--color-bg-primary)', 'secondary': 'var(--color-bg-secondary)', 'tertiary': 'var(--color-bg-tertiary)', @@ -40,6 +41,7 @@ export default { 'default-background': 'var(--theme-color-default-background)', 'default-background-separator': 'var(--theme-color-default-background-separator)', + 'row-background': 'var(--theme-color-row-background)', 'card-background': 'var(--theme-color-card-background)', 'card-background-active': 'var(--theme-color-card-background-active)', @@ -48,36 +50,44 @@ export default { 'card-border': 'var(--theme-color-card-border)', 'card-border-active': 'var(--theme-color-card-border-active)', 'muted': 'var(--theme-color-muted-text)', - 'icon-default': 'var(--theme-color-icon-default)', 'tab-background': 'var(--theme-color-tab-background)', 'tab-background-active': 'var(--theme-color-tab-background-active)', 'tab-border': 'var(--theme-color-tab-border)', + 'icon-default': 'var(--theme-color-icon-default)', 'icon-active': 'var(--theme-color-icon-active)', 'menu-active': 'var(--theme-color-menu-active)', 'input-border': 'var(--theme-color-input-border)', 'input-border-active': 'var(--color-input-border-active)', 'input-background': 'var(--theme-color-input-background)', 'button-secondary-background': - 'var(--theme-color-card-background)', + 'var(--theme-button-secondary-background)', 'button-secondary-background-hover': - 'var(--theme-color-card-background-active)', + 'var(--theme-button-secondary-background-active)', 'button-secondary-border': 'var(--theme-color-card-border)', 'row-separator': 'var(--theme-color-row-separator-background)', 'row-heading-background': 'var(--theme-color-row-heading-background)', 'row-heading-border': 'var(--theme-color-row-heading-border)', 'accent': { - '200': 'rgba(var(--color-accent-quaternary), )', - '300': 'rgba(var(--color-accent-tertiary), )', - '400': 'rgba(var(--color-accent-secondary), )', - '500': 'rgba(var(--color-accent-primary), )', - '600': 'rgba(2, 132, 199, )', - '700': 'rgba(3, 105, 161, )', - '800': 'rgba(7, 89, 133, )', - '900': 'rgba(12, 74, 110, )', - '950': 'rgba(8, 47, 73, )', - }, + '50': 'rgba(var(--color-accent-50), )', + '100': 'rgba(var(--color-accent-100), )', + '200': 'rgba(var(--color-accent-200), )', + '300': 'rgba(var(--color-accent-300), )', + '400': 'rgba(var(--color-accent-400), )', + '500': 'rgba(var(--color-accent-500), )', + '600': 'rgba(var(--color-accent-600), )', + '700': 'rgba(var(--color-accent-700), )', + '800': 'rgba(var(--color-accent-800), )', + '900': 'rgba(var(--color-accent-900), )', + '950': 'rgba(var(--color-accent-950), )', }, + 'button-primary-background': 'var(--theme-color-button-primary-background)', + 'button-primary-background-hover': + 'var(--theme-color-button-primary-background-hover)', + 'button-primary-border': 'var(--theme-color-button-primary-border)', + 'button-primary-text': 'var(--theme-color-button-primary-text)', + 'input-select-active':'var(--theme-color-input-select-active)', + 'input-select-active-hover':'var(--theme-color-input-select-active-hover)', }, }, },
No time entries found
Try to change the filters and time range
Create your first tag now!
Create your first task now!
Create tasks inside of a project!
{{ timeEntry.description }} No description
You can invite your entire team.
{{ name }}
+ System default: {{ preferredColor }} +
@@ -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-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; + @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; } diff --git a/resources/js/Pages/ReportingShared.vue b/resources/js/Pages/ReportingShared.vue index c24930e2..e0c811e8 100644 --- a/resources/js/Pages/ReportingShared.vue +++ b/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-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; + @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; } diff --git a/resources/js/Pages/SharedReport.vue b/resources/js/Pages/SharedReport.vue index 284bf30c..7caf2f8b 100644 --- a/resources/js/Pages/SharedReport.vue +++ b/resources/js/Pages/SharedReport.vue @@ -162,7 +162,7 @@ function getGroupLabel(key: string) {
Create your first time entry now!