fix: Safe Creation color issues

src/components/create-safe/InfoWidget/index.tsx

@@ -29,7 +29,13 @@ const InfoWidget = ({ title, steps, variant, startExpanded = false }: InfoWidget
   }
 
   return (
-    <Card sx={{ backgroundColor: ({ palette }) => palette[variant]?.background }}>
+    <Card
+      sx={{
+        backgroundColor: ({ palette }) => palette[variant]?.background,
+        borderColor: ({ palette }) => palette[variant]?.main,
+        borderWidth: 1,
+      }}
+    >
       <CardHeader
         className={css.cardHeader}
         title={

src/components/new-safe/CardStepper/index.tsx

@@ -1,17 +1,22 @@
+import { useState } from 'react'
+import { Box } from '@mui/system'
 import css from './styles.module.css'
 import { Card, LinearProgress, CardHeader, Avatar, Typography, CardContent } from '@mui/material'
 import type { TxStepperProps } from './useCardStepper'
 import { useCardStepper } from './useCardStepper'
 
 export function CardStepper<StepperData>(props: TxStepperProps<StepperData>) {
+  const [progressColor, setProgressColor] = useState('static.primary')
   const { activeStep, onSubmit, onBack, stepData, setStep } = useCardStepper<StepperData>(props)
   const { steps } = props
   const currentStep = steps[activeStep]
   const progress = ((activeStep + 1) / steps.length) * 100
 
   return (
     <Card className={css.card}>
-      <LinearProgress color="secondary" variant="determinate" value={Math.min(progress, 100)} />
+      <Box className={css.progress} color={progressColor}>
+        <LinearProgress color="inherit" variant="determinate" value={Math.min(progress, 100)} />
+      </Box>
       {currentStep.title && (
         <CardHeader
           title={currentStep.title}
@@ -26,7 +31,9 @@ export function CardStepper<StepperData>(props: TxStepperProps<StepperData>) {
           className={css.header}
         />
       )}
-      <CardContent className={css.content}>{currentStep.render(stepData, onSubmit, onBack, setStep)}</CardContent>
+      <CardContent className={css.content}>
+        {currentStep.render(stepData, onSubmit, onBack, setStep, setProgressColor)}
+      </CardContent>
     </Card>
   )
 }

src/components/new-safe/CardStepper/styles.module.css

@@ -29,6 +29,10 @@
   padding: var(--space-3) 52px;
 }
 
+.progress :global .MuiLinearProgress-root::before {
+  display: none;
+}
+
 @media (max-width: 600px) {
   .header {
     padding: var(--space-2);

src/components/new-safe/CardStepper/useCardStepper.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, SetStateAction } from 'react'
+import type { Dispatch, ReactElement, SetStateAction } from 'react'
 import { useState } from 'react'
 import { trackEvent, MODALS_CATEGORY } from '@/services/analytics'
 
@@ -7,6 +7,7 @@ export type StepRenderProps<TData> = {
   onSubmit: (data: Partial<TData>) => void
   onBack: (data?: Partial<TData>) => void
   setStep: (step: number) => void
+  setProgressColor?: Dispatch<SetStateAction<string>>
 }
 
 export type Step<TData> = {
@@ -17,6 +18,7 @@ export type Step<TData> = {
     onSubmit: StepRenderProps<TData>['onSubmit'],
     onBack: StepRenderProps<TData>['onBack'],
     setStep: StepRenderProps<TData>['setStep'],
+    setProgressColor: StepRenderProps<TData>['setProgressColor'],
   ) => ReactElement
 }
 

src/components/new-safe/CreateSafe/index.tsx

@@ -157,8 +157,14 @@ const CreateSafe = () => {
     {
       title: '',
       subtitle: '',
-      render: (data, onSubmit, onBack, setStep) => (
-        <CreateSafeStatus data={data} onSubmit={onSubmit} onBack={onBack} setStep={setStep} />
+      render: (data, onSubmit, onBack, setStep, setProgressColor) => (
+        <CreateSafeStatus
+          data={data}
+          onSubmit={onSubmit}
+          onBack={onBack}
+          setStep={setStep}
+          setProgressColor={setProgressColor}
+        />
       ),
     },
   ]

src/components/new-safe/OverviewWidget/index.tsx

@@ -4,6 +4,7 @@ import { useCurrentChain } from '@/hooks/useChains'
 import useWallet from '@/hooks/wallets/useWallet'
 import { Card, Grid, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
+import SafeLogo from '@/public/images/logo-no-text.svg'
 
 import css from './styles.module.css'
 
@@ -22,7 +23,7 @@ const OverviewWidget = ({ safeName }: { safeName: string }): ReactElement | null
     <Grid item xs={12}>
       <Card className={css.card}>
         <div className={css.header}>
-          <img src="/images/logo-no-text.svg" alt="Safe logo" width={LOGO_DIMENSIONS} />
+          <SafeLogo alt="Safe logo" width={LOGO_DIMENSIONS} height={LOGO_DIMENSIONS} />
           <Typography variant="h4">Your Safe preview</Typography>
         </div>
         {rows?.map((row) => (

src/components/new-safe/steps/Step3/index.tsx

@@ -129,7 +129,15 @@ const CreateSafeStep3 = ({ data, onSubmit, onBack, setStep }: StepRenderProps<Ne
               name="Est. network fee"
               value={
                 <>
-                  <Box p={1} sx={{ backgroundColor: 'secondary.background', width: 'fit-content' }}>
+                  <Box
+                    p={1}
+                    sx={{
+                      backgroundColor: 'static.light',
+                      color: 'static.main',
+                      width: 'fit-content',
+                      borderRadius: '6px',
+                    }}
+                  >
                     <Typography variant="body1">
                       <b>
                         &asymp; {totalFee} {chain?.nativeCurrency.symbol}

src/components/new-safe/steps/Step4/StatusMessage.tsx

@@ -55,9 +55,11 @@ const getStep = (status: SafeCreationStatus) => {
   }
 }
 
-const StatusMessage = ({ status }: { status: SafeCreationStatus }) => {
+const StatusMessage = ({ status, isError }: { status: SafeCreationStatus; isError: boolean }) => {
   const stepInfo = getStep(status)
 
+  const color = isError ? 'success' : 'warning'
+
   return (
     <>
       <Box paddingX={3} mt={3}>
@@ -68,7 +70,13 @@ const StatusMessage = ({ status }: { status: SafeCreationStatus }) => {
       </Box>
       {stepInfo.instruction && (
         <Box
-          sx={({ palette }) => ({ backgroundColor: palette.warning.background, borderRadius: '6px' })}
+          sx={({ palette }) => ({
+            backgroundColor: palette[color].background,
+            borderColor: palette[color].light,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderRadius: '6px',
+          })}
           padding={3}
           mt={4}
           mb={0}

src/components/new-safe/steps/Step4/index.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useState } from 'react'
-import { Box, Button, Divider, Grid, Paper, Tooltip, Typography } from '@mui/material'
+import { useCallback, useEffect, useState } from 'react'
+import { Box, Button, Divider, Paper, Tooltip, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 
 import Track from '@/components/common/Track'
@@ -29,7 +29,7 @@ export type PendingSafeData = NewSafeFormData & {
   saltNonce: number
 }
 
-export const CreateSafeStatus = ({ setStep }: StepRenderProps<NewSafeFormData>) => {
+export const CreateSafeStatus = ({ setProgressColor }: StepRenderProps<NewSafeFormData>) => {
   const [status, setStatus] = useState<SafeCreationStatus>(SafeCreationStatus.AWAITING)
   const [pendingSafe, setPendingSafe] = useLocalStorage<PendingSafeData | undefined>(SAFE_PENDING_CREATION_STORAGE_KEY)
   const router = useRouter()
@@ -69,7 +69,17 @@ export const CreateSafeStatus = ({ setStep }: StepRenderProps<NewSafeFormData>)
   }, [chainId, pendingSafe, router, setPendingSafe])
 
   const displaySafeLink = status >= SafeCreationStatus.INDEXED
-  const displayActions = status >= SafeCreationStatus.WALLET_REJECTED && status <= SafeCreationStatus.TIMEOUT
+  const isError = status >= SafeCreationStatus.WALLET_REJECTED && status <= SafeCreationStatus.TIMEOUT
+
+  useEffect(() => {
+    if (!setProgressColor) return
+
+    if (isError) {
+      setProgressColor('error.main')
+    } else {
+      setProgressColor('static.primary')
+    }
+  }, [isError, setProgressColor])
 
   return (
     <Paper
@@ -78,10 +88,10 @@ export const CreateSafeStatus = ({ setStep }: StepRenderProps<NewSafeFormData>)
       }}
     >
       <Box className={layoutCss.row}>
-        <StatusMessage status={status} />
+        <StatusMessage status={status} isError={isError} />
       </Box>
 
-      {!displayActions && pendingSafe && (
+      {!isError && pendingSafe && (
         <>
           <Divider />
           <Box className={layoutCss.row}>
@@ -103,11 +113,11 @@ export const CreateSafeStatus = ({ setStep }: StepRenderProps<NewSafeFormData>)
         </>
       )}
 
-      {displayActions && (
+      {isError && (
         <>
           <Divider />
           <Box className={layoutCss.row}>
-            <Grid container justifyContent="center" gap={2}>
+            <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
               <Track {...CREATE_SAFE_EVENTS.CANCEL_CREATE_SAFE}>
                 <Button onClick={onClose} variant="outlined">
                   Cancel
@@ -124,7 +134,7 @@ export const CreateSafeStatus = ({ setStep }: StepRenderProps<NewSafeFormData>)
                   </Typography>
                 </Tooltip>
               </Track>
-            </Grid>
+            </Box>
           </Box>
         </>
       )}

src/styles/colors-dark.ts

@@ -56,6 +56,8 @@ const darkPalette = {
   },
   static: {
     main: '#121312',
+    primary: '#12FF80',
+    light: '#EFFFF4',
   },
 }
 export default darkPalette

src/styles/colors.ts

@@ -56,6 +56,8 @@ const palette = {
   },
   static: {
     main: '#121312',
+    primary: '#12FF80',
+    light: '#EFFFF4',
   },
 }
 export default palette