Update buttons and header menu styles

components/Button/index.scss

@@ -1,35 +1,32 @@
 .Button {
     align-items: center;
+    background: transparent;
     border: none;
     border-radius: 6px;
+    color: $grey-50;
     display: inline-flex;
-    font-size: 1.4rem;
+    font-size: $font-button;
-    font-weight: $medium;
+    font-weight: $normal;
     gap: 6px;
     padding: 8px 12px;
 
     &:hover {
-        color: $grey-00;
+        background: white;
         cursor: pointer;
+        color: $grey-00;
 
-        & .icon {
+        .icon svg {
-            color: #2360C5;
+            fill: $grey-50;
         }
     }
 
-    &.btn-grey {
+    .icon {
-        background: white;
+        margin-top: 2px;
-
+        
-        &:hover {
+        svg {
-            background: $grey-90;
+            fill: $grey-50;
-
+            height: 12px;
-            .text {
+            width: 12px;
-                color: $grey-00;
-            }
-        }
-
-        .text {
-            color: $grey-10;
         }
     }
 
@@ -70,17 +67,8 @@
             color: #bababa;
         }
     }
-
-    .icon {
-        height: 12px;
-        width: 12px;
-
-        svg {
-            fill: #c9c9c9;
-        }
-    }
     
     .text {
         color: inherit;
     }
-}
+}

components/Button/index.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import classNames from 'classnames'
 
+import AddIcon from '~public/icons/Add.svg'
+import MenuIcon from '~public/icons/Menu.svg'
+
 import './index.scss'
 
 interface Props {
@@ -33,15 +36,15 @@ class Button extends React.Component<Props, State> {
         let icon
         if (this.props.type === 'new') {
             icon = <span className='icon'>
-                <img alt="" src="/icons/new.svg" />
+                <AddIcon />
             </span>
         } else if (this.props.type === 'menu') {
             icon = <span className='icon'>
-                <img alt="" src="/icons/menu.svg" />
+                <MenuIcon />
             </span>
         } else if (this.props.type === 'link') {
             icon = <span className='icon'>
-                <img alt="" src="/icons/link.svg" />
+                <img alt="" src="/icons/Link.svg" />
             </span>
         }
 

components/Header/index.scss

@@ -16,12 +16,8 @@
             padding-right: 50px;
             padding-bottom: 16px;
 
-            .Button .icon {
+            .Button {
-                color: #2360C5;
+                background: white;
-            }
-
-            .Button .text {
-                color: #555;
             }
 
             .Menu {

components/HeaderMenu/index.scss

@@ -2,7 +2,7 @@
     background: white;
     border-radius: 6px;
     display: none;
-    min-width: 140px;
+    min-width: 220px;
     position: absolute;
     top: $unit * 5; // This shouldn't be hardcoded. How to calculate it?
     z-index: 1;
@@ -10,21 +10,21 @@
 
 .MenuItem {
     color: $grey-10;
-    font-weight: $medium;
+    font-weight: $normal;
-    padding: 10px;
+    padding: 12px;
 
     &:hover {
-        background: $grey-90;
+        background: $grey-100;
         color: $grey-00;
         cursor: pointer;
+
+        a {
+            color: $grey-00;
+        }
     }
 
     a {
         color: $grey-10;
-
-        &:hover {
-            color: $grey-00;
-        }
     }
 }
 

components/HeaderMenu/index.tsx

@@ -30,7 +30,19 @@ const HeaderMenu = (props: Props) => {
                 <ul className="Menu auth">
                     <div className="MenuGroup">
                         <li className="MenuItem">
-                            <Link href={`/${props.username}` || ''}>My Parties</Link>
+                            <Link href={`/${props.username}` || ''}>{props.username}</Link>
+                        </li>
+                        <li className="MenuItem">
+                            <Link href={`/${props.username}/saved` || ''}>Saved</Link>
+                        </li>
+                    </div>
+                    <div className="MenuGroup">
+                        <li className="MenuItem">
+                            <Link href='/teans'>Teams</Link>
+                        </li>
+
+                        <li className="MenuItem">
+                            <Link href='/guides'>Guides</Link>
                         </li>
                     </div>
                     <div className="MenuGroup">
@@ -38,12 +50,7 @@ const HeaderMenu = (props: Props) => {
                         {aboutOpen ? (
                             <AboutModal close={closeAboutModal} />
                         ) : null}
-                        
+                        <li className="MenuItem">Settings</li>
-                        <li className="MenuItem">
-                            <Link href='/guides'>Guides</Link>
-                        </li>
-                    </div>
-                    <div className="MenuGroup">
                         <li className="MenuItem" onClick={props.logout}>Logout</li>
                     </div>
                 </ul>
@@ -59,8 +66,16 @@ const HeaderMenu = (props: Props) => {
                     {aboutOpen ? (
                         <AboutModal close={closeAboutModal} />
                     ) : null}
-                    {/* <li className="MenuItem" onClick={ () => props.navigate('guides') }>Guides</li> */}
                 </div>
+                <div className="MenuGroup">
+                        <li className="MenuItem">
+                            <Link href='/teans'>Teams</Link>
+                        </li>
+
+                        <li className="MenuItem">
+                            <Link href='/guides'>Guides</Link>
+                        </li>
+                    </div>
                 <div className="MenuGroup">
                     <li className="MenuItem" onClick={openLoginModal}>Log in</li>
                     {loginOpen ? (

styles/variables.scss

@@ -14,6 +14,7 @@ $grey-50: #888;
 $grey-70: #C6C6C6;
 $grey-80: #E9E9E9;
 $grey-90: #F5F5F5;
+$grey-100:#FAFAFA;
 $background-color: $grey-90;
 
 $blue: #61B3FF;