Skip to content

Commit c324330

Browse files
sarth6claude
sarth6
and
claude
committed
Polish sidebar widget UX
Fixes the cramped multi-line label, oversized native <select>, and generally too-marketing visual weight. The widget now reads as a calmer sibling of GitHub's own sidebar sections. Changes: - Drop the redundant "Conductor:" prefix from the button label ("Conductor: Review PR" → "Review PR"). The heading already says "Conductor", so the button just shows the active preset name. - Replace the native <select> chevron-popout with a custom split- button caret + popover menu. Closes on outside click and Escape. Items render with a "DEFAULT" badge. - Replace the Unicode ▶ icon with a proper inline SVG train (matches the toolbar icon). Inherits currentColor so it adapts to dark mode. - Flatten the heavy linear-gradient down to a single brand color (#5b6cff) with subtle hover/active states. - Add a gear icon in the heading row that jumps to the options page, so editing presets is one click away from any PR. - Use GitHub's CSS custom-property design tokens (var(--fgColor-default) etc.) for the popover and tertiary chrome, so the widget themes itself correctly in both light and dark mode. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 447cd6b commit c324330

2 files changed

Lines changed: 372 additions & 121 deletions

File tree

‎src/content/content.css‎

Lines changed: 194 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,244 @@
1-
/* Conductor widget — lives inside GitHub's PR right sidebar above Reviewers.
2-
We piggy-back on GitHub's `.discussion-sidebar-item` for padding / border
3-
alignment, then layer our own brand colors on top so the widget reads as
4-
a related-but-distinct extension surface. */
1+
/* Conductor sidebar widget.
2+
Lives inside GitHub's PR right sidebar above Reviewers. Visual goal: feels
3+
like a sibling of the native sections (Reviewers, Assignees, Labels), not
4+
a marketing CTA. Uses GitHub's CSS custom-property tokens so it adapts to
5+
light/dark themes automatically. */
56

67
#conductor-pr-widget.conductor-widget {
7-
padding-top: 12px;
8+
padding-top: 16px;
89
padding-bottom: 16px;
910
}
1011

1112
#conductor-pr-widget .conductor-widget-heading {
13+
display: flex;
14+
align-items: center;
15+
justify-content: space-between;
16+
gap: 8px;
1217
margin: 0 0 8px;
18+
padding: 0;
1319
font-size: 12px;
1420
font-weight: 600;
21+
color: var(--fgColor-default, var(--color-fg-default, #1f2328));
1522
text-transform: none;
1623
letter-spacing: 0;
17-
color: var(--fgColor-muted, var(--color-fg-muted, #57606a));
18-
display: flex;
24+
}
25+
26+
#conductor-pr-widget .conductor-settings-link {
27+
display: inline-flex;
1928
align-items: center;
20-
gap: 6px;
29+
justify-content: center;
30+
width: 22px;
31+
height: 22px;
32+
padding: 0;
33+
margin: 0;
34+
background: transparent;
35+
border: none;
36+
border-radius: 4px;
37+
color: var(--fgColor-muted, var(--color-fg-muted, #59636e));
38+
cursor: pointer;
39+
transition: background-color 0.1s ease;
2140
}
2241

23-
#conductor-pr-widget .conductor-widget-heading::before {
24-
content: '';
25-
display: inline-block;
26-
width: 12px;
27-
height: 12px;
28-
background-color: #5b6cff;
29-
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 62%);
30-
mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 62%);
31-
border-radius: 2px;
42+
#conductor-pr-widget .conductor-settings-link:hover {
43+
background: var(--bgColor-neutral-muted, var(--color-neutral-muted, rgba(175, 184, 193, 0.2)));
44+
color: var(--fgColor-default, var(--color-fg-default, #1f2328));
3245
}
3346

34-
#conductor-pr-widget .conductor-widget-row {
47+
#conductor-pr-widget .conductor-split {
3548
display: flex;
3649
align-items: stretch;
37-
gap: 6px;
50+
width: 100%;
51+
border-radius: 6px;
52+
overflow: visible;
53+
position: relative;
3854
}
3955

40-
#conductor-pr-widget .conductor-pr-button {
56+
#conductor-pr-widget .conductor-primary {
4157
flex: 1 1 auto;
4258
display: inline-flex;
4359
align-items: center;
4460
justify-content: center;
4561
gap: 6px;
46-
font-weight: 600;
62+
min-width: 0;
63+
padding: 5px 12px;
64+
font: inherit;
65+
font-size: 12px;
66+
font-weight: 500;
67+
line-height: 20px;
68+
white-space: nowrap;
4769
color: #ffffff;
48-
background: linear-gradient(180deg, #5b6cff 0%, #4453e3 100%);
49-
border: 1px solid rgba(0, 0, 0, 0.15);
50-
border-radius: 6px;
51-
padding: 6px 12px;
70+
background: #5b6cff;
71+
border: 1px solid #4453e3;
72+
border-right-color: rgba(0, 0, 0, 0.25);
73+
border-radius: 6px 0 0 6px;
5274
cursor: pointer;
53-
line-height: 20px;
54-
font-size: 12px;
55-
text-align: center;
5675
transition:
57-
filter 0.12s ease,
58-
transform 0.05s ease;
76+
background-color 0.1s ease,
77+
box-shadow 0.1s ease;
5978
}
6079

61-
#conductor-pr-widget .conductor-pr-button:hover {
62-
filter: brightness(1.08);
80+
#conductor-pr-widget .conductor-split:has(.conductor-menu) .conductor-primary {
81+
border-radius: 6px 0 0 6px;
6382
}
6483

65-
#conductor-pr-widget .conductor-pr-button:active {
66-
transform: translateY(1px);
84+
#conductor-pr-widget .conductor-split:not(:has(.conductor-menu)) .conductor-primary {
85+
border-radius: 6px;
86+
border-right-color: #4453e3;
6787
}
6888

