diff --git a/pkg/dashboard/frontend/package.json b/pkg/dashboard/frontend/package.json index d9d458b93..0476cd862 100644 --- a/pkg/dashboard/frontend/package.json +++ b/pkg/dashboard/frontend/package.json @@ -62,6 +62,7 @@ "html-to-image": "^1.11.11", "lottie-react": "^2.4.0", "lucide-react": "^0.471.1", + "next-themes": "^0.4.4", "radash": "^12.1.0", "react": "^18.3.1", "react-complex-tree": "^2.4.4", diff --git a/pkg/dashboard/frontend/src/components/ModeToggle.tsx b/pkg/dashboard/frontend/src/components/ModeToggle.tsx new file mode 100644 index 000000000..e7150bd36 --- /dev/null +++ b/pkg/dashboard/frontend/src/components/ModeToggle.tsx @@ -0,0 +1,39 @@ +"use client" + +import { Moon, Sun } from "lucide-react" +import { useTheme } from "next-themes" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +export function ModeToggle() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ) +} diff --git a/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx b/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx index ae8d2c7d6..5d77e3f5a 100644 --- a/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx +++ b/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx @@ -491,7 +491,7 @@ const APIExplorer = () => { }} > Copy Route URL - + @@ -556,7 +556,7 @@ const APIExplorer = () => { href="https://nitric.io/docs/apis#api-security" target="_blank" rel="noreferrer" - className="underline" + className="underline text-foreground hover:text-accent-foreground" > API Docs @@ -600,7 +600,7 @@ const APIExplorer = () => { )}
  • -

    +

    Query Params

    { )} {currentBodyTab.name === 'Binary' && (
    -

    +

    Binary File

    {fileToUpload && ( {fileToUpload.name} -{' '} {formatFileSize(fileToUpload.size)} @@ -741,31 +741,31 @@ const APIExplorer = () => { {responseTabIndex === 1 && (
    - +
    - + {Object.entries(response.headers || {}).map( ([key, value]) => ( - - @@ -778,11 +778,11 @@ const APIExplorer = () => { )} ) : response ? ( - + No response data available for this request. ) : ( - + Send a request to get a response. )} @@ -791,7 +791,7 @@ const APIExplorer = () => { {
    Please refer to our documentation on{' '} { as we are unable to find any existing APIs.
    APIs built using{' '}
    = ({ }) if (!requestHistory.length) { - return

    There is no history.

    + return

    There is no history.

    } return ( @@ -107,7 +107,7 @@ const ApiHistoryAccordionContent: React.FC = ({ {tabIndex === 0 && ( = ({ {tabIndex === 2 && (
    -

    Request Body

    +

    Request Body

    = ({ selected, onAfterClear }) => { return ( - API Menu + API Menu - + Export Spec - + Clear History diff --git a/pkg/dashboard/frontend/src/components/apis/APIMethodBadge.tsx b/pkg/dashboard/frontend/src/components/apis/APIMethodBadge.tsx index cacaec4d4..b2b3fe52f 100644 --- a/pkg/dashboard/frontend/src/components/apis/APIMethodBadge.tsx +++ b/pkg/dashboard/frontend/src/components/apis/APIMethodBadge.tsx @@ -7,6 +7,29 @@ interface Props { className?: string } +const methodColors = { + DELETE: { + bg: 'bg-red-100 dark:bg-red-900/30', + text: 'text-red-800 dark:text-red-300' + }, + POST: { + bg: 'bg-green-100 dark:bg-green-900/30', + text: 'text-green-800 dark:text-green-300' + }, + PUT: { + bg: 'bg-yellow-100 dark:bg-yellow-900/30', + text: 'text-yellow-800 dark:text-yellow-300' + }, + PATCH: { + bg: 'bg-orange-100 dark:bg-orange-900/30', + text: 'text-orange-800 dark:text-orange-300' + }, + GET: { + bg: 'bg-blue-100 dark:bg-blue-900/30', + text: 'text-blue-800 dark:text-blue-300' + } +} + export const APIMethodBadge: FC = ({ method, className }) => { return ( = ({
    - {item.data.data?.path} + {item.data.data?.path}
    ) : ( - + {item.children?.length ? `${title} (${item.children.length})` : title} diff --git a/pkg/dashboard/frontend/src/components/apis/CodeEditor.tsx b/pkg/dashboard/frontend/src/components/apis/CodeEditor.tsx index aed6d7748..ff84cf2c4 100644 --- a/pkg/dashboard/frontend/src/components/apis/CodeEditor.tsx +++ b/pkg/dashboard/frontend/src/components/apis/CodeEditor.tsx @@ -177,7 +177,7 @@ const CodeEditor: React.FC = ({ @@ -210,16 +210,16 @@ const CodeEditor: React.FC = ({ {...props} /> {errors.length > 0 && ( -
    +
    -
    +
    Error Invalid JSON at line{' '} {getLineNumber( editor.current?.view?.state.doc.toString() || '', diff --git a/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx b/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx index c5dcdaad1..45d16572e 100644 --- a/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx +++ b/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx @@ -154,7 +154,9 @@ function ReactFlowLayout() { onEdgesChange={onEdgesChange} defaultEdgeOptions={{ type: 'nitric', + className: 'text-foreground', }} + className="bg-background" onConnect={onConnect} fitView fitViewOptions={{ @@ -162,8 +164,17 @@ function ReactFlowLayout() { minZoom: 1, }} > - - + + {data?.projectName && (
    @@ -181,15 +192,15 @@ function ReactFlowLayout() { )} -
    -
    +
    +
    Connector Types
    - - Triggers - - Dependencies + + Triggers + + Dependencies
    diff --git a/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx b/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx index 51a4c0456..9d4a7d219 100644 --- a/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx +++ b/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx @@ -111,18 +111,18 @@ export const DetailsDrawer = ({ return ( - +
    - + {title} {description && ( - {description} + {description} )}
    @@ -130,11 +130,11 @@ export const DetailsDrawer = ({ {children} {address && (
    - Address: + Address: {address.startsWith('http') ? ( @@ -147,13 +147,13 @@ export const DetailsDrawer = ({ )} {services?.length ? (
    - Requested by: + Requested by:
    {services.map((s) => (
    diff --git a/pkg/dashboard/frontend/src/components/architecture/nodes/ScheduleNode.tsx b/pkg/dashboard/frontend/src/components/architecture/nodes/ScheduleNode.tsx index fb51a3018..d4f82e80f 100644 --- a/pkg/dashboard/frontend/src/components/architecture/nodes/ScheduleNode.tsx +++ b/pkg/dashboard/frontend/src/components/architecture/nodes/ScheduleNode.tsx @@ -27,12 +27,12 @@ export const ScheduleNode: ComponentType> = ( {data.resource.expression ? ( <>
    - Cron: - {data.resource.expression} + Cron: + {data.resource.expression}
    - Description: - + Description: + {cronstrue.toString(data.resource.expression, { verbose: true, })} @@ -41,8 +41,8 @@ export const ScheduleNode: ComponentType> = ( ) : (
    - Rate: - Every {data.resource.rate} + Rate: + Every {data.resource.rate}
    )} diff --git a/pkg/dashboard/frontend/src/components/architecture/styles.css b/pkg/dashboard/frontend/src/components/architecture/styles.css index 94738691a..850b08693 100644 --- a/pkg/dashboard/frontend/src/components/architecture/styles.css +++ b/pkg/dashboard/frontend/src/components/architecture/styles.css @@ -46,7 +46,19 @@ } .react-flow__edge-path { - @apply stroke-black/80; + @apply stroke-foreground/80 dark:stroke-foreground/60; +} + +.react-flow__edge { + @apply !z-[5]; +} + +.react-flow__edge.selected { + @apply !z-[6]; +} + +.react-flow__edge-path { + stroke-width: 1.5; } .react-flow__node-api { diff --git a/pkg/dashboard/frontend/src/components/databases/DatabasesExplorer.tsx b/pkg/dashboard/frontend/src/components/databases/DatabasesExplorer.tsx index bc9101807..46b4dcbcb 100644 --- a/pkg/dashboard/frontend/src/components/databases/DatabasesExplorer.tsx +++ b/pkg/dashboard/frontend/src/components/databases/DatabasesExplorer.tsx @@ -335,7 +335,7 @@ const DatabasesExplorer: React.FC = () => {
    {selectedDb.connectionString} @@ -349,7 +349,7 @@ const DatabasesExplorer: React.FC = () => { }} > Copy connection string - + @@ -377,7 +377,7 @@ const DatabasesExplorer: React.FC = () => {
    -

    +

    Results

    @@ -400,7 +400,7 @@ const DatabasesExplorer: React.FC = () => {
    Please refer to our documentation on{' '} = ({ return ( - + Database Menu - + Clear Saved Query diff --git a/pkg/dashboard/frontend/src/components/databases/DatabasesTreeView.tsx b/pkg/dashboard/frontend/src/components/databases/DatabasesTreeView.tsx index 42613bbd2..ef205074c 100644 --- a/pkg/dashboard/frontend/src/components/databases/DatabasesTreeView.tsx +++ b/pkg/dashboard/frontend/src/components/databases/DatabasesTreeView.tsx @@ -60,7 +60,7 @@ const DatabasesTreeView: FC = ({ resources, onSelect, initialItem }) => { renderItemTitle={({ item }) => { return (
    - {item.data.label} + {item.data.label} {item.data.data?.status !== 'active' && ( diff --git a/pkg/dashboard/frontend/src/components/databases/QueryResults.tsx b/pkg/dashboard/frontend/src/components/databases/QueryResults.tsx index e0ec07795..2242cbfd9 100644 --- a/pkg/dashboard/frontend/src/components/databases/QueryResults.tsx +++ b/pkg/dashboard/frontend/src/components/databases/QueryResults.tsx @@ -30,7 +30,7 @@ const parse = (value: string): Result[] | string => { const Container: React.FC = ({ children }) => { return ( -
    +
    {children}
    ) @@ -52,7 +52,7 @@ const QueryResults: React.FC = ({ response, loading }) => {

    - Running... + Running...

    ) @@ -62,7 +62,7 @@ const QueryResults: React.FC = ({ response, loading }) => { return (

    - Click Run to execute your query. + Click Run to execute your query.

    ) @@ -112,7 +112,7 @@ const QueryResults: React.FC = ({ response, loading }) => { dataType === 'boolean' || isBinary || isEmpty, - 'text-gray-400/90': row[column] === null || isEmpty, + 'text-muted-foreground': row[column] === null || isEmpty, })} > {displayValue} diff --git a/pkg/dashboard/frontend/src/components/events/EventsExplorer.tsx b/pkg/dashboard/frontend/src/components/events/EventsExplorer.tsx index 8db75ba75..f20f2ec98 100644 --- a/pkg/dashboard/frontend/src/components/events/EventsExplorer.tsx +++ b/pkg/dashboard/frontend/src/components/events/EventsExplorer.tsx @@ -379,31 +379,31 @@ const EventsExplorer: React.FC = ({ workerType }) => { {responseTabIndex === 1 && (
    -
    Header Value
    + {key} + {value}
    - +
    + - + {Object.entries(response.headers || {}).map( ([key, value]) => ( - - @@ -416,11 +416,11 @@ const EventsExplorer: React.FC = ({ workerType }) => { )} ) : response ? ( - + No response data available for this request. ) : ( - + Send a request to get a response. )} @@ -443,7 +443,7 @@ const EventsExplorer: React.FC = ({ workerType }) => {
    Please refer to our documentation on{' '} = ({ .filter((h) => h.event.name === selectedWorker.name) if (!requestHistory.length) { - return

    There is no history.

    + return

    There is no history.

    } return ( @@ -46,7 +46,7 @@ const EventsHistory: React.FC = ({ content: formattedPayload ? (
    -

    Payload

    +

    Payload

    = ({ return ( - + {workerType} Menu - + Clear History diff --git a/pkg/dashboard/frontend/src/components/events/EventsTreeView.tsx b/pkg/dashboard/frontend/src/components/events/EventsTreeView.tsx index d8e3d827d..38a2c512e 100644 --- a/pkg/dashboard/frontend/src/components/events/EventsTreeView.tsx +++ b/pkg/dashboard/frontend/src/components/events/EventsTreeView.tsx @@ -82,7 +82,7 @@ const EventsTreeView: FC = ({ : null return ( - + {topicSubscriberCount ? ( <> {item.data.label} @@ -102,7 +102,7 @@ const EventsTreeView: FC = ({ -

    {topicSubscriberCount} subscribers to this topic

    +

    {topicSubscriberCount} subscribers to this topic

    diff --git a/pkg/dashboard/frontend/src/components/layout/AppLayout/AppLayout.tsx b/pkg/dashboard/frontend/src/components/layout/AppLayout/AppLayout.tsx index 94116d507..9decd5984 100644 --- a/pkg/dashboard/frontend/src/components/layout/AppLayout/AppLayout.tsx +++ b/pkg/dashboard/frontend/src/components/layout/AppLayout/AppLayout.tsx @@ -27,7 +27,8 @@ import { Spinner } from '../../shared' import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover' import { Sheet, SheetContent, SheetTrigger } from '../../ui/sheet' import NavigationBar from './NavigationBar' - +import { ModeToggle } from '@/components/ModeToggle' +import { ThemeProvider } from 'next-themes' const DiscordLogo: React.FC> = ({ className, }) => ( @@ -153,6 +154,7 @@ const AppLayout: React.FC = ({ const showAlert = data?.connected === false || state === 'error' return ( + @@ -161,7 +163,7 @@ const AppLayout: React.FC = ({ {secondLevelNav && ( )} -
    -
    +
    +
    -
    +
    Nitric Logo - + {data?.projectName}
    @@ -207,16 +209,16 @@ const AppLayout: React.FC = ({ href={item.href} className={cn( item.href === routePath - ? 'bg-gray-50 text-primary' - : 'text-gray-700 hover:bg-gray-50 hover:text-primary', + ? 'bg-accent text-accent-foreground' + : 'text-foreground hover:bg-accent hover:text-accent-foreground', 'group flex items-center gap-x-3 rounded-md p-2 text-sm font-semibold leading-6', )} >
    +
    {data.projectName} {' '} - /{' '} + /{' '} @@ -310,10 +312,10 @@ const AppLayout: React.FC = ({

    A new version of Nitric is available

    -
    - -
    +
    -

    +

    Reach out to the community

    -
    +
    {communityLinks .filter((item) => item.name !== 'Sponsor') .map((item) => ( @@ -351,10 +353,10 @@ const AppLayout: React.FC = ({ href={item.href} target="_blank" rel="noreferrer" - className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100" + className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-foreground hover:bg-accent" >
    + ) } diff --git a/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationBar.tsx b/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationBar.tsx index 395a7afdf..95dd6274e 100644 --- a/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationBar.tsx +++ b/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationBar.tsx @@ -28,6 +28,8 @@ const NavigationBar: React.FC = ({ className={cn( 'group hidden flex-col overflow-hidden border-r lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:flex lg:w-20 lg:overflow-y-auto lg:bg-white lg:pb-4 lg:data-[state=expanded]:w-52', 'transition-[width] duration-200 data-[state=expanded]:shadow-lg', + 'bg-background border-border', + 'dark:bg-background dark:border-border' )} >
    diff --git a/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationItem.tsx b/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationItem.tsx index 63b362af4..4bf332cd4 100644 --- a/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationItem.tsx +++ b/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationItem.tsx @@ -32,10 +32,11 @@ const NavigationItem: React.FC = ({ target={href.startsWith('http') ? '_blank' : undefined} rel={href.startsWith('http') ? 'noopener noreferrer' : undefined} className={cn( - isActive - ? 'bg-gray-100 text-primary shadow-sm' - : 'text-gray-400 hover:bg-gray-100 hover:text-primary', 'group relative flex h-12 w-12 items-center gap-x-3 rounded-md p-3 text-sm font-semibold leading-6 transition-all group-data-[state=expanded]:w-full', + isActive + ? 'bg-accent text-accent-foreground' + : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground', + 'dark:hover:bg-accent' )} >
  • {index === childArray.length - 1 ? ( - {child} + {child} ) : ( <> - {child} + {child} )} diff --git a/pkg/dashboard/frontend/src/components/logs/FilterSidebar.tsx b/pkg/dashboard/frontend/src/components/logs/FilterSidebar.tsx index f84a665d0..b8b5d27b3 100644 --- a/pkg/dashboard/frontend/src/components/logs/FilterSidebar.tsx +++ b/pkg/dashboard/frontend/src/components/logs/FilterSidebar.tsx @@ -41,7 +41,7 @@ const CollapsibleGroup = ({ Reset diff --git a/pkg/dashboard/frontend/src/components/logs/LogsExplorer.tsx b/pkg/dashboard/frontend/src/components/logs/LogsExplorer.tsx index e39a67112..6a5a4d9b3 100644 --- a/pkg/dashboard/frontend/src/components/logs/LogsExplorer.tsx +++ b/pkg/dashboard/frontend/src/components/logs/LogsExplorer.tsx @@ -177,9 +177,9 @@ const Logs: React.FC = () => {
    { ) }) ) : ( -
    +
    No logs available
    )} diff --git a/pkg/dashboard/frontend/src/components/secrets/SecretVersionsTable/SecretVersionsTable.tsx b/pkg/dashboard/frontend/src/components/secrets/SecretVersionsTable/SecretVersionsTable.tsx index 2837cacab..944053a3b 100644 --- a/pkg/dashboard/frontend/src/components/secrets/SecretVersionsTable/SecretVersionsTable.tsx +++ b/pkg/dashboard/frontend/src/components/secrets/SecretVersionsTable/SecretVersionsTable.tsx @@ -38,6 +38,7 @@ export const SecretVersionsTable = () => {
    ) }} noResultsChildren={ -
    - No versions found.{' '} +
    + No versions found.{' '}
    diff --git a/pkg/dashboard/frontend/src/components/secrets/SecretVersionsTable/columns.tsx b/pkg/dashboard/frontend/src/components/secrets/SecretVersionsTable/columns.tsx index 135e0b9b4..b6a7d44a7 100644 --- a/pkg/dashboard/frontend/src/components/secrets/SecretVersionsTable/columns.tsx +++ b/pkg/dashboard/frontend/src/components/secrets/SecretVersionsTable/columns.tsx @@ -75,12 +75,12 @@ export const columns: ColumnDef[] = [
    -
    +
    {secretVersion.value}
    - +
    {secretVersion.value}
    @@ -95,10 +95,11 @@ export const columns: ColumnDef[] = [ return ( ) }, @@ -114,13 +115,13 @@ export const columns: ColumnDef[] = [ <> - - - Actions + + Actions copyToClipboard(secretVersion.value)} > diff --git a/pkg/dashboard/frontend/src/components/secrets/SecretsExplorer.tsx b/pkg/dashboard/frontend/src/components/secrets/SecretsExplorer.tsx index 668e17c46..07d3b512c 100644 --- a/pkg/dashboard/frontend/src/components/secrets/SecretsExplorer.tsx +++ b/pkg/dashboard/frontend/src/components/secrets/SecretsExplorer.tsx @@ -41,7 +41,7 @@ const SecretsExplorer: React.FC = () => { selectedSecret && ( <>
    - Secrets + Secrets
    {
    Please refer to our documentation on{' '} = ({ resources, onSelect, initialItem }) => { } }} renderItemTitle={({ item }) => { - return {item.data.label} + return {item.data.label} }} /> ) diff --git a/pkg/dashboard/frontend/src/components/secrets/VersionActionDialog.tsx b/pkg/dashboard/frontend/src/components/secrets/VersionActionDialog.tsx index d2b42fd12..f17b3605b 100644 --- a/pkg/dashboard/frontend/src/components/secrets/VersionActionDialog.tsx +++ b/pkg/dashboard/frontend/src/components/secrets/VersionActionDialog.tsx @@ -78,7 +78,7 @@ export function VersionActionDialog({ ? `Add new version to ${secretName}` : `Are you sure that you want to delete the selected ${selectedVersions?.length} versions of ${secretName}?`} - + {action === 'add' ? `Input the new secret value.` : `Once deleted the versions cannot be recovered.`} diff --git a/pkg/dashboard/frontend/src/components/shared/Badge.tsx b/pkg/dashboard/frontend/src/components/shared/Badge.tsx index 488cc40bd..b580a059a 100644 --- a/pkg/dashboard/frontend/src/components/shared/Badge.tsx +++ b/pkg/dashboard/frontend/src/components/shared/Badge.tsx @@ -16,12 +16,12 @@ const Badge: React.FC = ({ ({ className="px-0 pb-0 sm:px-0 sm:pb-0" >
  • Header Value
    + {key} + {value}
    - + {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { diff --git a/pkg/dashboard/frontend/src/components/shared/FieldRows.tsx b/pkg/dashboard/frontend/src/components/shared/FieldRows.tsx index d590eb5e3..64678dcf6 100644 --- a/pkg/dashboard/frontend/src/components/shared/FieldRows.tsx +++ b/pkg/dashboard/frontend/src/components/shared/FieldRows.tsx @@ -35,7 +35,7 @@ const FieldRows: React.FC = ({ return (
    -
      +
        {rows.map((r, i) => { const keyId = `${id}-${i}-key` const valueId = `${id}-${i}-value` diff --git a/pkg/dashboard/frontend/src/components/shared/Tabs.tsx b/pkg/dashboard/frontend/src/components/shared/Tabs.tsx index e838aaa00..ea127bcbd 100644 --- a/pkg/dashboard/frontend/src/components/shared/Tabs.tsx +++ b/pkg/dashboard/frontend/src/components/shared/Tabs.tsx @@ -45,7 +45,7 @@ const Tabs: React.FC = ({ tabs, index, setIndex, round, pill }) => { className={cn( pill ? 'flex space-x-4' - : 'isolate flex divide-x divide-gray-200 rounded-t-lg shadow', + : 'isolate flex divide-x divide-gray-200 rounded-t-lg shadow dark:divide-border', round && 'rounded-lg', )} aria-label="Tabs" @@ -58,11 +58,11 @@ const Tabs: React.FC = ({ tabs, index, setIndex, round, pill }) => { className={cn( tabIdx === index ? pill - ? 'bg-gray-100 text-gray-700' - : 'text-gray-900' + ? 'bg-gray-100 text-gray-700 dark:bg-muted dark:text-foreground' + : 'text-gray-900 dark:text-gray-50' : pill - ? 'text-gray-500 hover:text-gray-700' - : 'text-gray-500 hover:text-gray-700', + ? 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' + : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200', tabIdx === 0 && !pill ? round ? 'rounded-l-lg' @@ -75,7 +75,7 @@ const Tabs: React.FC = ({ tabs, index, setIndex, round, pill }) => { : '', pill ? 'rounded-md px-3 py-2 text-sm font-medium' - : 'group relative min-w-0 flex-1 overflow-hidden bg-white px-4 py-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10', + : 'group relative min-w-0 flex-1 overflow-hidden bg-white px-4 py-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10 dark:bg-background dark:hover:bg-muted', )} aria-current={tabIdx === index ? 'page' : undefined} > @@ -84,8 +84,8 @@ const Tabs: React.FC = ({ tabs, index, setIndex, round, pill }) => {