Skip to content

Commit d240691

Browse files
SantiagoDePoloniaSantiagoDePolonia
committed
fix(admin): simplify timezone settings help
1 parent ca1ae01 commit d240691

3 files changed

Lines changed: 82 additions & 17 deletions

File tree

‎internal/admin/dashboard/static/css/dashboard.css‎

Lines changed: 58 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2218,12 +2218,66 @@ body.conversation-drawer-open {
22182218
margin-bottom: 6px;
22192219
}
22202220

2221+
.settings-panel-title-row {
2222+
display: inline-flex;
2223+
align-items: center;
2224+
gap: 10px;
2225+
margin-bottom: 6px;
2226+
}
2227+
2228+
.settings-panel-title-row h3 {
2229+
margin-bottom: 0;
2230+
}
2231+
2232+
.timezone-help-toggle {
2233+
display: inline-flex;
2234+
align-items: center;
2235+
justify-content: center;
2236+
width: 28px;
2237+
height: 28px;
2238+
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
2239+
border-radius: 999px;
2240+
background:
2241+
radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
2242+
color-mix(in srgb, var(--bg-surface-hover) 82%, var(--accent) 18%);
2243+
color: var(--accent);
2244+
box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 14%, transparent);
2245+
cursor: pointer;
2246+
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
2247+
}
2248+
2249+
.timezone-help-toggle:hover {
2250+
transform: translateY(-1px);
2251+
box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 20%, transparent);
2252+
}
2253+
2254+
.timezone-help-toggle.is-open {
2255+
background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface));
2256+
color: var(--text);
2257+
}
2258+
2259+
.timezone-help-toggle-icon {
2260+
font-size: 16px;
2261+
font-weight: 700;
2262+
line-height: 1;
2263+
}
2264+
22212265
.settings-panel-copy {
22222266
max-width: 780px;
22232267
color: var(--text-muted);
22242268
font-size: 14px;
22252269
}
22262270

