Skip to content

Commit 979ea32

Browse files
joewinkeclaude
andcommitted
task(jat-fq7dx): Restyle Columns button to match SearchDropdown aesthetic
Match the monospace font, padding, border-radius, and color scheme used by the project and type SearchDropdown triggers. Replace text chevron with SVG. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 78d5bd4 commit 979ea32

File tree

1 file changed

+29
-15
lines changed

1 file changed

+29
-15
lines changed

ide/src/routes/open-tasks/+page.svelte

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -874,8 +874,9 @@
874874
/>
875875
<!-- Manage Columns -->
876876
<div class="mc-wrapper">
877-
<button class="filter-select mc-trigger" onclick={() => { mcOpen = !mcOpen; }}>
878-
Columns ▾
877+
<button class="mc-trigger" onclick={() => { mcOpen = !mcOpen; }}>
878+
<span>Columns</span>
879+
<svg class="mc-chevron" class:mc-chevron-open={mcOpen} viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
879880
</button>
880881
{#if mcOpen}
881882
<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -1550,28 +1551,41 @@
15501551
background: oklch(0.24 0.06 145 / 0.3);
15511552
color: oklch(0.80 0.15 145);
15521553
}
1553-
.filter-select {
1554-
padding: 0.375rem 0.5rem;
1555-
font-size: 0.8125rem;
1556-
background: oklch(0.16 0.01 250);
1557-
border: 1px solid oklch(0.28 0.02 250);
1558-
border-radius: 0.375rem;
1559-
color: oklch(0.90 0.02 250);
1560-
outline: none;
1561-
cursor: pointer;
1562-
}
1563-
.filter-select:focus {
1564-
border-color: oklch(0.55 0.12 220);
1565-
}
15661554
15671555
15681556
/* Manage columns dropdown */
15691557
.mc-wrapper {
15701558
position: relative;
15711559
}
15721560
.mc-trigger {
1561+
padding: 0.25rem 0.5rem;
1562+
border-radius: 0.5rem;
1563+
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
1564+
font-size: 0.8125rem;
1565+
display: flex;
1566+
align-items: center;
1567+
gap: 0.375rem;
1568+
min-height: 2rem;
1569+
cursor: pointer;
1570+
background: oklch(0.16 0.01 250);
1571+
border: 1px solid oklch(0.25 0.02 250);
1572+
color: oklch(0.85 0.02 250);
1573+
transition: background 0.15s, border-color 0.15s;
15731574
white-space: nowrap;
15741575
}
1576+
.mc-trigger:hover {
1577+
background: oklch(0.18 0.01 250);
1578+
border-color: oklch(0.30 0.02 250);
1579+
}
1580+
.mc-chevron {
1581+
width: 14px;
1582+
height: 14px;
1583+
opacity: 0.5;
1584+
transition: transform 0.15s;
1585+
}
1586+
.mc-chevron-open {
1587+
transform: rotate(180deg);
1588+
}
15751589
.mc-dropdown {
15761590
position: absolute;
15771591
top: calc(100% + 4px);

0 commit comments

Comments
 (0)