Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/dark mode : Added shadcn dark mode to dashboard #852

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat/dark mode : Added shadcn dark mode to dashboard #852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c998ca2
feat: Add dark mode support to dashboard
aloktomarr Feb 27, 2025
7d9713f
Added shadcn theme dark mode to dashboard
aloktomarr Feb 27, 2025
61bb811
dark-mode issues fix
aloktomarr Feb 28, 2025
75b8e39
removed unnecessary files
aloktomarr Mar 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions pkg/dashboard/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
39 changes: 39 additions & 0 deletions pkg/dashboard/frontend/src/components/ModeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
32 changes: 16 additions & 16 deletions pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,7 +491,7 @@ const APIExplorer = () => {
}}
>
<span className="sr-only">Copy Route URL</span>
<ClipboardIcon className="h-5 w-5 text-gray-500" />
<ClipboardIcon className="h-5 w-5 text-muted-foreground" />
</button>
</TooltipTrigger>
<TooltipContent>
Expand Down Expand Up @@ -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
</a>
Expand Down Expand Up @@ -600,7 +600,7 @@ const APIExplorer = () => {
</li>
)}
<li className="flex flex-col py-4">
<h4 className="text-lg font-medium text-gray-900">
<h4 className="text-lg font-medium text-foreground">
Query Params
</h4>
<FieldRows
Expand Down Expand Up @@ -664,14 +664,14 @@ const APIExplorer = () => {
)}
{currentBodyTab.name === 'Binary' && (
<div className="mb-2 flex flex-col">
<h4 className="mb-2 text-lg font-medium text-gray-900">
<h4 className="mb-2 text-lg font-medium text-foreground">
Binary File
</h4>
<FileUpload multiple={false} onDrop={onDrop} />
{fileToUpload && (
<span
data-testid="file-upload-info"
className="flex items-center px-4 py-4 sm:px-0"
className="flex items-center px-4 py-4 sm:px-0 text-muted-foreground"
>
{fileToUpload.name} -{' '}
{formatFileSize(fileToUpload.size)}
Expand Down Expand Up @@ -741,31 +741,31 @@ const APIExplorer = () => {
{responseTabIndex === 1 && (
<div className="overflow-x-auto">
<div className="inline-block min-w-full py-2 align-middle">
<table className="min-w-full divide-y divide-gray-300">
<table className="min-w-full divide-y divide-border">
<thead>
<tr>
<th
scope="col"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-foreground sm:pl-6 lg:pl-8"
>
Header
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left text-sm font-semibold text-foreground"
>
Value
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-border">
{Object.entries(response.headers || {}).map(
([key, value]) => (
<tr key={key}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-foreground sm:pl-6 lg:pl-8">
{key}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<td className="whitespace-nowrap px-3 py-4 text-sm text-muted-foreground">
{value}
</td>
</tr>
Expand All @@ -778,11 +778,11 @@ const APIExplorer = () => {
)}
</div>
) : response ? (
<span className="text-lg text-gray-500">
<span className="text-lg text-muted-foreground">
No response data available for this request.
</span>
) : (
<span className="text-lg text-gray-500">
<span className="text-lg text-muted-foreground">
Send a request to get a response.
</span>
)}
Expand All @@ -791,7 +791,7 @@ const APIExplorer = () => {
</div>
<SectionCard
title="Request History"
className="m-0 mb-20 border-none px-0 shadow-none sm:px-0"
className="m-0 mb-20 border-none px-0 shadow-none sm:px-0 bg-background"
headerClassName="px-4 sm:px-2"
>
<APIHistory
Expand All @@ -809,7 +809,7 @@ const APIExplorer = () => {
<div>
Please refer to our documentation on{' '}
<a
className="underline"
className="underline text-foreground hover:text-accent-foreground"
target="_blank"
href="https://nitric.io/docs/apis"
rel="noreferrer"
Expand All @@ -819,7 +819,7 @@ const APIExplorer = () => {
as we are unable to find any existing APIs. <br />
APIs built using{' '}
<a
className="underline"
className="underline text-foreground hover:text-accent-foreground"
target="_blank"
href="https://nitric.io/docs/reference/nodejs/http/http"
rel="noopener noreferrer"
Expand Down
6 changes: 3 additions & 3 deletions pkg/dashboard/frontend/src/components/apis/APIHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const APIHistory: React.FC<Props> = ({
})

if (!requestHistory.length) {
return <p className="px-2">There is no history.</p>
return <p className="px-2 text-foreground">There is no history.</p>
}

return (
Expand Down Expand Up @@ -107,7 +107,7 @@ const ApiHistoryAccordionContent: React.FC<ApiHistoryItem> = ({
{tabIndex === 0 && (
<TableGroup
headers={['Key', 'Value']}
rowDataClassName="max-w-[100px]"
rowDataClassName="max-w-[100px] text-foreground"
groups={[
{
name: 'Request Headers',
Expand Down Expand Up @@ -137,7 +137,7 @@ const ApiHistoryAccordionContent: React.FC<ApiHistoryItem> = ({
{tabIndex === 2 && (
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-2">
<p className="text-md font-semibold">Request Body</p>
<p className="text-md font-semibold text-foreground">Request Body</p>
<CodeEditor
contentType="application/json"
readOnly={true}
Expand Down
6 changes: 3 additions & 3 deletions pkg/dashboard/frontend/src/components/apis/APIMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,14 @@ const APIMenu: React.FC<Props> = ({ selected, onAfterClear }) => {

return (
<ResourceDropdownMenu>
<DropdownMenuLabel>API Menu</DropdownMenuLabel>
<DropdownMenuLabel className="text-foreground">API Menu</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem onClick={downloadSpec}>
<DropdownMenuItem onClick={downloadSpec} className="text-foreground">
<ArrowDownOnSquareIcon className="mr-2 h-4 w-4" />
<span>Export Spec</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={clearHistory}>
<DropdownMenuItem onClick={clearHistory} className="text-foreground">
<TrashIcon className="mr-2 h-4 w-4" />
<span>Clear History</span>
</DropdownMenuItem>
Expand Down
23 changes: 23 additions & 0 deletions pkg/dashboard/frontend/src/components/apis/APIMethodBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<Props> = ({ method, className }) => {
return (
<Badge
Expand Down
2 changes: 1 addition & 1 deletion pkg/dashboard/frontend/src/components/apis/APIRoutesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const APIRoutesList: React.FC<APIRoutesListProps> = ({
<div className="col-span-9 flex justify-start">
<a
target="_blank noreferrer noopener"
className="truncate hover:underline"
className="truncate text-foreground hover:text-accent-foreground hover:underline"
href={`${apiAddress}${endpoint.path}`}
rel="noreferrer"
>
Expand Down
4 changes: 2 additions & 2 deletions pkg/dashboard/frontend/src/components/apis/APITreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,11 @@ const APITreeView: FC<Props> = ({ endpoints, onSelect, defaultTreeIndex }) => {
<APIMethodBadge method={item.data.method} />
</div>
<div className="col-span-7 flex justify-start">
<span className="truncate">{item.data.data?.path}</span>
<span className="truncate text-foreground">{item.data.data?.path}</span>
</div>
</div>
) : (
<span>
<span className="text-foreground">
{item.children?.length
? `${title} (${item.children.length})`
: title}
Expand Down
10 changes: 5 additions & 5 deletions pkg/dashboard/frontend/src/components/apis/CodeEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ const CodeEditor: React.FC<Props> = ({
<button
aria-label="Copy Code"
data-testid="copy-code"
className="absolute right-0 top-0 z-50 m-4 h-4 w-4 text-white"
className="absolute right-0 top-0 z-50 m-4 h-4 w-4 text-foreground hover:text-accent-foreground"
onClick={handleCopyCode}
>
{copied ? <ClipboardDocumentCheckIcon /> : <ClipboardIcon />}
Expand All @@ -188,7 +188,7 @@ const CodeEditor: React.FC<Props> = ({
<button
onClick={handleFormat}
type="button"
className="ml-auto rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
className="ml-auto rounded bg-background px-2 py-1 text-xs font-semibold text-foreground shadow-sm ring-1 ring-inset ring-border hover:bg-accent"
>
Format
</button>
Expand All @@ -210,16 +210,16 @@ const CodeEditor: React.FC<Props> = ({
{...props}
/>
{errors.length > 0 && (
<div className="absolute bottom-0 right-0 m-2 rounded-md bg-red-50 p-2.5">
<div className="absolute bottom-0 right-0 m-2 rounded-md bg-destructive/10 p-2.5">
<div className="flex items-center">
<div className="flex-shrink-0">
<XCircleIcon
className="h-5 w-5 text-red-400"
className="h-5 w-5 text-destructive"
aria-hidden="true"
/>
</div>
<div className="ml-1">
<div className="text-sm text-red-700">
<div className="text-sm text-destructive">
Error Invalid JSON at line{' '}
{getLineNumber(
editor.current?.view?.state.doc.toString() || '',
Expand Down
27 changes: 19 additions & 8 deletions pkg/dashboard/frontend/src/components/architecture/Architecture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,16 +154,27 @@ function ReactFlowLayout() {
onEdgesChange={onEdgesChange}
defaultEdgeOptions={{
type: 'nitric',
className: 'text-foreground',
}}
className="bg-background"
onConnect={onConnect}
fitView
fitViewOptions={{
maxZoom: 1.5,
minZoom: 1,
}}
>
<MiniMap pannable zoomable className="!bg-blue-300" />
<Background variant={BackgroundVariant.Dots} gap={12} size={1} />
<MiniMap
pannable
zoomable
className="!bg-background border border-border"
/>
<Background
variant={BackgroundVariant.Dots}
gap={12}
size={1}
className="!text-border"
/>
{data?.projectName && (
<Panel position="top-right">
<div className="flex items-center gap-x-6">
Expand All @@ -181,15 +192,15 @@ function ReactFlowLayout() {
</Panel>
)}
<Panel position="bottom-left" className="flex flex-col gap-y-1">
<div className="rounded-md border bg-white p-2">
<div className="mb-2 text-center text-xs font-semibold">
<div className="rounded-md border-border bg-background p-2">
<div className="mb-2 text-center text-xs font-semibold text-foreground">
Connector Types
</div>
<div className="grid grid-cols-2 items-center gap-x-4 gap-y-2 text-xs font-semibold">
<span className="h-1 border-b-2 border-dashed border-black" />
<span>Triggers</span>
<span className="h-1 border-b-2 border-black" />
<span>Dependencies</span>
<span className="h-1 border-b-2 border-dashed border-foreground" />
<span className="text-foreground">Triggers</span>
<span className="h-1 border-b-2 border-dashed border-foreground" />
<span className="text-foreground">Dependencies</span>
</div>
</div>
</Panel>
Expand Down
Loading
Loading