V client auth

package.json

@@ -14,7 +14,7 @@
     "@babel/plugin-transform-runtime": "7.18.10",
     "@babel/preset-env": "7.18.10",
     "@babel/preset-react": "7.18.6",
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "13.3.0",
     "@types/jest": "28.1.8",
     "babel-loader": "8.2.5",
@@ -38,7 +38,7 @@
     "cors": "2.8.5",
     "css-loader": "6.7.1",
     "express": "4.18.1",
-    "jest-dom": "4.0.0",
+    "graphql": "^16.6.0",
     "moment": "2.29.4",
     "mutationobserver-shim": "0.3.7",
     "react": "18.2.0",

src/App.css

@@ -1,5 +1,9 @@
+@import url(https://fonts.googleapis.com/css?family=Lato);
+
+/* APP */
 .App {
   text-align: center;
+
 }
 
 .App-logo {
@@ -13,21 +17,80 @@
   }
 }
 
+
+
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+  background-color: white;
+  min-height: 10vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+  justify-content: space-between;
+  font-size: 20px;
+  border-bottom: solid;
+}
+.App-link {
   color: white;
+  text-decoration: none;
+  text-transform: uppercase;
+  padding: 20px;
+  background-color: #282c34;
+  margin: 5px;
 }
 
-.App-link {
-  color: #61dafb;
+/* login */
+input{
+  background-color: #282c34;
+  width:100%;
+  height: 5vh;
+  color:white;
 }
 
+@media (max-width: 863px) {
+  .App-header{
+    color:pink;
+    font-size: 15px;
+    /* justify-content: start; */
+  }
+  .App-link{
+    padding: 15px;
+    justify-content: space-around;
+  }
+}
+@media (max-width: 701px) {
+  .App-header{
+    color:green;
+    font-size: 15px;
+    /* flex-direction: column; */
+  }
+  .App-link{
+    padding: 15px;
+    justify-content: space-around;
+  }
+  form{
+    font-size: 15px;
+  }
+  h1{
+    font-size:25px;
+  }
+  h2{
+    font-size:20px;
+  }
+  input{
+    height:3vh
+  }
+}
+  @media (max-width: 643px) {
+    .App-header{
+      color:pink;
+      justify-content:space-around;
+    }
+    .App-link{
+      padding: 10px;
+    }
+}
+
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
@@ -36,3 +99,57 @@
     transform: rotate(360deg);
   }
 }
+
+
+.Link-container {
+  justify-content: flex-end;
+}
+
+
+/* LOGIN */
+form{
+  width:100%;
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+/* .Login-comp{
+  display:flex;
+} */
+
+.Login-container{
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+
+}
+
+label{
+  display:flex;
+  justify-content: center;
+  /* align-items: center; */
+  font-family: Lato;
+  text-transform: uppercase;
+
+}
+
+/* fix width */
+.Submit-button{
+  color: white;
+  text-decoration: none;
+  text-transform: uppercase;
+  padding: 10px;
+  background-color: #282c34;
+  margin: 5px;
+  width: 20%;
+}
+
+
+
+.Friends {
+  text-align: left;
+}
+
+

src/App.js

@@ -1,12 +1,76 @@
 import React from 'react';
 import './App.css';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
+import { 
+  Routes, 
+  Route, 
+  Link, 
+  Navigate} from 'react-router-dom';
+
+import Login from './components/Login';
+import FriendList from './components/FriendsList';
+import AddFriend from './components/AddFriend';
+import Logout from './components/Logout';
+import PrivateRoutes from './components/PrivateRoutes';
+
 
 function App() {
+
   return (
     <div className="App">
-      <h2>Client Auth Project</h2>
-    </div>
+      <header className="App-header">
+          <h2>Friends Database</h2>
+          <div className="Link-container">
+            <Link 
+              className="App-link"
+              to="login">
+              Login.
+            </Link>  
+            <Link 
+              className="App-link"
+              to="/friends"
+            >
+                Friends List.
+            </Link>
+            <Link 
+              className="App-link"
+              to="/friends/add">
+                Add Friends.
+            </Link>
+            <Link 
+              className="App-link"
+              to="logout">
+                Logout.
+            </Link>   
+          </div>      
+        </header>
+
+      <Routes>
+          <Route element ={<PrivateRoutes/>}>
+            <Route
+              element={<AddFriend/>}
+              exact path="/friends/add" 
+            />
+            <Route
+              element={<FriendList/>}
+              exact path="/friends" 
+            />
+          </Route>
+          <Route 
+            element={<Navigate to="/"/>}
+            exact path="/login"
+          />
+          <Route 
+            element={<Logout/>}
+            exact path="/logout" 
+            />
+          {/* displays Login comp */}
+          <Route 
+            element={<Login/>}
+            exact path="/" 
+          />
+      </Routes>
+
+  </div>
   );
 }