#158 Footer style into scss module

mitaai · Apr 5, 2021 · 62c55fd · 62c55fd
1 parent 61510e8
commit 62c55fd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -5,6 +5,7 @@ import Row from 'react-bootstrap/Row';
 import Image from 'react-bootstrap/Image';
 import Link from 'next/link';
 import moment from 'moment';
+import styles from './Footer.module.scss';
 
 function Footer() {
   const [mobileView, setMobileView] = useState();
@@ -20,13 +21,13 @@ function Footer() {
     });
   }, []);
   return (
-    <footer className="footer mt-auto py-3 as-footer">
+    <footer className={`footer mt-auto py-3 as-footer ${styles.footer}`}>
       <Container fluid className="px-5">
         <Row>
           <Col md={mobileView ? 12 : 6} className={mobileView ? 'text-center' : 'text-left'}>
-            <Image src="/logo_mit.png" alt="MIT logo" className="logo mr-3 mt-2" />
-            <Image src="/logo_aai.png" alt="Active Archives Initiative logo" className="logo mr-3 mt-2" />
-            <Image src="/logo_neh.png" alt="National Endowment for the Humanities logo" className="logo mt-2" />
+            <Image src="/logo_mit.png" alt="MIT logo" className={`logo mr-3 mt-2 ${styles.footerlogo}`} />
+            <Image src="/logo_aai.png" alt="Active Archives Initiative logo" className={`logo mr-3 mt-2 ${styles.footerlogo}`} />
+            <Image src="/logo_neh.png" alt="National Endowment for the Humanities logo" className={`logo mt-2 ${styles.footerlogo}`} />
           </Col>
           <Col md={mobileView ? 12 : 6} style={{ paddingTop: mobileView ? 15 : 0 }} className={`text-muted text-${mobileView ? 'center' : 'right'} mt-n1`}>
             <small>
@@ -50,11 +51,6 @@ function Footer() {
           </Col>
         </Row>
       </Container>
-      <style jsx>
-        {`
-          .footer { background-color: #f5f5f5 }
-        `}
-      </style>
     </footer>
   );
 }

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,9 @@
+.footer {
+  background-color: #f5f5f5;
+}
+
+.footerlogo {
+  height: 30px;
+  max-height: 30px;
+  min-height: 30px;
+}
diff --git a/src/style/custom.scss b/src/style/custom.scss
@@ -11,12 +11,6 @@ ol.breadcrumb {
   padding-left: 0px !important;
 }
 
-.footer .logo {
-  height: 30px;
-  max-height: 30px;
-  min-height: 30px;
-}
-
 .header-logo-svg {
   width: 26px;
   height: 26px;