bug fixed and header button added

Author: nirmalkc

components/utils/Header.js

@@ -20,7 +20,7 @@ import FormControl from 'react-bootstrap/FormControl';
 import DropdownButton from 'react-bootstrap/DropdownButton';
 import Dropdown from 'react-bootstrap/Dropdown'
 
-import { FiSearch, FiPlus } from "react-icons/fi";
+import { FiSearch, FiPlus, FiTwitter } from "react-icons/fi";
 
 // Styled Component
 import styled from "styled-components";
@@ -209,10 +209,14 @@ const Header = ({
       {(user.email || user.displayName) ? (
         <>
           <LoginBar>   
+            <Button variant="outline-secondary" size="sm" className="mr-1" onClick={() => setShowCreateShape(true)}>
+              <FiTwitter />
+              Tweet us
+            </Button> 
             <Button variant="primary" size="sm" className="mr-3" onClick={() => setShowCreateShape(true)}>
               <FiPlus />
               Add Shape
-            </Button>     
+            </Button>
             <UserThumb>
               <img
                 src={
@@ -228,6 +232,7 @@ const Header = ({
               <FiPower color='var(--color-neutral-10' size="18px"/>
               <div className="sr-only">Sign Out</div>
             </LogoutButton>
+    
           </LoginBar>
         </>
       ) : (

components/utils/ShapeList.js

@@ -162,12 +162,12 @@ const ShapeCardsContainer = styled.div`
 
 const ShapeCardBody = styled.div`
   position: relative;
-  padding: 1rem 1.6rem;
+  padding: 1rem 1.4rem;
 `;
 
 const ShapeCardHeader = styled.div`
   margin: 0;
-  padding: 0 1.8rem 1.6rem 1.8rem;
+  padding: 0 1.4rem 1.2rem 1.4rem;
 `;
 
 const ShapeCardSwitch = styled.div`
@@ -389,24 +389,24 @@ const ShapeList = (
                     {
                       shape.liked ? 
                         (
-                          <Button title="Remove Like" variant="danger" className="btn-icon">
+                          <Button title="Remove Like" variant="danger" className="btn-icon btn-icon--rounded">
                             <LikeFilledIcon size={24} />
                           </Button>
                         ) 
                         :
                         (
-                          <Button title="Add Like" variant="outline-light" className="btn-icon">
+                          <Button title="Add Like" variant="outline-light" className="btn-icon btn-icon--rounded">
                             <LikeIcon size={24} />
                           </Button>
                         )
                     }
 
                   </span>{" "}
-                  <Button title="Export Shape" variant="outline-light" onClick={() => performExport(shape)} className="btn-icon">
+                  <Button title="Export Shape" variant="outline-light" onClick={() => performExport(shape)} className="btn-icon btn-icon--rounded">
                     <ExportIcon
                       size={24} />
                   </Button>
-                  <Button title="Copy Source" variant="outline-light" onClick={() => performCopySource(shape)} className="btn-icon">
+                  <Button title="Copy Source" variant="outline-light" onClick={() => performCopySource(shape)} className="btn-icon btn-icon--rounded">
                     <CopyIcon
                       size={24} />
                   </Button>

styles/global.css

@@ -312,6 +312,14 @@ code {
   margin-right: 0;
 }
 
+.btn-icon--rounded {
+  border-radius: 50%;
+  padding: 0.6rem;
+  width: 3.6rem;
+  height: 3.6rem;
+  border-width: 0.3rem;
+}
+
 /* Dropdown Menu */
 .dropdown-menu {
   border-color: transparent;
@@ -332,6 +340,11 @@ code {
   color: var(--color-brand);
 }
 
+.dropdown-menu .dropdown-item:active {
+  background-color: var(--color-brand);
+  color: var(--color-neutral-10);
+}
+
 .dropdown-toggle::after {
   margin-left: .8em;
 }