DAO-194 - Added Dao not found page (#356)

* Added page for no dao found. Added a numerous fixes for making header and footer positions workable * Bug Fix
aragon · May 5, 2021 · 3c41157 · 3c41157
1 parent 516b920
commit 3c41157
Show file tree

Hide file tree

Showing 10 changed files with 434 additions and 242 deletions.
diff --git a/packages/govern-console/src/components/ConsoleHeader/ConsoleHeader.tsx b/packages/govern-console/src/components/ConsoleHeader/ConsoleHeader.tsx
@@ -24,7 +24,7 @@ const ConsoleHeaderCard = styled(MUICard)(({ theme }) => ({
   boxShadow: 'none',
 }));
 
-const HeaderLabel = styled(MUITypography)(({ theme }) => ({
+const Subtitle = styled(MUITypography)(({ theme }) => ({
   color: theme.custom.daoHeader.labelColor,
   lineHeight: '27px',
   fontSize: '18px',
@@ -33,7 +33,7 @@ const HeaderLabel = styled(MUITypography)(({ theme }) => ({
   fontStyle: 'normal',
 }));
 
-const HeaderValue = styled(MUITypography)(({ theme }: any) => ({
+const Title = styled(MUITypography)(({ theme }: any) => ({
   color: theme.custom.daoHeader.valueColor,
   lineHeight: '60.1px',
   fontSize: '44px',
@@ -59,12 +59,12 @@ export const ConsoleHeader: React.FC<ConsoleHeaderProps> = ({
 
   return (
     <ConsoleHeaderCard>
-      <HeaderValue> Welcome to Aragon Console</HeaderValue>
+      <Title> Welcome to Aragon Console</Title>
       <div style={{ maxWidth: '480px', marginTop: '7px' }}>
-        <HeaderLabel>
+        <Subtitle>
           Lorem ipsum dolor amet ipsu amet dolores ipsum amet dolor ipsum amet
           ipsum amet dolors ipsum{' '}
-        </HeaderLabel>
+        </Subtitle>
       </div>
       <div style={{ display: 'flex', flexDirection: 'row', marginTop: '22px' }}>
         <div style={{ marginRight: '10px' }}>

diff --git a/packages/govern-console/src/components/Footer/Footer.tsx b/packages/govern-console/src/components/Footer/Footer.tsx
@@ -10,10 +10,13 @@ import youtubeIcon from 'images/svgs/youtube.svg';
 import Wallet from 'components/Wallet/Wallet';
 import { useHistory } from 'react-router-dom';
 
-const HeaderWrapperDiv = styled('div')({
+const FooterWrapperDiv = styled('div')({
   height: '106px',
   width: '100%',
   display: 'block',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
 });
 const TitleText = styled(Typography)({
   fontFamily: 'Manrope',
@@ -27,14 +30,14 @@ const TitleText = styled(Typography)({
   justifyContent: 'center',
   alignItems: 'center',
 });
-const Navbar = styled('div')({
+const FooterDiv = styled('div')({
   display: 'flex',
   width: '100%',
   flexDirection: 'row',
   justifyContent: 'space-between',
   height: '100%',
 });
-const Title = styled('div')({
+const Logo = styled('div')({
   display: 'flex',
   width: 'fit-content',
   cursor: 'pointer',
@@ -57,23 +60,23 @@ const Footer = ({}) => {
   };
 
   return (
-    <HeaderWrapperDiv id="header">
-      <Navbar id="navbar">
-        <Title id="navbar_title" onClick={redirectToHomePage}>
+    <FooterWrapperDiv id="footer_wrapper">
+      <FooterDiv id="footer">
+        <Logo id="footer_logo" onClick={redirectToHomePage}>
           <img
             src={governIcon}
             style={{ height: '31px', width: '35px', paddingTop: '35px' }}
           />
           <img src={aragonText} />
-        </Title>
+        </Logo>
         <Account id="account">
           <img src={youtubeIcon} />
           <img src={twitterIcon} />
           <img src={discordIcon} />
           <img src={messageIcon} />
         </Account>
-      </Navbar>
-    </HeaderWrapperDiv>
+      </FooterDiv>
+    </FooterWrapperDiv>
   );
 };
 

diff --git a/packages/govern-console/src/components/Header/Header.tsx b/packages/govern-console/src/components/Header/Header.tsx
@@ -10,6 +10,8 @@ const HeaderWrapperDiv = styled('div')({
   height: '106px',
   width: '100%',
   display: 'block',
+  position: 'absolute',
+  top: 0,
 });
 const TitleTextNormal = styled(Typography)({
   fontFamily: 'Manrope',

diff --git a/packages/govern-console/src/containers/Console/ConsoleMainPage.tsx b/packages/govern-console/src/containers/Console/ConsoleMainPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { styled, useTheme } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
 import { ConsoleHeader } from 'components/ConsoleHeader/ConsoleHeader';
 import { DaoCard } from 'components/DaoCards/DaoCard';
 import { ANButton } from 'components/Button/ANButton';
@@ -44,13 +44,7 @@ const ConsoleMainPage: React.FC<ConsoleMainPageProps> = ({
   ...props
 }) => {
   const history = useHistory();
-  const theme = useTheme();
   const [visibleDaoList, updateDaoList] = useState<any>([]);
-  const [filteredDaoList, updateFilteredDaoList] = useState<any>([]);
-  const [
-    isShowingFilteredResults,
-    updateIsShowingFilteredResults,
-  ] = useState<boolean>(false);
   const [totalDaoCount, updateTotalDaoCount] = useState<number>();
 
   const {
@@ -71,10 +65,6 @@ const ConsoleMainPage: React.FC<ConsoleMainPageProps> = ({
     error: errorLoadingRegistryData,
   } = useQuery(GET_GOVERN_REGISTRY_DATA);
 
-  // const getTotalNumberOfDaos = () => {
-  //   updateTotalDaoCount(numberOfDaos);
-  // };
-
   useEffect(() => {
     if (daoListData && daoListData.daos) {
       updateDaoList([...daoListData.daos]);