Fix UI in create orgs flow (#37)

* wip: update UI metadata form

* add to create orgs into page

* fix after review

* fix: button styles

* feat: add UiIllustrations component

* minor fix

src/enums/icons.ts

@@ -1,6 +1,7 @@
 import AccountCircleIcon from '@mui/icons-material/AccountCircle'
 import Add from '@mui/icons-material/Add'
 import AddPhotoAlternateOutlined from '@mui/icons-material/AddPhotoAlternateOutlined'
+import ArrowForward from '@mui/icons-material/ArrowForward'
 import CheckIcon from '@mui/icons-material/Check'
 import ChevronLeft from '@mui/icons-material/ChevronLeft'
 import Close from '@mui/icons-material/Close'
@@ -42,6 +43,7 @@ export const ICON_COMPONENTS = {
   accountCircle: AccountCircleIcon,
   add: Add,
   addPhotoAlternativeOutlined: AddPhotoAlternateOutlined,
+  arrowForward: ArrowForward,
   check: CheckIcon,
   chevronLeft: ChevronLeft,
   contentCopy: ContentCopy,

src/enums/illustrations.ts

@@ -0,0 +1,3 @@
+export enum Illustrations {
+  RegistrationIntro = 'registration-intro',
+}

src/enums/index.ts

@@ -1,3 +1,4 @@
 export * from './bus'
 export * from './icons'
+export * from './illustrations'
 export * from './routes'

src/pages/Orgs/pages/OrgsNew/components/MetadataForm.tsx

@@ -1,11 +1,11 @@
-import { FormControl, Stack, StackProps } from '@mui/material'
+import { FormControl, Stack, StackProps, useTheme } from '@mui/material'
 import { HTMLAttributes, useCallback } from 'react'
 import { Controller } from 'react-hook-form'
 
 import { createOrg, Organization } from '@/api/modules/orgs'
 import { ErrorHandler } from '@/helpers'
 import { useForm, useMetamaskZkpSnapContext } from '@/hooks'
-import { UiButton, UiImageUploader, UiTextField } from '@/ui'
+import { UiButton, UiIcon, UiImageUploader, UiTextField } from '@/ui'
 
 interface Props extends StackProps {
   formProps?: HTMLAttributes<HTMLFormElement>
@@ -29,6 +29,7 @@ const DEFAULT_VALUES = {
 
 export default function MetadataForm({ formProps, onOrgCreated, ...rest }: Props) {
   const { userDid } = useMetamaskZkpSnapContext()
+  const { palette } = useTheme()
 
   const { handleSubmit, control, isFormDisabled, getErrorMessage, disableForm, enableForm } =
     useForm(DEFAULT_VALUES, yup =>
@@ -73,67 +74,75 @@ export default function MetadataForm({ formProps, onOrgCreated, ...rest }: Props
   return (
     <Stack {...rest}>
       <form {...formProps} onSubmit={handleSubmit(submit)}>
-        <Controller
-          name={FieldNames.Logo}
-          control={control}
-          render={({ field }) => (
-            <FormControl>
-              <UiImageUploader
-                {...field}
-                label={FieldNames.Logo}
-                // errorMessage={getErrorMessage(FieldNames.Logo)}
-                disabled={isFormDisabled}
-              />
-            </FormControl>
-          )}
-        />
-
-        <Controller
-          name={FieldNames.Name}
-          control={control}
-          render={({ field }) => (
-            <FormControl>
-              <UiTextField
-                {...field}
-                label={FieldNames.Name}
-                errorMessage={getErrorMessage(FieldNames.Name)}
-                disabled={isFormDisabled}
-              />
-            </FormControl>
-          )}
-        />
-
-        <Controller
-          name={FieldNames.Description}
-          control={control}
-          render={({ field }) => (
-            <FormControl>
-              <UiTextField
-                {...field}
-                label={FieldNames.Description}
-                errorMessage={getErrorMessage(FieldNames.Description)}
-                disabled={isFormDisabled}
-              />
-            </FormControl>
-          )}
-        />
-
-        <Controller
-          name={FieldNames.Domain}
-          control={control}
-          render={({ field }) => (
-            <FormControl>
-              <UiTextField
-                {...field}
-                label={FieldNames.Domain}
-                errorMessage={getErrorMessage(FieldNames.Domain)}
-                disabled={isFormDisabled}
-              />
-            </FormControl>
-          )}
-        />
-
-        <UiButton type='submit'>Next</UiButton>
+        <Stack spacing={6} bgcolor={palette.background.light} p={6} borderRadius={4} my={6}>
+          <Controller
+            name={FieldNames.Logo}
+            control={control}
+            render={({ field }) => (
+              <FormControl>
+                <UiImageUploader {...field} label='Upload logo' disabled={isFormDisabled} />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            name={FieldNames.Domain}
+            control={control}
+            render={({ field }) => (
+              <FormControl>
+                <UiTextField
+                  {...field}
+                  label='Domain'
+                  placeholder='https://'
+                  errorMessage={getErrorMessage(FieldNames.Domain)}
+                  disabled={isFormDisabled}
+                />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            name={FieldNames.Name}
+            control={control}
+            render={({ field }) => (
+              <FormControl>
+                <UiTextField
+                  {...field}
+                  label='Name'
+                  placeholder='Company name'
+                  errorMessage={getErrorMessage(FieldNames.Name)}
+                  disabled={isFormDisabled}
+                />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            name={FieldNames.Description}
+            control={control}
+            render={({ field }) => (
+              <FormControl>
+                <UiTextField
+                  {...field}
+                  label={'Description'}
+                  multiline
+                  rows={5}
+                  placeholder='Write a small description'
+                  errorMessage={getErrorMessage(FieldNames.Description)}
+                  disabled={isFormDisabled}
+                />
+              </FormControl>
+            )}
+          />
+        </Stack>
+
+        <UiButton
+          type='submit'
+          size='large'
+          endIcon={<UiIcon componentName={'arrowForward'} size={4} />}
+        >
+          {'Create'}
+        </UiButton>
       </form>
     </Stack>
   )

src/pages/Orgs/pages/OrgsNew/components/RegisterIntro.tsx

@@ -0,0 +1,50 @@
+import { Stack, StackProps, Typography, useTheme } from '@mui/material'
+
+import { Illustrations } from '@/enums'
+import { UiButton, UiIllustration } from '@/ui'
+
+interface Props extends StackProps {
+  nextStepCb: () => void
+}
+
+export default function RegisterIntro({ nextStepCb, ...rest }: Props) {
+  const { palette, typography, spacing } = useTheme()
+  return (
+    <Stack
+      direction={'row'}
+      justifyContent={'center'}
+      spacing={16}
+      py={18}
+      px={6}
+      mt={6}
+      borderRadius={4}
+      bgcolor={palette.background.light}
+      {...rest}
+    >
+      <Stack>
+        <Typography variant={'h4'}>Register</Typography>
+        <Typography variant={'body3'} color={palette.text.secondary} mt={3}>
+          Create your company profile
+        </Typography>
+        <Stack my={6} spacing={3}>
+          <Stack
+            component={'ol'}
+            paddingInlineStart={5}
+            sx={{ '& li::marker': typography.subtitle4 }}
+            spacing={3}
+          >
+            <Typography component={'li'}>Enter your company details</Typography>
+            <Typography component={'li'}>Verify domain</Typography>
+            <Typography component={'li'}>Create & Manage Credentials</Typography>
+          </Stack>
+        </Stack>
+        <UiButton onClick={nextStepCb} sx={{ width: spacing(93) }}>
+          Let’s Start
+        </UiButton>
+      </Stack>
+      <Stack p={11}>
+        <UiIllustration name={Illustrations.RegistrationIntro} size={60} />
+      </Stack>
+    </Stack>
+  )
+}

src/pages/Orgs/pages/OrgsNew/components/index.ts

@@ -1,2 +1,3 @@
 export { default as MetadataForm } from './MetadataForm'
+export { default as RegisterIntro } from './RegisterIntro'
 export { default as VerifyForm } from './VerifyForm'

src/pages/Orgs/pages/OrgsNew/index.tsx

@@ -8,7 +8,7 @@ import { ErrorHandler } from '@/helpers'
 import { useStepper } from '@/hooks'
 import { UiStepper } from '@/ui'
 
-import { MetadataForm, VerifyForm } from './components'
+import { MetadataForm, RegisterIntro, VerifyForm } from './components'
 
 export default function OrgsNew() {
   const [draftOrg, setDraftOrg] = useState<Organization>()
@@ -27,6 +27,10 @@ export default function OrgsNew() {
 
   const { steps, activeStep, activeComponent } = useStepper(
     ({ nextStep }) => [
+      {
+        label: 'Intro',
+        content: <RegisterIntro nextStepCb={nextStep} />,
+      },
       {
         label: 'Details',
         content: <MetadataForm onOrgCreated={org => handleOrgCreated(org, nextStep)} />,

src/theme/components.ts

@@ -124,7 +124,7 @@ export const components: Components<Omit<Theme, 'components'>> = {
         '& .MuiInputBase-root, & .MuiInputBase-sizeSmall, & .MuiInputBase-sizeMedium':
           typography.body3,
         '& .MuiInputBase-root': {
-          height: theme.spacing(12),
+          minHeight: theme.spacing(12),
           '&.Mui-focused:not(.Mui-error) .MuiOutlinedInput-notchedOutline': {
             borderColor: theme.palette.action.focus,
             borderWidth: 1,

src/ui/UiIllustration.tsx

@@ -0,0 +1,38 @@
+import { Box, BoxProps, SxProps } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { forwardRef } from 'react'
+
+import { Illustrations } from '@/enums'
+type Props = {
+  size?: number
+  name: Illustrations
+} & BoxProps<'svg'>
+
+const UiIllustration = forwardRef<SVGSVGElement, Props>(({ size = 6, ...props }, ref) => {
+  const sx: SxProps<Theme> = {
+    ...props.sx,
+    width: theme => theme.spacing(size),
+    height: theme => theme.spacing(size),
+    minWidth: theme => theme.spacing(size),
+    minHeight: theme => theme.spacing(size),
+    maxWidth: theme => theme.spacing(size),
+    maxHeight: theme => theme.spacing(size),
+  }
+
+  const { className, name, ...rest } = props
+
+  return (
+    <Box
+      {...rest}
+      ref={ref}
+      component='svg'
+      sx={sx}
+      className={['illustration', ...(className ? [className] : [])].join(' ')}
+      aria-hidden='true'
+    >
+      <use href={`#${name}-illustration`} />
+    </Box>
+  )
+})
+
+export default UiIllustration

src/ui/UiImageUploader.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material'
 import { ChangeEvent, forwardRef, useCallback, useMemo } from 'react'
 
-import UiIcon from '@/ui/UiIcon'
+import { UiIcon } from '@/ui'
 
 interface Props extends Omit<InputProps, 'value' | 'onChange'> {
   label?: string
@@ -23,7 +23,7 @@ const AVATAR_SIZE = 19
 
 const UiImageUploader = forwardRef<HTMLInputElement, Props>(
   ({ label, stackProps, value, onChange, ...rest }: Props, ref) => {
-    const { palette, spacing } = useTheme()
+    const { palette, spacing, typography } = useTheme()
 
     const avatarSize = {
       width: spacing(AVATAR_SIZE),
@@ -71,7 +71,7 @@ const UiImageUploader = forwardRef<HTMLInputElement, Props>(
             <UiIcon componentName='addPhotoAlternativeOutlined' size={6} />
           </Stack>
         )}
-        <Typography>{value?.name || label || 'Upload image'}</Typography>
+        <Typography {...typography.subtitle4}>{value?.name || label || 'Upload image'}</Typography>
         <Input
           {...rest}
           onChange={handleChange}

src/ui/index.ts

@@ -5,6 +5,7 @@ export { default as UiDatePicker } from './UiDatePicker'
 export { default as UiDrawer, UiDrawerActions, UiDrawerContent, UiDrawerTitle } from './UiDrawer'
 export { default as UiIcon } from './UiIcon'
 export { default as UiIconButton } from './UiIconButton'
+export { default as UiIllustration } from './UiIllustration'
 export { default as UiImageUploader } from './UiImageUploader'
 export { default as UiModal } from './UiModal'
 export { default as UiNavTabs } from './UiNavTabs'

vite.config.ts

@@ -36,7 +36,7 @@ export default defineConfig(({ mode }) => {
       react(),
       tsconfigPaths(),
       createSvgIconsPlugin({
-        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons'), path.resolve(process.cwd(), 'src/assets/illustrations')],
         symbolId: '[name]',
       }),
       checker({