Skip to content

Commit d4645c4

Browse files
steveninhlesteveninhle
committed
feat: implement dark mode for walkthrough popover
1 parent 76f9e62 commit d4645c4

3 files changed

Lines changed: 57 additions & 0 deletions

File tree

‎ui/dashboard/src/components/navigation/user-menu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ const UserMenu = ({ onOpenSwitchOrg }: { onOpenSwitchOrg: () => void }) => {
128128
startWalkthrough();
129129
}
130130
},
131+
131132
myOrganizations.length > 1 && {
132133
label: consoleAccount?.organization?.name || '',
133134
icon: IconBuilding,

‎ui/dashboard/src/hooks/use-unsaved-leave-page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export function useUnsavedLeavePage({
9999
bypassNavigation = false;
100100
return push(...args);
101101
}
102+
102103
if (isWalkthroughActive()) return;
103104
confirm({
104105
title: title,

‎ui/dashboard/src/index.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,3 +237,58 @@ body .driver-popover {
237237
body .driver-active-element-parent-no-scroll {
238238
overflow: auto !important;
239239
}
240+
241+
/* Dark mode overrides for the driver.js walkthrough — it renders outside
242+
React (appended to <body>) so it can't use Tailwind's dark: variants. */
243+
.dark .driver-popover {
244+
@apply !bg-dark-black-800 !text-dark-gray-400 shadow-none;
245+
}
246+
.dark .driver-popover-title {
247+
@apply !text-dark-gray-400;
248+
}
249+
.dark .driver-popover-description {
250+
@apply !text-dark-gray-300;
251+
}
252+
.dark .driver-popover-close-btn {
253+
@apply !text-dark-gray-200;
254+
}
255+
.dark .driver-popover-close-btn:hover,
256+
.dark .driver-popover-close-btn:focus {
257+
@apply !text-dark-gray-400;
258+
}
259+
.dark .driver-popover-progress-text {
260+
@apply !text-dark-gray-200;
261+
}
262+
.dark .driver-popover-footer-btn {
263+
@apply !border-dark-black-700 !bg-dark-black-800 !text-dark-gray-400;
264+
}
265+
.dark .driver-popover-footer-btn:hover,
266+
.dark .driver-popover-footer-btn:focus {
267+
@apply !bg-dark-black-700;
268+
}
269+
.dark .driver-popover-footer .driver-popover-btn-disabled {
270+
@apply !text-dark-gray-200;
271+
}
272+
.dark .driver-popover-arrow {
273+
border-color: theme('colors.dark.black.800');
274+
}
275+
.dark .driver-popover-arrow-side-left {
276+
border-top-color: transparent !important;
277+
border-bottom-color: transparent !important;
278+
border-right-color: transparent !important;
279+
}
280+
.dark .driver-popover-arrow-side-right {
281+
border-top-color: transparent !important;
282+
border-bottom-color: transparent !important;
283+
border-left-color: transparent !important;
284+
}
285+
.dark .driver-popover-arrow-side-top {
286+
border-bottom-color: transparent !important;
287+
border-left-color: transparent !important;
288+
border-right-color: transparent !important;
289+
}
290+
.dark .driver-popover-arrow-side-bottom {
291+
border-top-color: transparent !important;
292+
border-left-color: transparent !important;
293+
border-right-color: transparent !important;
294+
}

0 commit comments

Comments
 (0)