add routes, add fonts, add vars, add pages

package.json

@@ -8,13 +8,19 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "clsx": "^1.2.1",
+    "formik": "^2.4.2",
     "modern-normalize": "^2.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^6.13.0",
     "react-scripts": "5.0.1",
     "sass": "^1.63.4",
-    "web-vitals": "^2.1.3"
+    "shortid": "^2.2.16",
+    "web-vitals": "^2.1.3",
+    "yup": "^1.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/assets/styles/_reset.scss

@@ -1,4 +1,5 @@
 @import '~modern-normalize/modern-normalize.css';
+@import './vars';
 
 html {
     box-sizing: border-box;
@@ -33,8 +34,4 @@ img {
 
 a {
     text-decoration: none;
-}
-
-body {
-    background-color: var($dark-color);
 }

src/assets/styles/_vars.scss

@@ -1,10 +1,11 @@
 $accent-color: #BEDBB0;
-$accent-colorful-color: #5255BC;
+$accent-bright-color: #5255BC;
 $black-color: #121212;
 $dark-color: #1F1F1F;
 $white-color: #FFFFFF;
 $off-white-color: #F6F6F7;
 $black-text-color: #161616;
+$white-text-color: #FFFFFF;
 $priority-low-color: #8FA1D0;
 $priority-medium-color: #E09CB5;
 $priority-high-color: #BEDBB0;

src/components/App.jsx

@@ -1,16 +1,22 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { HomePage } from 'pages/HomePage';
+import { LoginPage } from 'pages/LoginPage';
+import { RegisterPage } from 'pages/RegisterPage';
+import { BoardPage } from 'pages/BoardPage';
+
 export const App = () => {
   return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 40,
-        color: '#010101',
-      }}
-    >
-      React homework template
-    </div>
+    <>
+      {/* <SharedLayout /> */}
+      <Routes>
+        <Route path="/" element={<HomePage />}>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+        </Route>
+        <Route path="/board" element={<BoardPage />} />
+
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+    </>
   );
 };

src/components/SharedLayout/SharedLayout.jsx

@@ -0,0 +1,11 @@
+import { Header } from 'components/Header/Header';
+// import { Loader } from "components/Loader/Loader";
+
+export const SharedLayout = () => {
+  return (
+    <>
+      {/* <Loader/> */}
+      <Header />
+    </>
+  );
+};

src/index.scss

@@ -3,13 +3,37 @@
 @import './assets/styles/vars';
 @import './assets/styles/mixins';
 
+@font-face {
+  font-family: "Poppins-Regular";
+  src: local("Poppins-Regular"),
+    url("./assets/fonts/Poppins/Poppins-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Poppins-Medium";
+  src: local("Poppins-Medium"),
+    url("./assets/fonts/Poppins/Poppins-Medium.ttf") format("truetype");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Poppins-SemiBold";
+  src: local("Poppins-SemiBold"),
+    url("./assets/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
+  font-weight: 500;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+
+  font-family: 'Poppins', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  color: $white-text-color;
+
+  background-color: $dark-color;
 }
 
 body.no-scroll {

src/pages/BoardPage.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const BoardPage = () => {
+  return <div>BoardPage</div>;
+};

src/pages/HomePage.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const HomePage = () => {
+  return <div>HomePage</div>;
+};

src/pages/LoginPage.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const LoginPage = () => {
+  return <div>LoginPage</div>;
+};

src/pages/RegisterPage.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const RegisterPage = () => {
+  return <div>RegisterPage</div>;
+};