Branch2

package.json

@@ -6,13 +6,12 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "bootstrap": "^4.5.2",
     "firebase": "^7.20.0",
     "react": "^16.13.1",
-    "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "^4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -9,6 +9,10 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/components/App.js

@@ -1,34 +1,35 @@
 import React from "react"
 import Signup from "./Signup"
-import { Container } from "react-bootstrap"
 import { AuthProvider } from "../contexts/AuthContext"
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
 import Dashboard from "./Dashboard"
 import Login from "./Login"
 import PrivateRoute from "./PrivateRoute"
 import ForgotPassword from "./ForgotPassword"
 import UpdateProfile from "./UpdateProfile"
+import Archives from './routes/Archives'
+import Profile from './routes/Profile'
 
 function App() {
   return (
-    <Container
-      className="d-flex align-items-center justify-content-center"
-      style={{ minHeight: "100vh" }}
-    >
-      <div className="w-100" style={{ maxWidth: "400px" }}>
+    <div>
+      <div>
         <Router>
           <AuthProvider>
             <Switch>
-              <PrivateRoute exact path="/" component={Dashboard} />
+              <PrivateRoute exact path="/dashboard" component={Dashboard} />
               <PrivateRoute path="/update-profile" component={UpdateProfile} />
               <Route path="/signup" component={Signup} />
               <Route path="/login" component={Login} />
               <Route path="/forgot-password" component={ForgotPassword} />
+              <Route path="/archives" component={Archives} />
+              <Route path="/profile" component={Profile} />
+
             </Switch>
           </AuthProvider>
         </Router>
       </div>
-    </Container>
+    </div>
   )
 }
 

src/components/Dashboard.js

@@ -1,8 +1,11 @@
 import React, { useState } from "react"
-import { Card, Button, Alert } from "react-bootstrap"
+// import { Card, Button, Alert } from "react-bootstrap"
 import { useAuth } from "../contexts/AuthContext"
 import { Link, useHistory } from "react-router-dom"
-
+import NavIcons from "./common/NavIcons";
+import Navbar from "./routes/Navbar";
+import DashCard from "./dashboard/Cards.jsx";
+import './css/style.css';
 export default function Dashboard() {
   const [error, setError] = useState("")
   const { currentUser, logout } = useAuth()
@@ -18,10 +21,10 @@ export default function Dashboard() {
       setError("Failed to log out")
     }
   }
-
+  
   return (
     <>
-      <Card>
+      {/* <Card>
         <Card.Body>
           <h2 className="text-center mb-4">Profile</h2>
           {error && <Alert variant="danger">{error}</Alert>}
@@ -35,6 +38,23 @@ export default function Dashboard() {
         <Button variant="link" onClick={handleLogout}>
           Log Out
         </Button>
+      </div> */}
+
+      <div className="row">
+        <div className="col-lg-12 col-md-12 col-sm-12 text-center bg-info">
+          <Navbar />
+        </div>
+      </div>
+      <div className="row bg-new3">
+        <div className="col-lg-1 col-md-1 col-sm-2 text-center bg-new2 dashboard1 ">
+          <NavIcons />
+        </div>
+        <div className="col-lg-11 col-md-11 col-sm-10 text-left my-4">
+          {
+          //<h4 className="mx-5">Welcome {currentUser.email}</h4>
+          }
+          <DashCard />
+        </div>
       </div>
     </>
   )

src/components/ForgotPassword.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react"
-import { Form, Button, Card, Alert } from "react-bootstrap"
+// import { Form, Button, Card, Alert } from "react-bootstrap"
 import { useAuth } from "../contexts/AuthContext"
 import { Link } from "react-router-dom"
 
@@ -28,25 +28,34 @@ export default function ForgotPassword() {
 
   return (
     <>
-      <Card>
-        <Card.Body>
-          <h2 className="text-center mb-4">Password Reset</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
-          {message && <Alert variant="success">{message}</Alert>}
-          <Form onSubmit={handleSubmit}>
-            <Form.Group id="email">
-              <Form.Label>Email</Form.Label>
-              <Form.Control type="email" ref={emailRef} required />
-            </Form.Group>
-            <Button disabled={loading} className="w-100" type="submit">
-              Reset Password
-            </Button>
-          </Form>
-          <div className="w-100 text-center mt-3">
-            <Link to="/login">Login</Link>
-          </div>
-        </Card.Body>
-      </Card>
+    <div className="container mt-3 mb-4">
+        <div className="card container mt-5 col-sm-9 col-md-8 col-lg-6 mx-auto">
+          <div className="card-body">
+            <h2 className="text-center mb-4">Password Reset</h2>
+            {error && <div className="alert" variant="danger">{error}</div>}
+            {message && <div className="alert" variant="success">{message}</div>}
+            <div className="">
+              <form onSubmit={handleSubmit}>
+                <div className="form-group" id="email">
+                  <label className="form-label">Email</label >
+                  <input type="email" className="form-control" placeholder="Email address" ref={emailRef} required />
+                </div>
+                {/* <button className="btn btn-warning" disabled={loading} className="w-100" type="submit">
+                  Reset Password
+                </button> */}
+                <button
+                    className="btn btn-lg btn-primary btn-block text-uppercase"
+                    type="submit"
+                  >Reset Password
+                  </button>
+              </form>
+            </div>  
+            <div className="w-100 text-center mt-3">
+              <Link to="/login">Login</Link>
+            </div>
+          </div >
+        </div>
+      </div>  
       <div className="w-100 text-center mt-2">
         Need an account? <Link to="/signup">Sign Up</Link>
       </div>

src/components/Login.js

@@ -1,58 +1,88 @@
-import React, { useRef, useState } from "react"
-import { Form, Button, Card, Alert } from "react-bootstrap"
-import { useAuth } from "../contexts/AuthContext"
-import { Link, useHistory } from "react-router-dom"
+import React, { useRef, useState } from "react";
+import { useAuth } from "../contexts/AuthContext";
+import { Link, useHistory } from "react-router-dom";
 
 export default function Login() {
-  const emailRef = useRef()
-  const passwordRef = useRef()
-  const { login } = useAuth()
-  const [error, setError] = useState("")
-  const [loading, setLoading] = useState(false)
-  const history = useHistory()
+  const emailRef = useRef();
+  const passwordRef = useRef();
+  const { login } = useAuth();
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const history = useHistory();
 
   async function handleSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
 
     try {
-      setError("")
-      setLoading(true)
-      await login(emailRef.current.value, passwordRef.current.value)
-      history.push("/")
+      setError("");
+      setLoading(true);
+      await login(emailRef.current.value, passwordRef.current.value);
+      history.push("/dashboard");
     } catch {
-      setError("Failed to log in")
+      setError("Failed to log in");
     }
 
-    setLoading(false)
+    setLoading(false);
   }
 
   return (
     <>
-      <Card>
-        <Card.Body>
-          <h2 className="text-center mb-4">Log In</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
-          <Form onSubmit={handleSubmit}>
-            <Form.Group id="email">
-              <Form.Label>Email</Form.Label>
-              <Form.Control type="email" ref={emailRef} required />
-            </Form.Group>
-            <Form.Group id="password">
-              <Form.Label>Password</Form.Label>
-              <Form.Control type="password" ref={passwordRef} required />
-            </Form.Group>
-            <Button disabled={loading} className="w-100" type="submit">
-              Log In
-            </Button>
-          </Form>
-          <div className="w-100 text-center mt-3">
-            <Link to="/forgot-password">Forgot Password?</Link>
+      <div className="container">
+        <div className="row">
+          <div className="col-sm-9 col-md-8 col-lg-6 mx-auto">
+            <div className="card card-signin my-5">
+              <p className="text-center">
+                Don't have an account? <Link to="/signup">Register</Link>
+              </p>
+              <div className="card-body">
+                <h5 className="card-title text-center">Sign In</h5>
+                <form className="form-signin" onSubmit={handleSubmit}>
+                  <div className="form-label-group">
+                    <label htmlFor="inputEmail">Email address</label>
+                    <input
+                      type="email"
+                      id="email"
+                      ref={emailRef}
+                      className="form-control"
+                      placeholder="Email address"
+                      required
+                    />
+                  </div>
+                  <br />
+                  <div className="form-label-group">
+                    <label htmlFor="inputPassword">Password</label>
+                    <input
+                      type="password"
+                      id="password"
+                      ref={passwordRef}
+                      className="form-control"
+                      placeholder="Password"
+                      required
+                    />
+                  </div>
+
+                  <div className="custom-control custom-checkbox mb-3">
+                    <input
+                      type="checkbox"
+                      className="custom-control-input"
+                      id="customCheck1"
+                    />
+                  </div>
+                  <button
+                    className="btn btn-lg btn-primary btn-block text-uppercase"
+                    type="submit"
+                  >
+                    Sign in
+                  </button>
+                </form>
+                <div className="w-100 text-center mt-3">
+                  <Link to="/forgot-password">Forgot Password?</Link>
+                </div>
+              </div>
+            </div>
           </div>
-        </Card.Body>
-      </Card>
-      <div className="w-100 text-center mt-2">
-        Need an account? <Link to="/signup">Sign Up</Link>
+        </div>
       </div>
     </>
-  )
+  );
 }