Merge pull request #1612 from decentdao/reskin/create-dao-page

`Reskin` create dao page
decentdao · Apr 30, 2024 · 54a68b6 · 54a68b6
2 parents 1eb53e7 + 12b7b46
commit 54a68b6
Show file tree

Hide file tree

Showing 22 changed files with 764 additions and 765 deletions.
diff --git a/src/components/DaoCreator/StepButtons.tsx b/src/components/DaoCreator/StepButtons.tsx
@@ -1,4 +1,5 @@
-import { Flex, Button } from '@chakra-ui/react';
+import { Flex, Button, Icon } from '@chakra-ui/react';
+import { CaretRight, CaretLeft } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import { useFractal } from '../../providers/App/AppProvider';
@@ -40,21 +41,26 @@ export function StepButtons({
     <Flex
       alignItems="center"
       width="100%"
+      mt="1.5rem"
     >
       {prevStep && (
         <Button
           data-testid="create-prevButton"
           variant="text"
           isDisabled={transactionPending || isSubmitting}
-          disabled={true}
+          disabled={transactionPending || isSubmitting}
           onClick={() => updateStep(prevStep)}
+          color="lilac-0"
+          width="50%"
         >
+          <Icon as={CaretLeft} />
           {t('back', { ns: 'common' })}
         </Button>
       )}
       <Button
-        w="full"
+        w={prevStep ? '50%' : 'full'}
         type={buttonType}
+        disabled={transactionPending || isSubmitting || !!errors[step] || isNextDisabled}
         isDisabled={transactionPending || isSubmitting || !!errors[step] || isNextDisabled}
         onClick={() => {
           if (!isLastStep && nextStep) {
@@ -68,6 +74,7 @@ export function StepButtons({
         data-testid={!isLastStep ? 'create-skipNextButton' : 'create-deployDAO'}
       >
         {forwardButtonText}
+        {!isLastStep && <Icon as={CaretRight} />}
       </Button>
     </Flex>
   );

diff --git a/src/components/DaoCreator/StepWrapper.tsx b/src/components/DaoCreator/StepWrapper.tsx
@@ -3,7 +3,6 @@ import { Trash } from '@phosphor-icons/react';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
 import { BASE_ROUTES, DAO_ROUTES } from '../../constants/routes';
 import { useFractal } from '../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
@@ -44,8 +43,8 @@ export function StepWrapper({
             w="full"
           >
             <Text
-              textStyle="text-2xl-mono-regular"
-              color="grayscale.100"
+              textStyle="display-2xl"
+              color="white-0"
             >
               {t(titleKey)}
             </Text>
@@ -75,11 +74,10 @@ export function StepWrapper({
       )}
       {shouldWrapChildren ? (
         <Box
-          bg={BACKGROUND_SEMI_TRANSPARENT}
-          rounded="lg"
-          mt={8}
-          px={4}
-          py={8}
+          mt="1.5rem"
+          padding="1.5rem"
+          bg="neutral-2"
+          borderRadius="0.25rem"
         >
           {children}
         </Box>

diff --git a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx
@@ -1,11 +1,10 @@
-import { Alert, AlertTitle, Flex, InputGroup, InputRightElement, Text } from '@chakra-ui/react';
-import { Info } from '@decent-org/fractal-ui';
+import { Alert, Flex, InputGroup, InputRightElement, Text } from '@chakra-ui/react';
+import { WarningCircle } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { ICreationStepProps, CreatorSteps, VotingStrategyType } from '../../../types';
 import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
-import Divider from '../../ui/utils/Divider';
 import { StepButtons } from '../StepButtons';
 import { StepWrapper } from '../StepWrapper';
 import { DAOCreateMode } from './EstablishEssentials';
@@ -15,141 +14,141 @@ export function AzoriusGovernance(props: ICreationStepProps) {
   const { t } = useTranslation(['daoCreate', 'common']);
   const minutes = t('minutes', { ns: 'common' });
   return (
-    <StepWrapper
-      mode={mode}
-      titleKey="titleGovConfig"
-      isSubDAO={isSubDAO}
-      isFormSubmitting={!!isSubmitting || transactionPending}
-    >
-      <Flex
-        flexDirection="column"
-        gap={8}
+    <>
+      <StepWrapper
+        mode={mode}
+        titleKey="titleGovConfig"
+        isSubDAO={isSubDAO}
+        isFormSubmitting={!!isSubmitting || transactionPending}
       >
-        <ContentBoxTitle>{t('titleProposalSettings', { ns: 'daoCreate' })}</ContentBoxTitle>
-        <LabelComponent
-          label={t('labelVotingPeriod')}
-          helper={t('helperVotingPeriod')}
-          isRequired
+        <Flex
+          flexDirection="column"
+          gap={8}
         >
-          <InputGroup>
-            <BigIntInput
-              value={values.azorius.votingPeriod.bigintValue}
-              onChange={valuePair => setFieldValue('azorius.votingPeriod', valuePair)}
-              decimalPlaces={0}
-              min="1"
-              data-testid="govConfig-votingPeriod"
-            />
-            <InputRightElement mr="4">{minutes}</InputRightElement>
-          </InputGroup>
-          <Text
-            textStyle="text-md-sans-regular"
-            color="grayscale.500"
-            mt={2}
-          >
-            {t('exampleVotingPeriod')}
-          </Text>
-        </LabelComponent>
-        {values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20 ? (
+          <ContentBoxTitle>{t('titleProposalSettings', { ns: 'daoCreate' })}</ContentBoxTitle>
           <LabelComponent
-            label={t('quorum', { ns: 'common' })}
-            helper={t('helperQuorum')}
+            label={t('labelVotingPeriod')}
+            helper={t('helperVotingPeriod')}
             isRequired
           >
             <InputGroup>
               <BigIntInput
-                value={values.azorius.quorumPercentage.bigintValue}
-                onChange={valuePair => setFieldValue('azorius.quorumPercentage', valuePair)}
-                max="100"
+                value={values.azorius.votingPeriod.bigintValue}
+                onChange={valuePair => setFieldValue('azorius.votingPeriod', valuePair)}
                 decimalPlaces={0}
-                data-testid="govConfig-quorumPercentage"
+                min="1"
+                data-testid="govConfig-votingPeriod"
               />
-              <InputRightElement>%</InputRightElement>
+              <InputRightElement mr="4">{minutes}</InputRightElement>
             </InputGroup>
+            <Text
+              textStyle="helper-text-base"
+              color="neutral-7"
+              mt="0.5rem"
+            >
+              {t('exampleVotingPeriod')}
+            </Text>
           </LabelComponent>
-        ) : (
+          {values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20 ? (
+            <LabelComponent
+              label={t('quorum', { ns: 'common' })}
+              helper={t('helperQuorum')}
+              isRequired
+            >
+              <InputGroup>
+                <BigIntInput
+                  value={values.azorius.quorumPercentage.bigintValue}
+                  onChange={valuePair => setFieldValue('azorius.quorumPercentage', valuePair)}
+                  max="100"
+                  decimalPlaces={0}
+                  data-testid="govConfig-quorumPercentage"
+                />
+                <InputRightElement>%</InputRightElement>
+              </InputGroup>
+            </LabelComponent>
+          ) : (
+            <LabelComponent
+              label={t('quorum', { ns: 'common' })}
+              helper={t('helperQuorumThreshold')}
+              isRequired
+            >
+              <BigIntInput
+                value={values.erc721Token.quorumThreshold.bigintValue}
+                onChange={valuePair => setFieldValue('erc721Token.quorumThreshold', valuePair)}
+                decimalPlaces={0}
+                min="1"
+                data-testid="govConfig-quorumThreshold"
+              />
+            </LabelComponent>
+          )}
           <LabelComponent
-            label={t('quorum', { ns: 'common' })}
-            helper={t('helperQuorumThreshold')}
+            label={t('labelTimelockPeriod')}
+            helper={t('helperTimelockPeriod')}
             isRequired
           >
-            <BigIntInput
-              value={values.erc721Token.quorumThreshold.bigintValue}
-              onChange={valuePair => setFieldValue('erc721Token.quorumThreshold', valuePair)}
-              decimalPlaces={0}
-              min="1"
-              data-testid="govConfig-quorumThreshold"
-            />
+            <InputGroup>
+              <BigIntInput
+                value={values.azorius.timelock.bigintValue}
+                onChange={valuePair => setFieldValue('azorius.timelock', valuePair)}
+                decimalPlaces={0}
+                data-testid="govConfig-timelock"
+              />
+              <InputRightElement mr="4">{minutes}</InputRightElement>
+            </InputGroup>
+            <Text
+              textStyle="helper-text-base"
+              color="neutral-7"
+              mt="0.5rem"
+            >
+              {t('exampleTimelockPeriod')}
+            </Text>
           </LabelComponent>
-        )}
-        <LabelComponent
-          label={t('labelTimelockPeriod')}
-          helper={t('helperTimelockPeriod')}
-          isRequired
-        >
-          <InputGroup>
-            <BigIntInput
-              value={values.azorius.timelock.bigintValue}
-              onChange={valuePair => setFieldValue('azorius.timelock', valuePair)}
-              decimalPlaces={0}
-              data-testid="govConfig-timelock"
-            />
-            <InputRightElement mr="4">{minutes}</InputRightElement>
-          </InputGroup>
-          <Text
-            textStyle="text-md-sans-regular"
-            color="grayscale.500"
-            mt={2}
-          >
-            {t('exampleTimelockPeriod')}
-          </Text>
-        </LabelComponent>
-        <LabelComponent
-          label={t('labelExecutionPeriod')}
-          helper={t('helperExecutionPeriod')}
-          isRequired
-        >
-          <InputGroup>
-            <BigIntInput
-              value={values.azorius.executionPeriod.bigintValue}
-              onChange={valuePair => setFieldValue('azorius.executionPeriod', valuePair)}
-              decimalPlaces={0}
-              min="1"
-              data-testid="govModule-executionDetails"
-            />
-            <InputRightElement mr="4">{minutes}</InputRightElement>
-          </InputGroup>
-          <Text
-            textStyle="text-md-sans-regular"
-            color="grayscale.500"
-            mt={2}
+          <LabelComponent
+            label={t('labelExecutionPeriod')}
+            helper={t('helperExecutionPeriod')}
+            isRequired
           >
-            {t('exampleExecutionPeriod')}
-          </Text>
-        </LabelComponent>
-        <Alert status="info">
-          <Info boxSize="24px" />
-          <AlertTitle>
+            <InputGroup>
+              <BigIntInput
+                value={values.azorius.executionPeriod.bigintValue}
+                onChange={valuePair => setFieldValue('azorius.executionPeriod', valuePair)}
+                decimalPlaces={0}
+                min="1"
+                data-testid="govModule-executionDetails"
+              />
+              <InputRightElement mr="4">{minutes}</InputRightElement>
+            </InputGroup>
+            <Text
+              textStyle="helper-text-base"
+              color="neutral-7"
+              mt="0.5rem"
+            >
+              {t('exampleExecutionPeriod')}
+            </Text>
+          </LabelComponent>
+          <Alert status="info">
+            <WarningCircle size="24" />
             <Text
-              textStyle="text-lg-mono-medium"
+              textStyle="body-base-strong"
               whiteSpace="pre-wrap"
+              ml="1rem"
             >
               {t('governanceDescription')}
             </Text>
-          </AlertTitle>
-        </Alert>
-        <Divider mb={4} />
-        <StepButtons
-          {...props}
-          prevStep={
-            values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20
-              ? CreatorSteps.ERC20_DETAILS
-              : CreatorSteps.ERC721_DETAILS
-          }
-          nextStep={CreatorSteps.FREEZE_DETAILS}
-          isLastStep={!isSubDAO}
-          isEdit={mode === DAOCreateMode.EDIT}
-        />
-      </Flex>
-    </StepWrapper>
+          </Alert>
+        </Flex>
+      </StepWrapper>
+      <StepButtons
+        {...props}
+        prevStep={
+          values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20
+            ? CreatorSteps.ERC20_DETAILS
+            : CreatorSteps.ERC721_DETAILS
+        }
+        nextStep={CreatorSteps.FREEZE_DETAILS}
+        isLastStep={!isSubDAO}
+        isEdit={mode === DAOCreateMode.EDIT}
+      />
+    </>
   );
 }