atash/chronus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Cleaned up the theme a bit

Browse Source
This commit is contained in:
Atridad Lahiji
2026-02-14 01:11:01 -07:00
parent e99e042eea
commit 6233380682
38 changed files with 126 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Avatar.astro
View File

@@ -9,7 +9,7 @@ const initial = name ? name.charAt(0).toUpperCase() : '?';
---
<div class:list={["avatar placeholder", className]}>
<div class="bg-primary/15 text-primary w-9 h-9 rounded-full flex items-center justify-center">
<div class="bg-base-300 text-primary w-9 h-9 rounded-full flex items-center justify-center">
<span class="text-sm font-semibold">{initial}</span>
</div>
</div>

16
src/components/ManualEntry.vue
View File

@@ -148,7 +148,7 @@ function clearForm() {
<template>
<div
class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 hover:border-base-300 transition-all duration-200"
class="card bg-base-200 backdrop-blur-sm shadow-lg border border-base-content/20 hover:border-base-content/20 transition-all duration-200"
>
<div class="card-body gap-6">
<div class="flex justify-between items-center">
@@ -183,7 +183,7 @@ function clearForm() {
<select
id="manual-client"
v-model="selectedClientId"
class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
class="select select-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
:disabled="isSubmitting"
>
<option value="">Select a client...</option>
@@ -203,7 +203,7 @@ function clearForm() {
id="manual-start-date"
v-model="startDate"
type="date"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
:disabled="isSubmitting"
/>
</div>
@@ -216,7 +216,7 @@ function clearForm() {
id="manual-start-time"
v-model="startTime"
type="time"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
:disabled="isSubmitting"
/>
</div>
@@ -232,7 +232,7 @@ function clearForm() {
id="manual-end-date"
v-model="endDate"
type="date"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
:disabled="isSubmitting"
/>
</div>
@@ -245,7 +245,7 @@ function clearForm() {
id="manual-end-time"
v-model="endTime"
type="time"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
:disabled="isSubmitting"
/>
</div>
@@ -261,7 +261,7 @@ function clearForm() {
v-model="description"
type="text"
placeholder="What did you work on?"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
:disabled="isSubmitting"
/>
</div>
@@ -278,7 +278,7 @@ function clearForm() {
'badge badge-lg cursor-pointer transition-all hover:scale-105',
selectedTagId === tag.id
? 'badge-primary shadow-lg shadow-primary/20'
: 'badge-outline hover:bg-base-300/50',
: 'badge-outline hover:bg-base-300',
]"
:disabled="isSubmitting"
type="button"

4
src/components/StatCard.astro
View File

@@ -18,12 +18,12 @@ const { title, value, description, icon, color = 'text-primary', valueClass } =
<div class="flex items-center justify-between">
<span class="text-xs font-medium uppercase tracking-wider text-base-content/60">{title}</span>
{icon && (
<div class:list={[color, "opacity-40"]}>
<div class:list={[color, "opacity-70"]}>
<Icon name={icon} class="w-5 h-5" />
</div>
)}
</div>
<div class:list={["text-2xl font-bold", color, valueClass]}>{value}</div>
{description && <div class="text-xs text-base-content/50">{description}</div>}
{description && <div class="text-xs text-base-content/60">{description}</div>}
</div>
</div>

25
src/components/ThemeToggle.vue
View File

@@ -1,34 +1,31 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Icon from './Icon.vue';
import { ref, onMounted } from "vue";
import Icon from "./Icon.vue";
const theme = ref('macchiato');
const theme = ref("sunset");
onMounted(() => {
const stored = localStorage.getItem('theme');
const stored = localStorage.getItem("theme");
if (stored) {
theme.value = stored;
document.documentElement.setAttribute('data-theme', stored);
document.documentElement.setAttribute("data-theme", stored);
}
});
function toggleTheme() {
const newTheme = theme.value === 'macchiato' ? 'latte' : 'macchiato';
const newTheme = theme.value === "sunset" ? "winter" : "sunset";
theme.value = newTheme;
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
document.documentElement.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
}
</script>
<template>
<button
@click="toggleTheme"
<button
@click="toggleTheme"
class="btn btn-ghost btn-circle"
aria-label="Toggle Theme"
>
<Icon
:name="theme === 'macchiato' ? 'moon' : 'sun'"
class="w-5 h-5"
/>
<Icon :name="theme === 'sunset' ? 'moon' : 'sun'" class="w-5 h-5" />
</button>
</template>

8
src/components/Timer.vue
View File

@@ -118,7 +118,7 @@ async function stopTimer() {
<template>
<div
class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 mb-6 hover:border-base-300 transition-all duration-200"
class="card bg-base-200 backdrop-blur-sm shadow-lg border border-base-content/20 mb-6 hover:border-base-content/20 transition-all duration-200"
>
<div class="card-body gap-6">
<!-- Client Row -->
@@ -129,7 +129,7 @@ async function stopTimer() {
<select
id="timer-client"
v-model="selectedClientId"
class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
class="select select-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
:disabled="isRunning"
>
<option value="">Select a client...</option>
@@ -149,7 +149,7 @@ async function stopTimer() {
v-model="description"
type="text"
placeholder="What are you working on?"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
class="input input-bordered w-full bg-base-300 hover:bg-base-300 focus:bg-base-300 border-base-content/20 focus:border-primary transition-colors"
:disabled="isRunning"
/>
</div>
@@ -166,7 +166,7 @@ async function stopTimer() {
'badge badge-lg cursor-pointer transition-all hover:scale-105',
selectedTagId === tag.id
? 'badge-primary shadow-lg shadow-primary/20'
: 'badge-outline hover:bg-base-300/50',
: 'badge-outline hover:bg-base-300',
]"
:disabled="isRunning"
type="button"

2
src/components/settings/ApiTokenManager.vue
View File

@@ -107,7 +107,7 @@ function closeShowTokenModal() {
<template>
<div>
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card bg-base-100 shadow-xl border border-base-content/20 mb-6">
<div class="card-body p-4 sm:p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="card-title text-lg sm:text-xl">

2
src/components/settings/PasskeyManager.vue
View File

@@ -94,7 +94,7 @@ async function deletePasskey(id: string) {
</script>
<template>
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card bg-base-100 shadow-xl border border-base-content/20 mb-6">
<div class="card-body p-4 sm:p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="card-title text-lg sm:text-xl">

2
src/components/settings/PasswordForm.vue
View File

@@ -86,7 +86,7 @@ async function changePassword() {
<span>{{ message.text }}</span>
</div>
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card bg-base-100 shadow-xl border border-base-content/20 mb-6">
<div class="card-body p-4 sm:p-6">
<h2 class="card-title mb-6 text-lg sm:text-xl">
<Icon name="key" class="w-5 h-5 sm:w-6 sm:h-6" />

2
src/components/settings/ProfileForm.vue
View File

@@ -71,7 +71,7 @@ async function updateProfile() {
<span>{{ message.text }}</span>
</div>
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card bg-base-100 shadow-xl border border-base-content/20 mb-6">
<div class="card-body p-4 sm:p-6">
<h2 class="card-title mb-6 text-lg sm:text-xl">
<Icon name="user-circle" class="w-5 h-5 sm:w-6 sm:h-6" />