feat: creation info widget (#960)

* feat: creation info widget

* fix: Remove demo page

Co-authored-by: Usame Algan <usame@safe.global>

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

@@ -0,0 +1,86 @@
+import { Box, Button, Card, CardActions, CardContent, CardHeader, SvgIcon, Typography } from '@mui/material'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import { useState } from 'react'
+import type { AlertColor } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import LightbulbIcon from '@/public/images/common/lightbulb.svg'
+
+import css from './styles.module.css'
+
+type Props = {
+  title: string
+  steps: { title: string; text: string }[]
+  variant: AlertColor
+}
+
+const InfoWidget = ({ title, steps, variant }: Props): ReactElement | null => {
+  const [activeStep, setActiveStep] = useState(0)
+  const [dismissed, setDismissed] = useState(false)
+
+  const isFirst = activeStep === 0
+  const isLast = activeStep === steps.length - 1
+
+  const isMultiStep = steps.length > 1
+
+  const onPrev = () => {
+    if (!isFirst) {
+      setActiveStep((prev) => prev - 1)
+    }
+  }
+
+  const onNext = () => {
+    if (isLast) {
+      setDismissed(true)
+    } else {
+      setActiveStep((prev) => prev + 1)
+    }
+  }
+
+  if (dismissed) {
+    return null
+  }
+
+  return (
+    <Card sx={{ backgroundColor: ({ palette }) => palette[variant]?.background }}>
+      <CardHeader
+        className={css.header}
+        title={
+          <Box className={css.headerWrapper}>
+            <Typography
+              variant="caption"
+              className={css.title}
+              sx={{
+                backgroundColor: ({ palette }) => palette[variant]?.main,
+              }}
+            >
+              <SvgIcon component={LightbulbIcon} inheritViewBox fontSize="inherit" className={css.lightbulb} />
+              {title}
+            </Typography>
+            {isMultiStep && (
+              <Typography variant="caption" className={css.count}>
+                {activeStep + 1} of {steps.length}
+              </Typography>
+            )}
+          </Box>
+        }
+      />
+      <CardContent>
+        <Typography variant="h5">{steps[activeStep].title}</Typography>
+        <Typography variant="body2">{steps[activeStep].text}</Typography>
+      </CardContent>
+      <CardActions className={css.actions}>
+        {isMultiStep && !isFirst && (
+          <Button variant="contained" size="small" onClick={onPrev} startIcon={<ChevronLeftIcon />}>
+            Previous
+          </Button>
+        )}
+        <Button variant="outlined" size="small" onClick={onNext}>
+          Got it
+        </Button>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default InfoWidget

src/components/create-safe/InfoWidget/styles.module.css

@@ -0,0 +1,30 @@
+.header {
+  padding-bottom: 0px;
+}
+
+.headerWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-weight: 700;
+  padding: calc(var(--space-1) / 2) var(--space-1);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.lightbulb {
+  margin-right: calc(var(--space-1) / 2);
+}
+
+.count {
+  color: var(--color-text-secondary);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}

src/styles/colors.ts

@@ -42,7 +42,7 @@ const palette = {
     dark: '#CD674E',
     main: '#FF8061',
     light: '#FFB7A6',
-    background: '#EFFFF4',
+    background: '#FFF0ED',
   },
   background: {
     default: '#F4F4F4',

src/styles/vars.css

@@ -29,7 +29,7 @@
   --color-warning-dark: #cd674e;
   --color-warning-main: #ff8061;
   --color-warning-light: #ffb7a6;
-  --color-warning-background: #effff4;
+  --color-warning-background: #fff0ed;
   --color-background-default: #f4f4f4;
   --color-background-main: #f4f4f4;
   --color-background-paper: #ffffff;