From 614ee1b133c85df2ab0a470921a87f7406f57a11 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Thu, 27 Oct 2022 16:19:01 +0200
Subject: [PATCH] feat: creation info widget (#960)

* feat: creation info widget

* fix: Remove demo page

Co-authored-by: Usame Algan <usame@safe.global>
---
 public/images/common/lightbulb.svg            | 10 +++
 .../create-safe/InfoWidget/index.tsx          | 86 +++++++++++++++++++
 .../create-safe/InfoWidget/styles.module.css  | 30 +++++++
 src/styles/colors.ts                          |  2 +-
 src/styles/vars.css                           |  2 +-
 5 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 public/images/common/lightbulb.svg
 create mode 100644 src/components/create-safe/InfoWidget/index.tsx
 create mode 100644 src/components/create-safe/InfoWidget/styles.module.css

diff --git a/public/images/common/lightbulb.svg b/public/images/common/lightbulb.svg
new file mode 100644
index 0000000000..1dbf872f3d
--- /dev/null
+++ b/public/images/common/lightbulb.svg
@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_468_10897)">
+<path d="M6.00047 0C3.91154 0 2.21204 1.69927 2.21204 3.7882C2.21204 4.50037 2.41243 5.19536 2.79122 5.79756C2.92957 6.01798 3.09652 6.33417 3.14771 6.51151L3.68181 8.36254C3.73579 8.54877 3.84372 8.71572 3.98304 8.85075C3.94252 8.9237 3.91718 9.00634 3.91718 9.09577V10.8832C3.91718 11.1629 4.14417 11.3899 4.42389 11.3899H4.68078C4.66429 11.4355 4.65344 11.4832 4.65344 11.5334C4.65344 11.791 4.88071 12 5.16014 12H6.84013C7.12009 12 7.34684 11.791 7.34684 11.5334C7.34684 11.483 7.33594 11.4353 7.32024 11.3899H7.57611C7.85606 11.3899 8.08282 11.1629 8.08282 10.8832V9.09577C8.08282 9.01547 8.06228 8.94019 8.02911 8.87283C8.18139 8.73197 8.29896 8.55487 8.35415 8.35397L8.85984 6.50727C8.90898 6.32816 9.07239 6.01523 9.20822 5.79914C9.58748 5.1969 9.78792 4.50172 9.78792 3.78852C9.78787 1.69951 8.08888 0 6.00047 0ZM8.35034 5.25918C8.29132 5.35318 7.99134 5.8419 7.88238 6.23891L7.3767 8.08562C7.36734 8.11981 7.29765 8.173 7.2622 8.17328H4.77753C4.7398 8.17328 4.66578 8.11706 4.65539 8.08133L4.1213 6.2303C4.00932 5.84242 3.70882 5.35318 3.64952 5.25843C3.37209 4.81759 3.22541 4.30911 3.22541 3.7882C3.22541 2.25815 4.47014 1.01342 6.00042 1.01342C7.52995 1.01342 8.77441 2.25815 8.77441 3.7882C8.77445 4.30986 8.628 4.81861 8.35034 5.25918Z" fill="var(--color-text-primary)"/>
+</g>
+<defs>
+<clipPath id="clip0_468_10897">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/create-safe/InfoWidget/index.tsx b/src/components/create-safe/InfoWidget/index.tsx
new file mode 100644
index 0000000000..cfaf826abb
--- /dev/null
+++ b/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
diff --git a/src/components/create-safe/InfoWidget/styles.module.css b/src/components/create-safe/InfoWidget/styles.module.css
new file mode 100644
index 0000000000..cef51fb000
--- /dev/null
+++ b/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;
+}
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index 3897cf1d6b..bc368b427b 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -42,7 +42,7 @@ const palette = {
     dark: '#CD674E',
     main: '#FF8061',
     light: '#FFB7A6',
-    background: '#EFFFF4',
+    background: '#FFF0ED',
   },
   background: {
     default: '#F4F4F4',
diff --git a/src/styles/vars.css b/src/styles/vars.css
index 38043f17b3..32b7bf4bb7 100644
--- a/src/styles/vars.css
+++ b/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;