Fixes API Key Input Box showing all the time, Fixes dark mode Success…

… alert (#880)
nucleuscloud · Dec 16, 2023 · e9150db · e9150db
1 parent c2df7e8
commit e9150db
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/frontend/apps/web/app/[account]/settings/api-keys/[id]/page.tsx b/frontend/apps/web/app/[account]/settings/api-keys/[id]/page.tsx
@@ -107,16 +107,18 @@ function ApiKeyDetails(props: ApiKeyDetailsProps): ReactElement {
           </div>
         </Alert>
       )}
-      <div className=" flex flex-col gap-6 rounded-xl border border-gray-200 p-4">
-        <div className="flex flex-row">
-          <Input value={keyValue} disabled={true} className="mr-3" />
-          <CopyButton
-            buttonVariant="outline"
-            textToCopy={keyValue ?? ''}
-            onCopiedText="Success!"
-            onHoverText="Copy the API key"
-          />
-        </div>
+      <div className="flex flex-col gap-6 rounded-xl border border-gray-200 p-4">
+        {keyValue && (
+          <div className="flex flex-row gap-3">
+            <Input value={keyValue} disabled={true} />
+            <CopyButton
+              buttonVariant="outline"
+              textToCopy={keyValue ?? ''}
+              onCopiedText="Success!"
+              onHoverText="Copy the API key"
+            />
+          </div>
+        )}
         <div className="flex flex-col gap-4">
           <div className="flex flex-row gap-2">
             <p className=" text-sm tracking-tight w-[100px]">Created At:</p>

diff --git a/frontend/apps/web/components/ui/alert.tsx b/frontend/apps/web/components/ui/alert.tsx
@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: 'bg-background text-foreground',
         success:
-          'bg-background text-foreground bg-green-100 border border-green-300',
+          'bg-background text-foreground bg-green-100 dark:bg-green-800 border border-green-300 dark:border-green-400',
         destructive:
           'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
         warning: