remove links header and footer

Author: jpabloms2

front/src/common-app/components/appbar/appbar.component.tsx

@@ -2,44 +2,12 @@ import React from 'react';
 import { ReactComponent as CodePasterLogo } from 'assets/logo.svg';
 import * as classes from './appbar.styles';
 
-interface Props {
-  showLinks: boolean;
-}
-
-export const AppbarComponent: React.FC<Props> = ({ showLinks }) => {
-  const {
-    appbarContainer,
-    navContainer,
-    navList,
-    listItem,
-    link,
-    logo,
-  } = classes;
+export const AppbarComponent: React.FC = () => {
+  const { appbarContainer, logo } = classes;
 
   return (
     <div className={appbarContainer}>
-      <CodePasterLogo className={logo(showLinks)} />
-      {showLinks && (
-        <nav className={navContainer}>
-          <ul className={navList}>
-            <li className={listItem}>
-              <a className={link} href="#">
-                About
-              </a>
-            </li>
-            <li className={listItem}>
-              <a className={link} href="#">
-                Credits
-              </a>
-            </li>
-            <li className={listItem}>
-              <a className={link} href="#">
-                License
-              </a>
-            </li>
-          </ul>
-        </nav>
-      )}
+      <CodePasterLogo className={logo} />
     </div>
   );
 };

front/src/common-app/components/appbar/appbar.styles.ts

@@ -30,57 +30,13 @@ export const appbarContainer = css`
   }
 `;
 
-export const logo = (showLinks: boolean): string => css`
+export const logo = css`
   height: ${spacing(7.5)};
   margin-top: ${spacing(0.625)};
   margin-left: ${spacing(4.8)};
   fill: ${color.secondary};
   @media (max-width: ${breakpoints.values.sm}px) {
-    margin-top: ${showLinks ? spacing(3) : 0};
+    margin-top: spacing(3);
     margin-left: 0;
   }
 `;
-
-export const navContainer = css`
-  margin-left: auto;
-  @media (max-width: ${breakpoints.values.sm}px) {
-    margin-left: 0;
-  }
-`;
-
-export const navList = css`
-  display: flex;
-  list-style: none;
-  @media (max-width: ${breakpoints.values.sm}px) {
-    padding: 0;
-  }
-`;
-
-export const listItem = css`
-  margin-right: ${spacing(3)};
-  overflow: hidden;
-  &:last-of-type {
-    margin-right: ${spacing(4.8)};
-    @media (max-width: ${breakpoints.values.sm}px) {
-      margin-right: 0;
-    }
-  }
-`;
-
-export const link = css`
-  position: relative;
-  display: inline-block;
-  margin-top: ${spacing(0.4)};
-  padding-bottom: ${spacing(0.4)};
-  font-size: 1.1rem;
-  text-decoration: none;
-  color: ${color.secondary};
-  border-bottom: 2px solid transparent;
-  transition: all 0.3s ease;
-  -webkit-transition: all 0.3s ease;
-  &:hover {
-    padding-bottom: ${spacing(0.375)};
-    border-bottom: 2px solid ${color.alertLight};
-    color: ${color.alertLight};
-  }
-`;

front/src/common-app/components/footer/footer.component.tsx

@@ -6,17 +6,10 @@ import TwitterIcon from '@material-ui/icons/Twitter';
 import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
 import LanguageIcon from '@material-ui/icons/Language';
 
-interface Props {
-  showLinks: boolean;
-}
-
-export const FooterComponent: React.FC<Props> = ({ showLinks }) => {
+export const FooterComponent: React.FC = () => {
   const {
     footerContainer,
-    topContainer,
     topContainerCenter,
-    linkList,
-    link,
     lemoncodeIcon,
     bottomContainer,
     iconContainer,
@@ -27,28 +20,7 @@ export const FooterComponent: React.FC<Props> = ({ showLinks }) => {
   } = classes;
   return (
     <footer className={footerContainer}>
-      <div className={showLinks ? topContainer : topContainerCenter}>
-        {showLinks && (
-          <nav>
-            <ul className={linkList}>
-              <li>
-                <a className={link} href="#">
-                  About
-                </a>
-              </li>
-              <li>
-                <a className={link} href="#">
-                  Credits
-                </a>
-              </li>
-              <li>
-                <a className={link} href="#">
-                  License
-                </a>
-              </li>
-            </ul>
-          </nav>
-        )}
+      <div className={topContainerCenter}>
         <LemoncodeLogo className={lemoncodeIcon} />
       </div>
       <div className={bottomContainer}>

front/src/common-app/components/footer/footer.styles.ts

@@ -41,25 +41,6 @@ export const topContainerCenter = css`
   padding: 0 ${spacing(2)};
 `;
 
-export const linkList = css`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  @media (max-width: ${breakpoints.values.xs}px) {
-    margin-top: ${spacing(2.4)};
-    text-align: center;
-  }
-`;
-
-export const link = css`
-  font-size: 1.1rem;
-  text-decoration: none;
-  color: ${color.greyLight};
-  &:hover {
-    color: ${color.primary};
-  }
-`;
-
 export const bottomContainer = css`
   display: flex;
   justify-content: space-between;

front/src/layout/app-layout.tsx

@@ -4,9 +4,9 @@ import { AppbarComponent, FooterComponent } from 'common-app';
 export const AppLayout: React.FC = props => {
   return (
     <>
-      <AppbarComponent showLinks={true} />
+      <AppbarComponent />
       {props.children}
-      <FooterComponent showLinks={true} />
+      <FooterComponent />
     </>
   );
 };

front/src/layout/session-layout.tsx

@@ -4,9 +4,9 @@ import { AppbarComponent, FooterComponent } from 'common-app';
 export const SessionLayout: React.FC = props => {
   return (
     <>
-      <AppbarComponent showLinks={false} />
+      <AppbarComponent />
       {props.children}
-      <FooterComponent showLinks={false} />
+      <FooterComponent />
     </>
   );
 };