5 page

package.json

@@ -9,10 +9,12 @@
     "axios": "^0.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.7.1",
     "react-loading": "^2.0.3",
     "react-modal": "^3.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-to-print": "^2.14.11",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/App.css

@@ -1,7 +1,6 @@
 .App {
   text-align: center;
 }
-
 .App-logo {
   height: 40vmin;
   pointer-events: none;
@@ -14,14 +13,14 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-image: linear-gradient(rgb(148, 148, 148), #a1e1ff, rgb(47, 46, 46));
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: rgb(0, 0, 0);
 }
 
 .App-link {
@@ -36,3 +35,81 @@
     transform: rotate(360deg);
   }
 }
+
+.list-container {
+  display: grid;
+  width: 100vw;
+  grid-template-columns: auto auto auto;
+  align-items: center;
+  justify-items: center;
+}
+
+.search-box {
+  width: 90vw;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.search-input {
+  width: 70%;
+  padding: 8px;
+}
+
+.couldnt-find {
+  font-size: medium;
+  color: rgb(58, 52, 0);
+  margin-bottom: 30px;
+}
+
+@media only screen and (min-width: 770px) {
+  .list-container {
+    max-width: 1280px;
+  }
+
+  .search-box {
+    max-width: 1080px;
+    margin-bottom: 40px;
+    background-color:#1d1d10;
+    border: 2px solid white;
+    color: rgb(0, 61, 18);
+    font-weight: bold;
+    padding: 0.5rem 1.5rem;
+    border-radius: 50px;
+  }
+
+  .search-input {
+    width: 40%;
+    padding: 8px;
+  }
+}
+
+.react-icons {
+  color: white
+}
+.button {
+  font: inherit;
+  background-color: #a38c8c;
+  border: 1px solid white;
+  color: white;
+  font-weight: bold;
+  padding: 0.5rem 1.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.h1-tittle {
+  background-color: #89f1f8;
+  border: 1px solid white;
+  color: white;
+  font-weight: bold;
+  padding: 0.5rem 1.5rem;
+  border-radius: 6px;
+}
+
+.chat {
+  position: fixed;
+
+  bottom: 0;
+  right: 0%;
+}

src/App.js

@@ -1,17 +1,37 @@
 import "./App.css";
-import Home from "./Home";
-import { Route, NavLink, HashRouter } from "react-router-dom";
-import PokeDex from "./PokeDex";
+import Home from "./components/pages/Home";
+import PokeDex from "./components/pages/PokeDex";
+import AuthForm from "./components/auth/AuhtForm";
+import Layout from "./components/layout/Layout";
+import AuthContext from "./store/auth-context";
+import { useContext } from "react";
+import { HashRouter, Route, Redirect } from "react-router-dom";
+import ProfilePage from "./components/pages/ProfilePage";
 
 function App() {
+  const authCtx = useContext(AuthContext);
   return (
-    <HashRouter>
-      <div>
-        <Route exact path="/" component={Home}/>
-        <Route path="/pokedex" component={PokeDex}/>
-      </div>
-
-    </HashRouter>
+    <Layout>
+      <HashRouter>
+        <div>
+          <Route exact path="/" component={Home} />
+          <Route path="/auth" component={AuthForm} />
+          <Route path="/pokedex">
+            {authCtx.isLoggedIn && <PokeDex />}
+            {!authCtx.isLoggedIn && <Redirect to="/" />}
+          </Route>
+
+          {/*<Route path='/profile'>
+          {authCtx.isLoggedIn && <ProfilePage />}
+          {!authCtx.isLoggedIn && <Redirect to='/' />}
+          </Route>*/}
+
+          <Route path="*">
+            <Redirect to="/" />
+          </Route>
+        </div>
+      </HashRouter>
+    </Layout>
   );
 }
 

src/components/DetailCard.css

@@ -0,0 +1,84 @@
+.card-container {
+    width: 80vw;
+    height: auto;
+}
+
+.pokemon-name {
+    font-size: xx-large;
+    font-weight: bold;
+    line-height: 0%;
+    text-transform: capitalize;
+}
+
+.top-content {
+    display: grid;
+}
+
+.pokemon-img {
+    width: 100%;
+    max-height: 200px;
+    object-fit: cover;
+}
+
+table {
+    width: 100%;
+    text-align: left;
+    padding: 5px;
+    border: 1px aliceblue solid;
+}
+
+td, th {
+    text-transform: capitalize;
+}
+
+.table-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.barchart-wrapper {
+    width: 100%;
+    padding-top: 20px;
+    margin: 0 auto;
+}
+
+.bar-box {
+    background-color: #302e2e;
+    width: 150px;
+    height: 6px;
+}
+
+.progress-bar {
+    background-color: yellow;
+    height: 6px;
+}
+
+button {
+    padding: 5px;
+    background-color: yellow;
+    color: black;
+    margin-top: 20px;
+}
+
+@media only screen and (min-width: 770px) {
+    .card-container {
+        width: 600px;
+    }
+    .top-content {
+        grid-template-columns: 50% 50%;
+    }
+    .pokemon-img {
+        width: 80%;
+        height: auto;
+        max-height: none;
+        object-fit: cover;
+    }
+
+    .barchart-wrapper {
+        padding-top: 0;
+    }
+
+    .bar-box {
+        width: 200px;
+    }
+}