lashman/zeroclock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

style: bump border-radius globally — rounded to rounded-lg, rounded-lg to rounded-xl

Browse Source
This commit is contained in:
Your Name
2026-02-17 21:56:48 +02:00
parent f3d9a938ac
commit f9542b6b7e
9 changed files with 69 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/NavRail.vue
View File

@@ -56,7 +56,7 @@ function navigate(path: string) {
<component :is="item.icon" class="w-[18px] h-[18px]" :stroke-width="1.5" /> <component :is="item.icon" class="w-[18px] h-[18px]" :stroke-width="1.5" />
<!-- Tooltip --> <!-- Tooltip -->
<div class="absolute left-full ml-2 px-2 py-1 bg-bg-elevated border border-border-subtle rounded text-[0.6875rem] text-text-primary whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-150 z-50"> <div class="absolute left-full ml-2 px-2 py-1 bg-bg-elevated border border-border-subtle rounded-lg text-[0.6875rem] text-text-primary whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-150 z-50">
<div class="absolute -left-1 top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-r-4" style="border-right-color: var(--color-bg-elevated)"></div> <div class="absolute -left-1 top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-r-4" style="border-right-color: var(--color-bg-elevated)"></div>
{{ item.name }} {{ item.name }}
</div> </div>

2
src/components/ToastNotification.vue
View File

@@ -11,7 +11,7 @@ const toastStore = useToastStore()
v-for="toast in toastStore.toasts" v-for="toast in toastStore.toasts"
:key="toast.id" :key="toast.id"
@click="toastStore.removeToast(toast.id)" @click="toastStore.removeToast(toast.id)"
class="w-80 flex items-center gap-3 px-4 py-3 bg-bg-surface border border-border-subtle rounded shadow-lg cursor-pointer pointer-events-auto border-l-[3px]" class="w-80 flex items-center gap-3 px-4 py-3 bg-bg-surface border border-border-subtle rounded-lg shadow-lg cursor-pointer pointer-events-auto border-l-[3px]"
:class="[ :class="[
toast.exiting ? 'animate-toast-exit' : 'animate-toast-enter', toast.exiting ? 'animate-toast-exit' : 'animate-toast-enter',
toast.type === 'success' ? 'border-l-status-running' : '', toast.type === 'success' ? 'border-l-status-running' : '',

2
src/views/Dashboard.vue
View File

@@ -5,7 +5,7 @@
<Clock class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" /> <Clock class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
<p class="text-sm text-text-secondary mt-4">Start tracking your time</p> <p class="text-sm text-text-secondary mt-4">Start tracking your time</p>
<p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Your dashboard will come alive with stats, charts, and recent activity once you start logging hours.</p> <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Your dashboard will come alive with stats, charts, and recent activity once you start logging hours.</p>
<router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors"> <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors">
Go to Timer Go to Timer
</router-link> </router-link>
</div> </div>

32
src/views/Entries.vue
View File

@@ -3,13 +3,13 @@
<h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Entries</h1> <h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Entries</h1>
<!-- Filters --> <!-- Filters -->
<div class="bg-bg-surface rounded p-4 mb-6 flex flex-wrap items-end gap-4"> <div class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
<div> <div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date</label> <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date</label>
<input <input
v-model="startDate" v-model="startDate"
type="date" type="date"
class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
<div> <div>
@@ -17,14 +17,14 @@
<input <input
v-model="endDate" v-model="endDate"
type="date" type="date"
class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
<div> <div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project</label> <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project</label>
<select <select
v-model="filterProject" v-model="filterProject"
class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
> >
<option :value="null">All Projects</option> <option :value="null">All Projects</option>
<option <option
@@ -38,7 +38,7 @@
</div> </div>
<button <button
@click="applyFilters" @click="applyFilters"
class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors duration-150" class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
> >
Apply Apply
</button> </button>
@@ -121,7 +121,7 @@
<ListIcon class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" /> <ListIcon class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
<p class="text-sm text-text-secondary mt-4">No entries found</p> <p class="text-sm text-text-secondary mt-4">No entries found</p>
<p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Time entries will appear here as you track your work. Try adjusting the date range if you have existing entries.</p> <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Time entries will appear here as you track your work. Try adjusting the date range if you have existing entries.</p>
<router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors"> <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors">
Go to Timer Go to Timer
</router-link> </router-link>
</div> </div>
@@ -132,7 +132,7 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="closeEditDialog" @click.self="closeEditDialog"
> >
<div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter">
<h2 class="text-[1rem] font-semibold text-text-primary mb-4">Edit Entry</h2> <h2 class="text-[1rem] font-semibold text-text-primary mb-4">Edit Entry</h2>
<form @submit.prevent="handleEdit" class="space-y-4"> <form @submit.prevent="handleEdit" class="space-y-4">
@@ -142,7 +142,7 @@
<select <select
v-model="editForm.project_id" v-model="editForm.project_id"
required required
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
> >
<option <option
v-for="project in projectsStore.projects" v-for="project in projectsStore.projects"
@@ -160,7 +160,7 @@
<input <input
v-model="editForm.description" v-model="editForm.description"
type="text" type="text"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="What did you work on?" placeholder="What did you work on?"
/> />
</div> </div>
@@ -172,7 +172,7 @@
v-model.number="durationMinutes" v-model.number="durationMinutes"
type="number" type="number"
min="1" min="1"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
@@ -182,7 +182,7 @@
<input <input
v-model="editForm.start_time" v-model="editForm.start_time"
type="datetime-local" type="datetime-local"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
@@ -191,13 +191,13 @@
<button <button
type="button" type="button"
@click="closeEditDialog" @click="closeEditDialog"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150" class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
> >
Save Save
</button> </button>
@@ -212,7 +212,7 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="cancelDelete" @click.self="cancelDelete"
> >
<div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
<h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Entry</h2> <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Entry</h2>
<p class="text-[0.75rem] text-text-secondary mb-6"> <p class="text-[0.75rem] text-text-secondary mb-6">
Are you sure you want to delete this time entry? This action cannot be undone. Are you sure you want to delete this time entry? This action cannot be undone.
@@ -220,13 +220,13 @@
<div class="flex justify-end gap-3"> <div class="flex justify-end gap-3">
<button <button
@click="cancelDelete" @click="cancelDelete"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Cancel Cancel
</button> </button>
<button <button
@click="handleDelete" @click="handleDelete"
class="px-4 py-2 border border-status-error text-status-error font-medium rounded hover:bg-status-error/10 transition-colors duration-150" class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
> >
Delete Delete
</button> </button>

30
src/views/Invoices.vue
View File

@@ -111,7 +111,7 @@
<p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Create invoices from your tracked time to bill clients.</p> <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Create invoices from your tracked time to bill clients.</p>
<button <button
@click="view = 'create'" @click="view = 'create'"
class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors"
> >
Create Invoice Create Invoice
</button> </button>
@@ -129,7 +129,7 @@
<select <select
v-model="createForm.client_id" v-model="createForm.client_id"
required required
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
> >
<option :value="0">Select a client</option> <option :value="0">Select a client</option>
<option <option
@@ -150,7 +150,7 @@
v-model="createForm.date" v-model="createForm.date"
type="date" type="date"
required required
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
<div> <div>
@@ -158,7 +158,7 @@
<input <input
v-model="createForm.due_date" v-model="createForm.due_date"
type="date" type="date"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
</div> </div>
@@ -173,7 +173,7 @@
min="0" min="0"
max="100" max="100"
step="0.01" step="0.01"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
<div> <div>
@@ -183,7 +183,7 @@
type="number" type="number"
min="0" min="0"
step="0.01" step="0.01"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
</div> </div>
@@ -194,13 +194,13 @@
<textarea <textarea
v-model="createForm.notes" v-model="createForm.notes"
rows="3" rows="3"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="Additional notes" placeholder="Additional notes"
></textarea> ></textarea>
</div> </div>
<!-- Calculated Total --> <!-- Calculated Total -->
<div class="bg-bg-inset rounded p-4"> <div class="bg-bg-inset rounded-lg p-4">
<div class="flex justify-between text-[0.75rem] text-text-secondary mb-2"> <div class="flex justify-between text-[0.75rem] text-text-secondary mb-2">
<span>Subtotal:</span> <span>Subtotal:</span>
<span class="font-mono">${{ calculateSubtotal().toFixed(2) }}</span> <span class="font-mono">${{ calculateSubtotal().toFixed(2) }}</span>
@@ -224,13 +224,13 @@
<button <button
type="button" type="button"
@click="view = 'list'" @click="view = 'list'"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150" class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
> >
Create Invoice Create Invoice
</button> </button>
@@ -244,7 +244,7 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="showDetailDialog = false" @click.self="showDetailDialog = false"
> >
<div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto animate-modal-enter"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto animate-modal-enter">
<div class="flex items-start justify-between mb-6"> <div class="flex items-start justify-between mb-6">
<div> <div>
<h2 class="text-[1.5rem] font-medium text-text-primary">{{ selectedInvoice?.invoice_number }}</h2> <h2 class="text-[1.5rem] font-medium text-text-primary">{{ selectedInvoice?.invoice_number }}</h2>
@@ -300,7 +300,7 @@
<div class="flex justify-end gap-3 mt-6"> <div class="flex justify-end gap-3 mt-6">
<button <button
@click="exportPDF(selectedInvoice!)" @click="exportPDF(selectedInvoice!)"
class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150" class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
> >
Export PDF Export PDF
</button> </button>
@@ -314,7 +314,7 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="showDeleteDialog = false" @click.self="showDeleteDialog = false"
> >
<div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
<h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Invoice</h2> <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Invoice</h2>
<p class="text-[0.75rem] text-text-secondary mb-6"> <p class="text-[0.75rem] text-text-secondary mb-6">
Are you sure you want to delete invoice "{{ invoiceToDelete?.invoice_number }}"? This action cannot be undone. Are you sure you want to delete invoice "{{ invoiceToDelete?.invoice_number }}"? This action cannot be undone.
@@ -322,13 +322,13 @@
<div class="flex justify-end gap-3"> <div class="flex justify-end gap-3">
<button <button
@click="showDeleteDialog = false" @click="showDeleteDialog = false"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Cancel Cancel
</button> </button>
<button <button
@click="handleDelete" @click="handleDelete"
class="px-4 py-2 border border-status-error text-status-error font-medium rounded hover:bg-status-error/10 transition-colors duration-150" class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
> >
Delete Delete
</button> </button>

30
src/views/Projects.vue
View File

@@ -5,7 +5,7 @@
<h1 class="text-[1.5rem] font-medium text-text-primary">Projects</h1> <h1 class="text-[1.5rem] font-medium text-text-primary">Projects</h1>
<button <button
@click="openCreateDialog" @click="openCreateDialog"
class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors duration-150" class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
> >
+ Add + Add
</button> </button>
@@ -16,10 +16,10 @@
<div <div
v-for="project in projectsStore.projects" v-for="project in projectsStore.projects"
:key="project.id" :key="project.id"
class="group bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] hover:bg-bg-elevated transition-all duration-150 cursor-pointer" class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] hover:bg-bg-elevated transition-all duration-150 cursor-pointer"
@click="openEditDialog(project)" @click="openEditDialog(project)"
> >
<div class="flex border-l-[2px] hover:border-l-[3px] rounded-l transition-all duration-150" :style="{ borderLeftColor: project.color }"> <div class="flex border-l-[2px] hover:border-l-[3px] rounded-l-lg transition-all duration-150" :style="{ borderLeftColor: project.color }">
<div class="flex-1 p-4"> <div class="flex-1 p-4">
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div> <div>
@@ -59,7 +59,7 @@
<p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Projects organize your time entries and set billing rates for clients.</p> <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Projects organize your time entries and set billing rates for clients.</p>
<button <button
@click="openCreateDialog" @click="openCreateDialog"
class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors"
> >
Create Project Create Project
</button> </button>
@@ -71,7 +71,7 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="closeDialog" @click.self="closeDialog"
> >
<div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter">
<h2 class="text-[1rem] font-semibold text-text-primary mb-4"> <h2 class="text-[1rem] font-semibold text-text-primary mb-4">
{{ editingProject ? 'Edit Project' : 'Create Project' }} {{ editingProject ? 'Edit Project' : 'Create Project' }}
</h2> </h2>
@@ -84,7 +84,7 @@
v-model="formData.name" v-model="formData.name"
type="text" type="text"
required required
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="Project name" placeholder="Project name"
/> />
</div> </div>
@@ -94,7 +94,7 @@
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Client</label> <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Client</label>
<select <select
v-model="formData.client_id" v-model="formData.client_id"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
> >
<option :value="undefined">No client</option> <option :value="undefined">No client</option>
<option <option
@@ -115,7 +115,7 @@
type="number" type="number"
min="0" min="0"
step="0.01" step="0.01"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="0.00" placeholder="0.00"
/> />
</div> </div>
@@ -137,12 +137,12 @@
<input <input
v-model="formData.color" v-model="formData.color"
type="color" type="color"
class="w-8 h-8 rounded cursor-pointer border border-border-subtle" class="w-8 h-8 rounded-lg cursor-pointer border border-border-subtle"
/> />
<input <input
v-model="formData.color" v-model="formData.color"
type="text" type="text"
class="flex-1 px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="flex-1 px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="#D97706" placeholder="#D97706"
/> />
</div> </div>
@@ -153,13 +153,13 @@
<button <button
type="button" type="button"
@click="closeDialog" @click="closeDialog"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150" class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
> >
{{ editingProject ? 'Update' : 'Create' }} {{ editingProject ? 'Update' : 'Create' }}
</button> </button>
@@ -174,7 +174,7 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="cancelDelete" @click.self="cancelDelete"
> >
<div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
<h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Project</h2> <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Project</h2>
<p class="text-[0.75rem] text-text-secondary mb-6"> <p class="text-[0.75rem] text-text-secondary mb-6">
Are you sure you want to delete "{{ projectToDelete?.name }}"? This action cannot be undone. Are you sure you want to delete "{{ projectToDelete?.name }}"? This action cannot be undone.
@@ -182,13 +182,13 @@
<div class="flex justify-end gap-3"> <div class="flex justify-end gap-3">
<button <button
@click="cancelDelete" @click="cancelDelete"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Cancel Cancel
</button> </button>
<button <button
@click="handleDelete" @click="handleDelete"
class="px-4 py-2 border border-status-error text-status-error font-medium rounded hover:bg-status-error/10 transition-colors duration-150" class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
> >
Delete Delete
</button> </button>

10
src/views/Reports.vue
View File

@@ -3,13 +3,13 @@
<h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Reports</h1> <h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Reports</h1>
<!-- Date Range Selector --> <!-- Date Range Selector -->
<div class="bg-bg-surface rounded p-4 mb-6 flex flex-wrap items-end gap-4"> <div class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
<div> <div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date</label> <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date</label>
<input <input
v-model="startDate" v-model="startDate"
type="date" type="date"
class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
<div> <div>
@@ -17,18 +17,18 @@
<input <input
v-model="endDate" v-model="endDate"
type="date" type="date"
class="px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible" class="px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
/> />
</div> </div>
<button <button
@click="fetchReport" @click="fetchReport"
class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors duration-150" class="px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
> >
Generate Generate
</button> </button>
<button <button
@click="exportCSV" @click="exportCSV"
class="px-4 py-2 border border-border-visible text-text-primary text-xs rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-2 border border-border-visible text-text-primary text-xs rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Export CSV Export CSV
</button> </button>

22
src/views/Settings.vue
View File

@@ -8,7 +8,7 @@
v-for="tab in tabs" v-for="tab in tabs"
:key="tab.id" :key="tab.id"
@click="activeTab = tab.id" @click="activeTab = tab.id"
class="relative flex items-center gap-2.5 px-2.5 py-2 rounded text-[0.8125rem] transition-colors duration-150" class="relative flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[0.8125rem] transition-colors duration-150"
:class="activeTab === tab.id :class="activeTab === tab.id
? 'bg-bg-elevated text-text-primary' ? 'bg-bg-elevated text-text-primary'
: 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'" : 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'"
@@ -38,7 +38,7 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
@click="decreaseZoom" @click="decreaseZoom"
class="w-8 h-8 flex items-center justify-center border border-border-visible rounded text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed" class="w-8 h-8 flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
:disabled="zoomLevel <= 80" :disabled="zoomLevel <= 80"
> >
<Minus class="w-3.5 h-3.5" /> <Minus class="w-3.5 h-3.5" />
@@ -46,7 +46,7 @@
<span class="w-12 text-center text-sm font-mono text-text-primary">{{ zoomLevel }}%</span> <span class="w-12 text-center text-sm font-mono text-text-primary">{{ zoomLevel }}%</span>
<button <button
@click="increaseZoom" @click="increaseZoom"
class="w-8 h-8 flex items-center justify-center border border-border-visible rounded text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed" class="w-8 h-8 flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
:disabled="zoomLevel >= 150" :disabled="zoomLevel >= 150"
> >
<Plus class="w-3.5 h-3.5" /> <Plus class="w-3.5 h-3.5" />
@@ -96,7 +96,7 @@
type="number" type="number"
min="0" min="0"
max="120" max="120"
class="w-20 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary text-right font-mono focus:outline-none focus:border-border-visible" class="w-20 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-right font-mono focus:outline-none focus:border-border-visible"
@change="saveSettings" @change="saveSettings"
/> />
</div> </div>
@@ -119,7 +119,7 @@
type="number" type="number"
min="0" min="0"
step="0.01" step="0.01"
class="w-24 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary text-right font-mono focus:outline-none focus:border-border-visible" class="w-24 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-right font-mono focus:outline-none focus:border-border-visible"
placeholder="0.00" placeholder="0.00"
@change="saveSettings" @change="saveSettings"
/> />
@@ -140,14 +140,14 @@
</div> </div>
<button <button
@click="exportData" @click="exportData"
class="px-4 py-1.5 border border-border-visible text-text-primary text-[0.8125rem] rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-1.5 border border-border-visible text-text-primary text-[0.8125rem] rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Export Export
</button> </button>
</div> </div>
<!-- Danger Zone --> <!-- Danger Zone -->
<div class="mt-8 rounded-lg border border-status-error/20 p-5"> <div class="mt-8 rounded-xl border border-status-error/20 p-5">
<h3 class="text-xs text-status-error uppercase tracking-[0.08em] font-medium mb-4">Danger Zone</h3> <h3 class="text-xs text-status-error uppercase tracking-[0.08em] font-medium mb-4">Danger Zone</h3>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
@@ -156,7 +156,7 @@
</div> </div>
<button <button
@click="showClearDataDialog = true" @click="showClearDataDialog = true"
class="px-4 py-1.5 border border-status-error text-status-error text-[0.8125rem] font-medium rounded hover:bg-status-error/10 transition-colors duration-150" class="px-4 py-1.5 border border-status-error text-status-error text-[0.8125rem] font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
> >
Clear Data Clear Data
</button> </button>
@@ -172,7 +172,7 @@
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50" class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
@click.self="showClearDataDialog = false" @click.self="showClearDataDialog = false"
> >
<div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter"> <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
<h2 class="text-[1rem] font-semibold text-text-primary mb-2">Clear All Data</h2> <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Clear All Data</h2>
<p class="text-[0.75rem] text-text-secondary mb-4"> <p class="text-[0.75rem] text-text-secondary mb-4">
Are you sure? This action cannot be undone. Are you sure? This action cannot be undone.
@@ -183,13 +183,13 @@
<div class="flex justify-end gap-3"> <div class="flex justify-end gap-3">
<button <button
@click="showClearDataDialog = false" @click="showClearDataDialog = false"
class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150" class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
> >
Cancel Cancel
</button> </button>
<button <button
@click="clearAllData" @click="clearAllData"
class="px-4 py-2 bg-status-error text-white font-medium rounded hover:bg-status-error/80 transition-colors duration-150" class="px-4 py-2 bg-status-error text-white font-medium rounded-lg hover:bg-status-error/80 transition-colors duration-150"
> >
Delete Everything Delete Everything
</button> </button>

8
src/views/Timer.vue
View File

@@ -12,7 +12,7 @@
<button <button
@click="toggleTimer" @click="toggleTimer"
class="px-10 py-3 text-sm font-medium rounded transition-colors duration-150" class="px-10 py-3 text-sm font-medium rounded-lg transition-colors duration-150"
:class="timerStore.isRunning :class="timerStore.isRunning
? 'bg-status-error text-white hover:bg-status-error/80' ? 'bg-status-error text-white hover:bg-status-error/80'
: 'bg-accent text-bg-base hover:bg-accent-hover'" : 'bg-accent text-bg-base hover:bg-accent-hover'"
@@ -29,7 +29,7 @@
<select <select
v-model="selectedProject" v-model="selectedProject"
:disabled="timerStore.isRunning" :disabled="timerStore.isRunning"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
> >
<option :value="null">Select project</option> <option :value="null">Select project</option>
<option <option
@@ -46,7 +46,7 @@
<select <select
v-model="selectedTask" v-model="selectedTask"
:disabled="timerStore.isRunning || !selectedProject" :disabled="timerStore.isRunning || !selectedProject"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
> >
<option :value="null">Select task</option> <option :value="null">Select task</option>
<option <option
@@ -65,7 +65,7 @@
v-model="description" v-model="description"
type="text" type="text"
:disabled="timerStore.isRunning" :disabled="timerStore.isRunning"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary placeholder-text-tertiary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed" class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary placeholder-text-tertiary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
placeholder="What are you working on?" placeholder="What are you working on?"
/> />
</div> </div>