romfast/clawd
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(UX): LARGE buttons/text in cards, opaque modal/dropdown, compact color picker grid

Browse Source
This commit is contained in:
Echo
2026-02-10 22:38:13 +00:00
parent af3b81613e
commit 1e1f5baf9b
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
dashboard/habits.html
View File

@@ -333,15 +333,15 @@
} }
.habit-card-icon { .habit-card-icon {
width: 24px; width: 32px;
height: 24px; height: 32px;
color: var(--text-primary); color: var(--text-primary);
flex-shrink: 0; flex-shrink: 0;
} }
.habit-card-name { .habit-card-name {
flex: 1; flex: 1;
font-size: 16px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
white-space: nowrap; white-space: nowrap;
@@ -350,22 +350,22 @@
} }
.habit-card-streak { .habit-card-streak {
font-size: 14px; font-size: 16px;
color: var(--text-muted); color: var(--text-muted);
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
font-weight: 500; font-weight: 600;
} }
/* Compact check button */ /* Compact check button */
.habit-card-check-btn-compact { .habit-card-check-btn-compact {
width: 50px; width: 60px;
height: 50px; height: 60px;
border: 2px solid var(--accent); border: 3px solid var(--accent);
background: transparent; background: transparent;
color: var(--accent); color: var(--accent);
border-radius: 50%; border-radius: 50%;
font-size: 22px; font-size: 28px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: all var(--transition-base); transition: all var(--transition-base);
@@ -419,8 +419,8 @@
} }
.habit-card-action-btn svg { .habit-card-action-btn svg {
width: 18px; width: 22px;
height: 18px; height: 22px;
} }
/* Progress bar row */ /* Progress bar row */
@@ -445,19 +445,20 @@
} }
.habit-card-progress-text { .habit-card-progress-text {
font-size: 14px; font-size: 16px;
color: var(--text-muted); color: var(--text-muted);
font-weight: 600; font-weight: 700;
min-width: 35px; min-width: 40px;
text-align: right; text-align: right;
flex-shrink: 0; flex-shrink: 0;
} }
/* Next date row */ /* Next date row */
.habit-card-next-date { .habit-card-next-date {
font-size: 13px; font-size: 15px;
color: var(--text-muted); color: var(--text-muted);
text-align: left; text-align: left;
font-weight: 500;
} }
/* Keep priority indicator styles for future use */ /* Keep priority indicator styles for future use */
@@ -608,9 +609,10 @@
/* Color picker */ /* Color picker */
.color-picker-swatches { .color-picker-swatches {
display: grid; display: grid;
grid-template-columns: repeat(8, 1fr); grid-template-columns: repeat(4, 1fr);
gap: var(--space-2); gap: var(--space-2);
margin-bottom: var(--space-2); margin-bottom: var(--space-2);
max-width: 200px;
} }
.color-swatch { .color-swatch {
@@ -620,10 +622,11 @@
border-radius: var(--radius-md); border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
transition: all var(--transition-base); transition: all var(--transition-base);
min-height: 40px;
} }
.color-swatch:hover { .color-swatch:hover {
transform: scale(1.1); transform: scale(1.05);
} }
.color-swatch.selected { .color-swatch.selected {
@@ -680,10 +683,10 @@
top: calc(100% + var(--space-1)); top: calc(100% + var(--space-1));
left: 0; left: 0;
right: 0; right: 0;
background: var(--bg-surface); background: rgba(26, 27, 30, 0.98);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
z-index: 100; z-index: 100;
display: none; display: none;
max-height: 300px; max-height: 300px;