Merge branch 'reskin/refactor-root-reskin' of github.com:decentdao/fr…

…actal-interface into reskin/refactor-root-reskin
decentdao · May 7, 2024 · 1729a57 · 1729a57
2 parents fc97765 + b9c3731
commit 1729a57
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 113 deletions.
diff --git a/src/components/pages/AppHome/AppFooter.tsx b/src/components/pages/AppHome/AppFooter.tsx
diff --git a/src/components/ui/links/ExternalLink.tsx b/src/components/ui/links/ExternalLink.tsx
@@ -1,6 +1,11 @@
 import { Link, LinkProps } from '@chakra-ui/react';
+import { Ref, forwardRef } from 'react';
 
-export default function ExternalLink({ children, ...rest }: LinkProps) {
+export default function ExternalLink({
+  children,
+  internalRef,
+  ...rest
+}: LinkProps & { internalRef?: Ref<any> }) {
   return (
     <Link
       color="celery-0"
@@ -14,9 +19,20 @@ export default function ExternalLink({ children, ...rest }: LinkProps) {
       target="_blank"
       rel="noreferrer"
       textDecoration="none"
+      ref={internalRef}
       {...rest}
     >
       {children}
     </Link>
   );
 }
+
+export const ExtrernalLinkWrappable = forwardRef(({ children, ...props }: LinkProps, ref) => (
+  <ExternalLink
+    {...props}
+    internalRef={ref}
+  >
+    {children}
+  </ExternalLink>
+));
+ExtrernalLinkWrappable.displayName = 'ExtrernalLinkWrappable';
diff --git a/src/components/ui/page/Footer.tsx b/src/components/ui/page/Footer.tsx
@@ -0,0 +1,63 @@
+import { Flex, Text, Tooltip } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { URL_DECENT } from '../../../constants/url';
+import ExternalLink, { ExtrernalLinkWrappable } from '../links/ExternalLink';
+import { DecentFooterLogo } from '../proposal/Icons';
+
+export function Footer() {
+  const { t } = useTranslation('home');
+  const commitHash = import.meta.env.VITE_APP_GIT_HASH;
+  return (
+    <Flex
+      w="100%"
+      flexWrap="wrap"
+      alignSelf="flex-end"
+      justifyContent="flex-end"
+      py="1rem"
+      px="3rem"
+    >
+      <ExternalLink href="/docs/fractal_audit.pdf">{t('audit')}</ExternalLink>
+      <Tooltip
+        placement="top"
+        label={t('currentBuild', { hash: commitHash })}
+      >
+        <ExtrernalLinkWrappable
+          href={`https://github.com/decentdao/decent-interface/commit/${commitHash}`}
+        >
+          {commitHash.substring(0, 7)}
+        </ExtrernalLinkWrappable>
+      </Tooltip>
+      <Flex
+        alignItems="center"
+        ml="2rem"
+      >
+        <Text
+          color="neutral-6"
+          as="span"
+        >
+          {t('homeAttribution')}
+        </Text>
+        <Flex
+          as="a"
+          target="_blank"
+          rel="noreferrer"
+          textDecoration="none"
+          href={URL_DECENT}
+          color="neutral-6"
+          ml="0.5rem"
+          alignItems="center"
+        >
+          {/* @todo This should be replaced with proper logo that will include DAO word */}
+          <DecentFooterLogo />
+          <Text
+            display="inline-flex"
+            pt="2px"
+            ml="0.25rem"
+          >
+            DAO
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx
@@ -1,9 +1,10 @@
 import { Box, Container, Grid, GridItem, Show } from '@chakra-ui/react';
 import { Outlet } from 'react-router-dom';
-import { CONTENT_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common';
+import { CONTENT_HEIGHT, FOOTER_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { ErrorBoundary } from '../../utils/ErrorBoundary';
 import { TopErrorFallback } from '../../utils/TopErrorFallback';
+import { Footer } from '../Footer';
 import Header from '../Header';
 import { NavigationLinks } from '../Navigation/NavigationLinks';
 
@@ -13,63 +14,66 @@ export default function Layout() {
   } = useFractal();
 
   return (
-    <Grid
-      templateAreas={{
-        base: `"header header"
+    <>
+      <Grid
+        templateAreas={{
+          base: `"header header"
 "main main"`,
-        md: `"header header"
+          md: `"header header"
 "nav main"`,
-      }}
-      gridTemplateColumns="4.25rem 1fr"
-      gridTemplateRows={`${HEADER_HEIGHT} minmax(${CONTENT_HEIGHT}, 100%)`}
-      position="relative"
-    >
-      <GridItem
-        area="main"
-        mx="1.5rem"
+        }}
+        gridTemplateColumns="4.25rem 1fr"
+        gridTemplateRows={`${HEADER_HEIGHT} minmax(${CONTENT_HEIGHT}, 100%)`}
+        position="relative"
       >
-        <Container
-          display="grid"
-          maxWidth="container.xl"
-          px="0"
-          minH={CONTENT_HEIGHT}
-          paddingBottom="2rem"
+        <GridItem
+          area="main"
+          mx="1.5rem"
         >
-          <ErrorBoundary
-            fallback={<TopErrorFallback />}
-            showDialog
+          <Container
+            display="grid"
+            maxWidth="container.xl"
+            px="0"
+            minH={CONTENT_HEIGHT}
+            paddingBottom="2rem"
           >
-            <Outlet />
-          </ErrorBoundary>
-        </Container>
-      </GridItem>
-      <GridItem area="header">
-        <Box
-          bg="#26212AD6"
-          backdropFilter="blur(12px)"
+            <ErrorBoundary
+              fallback={<TopErrorFallback />}
+              showDialog
+            >
+              <Outlet />
+            </ErrorBoundary>
+          </Container>
+        </GridItem>
+        <GridItem area="header">
+          <Box
+            bg="#26212AD6"
+            backdropFilter="blur(12px)"
+            position="fixed"
+            zIndex={5}
+            w="full"
+          >
+            <Header />
+          </Box>
+        </GridItem>
+
+        <GridItem
+          area="nav"
+          display="flex"
+          flexDirection="column"
           position="fixed"
-          zIndex={5}
-          w="full"
+          ml={6}
+          minHeight={{ base: undefined, md: `calc(100vh - ${HEADER_HEIGHT} - ${FOOTER_HEIGHT})` }}
         >
-          <Header />
-        </Box>
-      </GridItem>
-
-      <GridItem
-        area="nav"
-        display="flex"
-        flexDirection="column"
-        position="fixed"
-        ml={6}
-        minHeight={{ base: undefined, md: `calc(100vh - ${HEADER_HEIGHT})` }}
-      >
-        <Show above="md">
-          <NavigationLinks
-            showDAOLinks={!!daoAddress}
-            address={daoAddress}
-          />
-        </Show>
-      </GridItem>
-    </Grid>
+          <Show above="md">
+            <NavigationLinks
+              showDAOLinks={!!daoAddress}
+              address={daoAddress}
+            />
+          </Show>
+        </GridItem>
+      </Grid>
+      <Footer />
+    </>
   );
 }
diff --git a/src/components/ui/proposal/Icons.tsx b/src/components/ui/proposal/Icons.tsx
@@ -618,3 +618,44 @@ export function DocsIllustration() {
     </svg>
   );
 }
+
+export function DecentFooterLogo() {
+  return (
+    <svg
+      width="78"
+      height="18"
+      viewBox="0 0 78 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M74.2097 6.94121V13.9277H77.4648V15.4362H72.5623V6.94121H70.3394V5.43277H72.5623V2.56592H74.2097V5.43277H76.8495V6.94121H74.2097Z"
+        fill="currentColor"
+      />
+      <path
+        d="M61.3682 15.4358V5.43237H62.9362V7.04005H63.0354C63.3662 6.49754 63.8293 6.06089 64.4248 5.73009C65.0202 5.39929 65.7083 5.23389 66.4889 5.23389C67.6931 5.23389 68.6325 5.60438 69.3074 6.34537C69.9954 7.07313 70.3395 8.11184 70.3395 9.46151V15.4358H68.6921V9.73938C68.6921 8.78668 68.4737 8.0523 68.0371 7.53625C67.6004 7.00697 66.9587 6.74233 66.1118 6.74233C65.2121 6.74233 64.4711 7.04005 63.8889 7.63549C63.3067 8.23093 63.0155 9.005 63.0155 9.95771V15.4358H61.3682Z"
+        fill="currentColor"
+      />
+      <path
+        d="M60.3198 10.9501H51.8645C51.9704 11.9028 52.3343 12.6703 52.9562 13.2525C53.5781 13.8347 54.3522 14.1258 55.2784 14.1258C56.0459 14.1258 56.6876 13.9538 57.2037 13.6097C57.7329 13.2525 58.1167 12.7894 58.3548 12.2204H60.0816C59.7773 13.1731 59.2017 13.9802 58.3548 14.6418C57.5212 15.3034 56.4957 15.6342 55.2784 15.6342C54.3257 15.6342 53.4524 15.4093 52.6585 14.9594C51.8778 14.4963 51.2559 13.8678 50.7928 13.0738C50.3429 12.2799 50.1179 11.4 50.1179 10.4341C50.1179 9.46813 50.3429 8.5882 50.7928 7.79428C51.2559 7.00036 51.8778 6.37845 52.6585 5.92857C53.4524 5.46545 54.3257 5.23389 55.2784 5.23389C56.2179 5.23389 57.0713 5.45883 57.8388 5.90872C58.6062 6.35861 59.2083 6.98713 59.645 7.79428C60.0948 8.60143 60.3198 9.52105 60.3198 10.5531V10.9501ZM55.2784 6.74233C54.4051 6.74233 53.6641 7.00036 53.0554 7.51641C52.46 8.03245 52.0829 8.72052 51.9241 9.5806H58.593C58.4342 8.74698 58.0571 8.06553 57.4617 7.53625C56.8795 7.00697 56.1517 6.74233 55.2784 6.74233Z"
+        fill="currentColor"
+      />
+      <path
+        d="M44.5157 15.6342C43.5498 15.6342 42.6698 15.4093 41.8759 14.9594C41.0952 14.5095 40.4799 13.8876 40.0301 13.0937C39.5802 12.2998 39.3552 11.4132 39.3552 10.4341C39.3552 9.45489 39.5802 8.56835 40.0301 7.77443C40.4799 6.98051 41.0952 6.35861 41.8759 5.90872C42.6698 5.45883 43.5498 5.23389 44.5157 5.23389C45.3758 5.23389 46.1366 5.4059 46.7982 5.74993C47.4731 6.09397 48.0156 6.54385 48.4258 7.0996C48.8492 7.64211 49.1337 8.22432 49.2792 8.84622H47.5921C47.3804 8.25078 47.0033 7.75458 46.4608 7.35762C45.9183 6.94743 45.2699 6.74233 44.5157 6.74233C43.4968 6.74233 42.6698 7.08637 42.0347 7.77443C41.3996 8.44926 41.082 9.33581 41.082 10.4341C41.082 11.5323 41.3996 12.4255 42.0347 13.1135C42.6698 13.7884 43.4968 14.1258 44.5157 14.1258C45.2699 14.1258 45.9183 13.9273 46.4608 13.5303C47.0033 13.1202 47.3804 12.6173 47.5921 12.0219H49.2792C49.1337 12.6438 48.8492 13.2326 48.4258 13.7884C48.0156 14.3309 47.4731 14.7742 46.7982 15.1182C46.1366 15.4622 45.3758 15.6342 44.5157 15.6342Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22.0666 15.6338C21.1933 15.6338 20.3994 15.4155 19.6849 14.9789C18.9836 14.5422 18.4278 13.9335 18.0176 13.1529C17.6074 12.3589 17.4023 11.4525 17.4023 10.4337C17.4023 9.41481 17.6074 8.51501 18.0176 7.73432C18.4278 6.9404 18.9836 6.32511 19.6849 5.88846C20.3994 5.4518 21.1933 5.23349 22.0666 5.23349C22.8208 5.23349 23.5023 5.40549 24.111 5.74952C24.7329 6.08032 25.2026 6.51037 25.5202 7.03965H25.6194L25.6194 2.56593H27.2668L27.2668 15.4354H25.6988V13.7681H25.5996C25.2555 14.3371 24.766 14.7936 24.1308 15.1377C23.4957 15.4685 22.8076 15.6338 22.0666 15.6338ZM22.4239 14.1254C23.3766 14.1254 24.144 13.7946 24.7263 13.133C25.3217 12.4714 25.6194 11.5716 25.6194 10.4337C25.6194 9.29572 25.3217 8.39593 24.7263 7.73432C24.144 7.07272 23.3766 6.74192 22.4239 6.74192C21.4183 6.74192 20.6177 7.07272 20.0223 7.73432C19.4268 8.38269 19.1291 9.28249 19.1291 10.4337C19.1291 11.5716 19.4268 12.4714 20.0223 13.133C20.6177 13.7946 21.4183 14.1254 22.4239 14.1254Z"
+        fill="currentColor"
+      />
+      <path
+        d="M38.5171 10.9496H30.0618C30.1677 11.9023 30.5315 12.6698 31.1534 13.252C31.7754 13.8342 32.5494 14.1253 33.4757 14.1253C34.2431 14.1253 34.8849 13.9533 35.4009 13.6093C35.9302 13.252 36.3139 12.7889 36.5521 12.2199H38.2789C37.9745 13.1726 37.399 13.9797 36.5521 14.6413C35.7185 15.3029 34.693 15.6337 33.4757 15.6337C32.523 15.6337 31.6496 15.4088 30.8557 14.9589C30.075 14.4958 29.4531 13.8673 28.99 13.0734C28.5401 12.2794 28.3152 11.3995 28.3152 10.4336C28.3152 9.46764 28.5401 8.58771 28.99 7.79379C29.4531 6.99987 30.075 6.37797 30.8557 5.92808C31.6496 5.46496 32.523 5.2334 33.4757 5.2334C34.4151 5.2334 35.2686 5.45834 36.0361 5.90823C36.8035 6.35812 37.4056 6.98664 37.8422 7.79379C38.2921 8.60094 38.5171 9.52057 38.5171 10.5527V10.9496ZM33.4757 6.74185C32.6024 6.74185 31.8614 6.99987 31.2527 7.51592C30.6572 8.03197 30.2801 8.72003 30.1214 9.58011H36.7903C36.6315 8.74649 36.2544 8.06505 35.6589 7.53576C35.0767 7.00649 34.349 6.74185 33.4757 6.74185Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.4661 0.956055H7.78838C7.48898 0.956055 7.24648 1.19856 7.24648 1.49796V3.63171C7.24648 3.93112 7.00398 4.17362 6.70457 4.17362H4.02688C3.81113 4.17362 3.60453 4.25931 3.45212 4.41172L0.710756 7.15309C0.558345 7.3055 0.472656 7.51244 0.472656 7.72784V13.2844C0.472656 13.5838 0.715159 13.8263 1.01456 13.8263H3.31766C3.61706 13.8263 3.85957 13.5838 3.85957 13.2844V7.93309C3.85957 7.63369 4.10207 7.39119 4.40147 7.39119H6.70457C7.00398 7.39119 7.24648 7.14868 7.24648 6.84928V4.851C7.24648 4.5516 7.48898 4.3091 7.78838 4.3091H10.0915C10.3909 4.3091 10.6334 4.5516 10.6334 4.851V13.2844C10.6334 13.5838 10.3909 13.8263 10.0915 13.8263H4.40147C4.10207 13.8263 3.85957 14.0688 3.85957 14.3682V16.502C3.85957 16.8014 4.10207 17.0439 4.40147 17.0439H10.4481C10.6629 17.0439 10.8688 16.9589 11.0212 16.8075L13.7805 14.0648C13.9339 13.9123 14.0203 13.7047 14.0203 13.4883V4.39817C14.0203 4.25457 13.9631 4.11672 13.8615 4.01511L11.0408 1.19415C10.8884 1.04174 10.6815 0.956055 10.4661 0.956055Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -1,5 +1,6 @@
 export const HEADER_HEIGHT = '4.5rem';
-export const CONTENT_HEIGHT = `calc(100vh - ${HEADER_HEIGHT})`;
+export const FOOTER_HEIGHT = '4.125rem';
+export const CONTENT_HEIGHT = `calc(100vh - ${HEADER_HEIGHT} - ${FOOTER_HEIGHT})`;
 
 // TODO get these into `decent-ui` repo
 export const BACKGROUND_SEMI_TRANSPARENT = '#10041480';

diff --git a/src/i18n/locales/en/home.json b/src/i18n/locales/en/home.json
@@ -11,6 +11,7 @@
   "shutterTitle": "Shutter DAO 0x36",
   "myosinTitle": "Myosin",
   "textMoreDAOs": "Load More",
-  "homeAttribution": "Made with 💜 by <1>Decent DAO</1>",
+  "homeAttribution": "Made with love by",
+  "currentBuild": "Current Build: {{hash}}",
   "audit": "Audit"
 }
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -2,7 +2,6 @@ import { VStack, Text, Flex, Button } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { mainnet, sepolia } from 'wagmi/chains';
-import { AppFooter } from '../components/pages/AppHome/AppFooter';
 import CTABox from '../components/pages/AppHome/CTABox';
 import FeaturedDAOCard, { FeaturedDAO } from '../components/pages/AppHome/FeaturedDAOCard';
 import { CreateDAOIllustration, DocsIllustration } from '../components/ui/proposal/Icons';
@@ -51,6 +50,7 @@ const FEATURED_DAOS = new Map<number, FeaturedDAO[]>([
       {
         iconSrc: '/images/icon-myosin.svg',
         titleKey: 'myosinTitle',
+        iconBg: 'neutral-3',
         network: 'sep',
         networkName: 'Sepolia',
         votingStrategy: 'ERC-20',
@@ -152,7 +152,6 @@ export default function HomePage() {
           </VStack>
         ) : null}
       </VStack>
-      <AppFooter />
     </Flex>
   );
 }