diff --git a/PawPanion/client/package-lock.json b/PawPanion/client/package-lock.json index 30622f5..d6282a8 100644 --- a/PawPanion/client/package-lock.json +++ b/PawPanion/client/package-lock.json @@ -31230,4 +31230,4 @@ "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" } } -} +} \ No newline at end of file diff --git a/PawPanion/client/package.json b/PawPanion/client/package.json index 53c0b50..dac809d 100644 --- a/PawPanion/client/package.json +++ b/PawPanion/client/package.json @@ -44,4 +44,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/PawPanion/client/public/index.html b/PawPanion/client/public/index.html index 20c301c..8b6d2b8 100644 --- a/PawPanion/client/public/index.html +++ b/PawPanion/client/public/index.html @@ -7,6 +7,7 @@ + diff --git a/PawPanion/client/public/main.css b/PawPanion/client/public/main.css new file mode 100644 index 0000000..cf1a4da --- /dev/null +++ b/PawPanion/client/public/main.css @@ -0,0 +1,3 @@ +/* #root { + display: flex; +} */ \ No newline at end of file diff --git a/PawPanion/client/public/main.scss b/PawPanion/client/public/main.scss deleted file mode 100644 index e4cd93f..0000000 --- a/PawPanion/client/public/main.scss +++ /dev/null @@ -1,3 +0,0 @@ -$primary: purple; - -@import "../node_modules/bootstrap/scss/bootstrap" \ No newline at end of file diff --git a/PawPanion/client/public/paws-background.png b/PawPanion/client/public/paws-background.png new file mode 100644 index 0000000..82b0dac Binary files /dev/null and b/PawPanion/client/public/paws-background.png differ diff --git a/PawPanion/client/src/components/Header.css b/PawPanion/client/src/components/Header.css new file mode 100644 index 0000000..40473ea --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/PawPanion/client/src/components/Header.js b/PawPanion/client/src/components/Header.js index c66e812..0912c62 100644 --- 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 ( -
- - Pawpanion - - - - - - - -
+ + + Pawpanion + + + + + + + + ); -} \ No newline at end of file +} + + + + + + + + + +{/*
+
Pawpanion logo + + {isLoggedIn && + <> + + + } +
+
*/} \ No newline at end of file diff --git a/PawPanion/client/src/components/Login.js b/PawPanion/client/src/components/Login.js index f6693ce..9eecec1 100644 --- 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 ( -
+
diff --git a/PawPanion/client/src/components/Pets/AddPet.css b/PawPanion/client/src/components/Pets/AddPet.css new file mode 100644 index 0000000..1adcfe8 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/PawPanion/client/src/components/Pets/AddPet.js b/PawPanion/client/src/components/Pets/AddPet.js index e938232..80beb67 100644 --- a/PawPanion/client/src/components/Pets/AddPet.js +++ b/PawPanion/client/src/components/Pets/AddPet.js @@ -4,6 +4,7 @@ import firebase from "firebase/app"; import "firebase/auth"; import { getCurrentUserByFirebaseId } from "../../modules/userManager"; import { addPet } from "../../modules/petManager"; +import "./AddPet.css" export const AddPetForm = () => { const currentFirebaseUser = firebase.auth().currentUser.uid @@ -66,96 +67,104 @@ export const AddPetForm = () => { }; return ( - -

Add a Furry Friend

-
-
- - -
-
-
-
- - -
-
-
-
- - Yes -
-
-
-
- - -
-
-
-
- - Yes -
-
-
-
- - -
-
- - +
+
+

Add a Furry Friend

+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ + Yes +
+
+
+
+ +
+
+
+
+
+
+ + Yes +
+
+
+
+ +
+ +
+
+
+ +
+
); }; \ No newline at end of file diff --git a/PawPanion/client/src/components/Pets/DeletePet.js b/PawPanion/client/src/components/Pets/DeletePet.js index 442cf16..278d852 100644 --- a/PawPanion/client/src/components/Pets/DeletePet.js +++ b/PawPanion/client/src/components/Pets/DeletePet.js @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { getPetById, deletePet } from "../../modules/petManager"; +import "./AddPet.css" export const DeletePetPage = () => { const { petId } = useParams(); @@ -20,17 +21,20 @@ export const DeletePetPage = () => { } return ( - <> -

Delete {pet.name}

-

All records of {pet.name} will also be permanently deleted. This cannot be reversed.

- - - - +
+
Return to HomePage
+

Delete {pet.name}?

+
All records of {pet.name} will also be permanently deleted. This cannot be reversed.
+ +
+ +
+
) } diff --git a/PawPanion/client/src/components/Pets/EditPet.js b/PawPanion/client/src/components/Pets/EditPet.js index 5c73ed8..039ada8 100644 --- a/PawPanion/client/src/components/Pets/EditPet.js +++ b/PawPanion/client/src/components/Pets/EditPet.js @@ -1,6 +1,8 @@ import { useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { editPet, getPetById } from "../../modules/petManager"; +import { Button } from "reactstrap"; +import "./AddPet.css" export const EditPetForm = () => { const [pet, setPet] = useState([]) @@ -60,45 +62,53 @@ export const EditPetForm = () => { return ( <> -
-

Edit {pet.name}

+ +
Return to HomePage
+

Edit {pet.name}

- + /> - + /> - + /> - + /> - + + - Return to HomePage
diff --git a/PawPanion/client/src/components/Records/AddRecord.css b/PawPanion/client/src/components/Records/AddRecord.css new file mode 100644 index 0000000..1adcfe8 --- /dev/null +++ b/PawPanion/client/src/components/Records/AddRecord.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; +} \ No newline at end of file diff --git a/PawPanion/client/src/components/Records/AddRecord.js b/PawPanion/client/src/components/Records/AddRecord.js index 63dd274..750b0e3 100644 --- a/PawPanion/client/src/components/Records/AddRecord.js +++ b/PawPanion/client/src/components/Records/AddRecord.js @@ -5,6 +5,7 @@ import "firebase/auth"; import { getCurrentUserByFirebaseId } from "../../modules/userManager"; import { addRecord } from "../../modules/recordManager"; import { getPetById } from "../../modules/petManager"; +import "./AddRecord.css" export const AddRecordForm = () => { const currentFirebaseUser = firebase.auth().currentUser.uid @@ -49,7 +50,7 @@ export const AddRecordForm = () => { vetInput.date ) { return addRecord(newRecord) - .then(() => navigate("/")); + .then(() => navigate(`/record/${petId}`)); } else { alert("Please complete the form"); } @@ -63,7 +64,7 @@ export const AddRecordForm = () => { }; return ( -
+

{pet.name} | Add Record

@@ -179,8 +180,9 @@ export const AddRecordForm = () => {
); diff --git a/PawPanion/client/src/components/Records/RecordList.js b/PawPanion/client/src/components/Records/RecordList.js index 0cd2cb8..12ce423 100644 --- a/PawPanion/client/src/components/Records/RecordList.js +++ b/PawPanion/client/src/components/Records/RecordList.js @@ -4,6 +4,7 @@ import firebase from "firebase/app"; import "firebase/auth"; import { getPetRecordsById } from "../../modules/recordManager"; import { getCurrentUserByFirebaseId } from "../../modules/userManager"; +import "../Pets/AddPet.css" export const RecordsByPetId = () => { const [records, setRecords] = useState([]) @@ -21,22 +22,22 @@ export const RecordsByPetId = () => { return ( <> - {user.isVet ?

+ Add New Record

: ""} -

return to Homepage

-

All Records

+ {user.isVet ?
: ""} +
return to Homepage
+

All Records

{records.map((record) => { return
-
+
-

Date: {record?.date}

-

Reason: {record?.recordType?.name}

-

Weight: {record?.weight} lbs

- {record?.medication ?

Medications: {record?.medication}

: ""} - {record?.illness ?

Illnesses: {record?.illness}

: ""} - {record?.diet ?

Dietary Notes: {record?.diet}

: ""} - {record?.note ?

Additional Info: {record?.note}

: ""} -

Seen by {record?.vet?.name}

- {user.isVet ?

Delete Record

: ""} +

Date: {record?.date}

+

Reason: {record?.recordType?.name}

+

Weight: {record?.weight} lbs

+ {record?.medication ?

Medications: {record?.medication}

: ""} + {record?.illness ?

Illnesses: {record?.illness}

: ""} + {record?.diet ?

Dietary Notes: {record?.diet}

: ""} + {record?.note ?

Additional Info: {record?.note}

: ""} +

Seen by {record?.vet?.name}

+ {user.isVet && record.vetId == user.id ?

Delete Record

: ""}
diff --git a/PawPanion/client/src/components/Register.js b/PawPanion/client/src/components/Register.js index 2a98bb2..deb4895 100644 --- a/PawPanion/client/src/components/Register.js +++ b/PawPanion/client/src/components/Register.js @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; import { useNavigate } from "react-router-dom"; import { register } from "../modules/authManager"; +import "./Records/AddRecord.css" export default function Register() { const navigate = useNavigate(); @@ -31,7 +32,8 @@ export default function Register() { }; return ( -
+ + Return to Login
diff --git a/PawPanion/client/src/components/userViews/HomePage.css b/PawPanion/client/src/components/userViews/HomePage.css index a248508..800007a 100644 --- a/PawPanion/client/src/components/userViews/HomePage.css +++ b/PawPanion/client/src/components/userViews/HomePage.css @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap'); body { - /* background-image: url("paper.gif"); */ + /* background-image: url("%PUBLIC_URL%/paws-background.png"); */ background-size: cover; background: linear-gradient(180deg, rgba(102, 153, 255, 1) 35%, rgba(42, 113, 255, 1) 100%) no-repeat center fixed !important; } @@ -10,37 +10,43 @@ body { color: rgb(255, 255, 255); padding: 1.5rem rem 0 0 3rem; margin-top: 3rem; - margin-left: 3.7rem; + margin-left: 26rem; font-family: 'Fredoka One', cursive; font-size: 2.5rem; letter-spacing: 1px; } -.homepage-labels { +.owner-homepage-labels { color: rgb(255, 255, 255); padding: 1.5rem rem 0 0 3rem; margin-top: 3rem; - margin-left: 3.7rem; + margin-left: 14rem; font-family: 'Fredoka One', cursive; font-size: 3rem; letter-spacing: 1px; } .vetHomeContainer { - margin: auto; - max-width: 900px; - border: black solid 2px; + margin-left: 10rem; + margin-top: 3rem; + max-width: 1100px; } .pet-container { - margin-left: 3rem !important; + margin-left: 14rem !important; margin-top: 1px !important; } -.pet-list-container { +.pet-fact-container { + margin-left: 21rem; +} + +.vet-pet-list-container { display: flex; + margin-top: 1rem; justify-content: space-between; padding: 0 8rem; + background-color: white; } .pet-list-container-owner { @@ -54,6 +60,13 @@ body { margin-left: 1.7rem; } +.card-left { + margin-left: 4rem; + margin-top: 1rem; + font-family: 'Fredoka One', cursive; + font-size: 22px; +} + .grow { transition: all .2s ease-in-out; diff --git a/PawPanion/client/src/components/userViews/HomePage.js b/PawPanion/client/src/components/userViews/HomePage.js index 401acbf..776babb 100644 --- a/PawPanion/client/src/components/userViews/HomePage.js +++ b/PawPanion/client/src/components/userViews/HomePage.js @@ -26,9 +26,9 @@ export const HomePage = () => { } return ( - + ); } \ No newline at end of file diff --git a/PawPanion/client/src/components/userViews/OwnerHomePage.js b/PawPanion/client/src/components/userViews/OwnerHomePage.js index 5af46bd..8acc05b 100644 --- a/PawPanion/client/src/components/userViews/OwnerHomePage.js +++ b/PawPanion/client/src/components/userViews/OwnerHomePage.js @@ -23,81 +23,79 @@ export const OwnerHomePage = () => { const randomFact = factGenerator() return (<> -
Did you know?
- {randomFact} -
Your Pets
-
- - {ownerPets.map((pet) => { - - const petRecord = records.find(record => record.petId === pet.id) - - //const petPic = pet.imageLocation - - - // if (!pet.imageLocation && pet.isDog) { - // petPic === //DEFAULT DOG PIC URL - // } else if (!pet.imageLocation && !pet.isDog) { - // petPic === //DEFAULT CAT PIC URL - // } else { - // petPic === pet.imageLocation - // } - - - - var petDate = pet.birthdate; - petDate = petDate.split('T')[0]; - - return (<> - - - - - {pet.name} - DOB: {petDate} - - {pet.breed} - - {petRecord?.weight ? `Weight: ${petRecord?.weight}` : ""} - - - {petRecord?.medication ? `Recent medication(s): ${petRecord?.medication}` : ""} - - - {petRecord?.illness ? `Recent conditions: ${petRecord?.illness}` : ""} - - - {petRecord?.diet ? `Diet plan: ${petRecord?.diet}` : ""} - - - {petRecord?.note ? `Most recent vet notes: +
+
Did you know?
+ {randomFact}
+
Your Pets
+
+ + {ownerPets.map((pet) => { + + const petRecord = records.find(record => record.petId === pet.id) + + + var petDate = pet.birthdate; + petDate = petDate.split('T')[0]; + + return (<> + + + + + {pet.name} + DOB: {petDate} + + {pet.breed} + + {petRecord?.weight ? `Weight: ${petRecord?.weight}` : ""} + + + {petRecord?.medication ? `Recent medication(s): ${petRecord?.medication}` : ""} + + + {petRecord?.illness ? `Recent conditions: ${petRecord?.illness}` : ""} + + + {petRecord?.diet ? `Diet plan: ${petRecord?.diet}` : ""} + + + {petRecord?.note ? `Most recent vet notes: ${petRecord?.note} Submitted on ${petRecord?.date}` : ""} - - - - - - - - - - ) - })} - -
+ add a pet
- + + + + + + + + + + ) + })} + +
+ + add a pet +
+ +
) } diff --git a/PawPanion/client/src/components/userViews/VetHomePage.js b/PawPanion/client/src/components/userViews/VetHomePage.js index 7aa75e7..fe487fe 100644 --- a/PawPanion/client/src/components/userViews/VetHomePage.js +++ b/PawPanion/client/src/components/userViews/VetHomePage.js @@ -1,6 +1,6 @@ import { getAllPets } from "../../modules/petManager"; import React, { useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, Link } from "react-router-dom"; import { Card, Button } from "reactstrap"; import "./HomePage.css" @@ -21,7 +21,10 @@ export const VetHomePage = () => {
{pets.map((pet) => { return ( -
+
{pet.owner.name}
{pet.owner.phone}
{pet.name} @@ -30,6 +33,7 @@ export const VetHomePage = () => {
) })} +
)