fixed button styling

src/components/Button/button.scss

@@ -12,7 +12,7 @@
   will-change: background-color, color;
   word-break: break-word;
   white-space: nowrap;
-  font-size: 1.2vw;
+  font-size: 17px;
   font-weight: 500;
   line-height: 2.4rem;
   font-family: 'Netflix Sans', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'Ubuntu',

src/components/Header.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import PlayLogo from '../static/images/play-button.svg'
 import { ButtonType } from './Button/Button'
 import Button from './Button/Button'
-import AddLogo from '../static/images/add.svg'
+import MoreInfo from '../static/images/more-info.svg'
 import MuteIcon from '../static/images/mute.svg'
 import UnmuteIcon from '../static/images/unmute.svg'
 import ReactPlayer from 'react-player'
@@ -29,13 +29,18 @@ const Header = ({ name, overview }: IHeader) => {
         url='https://vimeo.com/384025132'
       />
       <h1 className='header__container-heading'>{name}</h1>
-      <Button buttonType={ButtonType.IconRound} Icon={<AddLogo />} />
       <Button
         Icon={<PlayLogo />}
         buttonType={ButtonType.Primary}
-        onClick={() => console.log('not a movie!')}
+        onClick={() => alert('not a movie!')}
         label={'Play'}
       />
+      <Button
+        Icon={<MoreInfo />}
+        buttonType={ButtonType.Secondary}
+        label={'More Info'}
+      />
+
       {isMuted ? (
         <MuteIcon
           onClick={() => setIsMuted(false)}

src/components/Navbar.tsx

@@ -3,14 +3,12 @@ import { NavLink } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
 
 import { useScroll } from '../hooks/useScroll'
-import SearchLogo from '../static/images/search-icon.svg'
+import Search from '../static/images/search-icon.svg'
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png'
 import AddLogo from '../static/images/add.svg'
 import BellLogo from '../static/images/bell-logo.svg'
 import DropdownArrow from '../static/images/drop-down-arrow.svg'
 import DropdownContent from './DropdownContent'
-import Button from './Button/Button'
-import { ButtonType } from './Button/Button'
 
 const Navbar = () => {
   const navigate = useNavigate()
@@ -55,9 +53,8 @@ const Navbar = () => {
           Recently Added
         </div>
         <div className='navigation__container-link pseudo-link'>My List</div>
-
         <div className='navigation__container--left'>
-          <SearchLogo className='logo' />
+          <Search className='logo' />
           <input
             ref={searchInput}
             value={userInput}

src/static/images/more-info.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM13 10V18H11V10H13ZM12 8.5C12.8284 8.5 13.5 7.82843 13.5 7C13.5 6.17157 12.8284 5.5 12 5.5C11.1716 5.5 10.5 6.17157 10.5 7C10.5 7.82843 11.1716 8.5 12 8.5Z" fill="currentColor"></path></svg>

src/static/images/play-button.svg

@@ -1,38 +1 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard"><path d="M4 2.69127C4 1.93067 4.81547 1.44851 5.48192 1.81506L22.4069 11.1238C23.0977 11.5037 23.0977 12.4963 22.4069 12.8762L5.48192 22.1849C4.81546 22.5515 4 22.0693 4 21.3087V2.69127Z" fill="currentColor"></path></svg>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 41.999 41.999" style="enable-background:new 0 0 41.999 41.999;" xml:space="preserve">
-<path d="M36.068,20.176l-29-20C6.761-0.035,6.363-0.057,6.035,0.114C5.706,0.287,5.5,0.627,5.5,0.999v40
-	c0,0.372,0.206,0.713,0.535,0.886c0.146,0.076,0.306,0.114,0.465,0.114c0.199,0,0.397-0.06,0.568-0.177l29-20
-	c0.271-0.187,0.432-0.494,0.432-0.823S36.338,20.363,36.068,20.176z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

src/static/images/search-icon.svg

@@ -1,12 +1,2 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="251px" height="251px" viewBox="0 0 251 251" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="search-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 11C14 14.3137 11.3137 17 8 17C4.68629 17 2 14.3137 2 11C2 7.68629 4.68629 5 8 5C11.3137 5 14 7.68629 14 11ZM14.3623 15.8506C12.9006 17.7649 10.5945 19 8 19C3.58172 19 0 15.4183 0 11C0 6.58172 3.58172 3 8 3C12.4183 3 16 6.58172 16 11C16 12.1076 15.7749 13.1626 15.368 14.1218L24.0022 19.1352L22.9979 20.8648L14.3623 15.8506Z" fill="currentColor"></path></svg>
-    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
-    <title>Slice 1</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="musica-searcher" fill="#FFFFFF" fill-rule="nonzero">
-            <path d="M244.186,214.604 L189.807,160.226 C189.518,159.937 189.179,159.735 188.877,159.466 C199.577,143.235 205.822,123.806 205.822,102.912 C205.822,46.075 159.747,0 102.911,0 C46.075,0 0,46.075 0,102.911 C0,159.746 46.074,205.822 102.91,205.822 C123.805,205.822 143.233,199.577 159.464,188.877 C159.733,189.178 159.934,189.517 160.223,189.806 L214.603,244.186 C222.772,252.354 236.016,252.354 244.186,244.186 C252.354,236.017 252.354,222.773 244.186,214.604 Z M102.911,170.146 C65.777,170.146 35.675,140.044 35.675,102.911 C35.675,65.777 65.778,35.675 102.911,35.675 C140.043,35.675 170.146,65.778 170.146,102.911 C170.146,140.044 140.043,170.146 102.911,170.146 Z" id="Shape"></path>
-        </g>
-    </g>
-</svg>

src/static/sass/layout/_header.scss

@@ -3,19 +3,26 @@
   position: relative;
   padding-top: 56.25%;
 
+  & > button.Primary,
+  button.Secondary {
+    top: 40rem;
+    position: absolute;
+
+    @include responsive(phone) {
+      top: 24rem;
+    }
+  }
+
   & > button.Primary {
     left: 4rem;
-    position: absolute;
   }
 
   & > button.Secondary {
-    left: 18.5rem;
+    left: 17rem;
-    position: absolute;
-  }
 
-  & > button.IconRound {
+    @include responsive(tab_port) {
-    left: 18.5rem;
+      left: 18.5rem;
-    position: absolute;
+    }
   }
 
   @include responsive(phone) {

src/static/sass/layout/_navigation.scss

@@ -35,7 +35,6 @@
     &--bellLogo {
       cursor: pointer;
       height: 2.2rem;
-      fill: red;
       width: 2.2rem;
       padding-right: 2.5rem;
 
@@ -167,8 +166,9 @@
 }
 
 .logo {
-  width: 1.8rem;
+  position: relative;
-  height: 1.8rem;
+  left: 10px;
+  bottom: 4px;
   transform: translateX(2.4rem) translateY(1rem);
   cursor: pointer;
 }
@@ -176,7 +176,6 @@
 .dropdownContent {
   display: flex;
   flex-direction: column;
-  //   align-items: center;
   opacity: 0;
 
   color: #fff;
@@ -201,7 +200,6 @@
 
     &:hover {
       border-bottom: 1px solid #fff;
-      // border-width: 2%;
     }
   }