Merge pull request #1581 from decentdao/reskin/dao-info-cards

`Reskin` | DAO info cards
decentdao · Apr 23, 2024 · 1f62ff0 · 1f62ff0
2 parents 4b61448 + e087af5
commit 1f62ff0
Show file tree

Hide file tree

Showing 25 changed files with 250 additions and 373 deletions.
diff --git a/public/images/snapshot-icon.svg b/public/images/snapshot-icon.svg
diff --git a/src/components/Activity/ActivityCard.tsx b/src/components/Activity/ActivityCard.tsx
@@ -39,6 +39,7 @@ export function ActivityCard({
             mb="1rem"
           >
             {Badge}
+            {/* TODO: replace with <SnapshotIcon /> */}
             {isSnapshot && (
               <Image
                 src="/images/snapshot-icon-fill.svg"

diff --git a/src/components/Proposals/ProposalActions/CastVote.tsx b/src/components/Proposals/ProposalActions/CastVote.tsx
@@ -130,6 +130,7 @@ function Vote({
           <Text>{t('poweredBy')}</Text>
           <Flex>
             <Flex mr={1}>
+              {/* TODO: replace with <SnapshotIcon /> */}
               <Image
                 src="/images/snapshot-icon.svg"
                 alt="Snapshot icon"

diff --git a/src/components/Proposals/ProposalCard/ProposalCard.tsx b/src/components/Proposals/ProposalCard/ProposalCard.tsx
@@ -52,6 +52,7 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
               size="sm"
               proposal={proposal}
             />
+            {/* TODO: replace with <SnapshotIcon /> */}
             {isSnapshotProposal && (
               <Image
                 src="/images/snapshot-icon-fill.svg"

diff --git a/src/components/Proposals/ProposalInfo.tsx b/src/components/Proposals/ProposalInfo.tsx
@@ -6,7 +6,7 @@ import { useGetMetadata } from '../../hooks/DAO/proposal/useGetMetadata';
 import { useFractal } from '../../providers/App/AppProvider';
 import { ExtendedSnapshotProposal, FractalProposal } from '../../types';
 import { ActivityDescription } from '../Activity/ActivityDescription';
-import Snapshot from '../ui/badges/Snapshot';
+import { SnapshotButton } from '../ui/badges/Snapshot';
 import { ModalType } from '../ui/modals/ModalProvider';
 import { useFractalModal } from '../ui/modals/useFractalModal';
 import ProposalExecutableCode from '../ui/proposal/ProposalExecutableCode';
@@ -35,9 +35,8 @@ export function ProposalInfo({
         <ProposalStateBox state={proposal.state} />
         {isSnapshotProposal && (
           <>
-            <Snapshot
+            <SnapshotButton
               snapshotENS={`https://snapshot.org/#${daoSnapshotENS}/proposal/${proposal.proposalId}`}
-              mt={0}
             />
             {(proposal as ExtendedSnapshotProposal).privacy === 'shutter' && (
               <Button

diff --git a/src/components/pages/DaoDashboard/Activities/index.tsx b/src/components/pages/DaoDashboard/Activities/index.tsx
@@ -25,8 +25,9 @@ export function Activities() {
   return (
     <Box>
       <Flex
-        justifyContent="flex-end"
+        justifyContent="flex-start"
         alignItems="center"
+        mx="0.5rem"
         my="1rem"
       >
         <Sort

diff --git a/...ponents/pages/DaoDashboard/Info/index.tsx → ...pages/DaoDashboard/Info/DaoInfoHeader.tsx b/...ponents/pages/DaoDashboard/Info/index.tsx → ...pages/DaoDashboard/Info/DaoInfoHeader.tsx
@@ -11,7 +11,7 @@ import { InfoProposals } from './InfoProposals';
 import { InfoTreasury } from './InfoTreasury';
 import { ParentLink } from './ParentLink';
 
-export function Info() {
+export function DaoInfoHeader() {
   const {
     node: { daoAddress },
   } = useFractal();
@@ -32,7 +32,7 @@ export function Info() {
       <Flex
         flexWrap="wrap"
         justifyContent="space-between"
-        mb="1rem"
+        mb="2rem"
       >
         <Box
           width={{ base: '100%', md: '100%', lg: '33%', xl: '40%' }}
@@ -98,13 +98,8 @@ export function Info() {
                       backgroundPosition="50%"
                     />
                   )}
-                  <Text
-                    textStyle="text-lg-mono-regular"
-                    marginBottom={2}
-                  >
-                    {section.title}
-                  </Text>
-                  <Text textStyle="text-base-mono-regular">
+                  <Text marginBottom={2}>{section.title}</Text>
+                  <Text>
                     {section.link && section.link.position === 'start' && (
                       <ExternalLink href={section.link.url}>{section.link.text}</ExternalLink>
                     )}
@@ -130,6 +125,7 @@ export function Info() {
                 <InfoGovernance />
               </InfoBox>
             </Box>
+
             <Box
               width={{ base: '100%', md: '33.3%', lg: '19%', xl: '20%' }}
               ps={{ base: NONE, md: PAD }}
@@ -141,6 +137,7 @@ export function Info() {
                 <InfoProposals />
               </InfoBox>
             </Box>
+
             <Box
               width={{ base: '100%', md: '33.3%', lg: '23%', xl: '20%' }}
               ps={{ base: NONE, md: PAD }}

diff --git a/...ts/pages/DaoDashboard/Info/InfoHeader.tsx → ...hboard/Info/DaoSpecificMetadataHeader.tsx b/...ts/pages/DaoDashboard/Info/InfoHeader.tsx → ...hboard/Info/DaoSpecificMetadataHeader.tsx
@@ -1,20 +1,17 @@
 import { Box, Flex, Image, Menu, MenuButton, MenuList, Text } from '@chakra-ui/react';
 import { ArrowAngleUp, Burger } from '@decent-org/fractal-ui';
 import { useTranslation } from 'react-i18next';
-import useDAOMetadata from '../../../../hooks/DAO/useDAOMetadata';
 import { useFractal } from '../../../../providers/App/AppProvider';
+import { DAOMetadata } from '../../../../types';
 import ExternalLink from '../../../ui/links/ExternalLink';
 
-export default function InfoHeader() {
+export function DaoSpecificMetadataHeader(props: { metadata: DAOMetadata }) {
   const {
     node: { daoName },
   } = useFractal();
-  const daoMetadata = useDAOMetadata();
   const { t } = useTranslation();
 
-  if (!daoMetadata) {
-    return null;
-  }
+  const { metadata: daoMetadata } = props;
 
   return (
     <Flex

diff --git a/src/components/pages/DaoDashboard/Info/InfoDAO.tsx b/src/components/pages/DaoDashboard/Info/InfoDAO.tsx
@@ -10,7 +10,6 @@ export function InfoDAO() {
   const { node, guardContracts, guard } = useFractal();
   return (
     <DAOInfoCard
-      h="8.5rem"
       parentAddress={node.nodeHierarchy.parentAddress || undefined}
       node={node}
       childCount={node.nodeHierarchy.childNodes.length}

diff --git a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Govern } from '@decent-org/fractal-ui';
+import { Bank } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSafeContracts from '../../../../hooks/safe/useSafeContracts';
@@ -85,41 +85,23 @@ export function InfoGovernance() {
   const governanceAzorius = dao?.isAzorius ? (governance as AzoriusGovernance) : undefined;
 
   return (
-    <Box
-      data-testid="dashboard-daoGovernance"
-      textStyle="text-sm-sans-regular"
-    >
+    <Box data-testid="dashboard-daoGovernance">
       <Flex
         alignItems="center"
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Govern />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleGovernance')}
-        </Text>
+        <Bank size="1.5rem" />
+        <Text textStyle="display-lg">{t('titleGovernance')}</Text>
       </Flex>
 
       <Flex
         alignItems="center"
         justifyContent="space-between"
         mb="0.25rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titleType')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {governance.type ? t(governance.type.toString(), { ns: 'daoCreate' }) : ''}
-        </Text>
+        <Text color="neutral-7">{t('titleType')}</Text>
+        <Text>{governance.type ? t(governance.type.toString(), { ns: 'daoCreate' }) : ''}</Text>
       </Flex>
 
       {governanceAzorius?.votingStrategy?.votingPeriod && (
@@ -128,18 +110,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleVotingPeriod')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {governanceAzorius.votingStrategy?.votingPeriod?.formatted}
-          </Text>
+          <Text color="neutral-7">{t('titleVotingPeriod')}</Text>
+          <Text>{governanceAzorius.votingStrategy?.votingPeriod?.formatted}</Text>
         </Flex>
       )}
       {governanceAzorius?.votingStrategy?.quorumPercentage && (
@@ -148,18 +120,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleQuorum')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {governanceAzorius.votingStrategy.quorumPercentage.formatted}
-          </Text>
+          <Text color="neutral-7">{t('titleQuorum')}</Text>
+          <Text>{governanceAzorius.votingStrategy.quorumPercentage.formatted}</Text>
         </Flex>
       )}
       {governanceAzorius?.votingStrategy?.quorumThreshold && (
@@ -168,18 +130,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleQuorum')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {governanceAzorius.votingStrategy.quorumThreshold.formatted}
-          </Text>
+          <Text color="neutral-7">{t('titleQuorum')}</Text>
+          <Text>{governanceAzorius.votingStrategy.quorumThreshold.formatted}</Text>
         </Flex>
       )}
       {timelockPeriod && (
@@ -188,18 +140,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('timelock', { ns: 'common' })}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {timelockPeriod}
-          </Text>
+          <Text color="neutral-7">{t('timelock', { ns: 'common' })}</Text>
+          <Text>{timelockPeriod}</Text>
         </Flex>
       )}
       {executionPeriod && (
@@ -208,18 +150,8 @@ export function InfoGovernance() {
           justifyContent="space-between"
           mb="0.25rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('execution', { ns: 'common' })}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {executionPeriod}
-          </Text>
+          <Text color="neutral-7">{t('execution', { ns: 'common' })}</Text>
+          <Text>{executionPeriod}</Text>
         </Flex>
       )}
     </Box>

diff --git a/src/components/pages/DaoDashboard/Info/InfoProposals.tsx b/src/components/pages/DaoDashboard/Info/InfoProposals.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Proposals } from '@decent-org/fractal-ui';
+import { Scroll } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { FractalProposalState } from '../../../../types';
@@ -51,50 +51,25 @@ export function InfoProposals({}: IDAOGovernance) {
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Proposals />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleProposals')}
-        </Text>
+        <Scroll size="1.5rem" />
+        <Text>{t('titleProposals')}</Text>
       </Flex>
 
       <Flex
         alignItems="center"
         justifyContent="space-between"
         mb="0.25rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titlePending')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {active}
-        </Text>
+        <Text color="neutral-7">{t('titlePending')}</Text>
+        <Text>{active}</Text>
       </Flex>
       <Flex
         alignItems="center"
         justifyContent="space-between"
         mb="0.25rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titlePassed')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {passed}
-        </Text>
+        <Text color="neutral-7">{t('titlePassed')}</Text>
+        <Text>{passed}</Text>
       </Flex>
     </Box>
   );

diff --git a/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx b/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Treasury } from '@decent-org/fractal-ui';
+import { Coins } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { formatUSD } from '../../../../utils';
@@ -37,21 +37,11 @@ export function InfoTreasury({}: IDAOGovernance) {
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Treasury />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleTreasury')}
-        </Text>
+        <Coins size="1.5rem" />
+        <Text textStyle="display-lg">{t('titleTreasury')}</Text>
       </Flex>
 
-      <Text
-        textStyle="text-lg-mono-semibold"
-        color="grayscale.100"
-      >
-        {formatUSD(totalFiatValue)}
-      </Text>
+      <Text>{formatUSD(totalFiatValue)}</Text>
     </Box>
   );
 }