feat: add disc buttons and refactor top menu style using grid

src/component/_dumb/disc/disc.component.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { StyledDisc } from './disc.style'
+
+const Disc = ({ title, image, color, onClick }) => {
+  return (
+    <StyledDisc
+      title={title}
+      color={color}
+      image={image}
+      onClick={onClick}
+    />
+  )
+}
+
+export default Disc

src/component/_dumb/disc/disc.style.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+
+export const StyledDisc = styled.button`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: ${({ theme, color }) => theme.colorList[color || 'primary']};
+  margin-left: ${({ marginLeft }) => marginLeft};
+  position: relative;
+  cursor: pointer;
+  border: 0;
+
+  &::after {
+    content: '';
+    border-radius: 50%;
+    overflow: hidden;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+
+    background-image: url('${({ image }) => image}');
+    background-size: cover;
+    background-position: center center;
+  }
+`

src/component/_dumb/disc/index.js

@@ -0,0 +1 @@
+export { default } from './disc.component'

src/component/_dumb/logo/logo.styled.js

@@ -1,9 +1,10 @@
 import styled from 'styled-components'
+import { logoBase64 } from './logo.data'
 
 export const StyledLogo = styled.div`
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.5rem;
   background-repeat: no-repeat;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2Q1MjAyNzt9LmNscy0ye2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmNvZGV0YXAgbG9nbzwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgcng9IjUwLjA2Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTYyLjA4LDEzMS44NiwxNTksMTI4Ljc1YTE1LjY1LDE1LjY1LDAsMCwwLTIyLjEzLDBsLTYyLDYyYTE1LjY1LDE1LjY1LDAsMCwwLDAsMjIuMTNsNjIsNjJhMTUuNjUsMTUuNjUsMCwwLDAsMjIuMTMsMGwzLjExLTMuMTFhMTUuNjUsMTUuNjUsMCwwLDAsMC0yMi4xM2wtMzYuNzYtMzYuNzZhMTUuNjUsMTUuNjUsMCwwLDEsMC0yMi4xM0wxNjIuMDgsMTU0QTE1LjY1LDE1LjY1LDAsMCwwLDE2Mi4wOCwxMzEuODZaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjM3LjkyLDI2OC4xNGwzLjExLDMuMTFhMTUuNjUsMTUuNjUsMCwwLDAsMjIuMTMsMGw2Mi02MmExNS42NSwxNS42NSwwLDAsMCwwLTIyLjEzbC02Mi02MmExNS42NSwxNS42NSwwLDAsMC0yMi4xMywwbC0zLjExLDMuMTFhMTUuNjUsMTUuNjUsMCwwLDAsMCwyMi4xM2wzNi43NiwzNi43NmExNS42NSwxNS42NSwwLDAsMSwwLDIyLjEzTDIzNy45MiwyNDZBMTUuNjUsMTUuNjUsMCwwLDAsMjM3LjkyLDI2OC4xNFoiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjE0OC42NCIgeT0iMTgyLjAyIiB3aWR0aD0iMTAyLjc0IiBoZWlnaHQ9IjM1Ljk2IiByeD0iMTEuMjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04Mi44NCAyMDAuMDEpIHJvdGF0ZSgtNDUpIi8+PC9zdmc+);
+  background-image: url(${logoBase64});
 `

src/component/top-menu/top-menu.component.jsx

@@ -3,10 +3,13 @@ import { StyledTopMenu, StyledLink, StyledButton, StyledLogoWrapper } from './to
 import { WebInfoState } from '../web-info/web-info.context'
 import { auth, GitHubProvider, db } from '../data/firebase'
 import Avatar from '../avatar'
-import Logo from '../_dumb/logo/logo.component'
+import Logo from '../_dumb/logo'
 import { navigate } from '@reach/router'
-import Button from '../_dumb/button/button.component'
-import ButtonGroup from '../_dumb/button-group/button-group.component'
+import Button from '../_dumb/button'
+import ButtonGroup from '../_dumb/button-group'
+import Disc from '../_dumb/disc'
+import { logoBase64 } from '../_dumb/logo/logo.data'
+import HeaderTitle from '../_dumb/header-title/header-title.component'
 
 const TopMenu = () => {
   const { user, updateUser } = WebInfoState()
@@ -94,50 +97,52 @@ const TopMenu = () => {
   };
 
   const getLogInOutLabel = () => (user ? 'Logout' : 'Login');
+  const goHome = () => {
+    navigate('/')
+    console.log('go home');
+
+  }
 
   return (
     <StyledTopMenu>
-      <StyledLink to="/">
-        <StyledLogoWrapper title="The Web Developer Factory - Super Boost Your Career from Zero to Hired">
-          <Logo />
-          <span>CodeTap Academy</span>
-        </StyledLogoWrapper>
-      </StyledLink>
+      <Disc image={logoBase64} title="CodeTap" color="danger" onClick={goHome} />
+      <HeaderTitle
+        tag="h1"
+        title="CodeTap Academy - the Web Developer Factory"
+        text="CodeTap Academy - the Web Developer Factory"
+        link="/"
+      />
       {user && user.isAdmin && (
         <ButtonGroup>
           <Button
             onClick={() => navigate('/dashboard')}
             label="Dashboard"
-            marginLeft="1rem"
             color="ok"
           />
           <Button
             onClick={() => navigate('/manage/user')}
             label="Manage user"
-            marginLeft="1rem"
             color="ok"
           />
         </ButtonGroup>
       )}
       <Button
         onClick={() => window.open('https://discord.gg/xcmtRYV')}
         label="Chat"
-        marginLeft="1rem"
         color="warning"
       />
       <Button
         onClick={() => navigate('/subscribe')}
         label="Subscribe"
-        marginLeft="1rem"
         color="danger"
       />
       <Button
         onClick={handleLogInAndOut}
         label={getLogInOutLabel()}
-        marginLeft="1rem"
         color="primary"
       />
-      <Avatar showUser={false} user={user} />
+
+      {user && <Disc image={user.photoURL} title={`${user.displayName} (${user.plan_id})`} />}
     </StyledTopMenu>
   );
 };

src/component/top-menu/top-menu.style.js

@@ -4,10 +4,6 @@ import { Link } from '@reach/router'
 export const StyledLogoWrapper = styled.span`
   display: flex;
   align-items: center;
-/* 
-  &:hover {
-    color: black;
-  } */
 `
 
 export const StyledButton = styled.button`
@@ -46,8 +42,11 @@ export const StyledTopMenu = styled.div`
   border-bottom: 2px solid #3D465E;
   background-color: ${({ theme }) => theme.menu.background};
   padding: 0 ${({ theme }) => theme.layout.bigPadding};
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: auto 1fr auto;
+  grid-gap: 0.5rem;
+  grid-auto-flow: column;
   align-items: center;
   position: fixed;
   top: 0;