From 6d1135645b67ff8b32f2731a13d699f22f7a6b6b Mon Sep 17 00:00:00 2001
From: Cody Bender <codyfbender@gmail.com>
Date: Tue, 5 Nov 2024 11:49:55 -0500
Subject: [PATCH] fix: colors for project template cards

---
 .../src/pages/org-slug/projects/create/Template.tsx |  2 +-
 .../pages/org-slug/projects/create/success/Id.tsx   |  6 +++---
 .../org-slug/projects/create/template/index.tsx     | 13 ++++++++++---
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
index f14d7187..78b7b4c1 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -57,7 +57,7 @@ const CreateWithTemplate = () => {
 
   return (
     <div className="flex flex-col items-center gap-6 lg:gap-10 mx-auto w-full lg:w-5/6">
-      <div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
+      <div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate dark:bg-overlay rounded-xl p-6 gap-3 items-start lg:items-center">
         <div className="flex items-center gap-3">
           <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
           <Heading className="font-medium">{template?.name}</Heading>
diff --git a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
index 37883c8c..83db2ffd 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
@@ -55,7 +55,7 @@ const Id = () => {
           </div>
 
           {/* Card */}
-          <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
+          <div className="bg-base-bg-alternate dark:bg-overlay2 rounded-xl shadow-inset w-full px-1 py-1">
             {/* Trigger question */}
             <div className="flex gap-2 justify-center items-center py-3">
               <div className="h-5 w-5">
@@ -67,7 +67,7 @@ const Id = () => {
             </div>
 
             {/* CTA card */}
-            <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
+            <div className="bg-surface-card dark:bg-overlay rounded-xl shadow-card-sm dark:shadow-background px-4 py-4">
               <div className="flex gap-2">
                 <Badge variant="secondary">1</Badge>
                 <div className="space-y-3">
@@ -75,7 +75,7 @@ const Id = () => {
                     <Heading as="h6" className="text-sm font-sans">
                       Add a custom domain
                     </Heading>
-                    <p className="text-xs text-elements-low-em font-sans">
+                    <p className="text-xs text-elements-low-em dark:text-foreground-secondary font-sans">
                       Make it easy for your visitors to remember your URL with a
                       custom domain.
                     </p>
diff --git a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
index 3df23812..f6d6afde 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
@@ -152,13 +152,18 @@ const CreateRepo = () => {
           <Heading as="h3" className="text-lg font-medium">
             Create a repository
           </Heading>
-          <Heading as="h5" className="text-sm font-sans text-elements-low-em">
+          <Heading
+            as="h5"
+            className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
+          >
             The project will be cloned into this repository
           </Heading>
         </div>
 
         <div className="flex flex-col justify-start gap-3">
-          <span className="text-sm text-elements-high-em">Git account</span>
+          <span className="text-sm text-elements-high-em dark:text-foreground">
+            Git account
+          </span>
           {gitAccounts.length > 0 ? (
             <Controller
               name="account"
@@ -181,7 +186,9 @@ const CreateRepo = () => {
           )}
         </div>
         <div className="flex flex-col justify-start gap-3">
-          <span className="text-sm text-elements-high-em">Name the repo</span>
+          <span className="text-sm text-elements-high-em dark:text-foreground">
+            Name the repo
+          </span>
           <Controller
             name="repoName"
             control={control}