Update/footer (forbole#187)

artifactstaking · Aug 11, 2021 · 13b115b · 13b115b
1 parent 8e3c3cc
commit 13b115b
Show file tree

Hide file tree

Showing 13 changed files with 369 additions and 282 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 ## Changes
 - Update the structure layout of themes
 - Update footer light and dark theme
+- Add maintainer section in footer
 
 # base-v1.0.1
 ## Bug fixes

diff --git a/jest.setup.js b/jest.setup.js
@@ -63,4 +63,13 @@ jest.mock('@configs', () => ({
       "forboleX": false
     }
   },
+  generalConfig: {
+    "maintainer": {
+      "name": "Forbole",
+      "url": "https://forbole.com"
+    },
+    "github": {
+      "reportIssue": "https://github.com/forbole/big-dipper-2.0-cosmos/issues"
+    }
+  }
 }));
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -51,5 +51,6 @@
   "params": "Params",
   "errorTitle": "Opps! Looks like something went wrong :(",
   "errorDetails": "If you have time please report it to our github at <0>{{issue}}</0> with the url that caused the error.",
-  "errorHome": "Click here to go back home"
+  "errorHome": "Click here to go back home",
+  "maintainBy": "Maintained By <0>{{name}}</0>"
 }
diff --git a/src/components/footer/__snapshots__/index.test.tsx.snap b/src/components/footer/__snapshots__/index.test.tsx.snap
diff --git a/src/components/footer/components/social_media/__snapshots__/index.test.tsx.snap b/src/components/footer/components/social_media/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`component: layout/footer matches snapshot 1`] = `
 <div
-  className=" makeStyles-root-1 social-media"
+  className=" makeStyles-root social-media"
 >
   <a
     className="media telegram"

diff --git a/src/components/footer/components/social_media/index.test.tsx b/src/components/footer/components/social_media/index.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { MockTheme } from '@tests/utils';
 import SocialMedia from '.';
 
 // ==================================
@@ -8,7 +9,9 @@ import SocialMedia from '.';
 describe('component: layout/footer', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      <SocialMedia />,
+      <MockTheme>
+        <SocialMedia />
+      </MockTheme>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

diff --git a/src/components/footer/components/social_media/index.tsx b/src/components/footer/components/social_media/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { socialMediaLinks } from './utils';
-import { useGetStyles } from './styles';
+import { useStyles } from './styles';
 import { Props } from './types';
 
 const SocialMedia = (props: Props) => {
   const { className = '' } = props;
-  const { classes } = useGetStyles();
+  const classes = useStyles();
   return (
     <div className={`${className} ${classes.root} social-media`}>
       {socialMediaLinks.map((x) => {

diff --git a/src/components/footer/components/social_media/styles.tsx b/src/components/footer/components/social_media/styles.tsx
@@ -1,11 +1,11 @@
-import {
-  makeStyles,
-} from '@material-ui/styles';
+import Color from 'color';
+import { makeStyles } from '@material-ui/core/styles';
 
-export const useGetStyles = () => {
-  const useStyles = makeStyles(() => {
-    return (
-      {
+export const useStyles = () => {
+  const styles = makeStyles(
+    (theme) => {
+      const iconFill = theme.palette.type === 'light' ? theme.palette.custom.fonts.fontTwo : theme.palette.custom.general.icon;
+      return ({
         root: {
           '& .media': {
             margin: '0 0.5rem',
@@ -17,18 +17,18 @@ export const useGetStyles = () => {
             },
             '& path': {
               transition: 'all 0.3s ease',
-              fill: 'rgba(153, 153, 153, 1)',
+              fill: iconFill,
             },
             '&:hover': {
               '& path': {
-                fill: 'rgba(153, 153, 153, 0.2)',
+                fill: Color(iconFill).alpha(0.6).string(),
               },
             },
           },
         },
       });
-  });
-  return {
-    classes: useStyles(),
-  };
+    },
+  )();
+
+  return styles;
 };
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import classnames from 'classnames';
+import Trans from 'next-translate/Trans';
 import useTranslation from 'next-translate/useTranslation';
 import FooterLogoLight from '@assets/big-dipper-red.svg';
 import FooterLogoDark from '@assets/big-dipper-white.svg';
-import { Button } from '@material-ui/core';
-import { chainConfig } from '@src/configs';
+import {
+  Button,
+  Divider,
+  Typography,
+} from '@material-ui/core';
+import {
+  chainConfig, generalConfig,
+} from '@src/configs';
 import { useSettingsContext } from '@contexts';
 import { SocialMedia } from './components';
 import {
@@ -23,32 +30,33 @@ const Footer: React.FC<{className?: string}> = ({ className }) => {
   const year = new Date().getFullYear();
 
   return (
-    <div className={classnames(className, classes.root, 'footer')}>
-      {/* ============================= */}
-      {/* logo */}
-      {/* ============================= */}
-      <div className="footer__logo--container">
-        {theme === 'light' ? (
-          <FooterLogoLight className="footer__logo" />
-        ) : (
-          <FooterLogoDark className="footer__logo" />
-        )}
-        <p className="footer__slogan">{chainConfig.title}</p>
-        <p className="footer__copyright">
-          {t('common:copyright')}
-          {' '}
-          {year}
-        </p>
-      </div>
-      {/* ============================= */}
-      {/* links */}
-      {/* ============================= */}
-      <div className="footer__links">
-        {footerLinks.map((group) => {
-          return (
-            <div key={group.key} className={`${group.key} links__group`}>
-              <h3>{t(`common:${group.key}`)}</h3>
-              {
+    <div className={classnames(className, classes.root)}>
+      <div className={classnames('footer')}>
+        {/* ============================= */}
+        {/* logo */}
+        {/* ============================= */}
+        <div className="footer__logo--container">
+          {theme === 'light' ? (
+            <FooterLogoLight className="footer__logo" />
+          ) : (
+            <FooterLogoDark className="footer__logo" />
+          )}
+          <p className="footer__slogan">{chainConfig.title}</p>
+          <p className="footer__copyright">
+            {t('common:copyright')}
+            {' '}
+            {year}
+          </p>
+        </div>
+        {/* ============================= */}
+        {/* links */}
+        {/* ============================= */}
+        <div className="footer__links">
+          {footerLinks.map((group) => {
+            return (
+              <div key={group.key} className={`${group.key} links__group`}>
+                <h3>{t(`common:${group.key}`)}</h3>
+                {
                     group.links.map((x) => {
                       return (
                         <a
@@ -62,33 +70,56 @@ const Footer: React.FC<{className?: string}> = ({ className }) => {
                       );
                     })
                   }
-            </div>
-          );
-        })}
-        {/* ============================= */}
-        {/* social */}
-        {/* ============================= */}
-        <div className="footer__social">
-          <h3>{t('common:community')}</h3>
-          <SocialMedia />
-          <div>
-            <p className="footer__donate--excerpt">{t('common:donateExcerpt')}</p>
-            <a
-              href={donateLink.url}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <Button
-                className="footer__donate-button"
-                variant="contained"
-                color="primary"
+              </div>
+            );
+          })}
+          {/* ============================= */}
+          {/* social */}
+          {/* ============================= */}
+          <div className="footer__social">
+            <h3>{t('common:community')}</h3>
+            <SocialMedia />
+            <div>
+              <p className="footer__donate--excerpt">{t('common:donateExcerpt')}</p>
+              <a
+                href={donateLink.url}
+                target="_blank"
+                rel="noreferrer"
               >
-                {t('common:donate')}
-              </Button>
-            </a>
+                <Button
+                  className="footer__donate-button"
+                  variant="contained"
+                  color="primary"
+                >
+                  {t('common:donate')}
+                </Button>
+              </a>
+            </div>
           </div>
         </div>
       </div>
+      <Divider />
+      <div className="footer__closing--container">
+        <Typography className="footer__closing--text">
+          {t('common:copyright')}
+          {' '}
+          {year}
+        </Typography>
+        <Typography className="footer__closing--text">
+          <Trans
+            i18nKey="common:maintainBy"
+            components={[
+              (
+                // eslint-disable-next-line
+                <a target="_blank" rel="noreferrer" href={generalConfig.maintainer.url} />
+              ),
+            ]}
+            values={{
+              name: generalConfig.maintainer.name,
+            }}
+          />
+        </Typography>
+      </div>
     </div>
   );
 };

diff --git a/src/components/footer/styles.tsx b/src/components/footer/styles.tsx
@@ -6,10 +6,16 @@ export const useStyles = () => {
     (theme) => {
       return ({
         root: {
-          '&.footer': {
-            background: theme.palette.background.paper,
-            padding: '3rem 1.5rem 4rem',
-            color: theme.palette.custom.fonts.fontOne,
+          background: theme.palette.background.paper,
+          padding: theme.spacing(6, 3, 6),
+          color: theme.palette.custom.fonts.fontOne,
+          '& .footer__closing--container': {
+            '& a': {
+              color: theme.palette.custom.fonts.highlight,
+            },
+          },
+          '& .MuiDivider-root': {
+            margin: theme.spacing(4, 0),
           },
           '& p': {
             marginTop: theme.spacing(2),
@@ -24,7 +30,7 @@ export const useStyles = () => {
           '& .footer__logo': {
             width: '180px',
           },
-          '& .footer__copyright': {
+          '& .footer__closing--text': {
             color: theme.palette.custom.fonts.fontThree,
           },
           '& .footer__links': {
@@ -45,7 +51,7 @@ export const useStyles = () => {
               color: 'inherit',
               textDecoration: 'none',
               paddingBottom: '1rem',
-              borderBottom: 'solid 1px #3c3c3c',
+              borderBottom: `solid 1px ${theme.palette.custom.fonts.fontFour}`,
               transition: '0.2s',
               width: '100%',
               '&:hover': {
@@ -72,9 +78,23 @@ export const useStyles = () => {
               },
             },
           },
+          [theme.breakpoints.up('md')]: {
+            paddingBottom: 0,
+            '& .MuiDivider-root': {
+              marginBottom: 0,
+            },
+            '& .footer__closing--container': {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: theme.spacing(1, 0),
+            },
+          },
           [theme.breakpoints.up('lg')]: {
-            '&.footer': {
-              padding: '3rem 2rem 5rem',
+            '& .MuiDivider-root': {
+              marginTop: theme.spacing(5),
+            },
+            '& .footer': {
               display: 'grid',
               gridTemplateColumns: 'repeat(4, 1fr)',
             },

diff --git a/src/components/footer/utils.tsx b/src/components/footer/utils.tsx
@@ -47,7 +47,6 @@ export const footerLinks = [
         key: 'privacyPolicy',
         url: `${BIG_DIPPER_URL}/privacy-policy`,
       },
-      donateLink,
     ],
   },
 ];
diff --git a/src/configs/general_config.json b/src/configs/general_config.json
@@ -1,4 +1,8 @@
 {
+  "maintainer": {
+    "name": "Forbole",
+    "url": "https://forbole.com"
+  },
   "github": {
     "reportIssue": "https://github.com/forbole/big-dipper-2.0-cosmos/issues"
   }

diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
@@ -47,6 +47,9 @@ export const common = {
     MuiSvgIcon: {
       htmlColor: '#999999', // same as custom /general /icons
     },
+    MuiButton: {
+      disableElevation: true,
+    },
   },
   typography: {
     fontFamily: '"Hind Madurai", sans-serif',