69-
#conductor-pr-widget .conductor-pr-button:focus-visible {
70-
outline: 2px solid #ffffff;
71-
outline-offset: 1px;
72-
box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.6);
89+
#conductor-pr-widget .conductor-primary:hover {
90+
background: #4f5fef;
7391
}
7492

75-
#conductor-pr-widget .conductor-pr-button-icon {
76-
font-size: 10px;
77-
line-height: 1;
93+
#conductor-pr-widget .conductor-primary:active {
94+
background: #4453e3;
95+
}
96+
97+
#conductor-pr-widget .conductor-primary:focus-visible {
98+
outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis, #0969da));
99+
outline-offset: 1px;
78100
}
79101

80-
#conductor-pr-widget .conductor-pr-button--flash {
81-
background: linear-gradient(180deg, #1f883d 0%, #1a7234 100%);
102+
#conductor-pr-widget .conductor-primary-label {
103+
overflow: hidden;
104+
text-overflow: ellipsis;
82105
}
83106

84-
#conductor-pr-widget .conductor-preset-select {
107+
#conductor-pr-widget .conductor-icon {
85108
flex: 0 0 auto;
86-
background: var(--bgColor-default, var(--color-canvas-default, #ffffff));
87-
color: var(--fgColor-default, var(--color-fg-default, #1f2328));
109+
}
110+
111+
#conductor-pr-widget .conductor-icon--train {
112+
width: 14px;
113+
height: 14px;
114+
}
115+
116+
#conductor-pr-widget .conductor-icon--caret {
117+
width: 12px;
118+
height: 12px;
119+
}
120+
121+
#conductor-pr-widget .conductor-icon--gear {
122+
width: 13px;
123+
height: 13px;
124+
}
125+
126+
#conductor-pr-widget .conductor-primary--flash {
127+
background: #1f883d;
128+
border-color: #1a7234;
129+
}
130+
131+
/* Caret + popover */
132+
#conductor-pr-widget .conductor-menu {
133+
position: relative;
134+
display: flex;
135+
}
136+
137+
#conductor-pr-widget .conductor-caret {
138+
display: inline-flex;
139+
align-items: center;
140+
justify-content: center;
141+
padding: 0 8px;
142+
background: #5b6cff;
143+
color: #ffffff;
144+
border: 1px solid #4453e3;
145+
border-left: none;
146+
border-radius: 0 6px 6px 0;
147+
cursor: pointer;
148+
transition: background-color 0.1s ease;
149+
}
150+
151+
#conductor-pr-widget .conductor-caret:hover {
152+
background: #4f5fef;
153+
}
154+
155+
#conductor-pr-widget .conductor-caret:active {
156+
background: #4453e3;
157+
}
158+
159+
#conductor-pr-widget .conductor-caret:focus-visible {
160+
outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis, #0969da));
161+
outline-offset: 1px;
162+
}
163+
164+
#conductor-pr-widget .conductor-caret[aria-expanded='true'] {
165+
background: #4453e3;
166+
}
167+
168+
#conductor-pr-widget .conductor-menu-list {
169+
position: absolute;
170+
top: calc(100% + 4px);
171+
right: 0;
172+
z-index: 100;
173+
min-width: 200px;
174+
padding: 4px;
175+
background: var(--overlay-bgColor, var(--color-canvas-overlay, #ffffff));
88176
border: 1px solid var(--borderColor-default, var(--color-border-default, #d0d7de));
89-
border-radius: 6px;
90-
padding: 5px 6px;
91-
font-size: 12px;
177+
border-radius: 8px;
178+
box-shadow: var(--shadow-floating-small, 0 8px 24px rgba(140, 149, 159, 0.2));
179+
display: flex;
180+
flex-direction: column;
181+
}
182+
183+
#conductor-pr-widget .conductor-menu-list[hidden] {
184+
display: none;
185+
}
186+
187+
#conductor-pr-widget .conductor-menu-item {
188+
display: flex;
189+
align-items: center;
190+
justify-content: space-between;
191+
gap: 8px;
192+
padding: 6px 10px;
193+
text-align: left;
194+
background: transparent;
195+
border: none;
196+
border-radius: 4px;
197+
color: var(--fgColor-default, var(--color-fg-default, #1f2328));
198+
font: inherit;
199+
font-size: 13px;
200+
line-height: 20px;
92201
cursor: pointer;
202+
white-space: nowrap;
203+
}
204+
205+
#conductor-pr-widget .conductor-menu-item:hover {
206+
background: var(--bgColor-accent-muted, var(--color-accent-subtle, rgba(9, 105, 218, 0.1)));
207+
color: var(--fgColor-accent, var(--color-accent-fg, #0969da));
93208
}
94209

95-
#conductor-pr-widget .conductor-preset-select:hover {
96-
background: var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa));
210+
#conductor-pr-widget .conductor-menu-item:focus-visible {
211+
outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis, #0969da));
212+
outline-offset: -2px;
97213
}
98214

215+
#conductor-pr-widget .conductor-menu-item-badge {
216+
flex: 0 0 auto;
217+
padding: 1px 6px;
218+
font-size: 10px;
219+
font-weight: 600;
220+
color: var(--fgColor-muted, var(--color-fg-muted, #59636e));
221+
background: var(--bgColor-neutral-muted, var(--color-neutral-muted, rgba(175, 184, 193, 0.2)));
222+
border-radius: 10px;
223+
text-transform: uppercase;
224+
letter-spacing: 0.04em;
225+
}
226+
227+
#conductor-pr-widget .conductor-menu-item--default {
228+
font-weight: 600;
229+
}
230+
231+
/* Dark mode tweaks — GitHub's dark theme already provides most tokens, but
232+
we boost a couple of accents so the brand color stays distinct. */
99233
@media (prefers-color-scheme: dark) {
100-
#conductor-pr-widget .conductor-pr-button {
101-
border-color: rgba(255, 255, 255, 0.12);
234+
#conductor-pr-widget .conductor-primary,
235+
#conductor-pr-widget .conductor-caret {
236+
border-color: #6f7eff;
237+
}
238+
#conductor-pr-widget .conductor-primary {
239+
border-right-color: rgba(0, 0, 0, 0.4);
240+
}
241+
#conductor-pr-widget .conductor-split:not(:has(.conductor-menu)) .conductor-primary {
242+
border-right-color: #6f7eff;
102243
}
103244
}

0 commit comments

Comments
 (0)