creating sign in and sign up page, and related components

src/App.js

@@ -1,6 +1,7 @@
 import { Routes, Route, Link } from "react-router-dom";
 import HomePage from "./pages/homepage/homepage";
 import ShopPage from "./pages/shoppage/shopPage";
+import SignInSignUp from "./pages/sign-in-sign-up-page/sign-in-sign-up";
 import Header from "./components/header/header";
 
 import "./App.css";
@@ -12,6 +13,7 @@ function App() {
       <Routes>
         <Route path='/' element={<HomePage />} />
         <Route path='/shop' element={<ShopPage />} />
+        <Route path='/signin' element={<SignInSignUp />} />
         <Route
           path='*'
           element={

src/components/custom-button/custom-button.jsx

@@ -0,0 +1,9 @@
+import "./custom-button.scss";
+
+export default function CustomButton({ children, ...otherProps }) {
+  return (
+    <button className='custom-button' {...otherProps}>
+      {children}
+    </button>
+  );
+}

src/components/custom-button/custom-button.scss

@@ -0,0 +1,22 @@
+.custom-button {
+  min-width: 165px;
+  width: auto;
+  height: 50px;
+  letter-spacing: 0.5px;
+  line-height: 50px;
+  padding: 0 35px 0 35px;
+  font-size: 15px;
+  background-color: black;
+  color: white;
+  text-transform: uppercase;
+  font-family: "Open Sans Condensed";
+  font-weight: bolder;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: white;
+    color: black;
+    border: 1px solid black;
+  }
+}

src/components/form-input/form-input.jsx

@@ -0,0 +1,19 @@
+import "./form-input.scss";
+
+export default function FormInput({ handleChange, label, ...otherProps }) {
+  return (
+    <div className='group'>
+      <input className='form-input' onChange={handleChange} {...otherProps} />
+      {label ? (
+        <label
+          className={`${
+            otherProps.value.length ? "shrink" : ""
+          } form-input-label`}
+          htmlFor={otherProps.id}
+        >
+          {label}
+        </label>
+      ) : null}
+    </div>
+  );
+}

src/components/form-input/form-input.scss

@@ -0,0 +1,55 @@
+$sub-color: grey;
+$main-color: black;
+
+@mixin shrinkLabel {
+  top: -14px;
+  font-size: 12px;
+  color: $main-color;
+}
+
+.group {
+  position: relative;
+  margin: 45px 0;
+
+  .form-input {
+    background: none;
+    background-color: white;
+    color: $sub-color;
+    font-size: 18px;
+    font-family: inherit;
+    padding: 10px 10px 10px 5px;
+    display: block;
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid $sub-color;
+    margin: 25px 0;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus ~ .form-input-label {
+      @include shrinkLabel();
+    }
+  }
+
+  input[type="password"] {
+    letter-spacing: 0.3em;
+  }
+
+  .form-input-label {
+    color: $sub-color;
+    font-size: 16px;
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    left: 5px;
+    top: 10px;
+    transition: 300ms ease all;
+
+    &.shrink {
+      @include shrinkLabel();
+    }
+  }
+}

src/components/header/header.scss

@@ -32,7 +32,7 @@
       }
 
       &.active {
-        border: 1px solid black;
+        box-shadow: 1px 1px rgba(0, 0, 0, 1), -1px -1px rgba(0, 0, 0, 1);
       }
     }
   }

src/components/sign-in/sign-in.jsx

@@ -0,0 +1,56 @@
+import React, { Component } from "react";
+import CustomButton from "../custom-button/custom-button";
+import FormInput from "../form-input/form-input";
+
+import "./sign-in.scss";
+
+export default class SignIn extends Component {
+  state = {
+    email: "",
+    password: "",
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+
+    this.setState({ email: "", password: "" });
+  };
+
+  handleChange = event => {
+    const { value, name } = event.target;
+
+    this.setState({ [name]: value });
+  };
+
+  render() {
+    return (
+      <div className='sign-in'>
+        <h2>I already have an account</h2>
+        <span>Sign in with your email and password</span>
+
+        <form onSubmit={this.handleSubmit}>
+          <FormInput
+            type='email'
+            name='email'
+            id='email'
+            label='Email'
+            value={this.state.email}
+            handleChange={this.handleChange}
+            required
+          />
+          <FormInput
+            type='password'
+            name='password'
+            id='password'
+            label='Password'
+            value={this.state.password}
+            handleChange={this.handleChange}
+            required
+          />
+
+          <CustomButton type='submit'>Sign In</CustomButton>
+        </form>
+      </div>
+    );
+  }
+}

src/components/sign-in/sign-in.scss

@@ -0,0 +1,5 @@
+.sign-in {
+  width: 30vw;
+  display: flex;
+  flex-direction: column;
+}

src/pages/sign-in-sign-up-page/sign-in-sign-up.jsx

@@ -0,0 +1,9 @@
+import SignIn from "../../components/sign-in/sign-in";
+
+export default function SignInSignUp() {
+  return (
+    <div className='sign-in-sign-up'>
+      <SignIn />
+    </div>
+  );
+}