psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed button styling

Browse Source
This commit is contained in:
andres alcocer
2022-12-16 14:41:58 -05:00
parent 5861f157cf
commit 2750c82baf
8 changed files with 31 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Button/button.scss
View File

@@ -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',

11
src/components/Header.tsx
View File

@@ -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)}

7
src/components/Navbar.tsx
View File

@@ -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}

1
src/static/images/more-info.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 602 B

39
src/static/images/play-button.svg
View File

@@ -1,38 +1 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- 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>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 824 B

After

Width:  |  Height:  |  Size: 361 B

12
src/static/images/search-icon.svg
View File

@@ -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">
<!-- 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>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 566 B

21
src/static/sass/layout/_header.scss
View File

@@ -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;
position: absolute;
}
left: 17rem;
& > button.IconRound {
left: 18.5rem;
position: absolute;
@include responsive(tab_port) {
left: 18.5rem;
}
}
@include responsive(phone) {

8
src/static/sass/layout/_navigation.scss
View File

@@ -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;
height: 1.8rem;
position: relative;
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%;
}
}