fixed font loading issue and updated .gitignore file

.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

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
 

src/components/Button/Button.tsx

@@ -3,6 +3,7 @@ import './button.scss'
 export enum ButtonType {
   Primary,
   Secondary,
+  IconRound,
 }
 
 interface IButton {

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

@@ -54,3 +54,9 @@ SecondaryWithIcon.args = {
   buttonType: ButtonType.Secondary,
   Icon: <AddLogo />,
 }
+
+export const IconRound = Template.bind({})
+IconRound.args = {
+  ButtonType: ButtonType.IconRound,
+  Icon: <AddLogo />,
+}

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;
+    }
   }
 }

src/components/Header.tsx

@@ -29,13 +29,13 @@ const Header = ({ name, overview }: IHeader) => {
         url='https://vimeo.com/384025132'
       />
       <h1 className='header__container-heading'>{name}</h1>
+      <Button buttonType={ButtonType.IconRound} Icon={<PlayLogo />} />
       <Button
         Icon={<PlayLogo />}
         buttonType={ButtonType.Primary}
         onClick={() => console.log('not a movie!')}
         label={'Play'}
       />
-      <Button label={'My List'} buttonType={ButtonType.Secondary} />
       {isMuted ? (
         <MuteIcon
           onClick={() => setIsMuted(false)}

src/components/Navbar.tsx

@@ -5,9 +5,12 @@ import { useNavigate } from 'react-router-dom'
 import { useScroll } from '../hooks/useScroll'
 import SearchLogo 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()
@@ -64,7 +67,7 @@ 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/images/add-round.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="M11 2V11H2V13H11V22H13V13H22V11H13V2H11Z" fill="currentColor"></path></svg>

src/static/sass/base/_base.scss

@@ -124,8 +124,16 @@
   border-spacing: 0;
 }
 
+@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');
+}
+
 body {
-  font-family: 'Hind', sans-serif;
+  font-family: 'Netflix Sans', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'Ubuntu',
+    'sans-serif';
   box-sizing: border-box;
   background-color: $color-background;
 }

src/static/sass/layout/_header.scss

@@ -13,6 +13,11 @@
     position: absolute;
   }
 
+  & > button.IconRound {
+    left: 18.5rem;
+    position: absolute;
+  }
+
   @include responsive(phone) {
     padding-top: 0;
     height: 32rem;

webpack.config.js

@@ -2,14 +2,13 @@ const HtmlWebPackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const dotenv = require('dotenv')
 const webpack = require('webpack')
+const path = require('path')
 
 const prod =
   (process.env.NODE_ENV ? process.env.NODE_ENV : '').trim() === 'production'
-const path = require('path')
 
 module.exports = () => {
   dotenv.config({
@@ -21,10 +20,10 @@ module.exports = () => {
     output: {
       filename: '[name].[contenthash].js',
       path: path.resolve(__dirname, 'dist'),
-      clean: true,
+      assetModuleFilename: 'assets/[name][ext]',
     },
     resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
+      extensions: ['.js', '.ts', '.tsx'],
     },
     optimization: {
       runtimeChunk: 'single',
@@ -67,7 +66,15 @@ module.exports = () => {
         patterns: [
           {
             from: 'src/static/images',
-            to: 'static/images',
+            to: 'resources/',
+          },
+        ],
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: 'src/fonts',
+            to: 'fonts/',
           },
         ],
       }),
@@ -96,19 +103,15 @@ module.exports = () => {
           use: ['@svgr/webpack'],
         },
         {
-          test: /\.css$/i,
-          use: [MiniCssExtractPlugin.loader, 'css-loader'],
-        },
-        {
-          test: /\.scss$/,
+          test: /\.(sass|less|css|scss)$/,
+          // include: path.resolve(__dirname),
           use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-              options: {
-                publicPath: '../',
-              },
-            },
+            // fallback to style-loader in development
+            process.env.NODE_ENV !== 'production'
+              ? 'style-loader'
+              : MiniCssExtractPlugin.loader,
             'css-loader',
+            'resolve-url-loader',
             'sass-loader',
           ],
         },
@@ -125,6 +128,14 @@ module.exports = () => {
             },
           ],
         },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/,
+          // include: path.resolve(__dirname),
+          type: 'asset/resource',
+          generator: {
+            filename: './fonts/[name][ext]',
+          },
+        },
       ],
     },
   }