From b952bcf1ca0325d80a398f0b756ea625323e8647 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Mon, 5 Dec 2022 15:45:20 -0500 Subject: [PATCH] fixed font loading issue and updated .gitignore file --- .gitignore | 10 ++++ README.md | 1 + src/components/Button/Button.tsx | 1 + .../Button/__tests__/Button.stories.tsx | 6 +++ src/components/Button/button.scss | 32 +++++++++++++ src/components/Header.tsx | 2 +- src/components/Navbar.tsx | 5 +- src/fonts/NetflixSans_W_Bd.woff2 | Bin 0 -> 55228 bytes src/fonts/NetflixSans_W_Md.woff2 | Bin 0 -> 53940 bytes src/fonts/NetflixSans_W_Rg.woff2 | Bin 0 -> 53304 bytes src/static/images/add-round.svg | 1 + src/static/sass/base/_base.scss | 10 +++- src/static/sass/layout/_header.scss | 5 ++ webpack.config.js | 43 +++++++++++------- 14 files changed, 97 insertions(+), 19 deletions(-) create mode 100644 src/fonts/NetflixSans_W_Bd.woff2 create mode 100644 src/fonts/NetflixSans_W_Md.woff2 create mode 100644 src/fonts/NetflixSans_W_Rg.woff2 create mode 100644 src/static/images/add-round.svg diff --git a/.gitignore b/.gitignore index 90a51d0..38046fd 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,13 @@ npm-debug.log* .firebase.json .vercel + +# OS generated files # +###################### +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db diff --git a/README.md b/README.md index 771ec52..ce70ab1 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ This project is a simplified front end clone of Netflix. It was created with Rea - [x] Migrate to Typescript - [ ] Implement dynamic code splitting with dynamic imports - [ ] Setup storybook +- [ ] Implement internationalization with react-i18next ### Tools used diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 07de8aa..e8cc016 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -3,6 +3,7 @@ import './button.scss' export enum ButtonType { Primary, Secondary, + IconRound, } interface IButton { diff --git a/src/components/Button/__tests__/Button.stories.tsx b/src/components/Button/__tests__/Button.stories.tsx index 3912dc4..0ac7bde 100644 --- a/src/components/Button/__tests__/Button.stories.tsx +++ b/src/components/Button/__tests__/Button.stories.tsx @@ -54,3 +54,9 @@ SecondaryWithIcon.args = { buttonType: ButtonType.Secondary, Icon: , } + +export const IconRound = Template.bind({}) +IconRound.args = { + ButtonType: ButtonType.IconRound, + Icon: , +} diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss index a2c8190..9078878 100644 --- a/src/components/Button/button.scss +++ b/src/components/Button/button.scss @@ -75,5 +75,37 @@ &.Secondary { background-color: rgba(109, 109, 110, 0.7); color: #fff; + + &:not(:disabled):hover { + background-color: rgba(109, 109, 110, 0.4); + } + + &:not(:disabled):active { + background-color: rgba(109, 109, 110, 0.4); + color: rgba(255, 255, 255, 0.7); + } + + &:not(:disabled):focus::before { + box-sizing: content-box; + content: ''; + display: block; + height: 100%; + width: 100%; + border: 2px solid white; + border-radius: 8px; + padding: 2px; + position: absolute; + left: -4px; + top: -4px; + } + } + + &.IconRound { + background-color: rgba(42, 42, 42, 0.6); + border-color: hsla(0, 0%, 100%, 0.5); + border-width: 2px; + & > * { + fill: #fff; + } } } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f344827..9d56686 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -29,13 +29,13 @@ const Header = ({ name, overview }: IHeader) => { url='https://vimeo.com/384025132' />

{name}

+