Merge pull request #77 from Saswatsusmoy/Saswatsusmoy-#76-Have-Social-Icons

Fixes #76 Added social icons

Author: arjxn-py

src/components/Header/Header.tsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import Curiologo from '../assets/images/Csmall.png'
 import './header.css';
 import { Link ,BrowserRouter as Router } from 'react-router-dom';
+import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
 
 const HeaderCurio = () => {
   //Used to toggle the hamburger menu
@@ -28,10 +29,11 @@ const HeaderCurio = () => {
         </Link>
 
         <div className="curio__sign">
-          <p>About</p>
-          <p>Sign In</p>
-          <button type="button">Sign Up</button>
-        </div>
+            {/* Social icons */}
+            <FaGithub />
+            <FaLinkedin /> 
+            <FaTwitter />
+          </div>
         </Router>
       </div>
       {/*Added a mobile version
@@ -88,13 +90,13 @@ const HeaderCurio = () => {
         }
       >
         <div className="hamburger-menu-context">
-          <b>Sign Up</b>
+          <FaGithub />
         </div>
         <div className="hamburger-menu-context">
-          <b>Sign In</b>
+          <FaLinkedin />
         </div>
         <div className="hamburger-menu-context">
-          <b>About</b>
+          <FaTwitter />
         </div>
       </div>
     </>

src/components/Header/header.css

@@ -83,6 +83,10 @@
 .hamburger-menu-context:hover {
   opacity: 0.2;
 }
+.hamburger-menu-context svg {
+  margin-right: 10px; 
+  font-size: 25px;
+}
 .gradient__text {
   background: var(--gradient-text);
   background-clip: text;
@@ -104,8 +108,20 @@
 }
 .curio__sign {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: center;
+}
+
+.curio__sign svg {
+  height: 30px;
+  width: 30px;
+  margin: 0 10px;
+  color: #d4d4d4;
+  transition: color 0.3s;
+}
+
+.curio__sign svg:hover {
+  color: #1da1f2; 
 }
 
 .curio__sign p {