setIsMuted(false)}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 122d923..47504c6 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,8 +3,9 @@ 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'
@@ -52,9 +53,8 @@ const Navbar = () => {
Recently Added
My List
-
-
+
{
placeholder='Title, genres, people'
/>
-
KIDS
DVD
diff --git a/src/fonts/NetflixSans_W_Bd.woff2 b/src/fonts/NetflixSans_W_Bd.woff2
new file mode 100644
index 0000000..8d89318
Binary files /dev/null and b/src/fonts/NetflixSans_W_Bd.woff2 differ
diff --git a/src/fonts/NetflixSans_W_Md.woff2 b/src/fonts/NetflixSans_W_Md.woff2
new file mode 100644
index 0000000..4cf3471
Binary files /dev/null and b/src/fonts/NetflixSans_W_Md.woff2 differ
diff --git a/src/fonts/NetflixSans_W_Rg.woff2 b/src/fonts/NetflixSans_W_Rg.woff2
new file mode 100644
index 0000000..fcc8ca6
Binary files /dev/null and b/src/fonts/NetflixSans_W_Rg.woff2 differ
diff --git a/src/static/images/add-round.svg b/src/static/images/add-round.svg
new file mode 100644
index 0000000..7ae4462
--- /dev/null
+++ b/src/static/images/add-round.svg
@@ -0,0 +1 @@
+
diff --git a/src/static/images/more-info.svg b/src/static/images/more-info.svg
new file mode 100644
index 0000000..43d69cf
--- /dev/null
+++ b/src/static/images/more-info.svg
@@ -0,0 +1 @@
+
diff --git a/src/static/images/play-button.svg b/src/static/images/play-button.svg
index 2fb8194..46c2a1d 100644
--- a/src/static/images/play-button.svg
+++ b/src/static/images/play-button.svg
@@ -1,38 +1 @@
-
-
-
+
diff --git a/src/static/images/search-icon.svg b/src/static/images/search-icon.svg
index dab18ed..cae00c9 100644
--- a/src/static/images/search-icon.svg
+++ b/src/static/images/search-icon.svg
@@ -1,12 +1,2 @@
-
\ No newline at end of file
+
diff --git a/src/static/sass/base/_base.scss b/src/static/sass/base/_base.scss
index fb850ac..b962e01 100644
--- a/src/static/sass/base/_base.scss
+++ b/src/static/sass/base/_base.scss
@@ -123,9 +123,15 @@
border-collapse: collapse;
border-spacing: 0;
}
+// prettier-ignore
+@font-face {
+ font-family: 'Netflix Sans';
+ 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 {
- 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;
}
@@ -133,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%;
diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss
index c0625c5..cc9b0c2 100644
--- a/src/static/sass/layout/_header.scss
+++ b/src/static/sass/layout/_header.scss
@@ -3,6 +3,28 @@
position: relative;
padding-top: 56.25%;
+ & > button.Primary,
+ button.Secondary {
+ top: 40rem;
+ position: absolute;
+
+ @include responsive(phone) {
+ top: 24rem;
+ }
+ }
+
+ & > button.Primary {
+ left: 4rem;
+ }
+
+ & > button.Secondary {
+ left: 17rem;
+
+ @include responsive(tab_port) {
+ left: 18.5rem;
+ }
+ }
+
@include responsive(phone) {
padding-top: 0;
height: 32rem;
@@ -34,64 +56,6 @@
}
}
- &-btnPlay,
- &-btnMyList {
- top: 40rem;
- cursor: pointer;
- font-size: 1.6rem;
- color: #fff;
- outline: none;
- border: none;
- font-weight: 700;
- border-radius: 5px;
- padding-left: 3.5rem;
- padding-right: 3.5rem;
- margin-right: 1rem;
- padding-top: 1rem;
- background-color: rgba(112, 111, 111, 0.5);
- padding-bottom: 1rem;
-
- @include responsive(phone) {
- top: 24rem;
- }
-
- &-add {
- width: 15px;
- height: 15px;
- fill: #fff;
- margin-right: 1rem;
- }
-
- &-play {
- width: 15px;
- height: 15px;
- fill: #fff;
- margin-right: 1rem;
- }
- }
-
- &-btnPlay {
- color: #000;
- background-color: #e6e6e6;
- transition: all 0.2s;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-
- & > * {
- fill: #000;
- }
- left: 4rem;
- position: absolute;
- }
-
- &-btnMyList {
- left: 18.5rem;
- position: absolute;
-
- &:hover {
- background-color: rgb(37, 37, 37);
- }
- }
-
&-btnVolume {
position: absolute;
height: 3rem;
diff --git a/src/static/sass/layout/_navigation.scss b/src/static/sass/layout/_navigation.scss
index 03df42f..94d739f 100644
--- a/src/static/sass/layout/_navigation.scss
+++ b/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;
@@ -109,13 +108,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;
}
@@ -162,8 +166,9 @@
}
.logo {
- width: 1.8rem;
- height: 1.8rem;
+ position: relative;
+ left: 10px;
+ bottom: 4px;
transform: translateX(2.4rem) translateY(1rem);
cursor: pointer;
}
@@ -171,7 +176,6 @@
.dropdownContent {
display: flex;
flex-direction: column;
- // align-items: center;
opacity: 0;
color: #fff;
@@ -196,7 +200,6 @@
&:hover {
border-bottom: 1px solid #fff;
- // border-width: 2%;
}
}
diff --git a/tsconfig.json b/tsconfig.json
index 01cfdc7..a3a8827 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
"noImplicitAny": true,
"module": "es6",
"target": "es5",
- "jsx": "react",
+ "jsx": "react-jsx",
"sourceMap": true,
"allowJs": true,
"moduleResolution": "node",
diff --git a/webpack.config.js b/webpack.config.js
index bd81196..8adced3 100644
--- a/webpack.config.js
+++ b/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,11 @@ module.exports = () => {
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
+ assetModuleFilename: 'assets/[name][ext]',
clean: true,
},
resolve: {
- extensions: ['.tsx', '.ts', '.js'],
+ extensions: ['.js', '.ts', '.tsx'],
},
optimization: {
runtimeChunk: 'single',
@@ -67,7 +67,15 @@ module.exports = () => {
patterns: [
{
from: 'src/static/images',
- to: 'static/images',
+ to: 'resources/',
+ },
+ ],
+ }),
+ new CopyWebpackPlugin({
+ patterns: [
+ {
+ from: 'src/fonts',
+ to: 'fonts/',
},
],
}),
@@ -93,24 +101,17 @@ module.exports = () => {
{
test: /\.svg$/,
exclude: /node_modules/,
- use: {
- loader: 'svg-react-loader',
- },
+ use: ['@svgr/webpack'],
},
{
- test: /\.css$/i,
- use: [MiniCssExtractPlugin.loader, 'css-loader'],
- },
- {
- test: /\.scss$/,
+ test: /\.(sass|less|css|scss)$/,
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',
],
},
@@ -127,6 +128,13 @@ module.exports = () => {
},
],
},
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ type: 'asset/resource',
+ generator: {
+ filename: './fonts/[name][ext]',
+ },
+ },
],
},
}