Reskin | dao settings

src/components/pages/DaoSettings/index.tsx → src/components/pages/DaoSettings/DAOSettingsContent.tsx

@@ -2,14 +2,13 @@ import { Flex } from '@chakra-ui/react';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { GovernanceType } from '../../../types';
 import { BarLoader } from '../../ui/loaders/BarLoader';
-import Divider from '../../ui/utils/Divider';
-import ERC20TokenContainer from './components/ERC20Token';
-import ERC721TokensContainer from './components/ERC721Token';
-import MetadataContainer from './components/Metadata';
-import { ModulesContainer } from './components/Modules';
-import SignersContainer from './components/Signers';
+import { ERC20TokenContainer } from './components/ERC20TokenContainer';
+import { ERC721TokensContainer } from './components/ERC721TokensContainer';
+import { MetadataContainer } from './components/MetadataContainer';
+import { ModulesContainer } from './components/ModulesContainer';
+import { SignersContainer } from './components/Signers/SignersContainer';
 
-export function Settings() {
+export function DAOSettingsContent() {
   const {
     node: { safe },
     governance: { type },
@@ -29,24 +28,19 @@ export function Settings() {
   }
 
   return (
-    <>
+    <Flex
+      flexDir="column"
+      gap="3rem"
+    >
       {type === GovernanceType.AZORIUS_ERC20 ? (
         <ERC20TokenContainer />
       ) : type === GovernanceType.AZORIUS_ERC721 ? (
         <ERC721TokensContainer />
       ) : type === GovernanceType.MULTISIG ? (
         <SignersContainer />
       ) : null}
-      <Divider
-        mt={10}
-        mb={10}
-      />
       <ModulesContainer />
-      <Divider
-        mt={10}
-        mb={10}
-      />
       <MetadataContainer />
-    </>
+    </Flex>
   );
 }

src/components/pages/DaoSettings/components/ERC20Token/index.tsx → src/components/pages/DaoSettings/components/ERC20TokenContainer.tsx

@@ -1,13 +1,13 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { SettingsSection } from '..';
-import { useFractal } from '../../../../../providers/App/AppProvider';
-import { AzoriusGovernance } from '../../../../../types';
-import { formatCoin } from '../../../../../utils';
-import { DisplayAddress } from '../../../../ui/links/DisplayAddress';
-import { BarLoader } from '../../../../ui/loaders/BarLoader';
+import { useFractal } from '../../../../providers/App/AppProvider';
+import { AzoriusGovernance } from '../../../../types';
+import { formatCoin } from '../../../../utils';
+import { DisplayAddress } from '../../../ui/links/DisplayAddress';
+import { BarLoader } from '../../../ui/loaders/BarLoader';
+import { SettingsSection } from './SettingsSection';
 
-export default function ERC20TokenContainer() {
+export function ERC20TokenContainer() {
   const { t } = useTranslation(['settings']);
   const { governance } = useFractal();
 
@@ -16,53 +16,48 @@ export default function ERC20TokenContainer() {
 
   return (
     <SettingsSection
-      contentTitle={t('governanceTokenTitle')}
-      descriptionTitle={t('governanceTokenTitle')}
-      descriptionText={t('governanceTokenDescription')}
+      title={t('governanceTokenTitle')}
+      descriptionHeader={t('governanceTokenTitle')}
+      descriptionContent={t('governanceTokenDescription')}
     >
       {votesToken ? (
         <Flex
           justifyContent="space-between"
           mt={4}
         >
+          {/* TOKEN NAME */}
           <Box>
             <Text
-              textStyle="text-sm-mono-regular"
-              color="chocolate.200"
+              color="neutral-7"
+              textStyle="label-small"
             >
               {t('governanceTokenNameLabel')}
             </Text>
-            <Box mt={2}>
+            <Flex mt="0.5rem">
               <DisplayAddress address={votesToken.address}>{votesToken.name}</DisplayAddress>
-            </Box>
+            </Flex>
           </Box>
+
+          {/* TOKEN SYMBOL */}
           <Box>
             <Text
-              textStyle="text-sm-mono-regular"
-              color="chocolate.200"
+              color="neutral-7"
+              textStyle="label-small"
             >
               {t('governanceTokenSymbolLabel')}
             </Text>
-            <Text
-              textStyle="text-base-sans-regular"
-              color="grayscale.100"
-              mt={2}
-            >
-              {votesToken.symbol}
-            </Text>
+            <Text mt="0.5rem">{votesToken.symbol}</Text>
           </Box>
+
+          {/* TOTAL SUPPLY */}
           <Box>
             <Text
-              textStyle="text-sm-mono-regular"
-              color="chocolate.200"
+              color="neutral-7"
+              textStyle="label-small"
             >
               {t('governanceTokenSupplyLabel')}
             </Text>
-            <Text
-              textStyle="text-base-sans-regular"
-              color="grayscale.100"
-              mt={2}
-            >
+            <Text mt="0.5rem">
               {formatCoin(
                 votesToken.totalSupply,
                 false,

src/components/pages/DaoSettings/components/ERC721Token/index.tsx → src/components/pages/DaoSettings/components/ERC721TokensContainer.tsx

@@ -1,12 +1,12 @@
 import { Flex, Text, Grid, GridItem } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { SettingsSection } from '..';
-import { useFractal } from '../../../../../providers/App/AppProvider';
-import { AzoriusGovernance } from '../../../../../types';
-import { DisplayAddress } from '../../../../ui/links/DisplayAddress';
-import { BarLoader } from '../../../../ui/loaders/BarLoader';
+import { useFractal } from '../../../../providers/App/AppProvider';
+import { AzoriusGovernance } from '../../../../types';
+import { DisplayAddress } from '../../../ui/links/DisplayAddress';
+import { BarLoader } from '../../../ui/loaders/BarLoader';
+import { SettingsSection } from './SettingsSection';
 
-export default function ERC721TokensContainer() {
+export function ERC721TokensContainer() {
   const { t } = useTranslation(['settings']);
   const { governance } = useFractal();
 
@@ -15,81 +15,75 @@ export default function ERC721TokensContainer() {
 
   return (
     <SettingsSection
-      contentTitle={t('governanceERC721TokenTitle')}
-      descriptionTitle={t('governanceERC721TokenTitle')}
-      descriptionText={t('governanceERC721TokenDescription')}
+      title={t('governanceERC721TokenTitle')}
+      descriptionHeader={t('governanceERC721TokenTitle')}
+      descriptionContent={t('governanceERC721TokenDescription')}
     >
       {erc721Tokens ? (
         <Flex flexWrap="wrap">
           <Grid
             templateColumns="repeat(5, 1fr)"
             width="100%"
-            mt={4}
           >
+            {/* HEADER TITLES */}
             <GridItem colSpan={2}>
               <Text
-                textStyle="text-sm-mono-regular"
-                color="chocolate.200"
+                textStyle="label-small"
+                color="neutral-7"
               >
                 {t('governanceTokenNameLabel')}
               </Text>
             </GridItem>
             <GridItem colSpan={1}>
               <Text
-                textStyle="text-sm-mono-regular"
-                color="chocolate.200"
+                textStyle="label-small"
+                color="neutral-7"
               >
                 {t('governanceTokenSymbolLabel')}
               </Text>
             </GridItem>
             <GridItem colSpan={1}>
               <Text
-                textStyle="text-sm-mono-regular"
-                color="chocolate.200"
+                textStyle="label-small"
+                color="neutral-7"
               >
                 {t('governanceTokenWeightLabel')}
               </Text>
             </GridItem>
             <GridItem colSpan={1}>
               <Text
-                textStyle="text-sm-mono-regular"
-                color="chocolate.200"
+                textStyle="label-small"
+                color="neutral-7"
               >
                 {t('governanceTokenTotalWeightLabel')}
               </Text>
             </GridItem>
           </Grid>
+
+          {/* TOKEN DETAILS */}
           {erc721Tokens.map(token => (
             <Grid
               key={token.address}
               width="100%"
               templateColumns="repeat(5, 1fr)"
-              mt={2}
+              mt="0.5rem"
             >
               <GridItem colSpan={2}>
-                <DisplayAddress address={token.address}>{token.name}</DisplayAddress>
+                <Flex>
+                  <DisplayAddress address={token.address}>{token.name}</DisplayAddress>
+                </Flex>
               </GridItem>
+
               <GridItem colSpan={1}>
-                <Text
-                  textStyle="text-base-sans-regular"
-                  color="grayscale.100"
-                >
-                  {token.symbol}
-                </Text>
+                <Text>{token.symbol}</Text>
               </GridItem>
+
               <GridItem colSpan={1}>
-                <Text
-                  textStyle="text-base-sans-regular"
-                  color="grayscale.100"
-                >
-                  {token.votingWeight.toString()}
-                </Text>
+                <Text>{token.votingWeight.toString()}</Text>
               </GridItem>
+
               <GridItem colSpan={1}>
-                <Text
-                  textStyle="text-base-sans-regular"
-                  color="grayscale.100"
-                >
+                <Text>
                   {token.totalSupply ? (token.totalSupply * token.votingWeight).toString() : 'n/a'}
                 </Text>
               </GridItem>