fixed icon round styling

src/components/Button/Button.tsx

@@ -32,7 +32,7 @@ const Button = ({ label, onClick, buttonType, Icon }: IButton) => {
       onClick={onClick}
     >
       {Icon && Icon}
-      {label}
+      {label && <span>{label}</span>}
     </button>
   )
 }

src/components/Button/__tests__/Button.stories.tsx

@@ -41,6 +41,12 @@ Secondary.args = {
   buttonType: ButtonType.Secondary,
 }
 
+export const IconRound = Template.bind({})
+IconRound.args = {
+  Icon: <AddLogo />,
+  buttonType: ButtonType.IconRound,
+}
+
 export const PrimaryWithIcon = Template.bind({})
 PrimaryWithIcon.args = {
   label: 'Primary Ic',
@@ -54,9 +60,3 @@ SecondaryWithIcon.args = {
   buttonType: ButtonType.Secondary,
   Icon: <AddLogo />,
 }
-
-export const IconRound = Template.bind({})
-IconRound.args = {
-  ButtonType: ButtonType.IconRound,
-  Icon: <AddLogo />,
-}

src/components/Button/button.scss

@@ -15,6 +15,8 @@
   font-size: 1.2vw;
   font-weight: 500;
   line-height: 2.4rem;
+  font-family: 'Netflix Sans', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'Ubuntu',
+    'sans-serif';
 
   @include responsive(phone) {
     top: 24rem;
@@ -22,21 +24,22 @@
 
   &.with-icon {
     display: flex;
-    justify-content: center;
     align-items: center;
-    align-self: center;
 
     & > * {
-      width: 24px;
       height: 24px;
       fill: #fff;
-      margin-right: 1rem;
     }
   }
 
   &.with-label {
     padding-left: 2.4rem;
-    padding-right: 2.4rem;
+    padding-right: 2.8rem;
+
+    & > span {
+      margin-left: 1rem;
+      font-weight: 500;
+    }
   }
 
   &.Primary {
@@ -101,11 +104,20 @@
   }
 
   &.IconRound {
+    border-radius: 50%;
+    display: flex;
+    height: 42px;
+    width: 42px;
+    border: 2px solid rgba(255, 255, 255, 0.7);
+    color: white;
     background-color: rgba(42, 42, 42, 0.6);
     border-color: hsla(0, 0%, 100%, 0.5);
     border-width: 2px;
+
     & > * {
       fill: #fff;
+      height: 100%;
+      width: 100%;
     }
   }
 }

src/components/Footer.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import Button, { ButtonType } from './Button/Button'
+import AddLogo from '../static/images/add.svg'
 
 const footer = () => (
   <footer className='footer'>
@@ -8,8 +10,8 @@ const footer = () => (
         className='footer__copyright--link'
         href='https://github.com/devandres-tech'
       >
-        {' '}
-        Dev Andres
+        <Button Icon={<AddLogo />} buttonType={ButtonType.IconRound} /> Dev
+        Andres
       </a>
     </div>
   </footer>

src/components/Header.tsx

@@ -29,7 +29,7 @@ const Header = ({ name, overview }: IHeader) => {
         url='https://vimeo.com/384025132'
       />
       <h1 className='header__container-heading'>{name}</h1>
-      <Button buttonType={ButtonType.IconRound} Icon={<PlayLogo />} />
+      <Button buttonType={ButtonType.IconRound} Icon={<AddLogo />} />
       <Button
         Icon={<PlayLogo />}
         buttonType={ButtonType.Primary}

src/components/Navbar.tsx

@@ -67,7 +67,6 @@ const Navbar = () => {
             placeholder='Title, genres, people'
           />
         </div>
-        <Button buttonType={ButtonType.IconRound} Icon={<AddLogo />} />
         <div className='navigation__container-link pseudo-link'>KIDS</div>
         <div className='navigation__container-link pseudo-link'>DVD</div>
         <BellLogo className='navigation__container--bellLogo' />

src/static/sass/base/_base.scss

@@ -123,12 +123,10 @@
   border-collapse: collapse;
   border-spacing: 0;
 }
-
+// prettier-ignore
 @font-face {
   font-family: 'Netflix Sans';
-  src: url('../../../fonts/NetflixSans_W_Bd.woff2') format('woff2');
-  // url('~/fonts/NetflixSans_W_Md.woff2') format('woff2'),
-  // url('~/fonts/NetflixSans_W_Bd.woff2') format('woff2');
+  src: url('../../../fonts/NetflixSans_W_Rg.woff2') format('woff2'), url('../../../fonts/NetflixSans_W_Md.woff2') format('woff2'), url('../../../fonts/NetflixSans_W_Bd.woff2') format('woff2');
 }
 
 body {
@@ -141,6 +139,7 @@ body {
 html {
   // this defines what 1rem is --> font root size
   font-size: 62.5%; // 10/16, 1rem = 10px;
+  // font-weight: bold;
 
   @include responsive(tab_port) {
     font-size: 50%;

src/static/sass/layout/_navigation.scss

@@ -109,13 +109,18 @@
     }
 
     &-link {
-      font-weight: 500;
       font-size: 1.4rem;
       color: rgb(221, 221, 221);
       text-decoration: none;
       margin-right: 2rem;
       transition: all 0.2s;
 
+      @media screen and (min-width: 1200px) {
+        .pinning-header .main-header {
+          font-size: 14px;
+        }
+      }
+
       &:last-child {
         padding-right: 2.6rem;
       }

webpack.config.js

@@ -21,6 +21,7 @@ module.exports = () => {
       filename: '[name].[contenthash].js',
       path: path.resolve(__dirname, 'dist'),
       assetModuleFilename: 'assets/[name][ext]',
+      clean: true,
     },
     resolve: {
       extensions: ['.js', '.ts', '.tsx'],
@@ -104,7 +105,6 @@ module.exports = () => {
         },
         {
           test: /\.(sass|less|css|scss)$/,
-          // include: path.resolve(__dirname),
           use: [
             // fallback to style-loader in development
             process.env.NODE_ENV !== 'production'
@@ -130,7 +130,6 @@ module.exports = () => {
         },
         {
           test: /\.(woff|woff2|eot|ttf|otf)$/,
-          // include: path.resolve(__dirname),
           type: 'asset/resource',
           generator: {
             filename: './fonts/[name][ext]',