Fix DAO metadata paddings in the Menu and metadata sections, add link…

…s to metadata sections
decentdao · Dec 5, 2023 · 87902e6 · 87902e6
1 parent b4b5682
commit 87902e6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 17 deletions.
diff --git a/src/components/pages/DaoDashboard/Info/InfoHeader.tsx b/src/components/pages/DaoDashboard/Info/InfoHeader.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Image, Menu, MenuButton, MenuList, Text } from '@chakra-ui/react';
-import { Burger } from '@decent-org/fractal-ui';
+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';
@@ -53,7 +53,7 @@ export default function InfoHeader() {
             mr={['auto', '1rem']}
             bg="grayscale.black"
             border="none"
-            padding="1rem"
+            padding="1rem 1.5rem"
             zIndex={1000}
           >
             <Text
@@ -63,16 +63,25 @@ export default function InfoHeader() {
             >
               {t('goTo')}
             </Text>
-            {daoMetadata.links.map(link => (
-              <Box key={link.url}>
-                <ExternalLink
-                  href={link.url}
-                  color="grayscale.100"
-                >
-                  {link.title}
-                </ExternalLink>
-              </Box>
-            ))}
+            <Flex
+              gap={4}
+              flexDirection="column"
+            >
+              {daoMetadata.links.map(link => (
+                <Box key={link.url}>
+                  <ExternalLink
+                    href={link.url}
+                    color="grayscale.100"
+                  >
+                    {link.title}{' '}
+                    <ArrowAngleUp
+                      boxSize="1.5rem"
+                      fill="currentColor"
+                    />
+                  </ExternalLink>
+                </Box>
+              ))}
+            </Flex>
           </MenuList>
         </Menu>
       </Box>

diff --git a/src/components/pages/DaoDashboard/Info/index.tsx b/src/components/pages/DaoDashboard/Info/index.tsx
@@ -5,6 +5,7 @@ import { DAO_ROUTES } from '../../../../constants/routes';
 import useDAOMetadata from '../../../../hooks/DAO/useDAOMetadata';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { InfoBox } from '../../../ui/containers/InfoBox';
+import ExternalLink from '../../../ui/links/ExternalLink';
 import { InfoDAO } from './InfoDAO';
 import { InfoGovernance } from './InfoGovernance';
 import { InfoProposals } from './InfoProposals';
@@ -79,6 +80,7 @@ export function Info() {
                   position="relative"
                   minWidth="auto"
                   width="50%"
+                  p="1.5rem"
                   key={index}
                 >
                   {section.background && (
@@ -96,8 +98,21 @@ export function Info() {
                       backgroundPosition="50%"
                     />
                   )}
-                  <Text textStyle="text-lg-mono-regular">{section.title}</Text>
-                  <Text textStyle="text-base-mono-regular">{section.content}</Text>
+                  <Text
+                    textStyle="text-lg-mono-regular"
+                    marginBottom={2}
+                  >
+                    {section.title}
+                  </Text>
+                  <Text textStyle="text-base-mono-regular">
+                    {section.link && section.link.position === 'start' && (
+                      <ExternalLink href={section.link.url}>{section.link.text}</ExternalLink>
+                    )}
+                    {section.content}
+                    {section.link && section.link.position === 'end' && (
+                      <ExternalLink href={section.link.url}>{section.link.text}</ExternalLink>
+                    )}
+                  </Text>
                 </InfoBox>
               ))}
             </Flex>

diff --git a/src/metadata/lizzardsDAO/index.ts b/src/metadata/lizzardsDAO/index.ts
@@ -25,15 +25,24 @@ const LIZZARDS_DAO_METADATA: DAOMetadata = {
   sections: [
     {
       title: 'Description',
-      content:
-        'Vote here for this proposal or just click on the link to learn more about the proposal',
+      content: ' for this proposal or just click on the link to learn more about the proposal',
       background: undefined,
+      link: {
+        position: 'start',
+        text: 'Vote here',
+        url: '/proposals/0xe10c44fceb1b43f74c42bd6efc9316e9ce14109ac8a166e5266fc78499cb4fea',
+      },
     },
     {
       title: 'Elemental Lizards coming soon',
       content:
-        'Designed by gamers for Web3 Gamers, Guild Leaders, and Content Creators. The Elemental Lizards provide battle passes for all Ethlizards gaming experiences, customizable avatars, and exclusive community access for the Community Sub-DAO. Learn more ',
+        'Designed by gamers for Web3 Gamers, Guild Leaders, and Content Creators. The Elemental Lizards provide battle passes for all Ethlizards gaming experiences, customizable avatars, and exclusive community access for the Community Sub-DAO. ',
       background: metaSectionBackground1.src,
+      link: {
+        position: 'end',
+        text: 'Learn more',
+        url: 'https://ethlizards.io/#lizards',
+      },
     },
   ],
 };

diff --git a/src/types/daoGeneral.ts b/src/types/daoGeneral.ts
@@ -21,6 +21,11 @@ export type DAOMetadata = {
     title: string;
     content: string;
     background?: string;
+    link?: {
+      url: string;
+      text: string;
+      position: 'start' | 'end';
+    };
   }[];
 };