added more styling and links in pages

rebekahgrandey · Feb 20, 2023 · d966b73 · d966b73
1 parent 3c14d81
commit d966b73
Show file tree

Hide file tree

Showing 21 changed files with 400 additions and 271 deletions.
diff --git a/PawPanion/client/package-lock.json b/PawPanion/client/package-lock.json
diff --git a/PawPanion/client/package.json b/PawPanion/client/package.json
@@ -44,4 +44,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/PawPanion/client/public/index.html b/PawPanion/client/public/index.html
@@ -7,6 +7,7 @@
 <head>
   <meta charset="utf-8" />
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="stylesheet" href="./main.css">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />

diff --git a/PawPanion/client/public/main.css b/PawPanion/client/public/main.css
@@ -0,0 +1,3 @@
+/* #root {
+    display: flex;
+} */
diff --git a/PawPanion/client/public/main.scss b/PawPanion/client/public/main.scss
diff --git a/PawPanion/client/public/paws-background.png b/PawPanion/client/public/paws-background.png
diff --git a/PawPanion/client/src/components/Header.css b/PawPanion/client/src/components/Header.css
@@ -0,0 +1,9 @@
+.userNav {
+    width: 250px;
+    margin-right: 100px;
+    background-color: white !important
+}
+
+li {
+    list-style-type: none;
+}
diff --git a/PawPanion/client/src/components/Header.js b/PawPanion/client/src/components/Header.js
@@ -13,6 +13,7 @@ import {
 } from 'reactstrap';
 import { getCurrentUserByFirebaseId } from '../modules/userManager';
 import { logout } from '../modules/authManager';
+import "./Header.css"
 
 
 export default function Header({ isLoggedIn }) {
@@ -28,50 +29,78 @@ export default function Header({ isLoggedIn }) {
     }, [isLoggedIn]);
 
     return (
-        <div>
-            <Navbar color="light" light expand="md" className="py-4">
-                <NavbarBrand tag={RRNavLink} to="/">Pawpanion</NavbarBrand>
-                <NavbarToggler onClick={toggle} />
-                <Collapse isOpen={isOpen} navbar>
-                    <Nav className="mr-auto" navbar>
-                        { /* When isLoggedIn === true, we will render the Home link */}
-                        {isLoggedIn &&
-                            <>
-                                <NavItem>
-                                    <NavLink tag={RRNavLink} to="/">Home</NavLink>
-                                </NavItem>
-                                {user && !user.isVet ? <NavItem>
-                                    <NavLink tag={RRNavLink} to="/add-pet">Add a Pet</NavLink>
-                                </NavItem> : ""}
-                            </>
-                        }
-                    </Nav>
-
-                    <Nav navbar>
-                        {isLoggedIn &&
-                            <>
-                                <NavItem>
-                                    <NavLink tag={RRNavLink} to="/" onClick={(e) => {
-                                        setUser();
-                                        logout(e);
-                                    }}>Logout</NavLink>
-                                </NavItem>
-                            </>
-                        }
-                        {!isLoggedIn &&
-                            <>
-                                <NavItem>
-                                    <NavLink tag={RRNavLink} to="/login">Login</NavLink>
-                                </NavItem>
-
-                                <NavItem>
-                                    <NavLink tag={RRNavLink} to="/register">Register</NavLink>
-                                </NavItem>
-                            </>
-                        }
-                    </Nav>
-                </Collapse>
-            </Navbar>
-        </div>
+
+        <Navbar color="light" light expand="md" className="py-4">
+            <NavbarBrand tag={RRNavLink} to="/">Pawpanion</NavbarBrand>
+            <NavbarToggler onClick={toggle} />
+            <Collapse isOpen={isOpen} navbar>
+                <Nav className="mr-auto" navbar>
+
+                    {isLoggedIn &&
+                        <>
+                            <NavItem>
+                                <NavLink tag={RRNavLink} to="/">Home</NavLink>
+                            </NavItem>
+                            {user && !user.isVet ? <NavItem>
+                                <NavLink tag={RRNavLink} to="/add-pet">Add a Pet</NavLink>
+                            </NavItem> : ""}
+                        </>
+                    }
+                </Nav>
+
+                <Nav navbar>
+                    {isLoggedIn &&
+                        <>
+                            <NavItem>
+                                <NavLink tag={RRNavLink} to="/" onClick={(e) => {
+                                    setUser();
+                                    logout(e);
+                                }}>Logout</NavLink>
+                            </NavItem>
+                        </>
+                    }
+                    {!isLoggedIn &&
+                        <>
+                            <NavItem>
+                                <NavLink tag={RRNavLink} to="/login">Login</NavLink>
+                            </NavItem>
+
+                            <NavItem>
+                                <NavLink tag={RRNavLink} to="/register">Register</NavLink>
+                            </NavItem>
+                        </>
+                    }
+                </Nav>
+            </Collapse>
+        </Navbar>
+
     );
-}
+}
+
+
+
+
+
+
+
+
+
+{/* <div className="userNav">
+            <div className="userNav-content"> Pawpanion logo
+
+                {isLoggedIn &&
+                    <>
+                        <ul>
+                            <li><a style={{ textDecoration: "none" }} href="/">Home</a></li>
+
+                            <li><a style={{ textDecoration: "none" }} href="/add-pet">Add a Pet</a></li>
+
+                            <li><a style={{ textDecoration: "none" }} href="/" onClick={(e) => {
+                                setUser();
+                                logout(e);
+                            }}>Logout</a></li>
+                        </ul>
+                    </>
+                }
+            </div>
+        </div> */}
diff --git a/PawPanion/client/src/components/Login.js b/PawPanion/client/src/components/Login.js
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
 import { useNavigate, Link } from "react-router-dom";
 import { login } from "../modules/authManager";
+import "./Records/AddRecord.css"
 
 export default function Login() {
     const navigate = useNavigate();
@@ -17,7 +18,7 @@ export default function Login() {
     };
 
     return (
-        <Form onSubmit={loginSubmit}>
+        <Form onSubmit={loginSubmit} className="form-container mt-4 p-5">
             <fieldset>
                 <FormGroup>
                     <Label for="email">Email</Label>

diff --git a/PawPanion/client/src/components/Pets/AddPet.css b/PawPanion/client/src/components/Pets/AddPet.css
@@ -0,0 +1,23 @@
+.form-container {
+    border-radius: 20px;
+    background-color: white;
+    padding: 30px;
+    margin-left: 20px;
+    width: 40rem;
+}
+
+.nav-extender {
+    height: 100%;
+}
+
+.add-label {
+    font-family: 'Fredoka One', cursive;
+}
+
+.field-input {
+    border: 2px solid blue;
+    border-radius: 10px;
+    margin: 6px 0 6px;
+    padding: 5px;
+    width: 20rem;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,4 +44,4 @@ @@
           "last 1 safari version"
         ]
       }
-    }
+    }