2271+
.settings-panel-copy-collapsible {
2272+
margin-top: 2px;
2273+
padding: 12px 14px;
2274+
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
2275+
border-radius: 12px;
2276+
background:
2277+
linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%),
2278+
color-mix(in srgb, var(--bg-surface-hover) 78%, var(--accent) 8%);
2279+
}
2280+
22272281
.settings-form-grid {
22282282
display: grid;
22292283
grid-template-columns: minmax(280px, 420px);
@@ -2234,13 +2288,6 @@ body.conversation-drawer-open {
22342288
width: 100%;
22352289
}
22362290

2237-
.settings-meta-row {
2238-
display: flex;
2239-
flex-wrap: wrap;
2240-
gap: 10px;
2241-
margin-top: 18px;
2242-
}
2243-
22442291
/* Responsive */
22452292
@media (max-width: 768px) {
22462293
.sidebar { width: 60px; flex-basis: 60px; }
@@ -2270,6 +2317,10 @@ body.conversation-drawer-open {
22702317
flex-wrap: wrap;
22712318
}
22722319

2320+
.settings-panel-title-row {
2321+
gap: 8px;
2322+
}
2323+
22732324
/* Category tabs mobile */
22742325
.category-tabs {
22752326
gap: 4px;

‎internal/admin/dashboard/static/js/modules/timezone-layout.test.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@ test('dashboard templates expose a settings page and timezone context in activit
2020
assert.match(template, /x-ref="timezoneOverrideSelect"[\s\S]*x-model="timezoneOverride"[\s\S]*x-effect="timezoneOptions\.length; timezoneOverride; \$nextTick\(\(\) => syncTimezoneOverrideSelectValue\(\)\)"/);
2121
assert.match(template, /<option value=""[\s\S]*:selected="!timezoneOverride"/);
2222
assert.match(template, /<option :value="timeZone\.value"[\s\S]*:selected="timeZone\.value === timezoneOverride"/);
23+
assert.match(template, /<div class="settings-panel-header" x-data="\{ timezoneHelpOpen: false \}">/);
24+
assert.match(template, /<button type="button"[\s\S]*class="timezone-help-toggle"[\s\S]*@click="timezoneHelpOpen = !timezoneHelpOpen"/);
25+
assert.match(template, /<span class="timezone-help-toggle-icon" x-text="timezoneHelpOpen \? '−' : '\?'"><\/span>/);
26+
assert.match(template, /<p id="timezone-help-copy"[\s\S]*class="settings-panel-copy settings-panel-copy-collapsible"[\s\S]*x-show="timezoneHelpOpen"[\s\S]*x-transition\.opacity\.duration\.200ms[\s\S]*Day-based analytics, charts, and date filters use your effective timezone\./);
27+
assert.doesNotMatch(template, /Detected: /);
28+
assert.doesNotMatch(template, /Effective: /);
29+
assert.doesNotMatch(template, /Mode: /);
2330
assert.match(template, /x-text="calendarTimeZoneText\(\)"/);
2431
assert.match(template, /usage-ts[^>]*x-text="formatTimestamp\(entry\.timestamp\)"[^>]*:title="timestampTitle\(entry\.timestamp\)"/);
2532
assert.match(template, /audit-entry-meta[\s\S]*x-text="formatTimestamp\(entry\.timestamp\)"[\s\S]*:title="timestampTitle\(entry\.timestamp\)"/);

‎internal/admin/dashboard/templates/index.html‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -216,10 +216,24 @@ <h2>User Settings</h2>
216216
</div>
217217

218218
<div class="settings-panel">
219-
<div class="settings-panel-header">
219+
<div class="settings-panel-header" x-data="{ timezoneHelpOpen: false }">
220220
<div>
221-
<h3>Timezone</h3>
222-
<p class="settings-panel-copy">Day-based analytics, charts, and date filters use your effective timezone. Usage and audit logs keep UTC in the hover title while rendering row timestamps in your local browser timezone.</p>
221+
<div class="settings-panel-title-row">
222+
<h3>Timezone</h3>
223+
<button type="button"
224+
class="timezone-help-toggle"
225+
:class="{ 'is-open': timezoneHelpOpen }"
226+
:aria-label="timezoneHelpOpen ? 'Hide timezone help' : 'Show timezone help'"
227+
:aria-expanded="timezoneHelpOpen.toString()"
228+
aria-controls="timezone-help-copy"
229+
:title="timezoneHelpOpen ? 'Hide timezone help' : 'Show timezone help'"
230+
@click="timezoneHelpOpen = !timezoneHelpOpen">
231+
<span class="timezone-help-toggle-icon" x-text="timezoneHelpOpen ? '−' : '?'"></span>
232+
</button>
233+
</div>
234+
<p id="timezone-help-copy" class="settings-panel-copy settings-panel-copy-collapsible" x-show="timezoneHelpOpen" x-transition.opacity.duration.200ms>
235+
Day-based analytics, charts, and date filters use your effective timezone. Usage and audit logs keep UTC in the hover title while rendering row timestamps in your local browser timezone.
236+
</p>
223237
</div>
224238
</div>
225239

@@ -234,13 +248,6 @@ <h3>Timezone</h3>
234248
</select>
235249
</label>
236250
</div>
237-
238-
<div class="settings-meta-row">
239-
<span class="provider-badge mono" x-text="'Detected: ' + detectedTimeZoneLabel()"></span>
240-
<span class="provider-badge mono" x-text="'Effective: ' + effectiveTimeZoneLabel()"></span>
241-
<span class="provider-badge" x-text="timezoneOverride ? 'Mode: manual override' : 'Mode: automatic'"></span>
242-
</div>
243-
244251
<div class="alias-form-actions">
245252
<button type="button" class="pagination-btn" x-show="timezoneOverride" @click="clearTimezoneOverride()">Use Browser Timezone</button>
246253
</div>

0 commit comments

Comments
 (0)