Adding Kaggle react icon

Adding Kaggle react icon to the sidebar and navbar components Reordering social icons to put email icon first
rubanzasilva · May 31, 2024 · 2b41508 · 2b41508
1 parent 5cc298c
commit 2b41508
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/src/components/navBar/index.js b/src/components/navBar/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import { FaBars } from 'react-icons/fa';
 import {Nav,NavBarContainer,NavLogo,MobileIcon,NavMenu,NavItem,NavLinks,NavBtn,SocialMedia, SocialMediaWrap, SocialIcons, SocialIconLink} from './navBarElements';
-import {FaTwitter, FaEnvelope, FaLinkedin, FaGithub} from 'react-icons/fa';
+import {FaTwitter, FaEnvelope, FaLinkedin, FaGithub, FaBars, FaKaggle } from 'react-icons/fa';
 //import { Typography } from 'antd';
 
 // const { Title } = Typography;
@@ -14,7 +13,10 @@ const Navbar = ({toggle}) => {
                   <NavLogo to='/'>
                   <SocialMedia>
                 <SocialMediaWrap>
-                    <SocialIcons>
+                <SocialIcons>
+                        <SocialIconLink href="mailto:[email protected]" target="_blank" arial-label="Email Me">
+                            <FaEnvelope/>
+                        </SocialIconLink>
                         <SocialIconLink href="https://www.linkedin.com/in/silver-rubanza/" target="_blank" arial-label="LinkedIn">
                             <FaLinkedin/>
                         </SocialIconLink>
@@ -24,8 +26,8 @@ const Navbar = ({toggle}) => {
                         <SocialIconLink href="https://github.com/rubanzasilva/" target="_blank" aria-label="Github">
                             <FaGithub/>
                         </SocialIconLink>
-                        <SocialIconLink href="mailto:abc@rubanzasilver.com" target="_blank" arial-label="Email">
-                            <FaEnvelope/>
+                        <SocialIconLink href="https://www.kaggle.com/rubanzasilva" target="_blank" arial-label="Kaggle">
+                            <FaKaggle/>
                         </SocialIconLink>
                     </SocialIcons>
                 </SocialMediaWrap>

diff --git a/src/components/navBar/navBarElements.js b/src/components/navBar/navBarElements.js
@@ -194,7 +194,7 @@ export const SocialIcons = styled.div`
  display:flex;
  justify-content:space-between;
  align-items:center;
- width:240px;
+ width:320px;
 `
 export const SocialIconLink = styled.a`
  ${'' /* color:#F7F2EF; */}

diff --git a/src/components/sideBar/index.js b/src/components/sideBar/index.js
@@ -4,7 +4,7 @@ import {SideBarContainer, Icon ,CloseIcon,SideBarWrapper,SideBarMenu,SideBtnWrap
 import {Typography } from "antd";
 //import "antd/dist/antd.css";
 // import { RightOutlined } from '@ant-design/icons';
-import {FaTwitter, FaEnvelope, FaLinkedin, FaGithub} from 'react-icons/fa';
+import {FaTwitter, FaEnvelope, FaLinkedin, FaGithub, FaKaggle} from 'react-icons/fa';
 
 const { Title } = Typography;
 
@@ -46,6 +46,9 @@ const SideBar = ({title1,title5,isOpen,toggle}) => {
                     <SocialMedia>
                 <SocialMediaWrap>
                     <SocialIcons>
+                        <SocialIconLink href="mailto:[email protected]" target="_blank" arial-label="Email">
+                            <FaEnvelope/>
+                        </SocialIconLink>
                         <SocialIconLink href="https://www.linkedin.com/in/silver-rubanza/" target="_blank" arial-label="LinkedIn">
                             <FaLinkedin/>
                         </SocialIconLink>
@@ -55,8 +58,8 @@ const SideBar = ({title1,title5,isOpen,toggle}) => {
                         <SocialIconLink href="https://github.com/rubanzasilva/" target="_blank" aria-label="Github">
                             <FaGithub/>
                         </SocialIconLink>
-                        <SocialIconLink href="mailto:rubanza@rubanzasilver.com" target="_blank" arial-label="Email">
-                            <FaEnvelope/>
+                        <SocialIconLink href="https://www.kaggle.com/rubanzasilva" target="_blank" arial-label="Kaggle">
+                            <FaKaggle/>
                         </SocialIconLink>
                     </SocialIcons>
                 </SocialMediaWrap>