fix: colors for project template cards

Reviewed-on: cerc-io/snowballtools-base#23

packages/frontend/src/components/projects/create/Configure.tsx

@@ -379,7 +379,10 @@ const Configure = () => {
           <Heading as="h4" className="md:text-lg font-medium">
             Configure deployment
           </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-secondaryu"
+          >
             The app can be deployed by setting the deployer LRN for a single
             deployment or by creating a deployer auction for multiple
             deployments
@@ -400,6 +403,7 @@ const Configure = () => {
                     onChange={(event) => onChange(event.target.value)}
                     size="small"
                     displayEmpty
+                    className="dark:bg-overlay2 dark:text-foreground"
                     sx={{
                       fontFamily: 'inherit',
                       '& .MuiOutlinedInput-notchedOutline': {
@@ -419,7 +423,7 @@ const Configure = () => {
               <div className="flex flex-col justify-start gap-4 mb-6">
                 <Heading
                   as="h5"
-                  className="text-sm font-sans text-elements-low-em"
+                  className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
                 >
                   The app will be deployed by the configured deployer
                 </Heading>
@@ -429,7 +433,7 @@ const Configure = () => {
                   rules={{ required: true }}
                   render={({ field: { value, onChange }, fieldState }) => (
                     <FormControl fullWidth error={Boolean(fieldState.error)}>
-                      <span className="text-sm text-elements-high-em mb-4">
+                      <span className="text-sm dark:text-foreground text-elements-high-em dark:text-foreground mb-4">
                         Select deployer LRN
                       </span>
                       <Select
@@ -440,6 +444,7 @@ const Configure = () => {
                         }}
                         displayEmpty
                         size="small"
+                        className="dark:bg-overlay2 dark:text-foreground"
                       >
                         {deployers.map((deployer) => (
                           <MenuItem
@@ -466,12 +471,12 @@ const Configure = () => {
                 <div className="flex flex-col justify-start gap-4 mb-6">
                   <Heading
                     as="h5"
-                    className="text-sm font-sans text-elements-low-em"
+                    className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
                   >
                     Set the number of deployers and maximum price for each
                     deployment
                   </Heading>
-                  <span className="text-sm text-elements-high-em">
+                  <span className="text-sm text-elements-high-em dark:text-foreground">
                     Number of Deployers
                   </span>
                   <Controller
@@ -488,7 +493,7 @@ const Configure = () => {
                   />
                 </div>
                 <div className="flex flex-col justify-start gap-4 mb-6">
-                  <span className="text-sm text-elements-high-em">
+                  <span className="text-sm text-elements-high-em dark:text-foreground">
                     Maximum Price (alnt)
                   </span>
                   <Controller
@@ -506,7 +511,7 @@ const Configure = () => {
             <Heading as="h4" className="md:text-lg font-medium mb-3">
               Environment Variables
             </Heading>
-            <div className="p-4 bg-slate-100 rounded-lg mb-6">
+            <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
               <EnvironmentVariablesForm />
             </div>
 
@@ -538,6 +543,7 @@ const Configure = () => {
                     <Button
                       {...buttonSize}
                       type="submit"
+                      shape="default"
                       disabled={
                         isLoading || isPaymentLoading || !selectedAccount
                       }

packages/frontend/src/components/projects/create/ConnectWallet.tsx

@@ -15,7 +15,7 @@ const ConnectWallet = ({
   };
 
   return (
-    <div className="p-4 bg-slate-100 rounded-lg mb-6">
+    <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
       {!accounts ? (
         <div>
           <Button type={'button'} onClick={handleConnect}>
@@ -30,6 +30,7 @@ const ConnectWallet = ({
             onChange={(value) => {
               value && onAccountChange(value);
             }}
+            className="dark:bg-overlay2 dark:text-foreground"
           >
             {accounts.map((account, index) => (
               <Option key={index} value={account.address}>

packages/frontend/src/components/projects/create/DeployStep.tsx

@@ -36,7 +36,7 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
               </div>
             )}
             {status === DeployStatus.PROCESSING && (
-              <LoaderIcon className="animate-spin text-elements-link" />
+              <LoaderIcon className="animate-spin text-elements-link dark:text-foreground" />
             )}
           </div>
 
@@ -44,7 +44,8 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
           <span
             className={cn(
               'text-left text-sm md:text-base',
-              status === DeployStatus.PROCESSING && 'text-elements-link',
+              status === DeployStatus.PROCESSING &&
+                'text-elements-link dark:text-foreground',
             )}
           >
             {title}
@@ -54,7 +55,10 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
         {/* Timer */}
         {status === DeployStatus.PROCESSING && (
           <div className="flex items-center gap-1.5">
-            <ClockOutlineIcon size={16} className="text-elements-low-em" />
+            <ClockOutlineIcon
+              size={16}
+              className="text-elements-low-em dark:text-foreground-secondary"
+            />
             <Stopwatch
               offsetTimestamp={setStopWatchOffset(startTime!)}
               isPaused={false}

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>

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>

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}