Merge pull request #1633 from decentdao/reskin/home-page

`Reskin` - home page

src/components/pages/AppHome/AppFooter.tsx

@@ -1,18 +1,22 @@
-import { Box, BoxProps, Flex, Link, Spacer, Text } from '@chakra-ui/react';
+import { Flex, Link, Spacer, Text } from '@chakra-ui/react';
 import { Trans, useTranslation } from 'react-i18next';
 import { URL_DECENT } from '../../../constants/url';
 import ExternalLink from '../../ui/links/ExternalLink';
 import Divider from '../../ui/utils/Divider';
 
-export function AppFooter({ ...rest }: BoxProps) {
+export function AppFooter() {
   const { t } = useTranslation('home');
   return (
-    <Box
+    <Flex
       w="100%"
-      {...rest}
+      flexWrap="wrap"
+      alignSelf="flex-end"
     >
       <Divider paddingTop="2.5rem" />
-      <Flex paddingTop="2rem">
+      <Flex
+        paddingTop="2rem"
+        w="full"
+      >
         <Text>
           <Trans
             t={t}
@@ -47,6 +51,6 @@ export function AppFooter({ ...rest }: BoxProps) {
           {import.meta.env.VITE_APP_GIT_HASH.substring(0, 7)}
         </ExternalLink>
       </Flex>
-    </Box>
+    </Flex>
   );
 }

src/components/pages/AppHome/CTABox.tsx

@@ -1,29 +1,61 @@
-import { BoxProps, Center, Flex } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { ReactNode } from 'react';
-import { StyledBox } from '../../ui/containers/StyledBox';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
-interface Props extends BoxProps {
-  leftSlot: ReactNode;
-  rightSlot: ReactNode;
-}
-
-export function CTABox({ leftSlot, rightSlot, ...rest }: Props) {
+export default function CTABox({
+  Icon,
+  titleKey,
+  descKey,
+  titleColor = 'white-0',
+  descColor = 'neutral-7',
+  bg = 'neutral-3',
+  to,
+  target,
+  pr,
+  iconContainerJustify,
+}: {
+  Icon: ReactNode;
+  titleKey: string;
+  descKey: string;
+  titleColor?: string;
+  descColor?: string;
+  bg?: string;
+  to: string;
+  target?: string;
+  pr?: string | number;
+  iconContainerJustify?: string;
+}) {
+  const { t } = useTranslation('home');
   return (
-    <StyledBox
-      w="100%"
-      {...rest}
+    <Flex
+      gap="3rem"
+      px="1.5rem"
+      w={{ base: '100%', lg: 'calc(50% - 0.75rem)' }}
+      h="10rem"
+      bg={bg}
+      alignItems="center"
+      borderRadius={8}
+      as={Link}
+      pr={pr}
+      to={to}
+      target={target}
     >
-      <Center>
-        <Flex
-          padding="0.5rem"
-          alignItems="center"
-          flexWrap="wrap"
-          gap="2rem"
+      <Box width="50%">
+        <Text
+          textStyle="display-2xl"
+          color={titleColor}
         >
-          {leftSlot}
-          {rightSlot}
-        </Flex>
-      </Center>
-    </StyledBox>
+          {t(titleKey)}
+        </Text>
+        <Text color={descColor}>{t(descKey)}</Text>
+      </Box>
+      <Flex
+        width="50%"
+        justifyContent={iconContainerJustify}
+      >
+        {Icon}
+      </Flex>
+    </Flex>
   );
 }

src/components/pages/AppHome/FeaturedDAOCard.tsx

@@ -1,59 +1,77 @@
-import { Text, BoxProps, Image, HStack, Spacer, Flex, Box, Link } from '@chakra-ui/react';
+import { Text, VStack, Flex, Image } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { Link as RouterLink } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../constants/routes';
+import { Badge } from '../../ui/badges/Badge';
 import { StyledBox } from '../../ui/containers/StyledBox';
-interface DAOFeatureProps extends BoxProps {
+
+export interface FeaturedDAO {
   iconSrc: string;
-  title: string;
-  desc: string;
+  iconBg?: string;
+  iconRounded?: boolean;
+  titleKey: string;
   network: string;
+  networkName: string;
+  votingStrategy: string;
   address: string;
 }
 
+interface FeaturedDAOCardProps extends FeaturedDAO {}
+
 export default function FeaturedDAOCard({
   iconSrc,
-  title,
-  desc,
+  iconBg = 'lilac-0',
+  iconRounded = false,
+  titleKey,
   network,
   address,
-  ...rest
-}: DAOFeatureProps) {
+  networkName,
+  votingStrategy,
+}: FeaturedDAOCardProps) {
   const { t } = useTranslation('home');
   return (
-    <Box {...rest}>
-      <StyledBox
-        height="full"
-        display="flex"
-        flexDirection="column"
-        justifyContent="space-between"
+    <StyledBox
+      width={{ base: '100%', md: 'calc(50% - 0.75rem)', xl: 'calc(25% - 0.75rem)' }}
+      to={DAO_ROUTES.dao.relative(network, address)}
+    >
+      <VStack
+        justifyContent="center"
+        gap="0.5rem"
       >
-        <Box>
-          <HStack paddingBottom="1rem">
-            <Image
-              width="1.5rem"
-              height="1.5rem"
-              src={iconSrc}
-              alt={title}
-            />
-            <Text paddingStart="1.25rem">{title}</Text>
-          </HStack>
-          <Text marginBottom="0.5rem">{desc}</Text>
-        </Box>
-        <Flex>
-          <Spacer />
-          <Link
-            as={RouterLink}
-            color="celery-0"
-            _hover={{ color: 'celery--6' }}
-            alignSelf="end"
-            textStyle="display-xl"
-            to={DAO_ROUTES.dao.relative(network, address)}
+        <Flex
+          width="80px"
+          height="80px"
+          bg={iconBg}
+          justifyContent="center"
+          alignItems="center"
+          borderRadius="50%"
+        >
+          <Image
+            src={iconSrc}
+            alt={t(titleKey)}
+            width="auto"
+            height="auto"
+            borderRadius={iconRounded ? '50%' : '0'}
+          />
+        </Flex>
+        <Text textStyle="display-xl">{t(titleKey)}</Text>
+        <Flex
+          gap="0.5rem"
+          mt="1rem"
+        >
+          <Badge
+            labelKey="ownerApproved"
+            size="sm"
+          >
+            {networkName}
+          </Badge>
+          <Badge
+            labelKey="ownerApproved"
+            size="sm"
           >
-            {t('featureLink')}
-          </Link>
+            {votingStrategy}
+          </Badge>
         </Flex>
-      </StyledBox>
-    </Box>
+      </VStack>
+    </StyledBox>
   );
 }

src/components/pages/DaoDashboard/Info/ParentLink.tsx

@@ -1,4 +1,4 @@
-import { Link, HStack, Image, Text, Icon } from '@chakra-ui/react';
+import { Link, HStack, Text, Icon } from '@chakra-ui/react';
 import { ArrowBendLeftUp } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';

src/components/pages/DaoSettings/components/SettingsSection.tsx

@@ -29,7 +29,6 @@ export function SettingsSection({
     <Flex gap="1.5rem">
       {/* SETTINGS SECTION CONTENT */}
       <StyledBox
-        bg="neutral-2"
         maxHeight="fit-content"
         minHeight="6.25rem"
         minWidth="65%"

src/components/ui/badges/Badge.tsx

@@ -1,19 +1,18 @@
 import { Box, Flex, Text, Tooltip } from '@chakra-ui/react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TOOLTIP_MAXW } from '../../../constants/common';
 import { FractalProposalState, DAOState, FractalProposal } from '../../../types';
 import { ProposalCountdown } from '../proposal/ProposalCountdown';
 
 type BadgeType = {
-  [key: string]: {
-    tooltipKey?: string;
-    bg: string;
-    _hover: { bg: string; textColor: string };
-    textColor: string;
-  };
+  tooltipKey?: string;
+  bg: string;
+  _hover: { bg: string; textColor: string };
+  textColor: string;
 };
 
-const BADGE_MAPPING: BadgeType = {
+const BADGE_MAPPING: Record<FractalProposalState | DAOState | 'ownerApproved', BadgeType> = {
   [FractalProposalState.ACTIVE]: {
     tooltipKey: 'stateActiveTip',
     bg: 'lilac-0',
@@ -99,19 +98,21 @@ const BADGE_MAPPING: BadgeType = {
   },
 };
 
-type BadgeSize = { [key: string]: { minWidth: string; height: string } };
-const BADGE_SIZES: BadgeSize = {
+type Size = 'sm' | 'base';
+type BadgeSize = { minWidth: string; height: string };
+const BADGE_SIZES: Record<Size, BadgeSize> = {
   sm: { minWidth: '5rem', height: '1.375rem' },
   base: { minWidth: '5.4375rem', height: '1.375rem' },
 };
 
 interface IBadge {
-  size: 'sm' | 'base';
-  labelKey: FractalProposalState | DAOState | string;
+  size: Size;
+  labelKey: keyof typeof BADGE_MAPPING;
+  children?: ReactNode;
   proposal?: FractalProposal;
 }
 
-export function Badge({ labelKey, size, proposal }: IBadge) {
+export function Badge({ labelKey, children, size, proposal }: IBadge) {
   const { tooltipKey, ...colors } = BADGE_MAPPING[labelKey];
   const sizes = BADGE_SIZES[size];
 
@@ -144,7 +145,7 @@ export function Badge({ labelKey, size, proposal }: IBadge) {
           textStyle="label-base"
           lineHeight="1"
         >
-          {t(labelKey)}
+          {children || t(labelKey)}
         </Text>
         {proposal && (
           <ProposalCountdown