moved contact icons to navbar

src/components/Button/Button.tsx

@@ -50,19 +50,3 @@ export const ModalCloseButton = ({ onClick, to }: ModalCloseButtonProps): ReactE
 
 export const GoBackButton = ({ to, text }: LinkButtonProps): ReactElement =>
   <Link to={to} className={'modal'}><Arrow text={text}/></Link>;
-
-type ContactButtonProps = CommonButtonProps & {
-    icon: string;
-    href: string;
-    alt: string;
-}
-
-export const ContactButton = ({ icon, href, alt, text }: ContactButtonProps): ReactElement =>
-  <a className={'button contact'} href={href} target={'_blank'} rel={'noreferrer'}>
-    <div className={'contact-icon'}>
-      <img src={icon} alt={alt}/>
-    </div>
-    <div className={'contact-text'}>
-      {text}
-    </div>
-  </a>;

src/components/Button/button.scss

@@ -8,23 +8,6 @@
             background-color:#000000;
         }
     }
-
-    .contact-icon{
-        filter: invert(0%);
-        -webkit-filter: invert(0%);
-    }
-
-    .button:hover .contact-icon{
-        filter: invert(0%);
-        -webkit-filter: invert(0%);
-        transition: ease 0.2s;
-    }
-
-    .button:hover .contact-icon{
-        transition: ease-in-out 0.2s;
-        filter: invert(100%);
-        -webkit-filter: invert(100%);
-    }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -36,18 +19,7 @@
             color:#000000;
             background-color:#FFFFFF;
         }
-    }
-
-    .contact-icon{
-        filter:  invert(100%);
-        -webkit-filter: invert(100%);
-    }
-
-    .button:hover .contact-icon{
-        filter: invert(0%);
-        -webkit-filter: invert(0%);
-        transition: ease 0.2s;
-    }
+      }
 }
 
 .button{
@@ -73,26 +45,9 @@
 .modal{
     z-index: 1;
 }
-
-.contact-icon{
-    grid-column: 1;
-}
-
 .contact-text{
     grid-column: 2;
     margin: auto;
     width: 50%;
     text-align: center;
 }
-
-
-@media screen and (max-width: 768px){
-    .contact-icon{
-        padding-top: 0.15rem;
-    }
-
-    .contact-text{
-        font-size: 1rem;
-    }
-
-}

src/components/NavBar/NavBar.tsx

@@ -1,5 +1,8 @@
 import { ReactElement, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import EmailSVG from './contact_images/email.svg';
+import LinkedInSVG from './contact_images/linkedin.svg';
+import GitHubSVG from './contact_images/github.svg';
 import { HamburgerMenu } from '../Hamburger/Hamburger';
 import './navbar.scss';
 
@@ -78,6 +81,17 @@ export const NavBarLinks = ({ onClick }: NavBarLinksProps): ReactElement =>
           <span className={'nav-text'}>CV</span>
         </li>
       </Link>
+      <div style={{ marginLeft: '16px' }}>
+        <a style={{ marginRight: '24px' }} href="mailto:[email protected]">
+          <img className="contact-icon" src={EmailSVG} alt="email" />
+        </a>
+        <a style={{ marginRight: '24px' }} href="/linkedin">
+          <img className="contact-icon" src={LinkedInSVG} alt="linkedin" />
+        </a>
+        <a href="/github">
+          <img className="contact-icon" src={GitHubSVG} alt="github" />
+        </a>
+      </div>
     </ul>
   </nav>;
 

src/components/NavBar/navbar.scss

@@ -55,13 +55,18 @@
 
 /* desktop navbar */
 .desktop nav ul {
+    display: flex;
     padding: 0;
     list-style: none;
 
     li{
         display: inline-block;
         margin: 1.1rem 1rem;
     }
+
+    .contact-icon {
+      margin-top: 8px;
+    }
 }
 
 /* mobile navbar */
@@ -86,19 +91,17 @@
             animation-delay: 0.13s;
         }
 
-        a:nth-child(4) li{
-          animation-delay: 0.17s;
-      }
+        span a img {
+          margin-top: 16px;
+          animation-delay: 0.21s;
+        }
     }
 
-    li{
+    li {
         cursor: pointer;
         display: flex;
         padding: 0.75rem;
         border-bottom: 0.06rem solid #777777;
-    }
-
-    a li {
         opacity: 0;
         -webkit-animation: fadein 0.25s; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein 0.25s; /* Firefox < 16 */
@@ -107,6 +110,7 @@
         animation: fadein 0.25s;
         animation-fill-mode: forwards;
     }
+
 }
 
 .mainnav{
@@ -143,5 +147,22 @@
     nav ul {
         text-align: center;
     }
+
+    .contact-icon {
+      padding-top: 16px;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+  .contact-icon {
+    filter: invert(0%);
+    -webkit-filter: invert(0%);
+  }
 }
 
+@media (prefers-color-scheme: dark) {
+  .contact-icon {
+    filter: invert(100%);
+    -webkit-filter: invert(100%);
+  }
+}

src/pages/HomePage/HomePage.tsx

@@ -1,5 +1,4 @@
 import { ReactElement, useEffect } from 'react';
-import { Contact } from '../../components/Contact/Contact';
 import { Intro } from '../../components/Intro/Intro';
 import { setTitle, setDescription, setOgProperties } from '../../meta/meta';
 
@@ -15,8 +14,9 @@ export function HomePage (): ReactElement {
 
   return (
     <div className={'fade-in'}>
-      <Intro/>
-      <Contact/>
+      <div style={{ marginBottom: '64px' }}>
+        <Intro/>
+      </div>
     </div>
   );
 }