feat: flesh in footer

Signed-off-by: hxtree <[email protected]>
hxtree · Dec 15, 2023 · 92fc105 · 92fc105
1 parent cfb82d1
commit 92fc105
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 31 deletions.
diff --git a/services/design-system/src/components/PageFooter/PageFooter.tsx b/services/design-system/src/components/PageFooter/PageFooter.tsx
@@ -18,8 +18,9 @@ export const PageFooter = (props: PageFooterProps) => {
   const year = new Date().getFullYear();
 
   return (
-    <footer className='page-footer'>
+    <>
       <SocialMediaBar/>
+      <footer className='page-footer'>
       {links && <Typography variant="body"><ul>
         {links.map((link: PageFooterLink) => (
           <li><a href={link.url}>{link.label}</a></li>
@@ -30,6 +31,7 @@ export const PageFooter = (props: PageFooterProps) => {
         &copy; {year} {siteOwner}. All Rights Reserved.
       </Typography>
     </footer>
+    </>
   );
 };
 

diff --git a/services/design-system/src/components/PageFooter/style.module.scss b/services/design-system/src/components/PageFooter/style.module.scss
@@ -3,7 +3,6 @@
   background-color: $color-primary;
   color: $color-white;
   margin: 0;
-  margin-top: 3rem;
   padding: 3rem;
   a {
     opacity: 0.9;
@@ -15,13 +14,19 @@
       font-weight: bold;
     }
   }
+  hr {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    opacity: 0.3;
+    border: 3px solid $color-sky-blue;
+  }
   ul {
     display: block;
     margin: 0;
     padding: 0;
     li {
       width: 33%;
-      margin: 0;
+      margin: 0.2rem;
       display: inline-block;
       a {
         padding: 0.2rem;

diff --git a/services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx b/services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx
@@ -1,11 +1,13 @@
 import { Typography } from '../Typography/Typography';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGithub, faYoutube, faXTwitter } from '@fortawesome/free-brands-svg-icons';
+import { faGithub, faYoutube, faXTwitter, IconDefinition } from '@fortawesome/free-brands-svg-icons';
+import { IconButton } from '@mui/material';
 import './style.module.scss';
 
 export type SocialMediaBarLink = {
   label: string;
   url: string;
+  icon: IconDefinition;
 }
 
 export type SocialMediaBarProps = {
@@ -15,17 +17,21 @@ export type SocialMediaBarProps = {
 export const SocialMediaBar = (props: SocialMediaBarProps) => {
   const { links } = props;
 
-  return (
-    <div className='social-media-bar'>
-      <FontAwesomeIcon icon={faGithub} size="2xl"/>
-      <FontAwesomeIcon icon={faYoutube} size="2xl"/>
-      <FontAwesomeIcon icon={faXTwitter} size="2xl"/>
+  const socialMedias = [
+    {icon: faGithub, label: 'Github', url: 'https://github.com/hxtree/cats-cradle'},
+    {icon: faYoutube, label: 'Youtbe',  url: 'https://github.com/hxtree/cats-cradle'},
+    {icon: faXTwitter, label: 'XTwitter',  url: 'https://github.com/hxtree/cats-cradle'}
+  ]
 
-      {links && <Typography variant="body"><ul>
-        {links.map((link: SocialMediaBarLink) => (
-          <li><a href={link.url}>{link.label}</a></li>
+  return (
+    <div className="social-media-bar">
+      <div>
+        {socialMedias && <Typography variant="body"><ul>
+        {socialMedias.map((socialMedia: SocialMediaBarLink) => (
+            <IconButton><FontAwesomeIcon icon={socialMedia.icon} color="white" size="xl"/></IconButton>
         ))}</ul></Typography>
       }
+      </div>
     </div>
   );
 };

diff --git a/services/design-system/src/components/SocialMediaBar/style.module.scss b/services/design-system/src/components/SocialMediaBar/style.module.scss
@@ -1,13 +1,13 @@
 @import '../../styles/utils/color-pallette';
 
 .social-media-bar {
-  background-color: $color-gray;
-  color: $color-white;
+  background-color: $color-primary;
+  opacity: 0.8;
   margin: 0;
-  margin-top: 3rem;
-  padding: 3rem;
+  margin-top: 4rem;
+  padding: 0.2rem 3rem;
+  text-align: right;
   a {
-    opacity: 0.9;
     text-decoration: none;
     color: $color-white;
     &:hover {
@@ -16,18 +16,4 @@
       font-weight: bold;
     }
   }
-  ul {
-    display: block;
-    margin: 0;
-    padding: 0;
-    li {
-      width: 33%;
-      margin: 0;
-      display: inline-block;
-      a {
-        padding: 0.2rem;
-        display: block;
-      }
-    }
-  }
 }
diff --git a/services/design-system/src/styles/index.scss b/services/design-system/src/styles/index.scss
@@ -2,4 +2,5 @@
 @import './utils/bg-color';
 @import '../components/Typography/style.module.scss';
 @import '../components/Button/style.module.scss';
+@import '../components/SocialMediaBar/style.module.scss';
 @import '../components/PageFooter/style.module.scss';