dark-mode issues fix

nitrictech · Feb 28, 2025 · 61bb811 · 61bb811
1 parent 7d9713f
commit 61bb811
Show file tree

Hide file tree

Showing 42 changed files with 3,617 additions and 1,426 deletions.
diff --git a/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx b/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx
@@ -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>
@@ -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>
@@ -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
@@ -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)}
@@ -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>
@@ -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>
                   )}
@@ -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
@@ -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"
@@ -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"

diff --git a/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx b/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx
@@ -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',
@@ -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}

diff --git a/pkg/dashboard/frontend/src/components/apis/APIMenu.tsx b/pkg/dashboard/frontend/src/components/apis/APIMenu.tsx
@@ -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>

diff --git 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<Props> = ({ method, className }) => {
   return (
     <Badge

diff --git a/pkg/dashboard/frontend/src/components/apis/APIRoutesList.tsx b/pkg/dashboard/frontend/src/components/apis/APIRoutesList.tsx
@@ -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"
             >

diff --git a/pkg/dashboard/frontend/src/components/apis/APITreeView.tsx b/pkg/dashboard/frontend/src/components/apis/APITreeView.tsx
@@ -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}

diff --git 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<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 />}
@@ -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>
@@ -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() || '',

diff --git a/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx b/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx
@@ -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">

diff --git a/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx b/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx
@@ -118,11 +118,11 @@ export const DetailsDrawer = ({
           >
             <Icon className="resource-icon mr-2 size-8" />
             <div>
-              <DrawerTitle>
+              <DrawerTitle className="text-foreground">
                 <span className="flex items-center">{title}</span>
               </DrawerTitle>
               {description && (
-                <DrawerDescription>{description}</DrawerDescription>
+                <DrawerDescription className="text-muted-foreground">{description}</DrawerDescription>
               )}
             </div>
           </DrawerHeader>

diff --git a/pkg/dashboard/frontend/src/components/architecture/NitricEdge.tsx b/pkg/dashboard/frontend/src/components/architecture/NitricEdge.tsx
@@ -81,7 +81,9 @@ export default function NitricEdge({
         path={edgePath}
         style={{
           ...style,
-          stroke: highlightEdge ? 'rgb(var(--primary))' : style.stroke,
+          stroke: highlightEdge ? 'rgb(var(--primary))' : 'rgb(var(--foreground))',
+          strokeWidth: highlightEdge ? 2 : 1,
+          opacity: highlightEdge ? 1 : 0.6,
         }}
         markerEnd={markerEnd}
       />

diff --git a/pkg/dashboard/frontend/src/components/architecture/nodes/NodeBase.tsx b/pkg/dashboard/frontend/src/components/architecture/nodes/NodeBase.tsx
@@ -34,7 +34,7 @@ const NodeBase: FC<PropsWithChildren<Props>> = ({
         <DetailsDrawer {...drawerOptions} open={selected && !dragging} />
       )}
       <div className="wrapper gradient relative flex flex-grow overflow-hidden rounded-md p-0.5">
-        <div className="relative flex grow items-center justify-center gap-4 rounded bg-background text-foreground border border-border">
+        <div className="relative flex grow items-center justify-center gap-4 rounded bg-background text-foreground border border-border pr-4">
           <div className="flex h-full w-14 items-center justify-center">
             <div className="gradient relative flex size-10 items-center justify-center overflow-hidden rounded-full">
               <div className="z-10 flex size-9 items-center justify-center rounded-full bg-background">
@@ -44,11 +44,17 @@ const NodeBase: FC<PropsWithChildren<Props>> = ({
           </div>
           <div className="text-sm font-semibold text-foreground">{title}</div>
 
-          <Handle type="target" isConnectable={false} position={Position.Top} />
+          <Handle 
+            type="target" 
+            isConnectable={false} 
+            position={Position.Top}
+            className="!bg-foreground" 
+          />
           <Handle
             type="source"
             isConnectable={false}
             position={Position.Bottom}
+            className="!bg-foreground"
           />
         </div>
       </div>

diff --git a/pkg/dashboard/frontend/src/components/architecture/nodes/SQLNode.tsx b/pkg/dashboard/frontend/src/components/architecture/nodes/SQLNode.tsx
@@ -43,7 +43,7 @@ export const SQLNode: ComponentType<NodeProps<SQLNodeData>> = (props) => {
                   }}
                 >
                   <span className="sr-only">Copy connection string</span>
-                  <ClipboardIcon className="h-5 w-5 text-gray-500" />
+                  <ClipboardIcon className="h-5 w-5 text-muted-foreground hover:text-foreground" />
                 </button>
               </span>
             </div>

diff --git 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
@@ -335,7 +335,7 @@ const DatabasesExplorer: React.FC = () => {
                 <div className="mb-4 flex max-w-full gap-x-2 text-sm">
                   <span
                     data-testid="connection-string"
-                    className="truncate font-mono"
+                    className="truncate font-mono text-foreground"
                   >
                     {selectedDb.connectionString}
                   </span>
@@ -349,7 +349,7 @@ const DatabasesExplorer: React.FC = () => {
                         }}
                       >
                         <span className="sr-only">Copy connection string</span>
-                        <ClipboardIcon className="h-5 w-5 text-gray-500" />
+                        <ClipboardIcon className="h-5 w-5 text-muted-foreground hover:text-foreground" />
                       </button>
                     </TooltipTrigger>
                     <TooltipContent>
@@ -377,7 +377,7 @@ const DatabasesExplorer: React.FC = () => {
 
                   <div className="mt-4 flex w-full items-center justify-between">
                     <div className="flex items-center gap-x-2">
-                      <h3 className="text-xl font-semibold leading-6 text-gray-900">
+                      <h3 className="text-xl font-semibold leading-6 text-foreground">
                         Results
                       </h3>
                     </div>
@@ -400,7 +400,7 @@ const DatabasesExplorer: React.FC = () => {
           <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/sql"
               rel="noreferrer"