From a0fb4c8d8af6d2f08363209e9e3f65f1fb9973bc Mon Sep 17 00:00:00 2001
From: Jeff Cheema <jeffcheema007@gmail.com>
Date: Wed, 6 Dec 2023 17:40:57 -0800
Subject: [PATCH] fixed grid system

---
 src/pages/AddDog/AddDog.jsx                 |   4 +-
 src/pages/AddDog/AddDog.yup.jsx             |   2 -
 src/pages/Dogs/AdoptionLogFacilityCards.jsx | 222 ++++++++++----------
 src/pages/ViewDog/ViewDog.jsx               |   2 +-
 4 files changed, 115 insertions(+), 115 deletions(-)

diff --git a/src/pages/AddDog/AddDog.jsx b/src/pages/AddDog/AddDog.jsx
index d74459d..71d1e28 100644
--- a/src/pages/AddDog/AddDog.jsx
+++ b/src/pages/AddDog/AddDog.jsx
@@ -30,10 +30,10 @@ import AdopterAddressSchema from './Form/FormSchemas/AdopterAddressSchema';
 import DogInfoSchema from './Form/FormSchemas/DogInfoSchema';
 import NotesSchema from './Form/FormSchemas/NotesSchema';
 import FacilityInfoSchema from './Form/FormSchemas/FacilityInfoSchema';
-
 import FinancialInfoSchema from './Form/FormSchemas/FinancialInfoSchema';
 import ShowTags from './ShowTags';
 import { useForm } from 'react-hook-form';
+
 const AddDog = () => {
   const { backend } = useBackend();
   const Navigate = useNavigate();
@@ -128,7 +128,7 @@ const AddDog = () => {
         </MenuButton>
         <MenuList>
           <TagSetup tagBoolean={serviceTag} tagName="Service" setTag={setServiceTag} />
-          <TagSetup tagBoolean={therapyTag} tagName="Therapy" setTag={setTherapyTag} />
+          <TagSetup tagBoolean={therapyTag} tagName="Pets" setTag={setTherapyTag} />
           <TagSetup tagBoolean={staffAdoptionTag} tagName="Stf Adpt" setTag={setStaffAdoptionTag} />
           <TagSetup tagBoolean={specialTag} tagName="Other" setTag={setSpecialTag} />
           <TagSetup tagBoolean={deceasedTag} tagName="Decsd" setTag={setDeceasedTag} />
diff --git a/src/pages/AddDog/AddDog.yup.jsx b/src/pages/AddDog/AddDog.yup.jsx
index 777ef98..3b6a330 100644
--- a/src/pages/AddDog/AddDog.yup.jsx
+++ b/src/pages/AddDog/AddDog.yup.jsx
@@ -1,8 +1,6 @@
 import * as yup from 'yup';
 
 export default yup.object().shape({
-  // dogid
-  // Dog Info Section
   dogname: yup.string().required('Dog name is required'),
   age: yup.number().required('Age is required'),
   breed: yup.string().required('Breed is required'),
diff --git a/src/pages/Dogs/AdoptionLogFacilityCards.jsx b/src/pages/Dogs/AdoptionLogFacilityCards.jsx
index 798f17d..4262a99 100644
--- a/src/pages/Dogs/AdoptionLogFacilityCards.jsx
+++ b/src/pages/Dogs/AdoptionLogFacilityCards.jsx
@@ -29,121 +29,123 @@ const AdoptionLogFacilityCards = ({
 
   // const { shelter } = info;
   return (
-    <SimpleGrid columns={[1, 2, null, 3]} spacing={10} mt={10} mb={10}>
-      {dogs.map(
-        ({
-          dogid,
-          dogname,
-          graddate,
-          age,
-          breed,
-          adoptername,
-          adoptemail,
-          adopterphone,
-          addrline,
-          adoptcity,
-          adoptstate,
-          zip,
-          image,
-          ...rest
-        }) => {
-          const tags = Object.keys(possibleDogTags).filter(tag => rest[tag]);
-          return (
-            <Card maxW="md" key={dogid}>
-              <CardHeader>
-                <Flex direction="column">
-                  <Flex justifyContent="space-between">
-                    <Flex direction="row" gap={1}>
-                      <Image
-                        boxSize={10}
-                        borderRadius="500px"
-                        src={image || 'http://via.placeholder.com/250x250'}
-                        alt="Segun Adebayo"
-                      />
-                      <Flex direction="column">
-                        <Text fontWeight="bold" fontSize="md">
-                          {dogname}
-                        </Text>
-                        <Text fontSize="sm" color="gray.500">
-                          Grad Age: {calculateDogAgeAtGraduation(graddate, age)}
-                        </Text>
-                        <Text fontSize="sm" color="gray.500">
-                          Breed: {breed}
-                        </Text>
+    <Flex justifyContent="center" alignItems="center" width="100%">
+      <SimpleGrid minChildWidth={225} spacing={3} mt={10} mb={10} width="100%">
+        {dogs.map(
+          ({
+            dogid,
+            dogname,
+            graddate,
+            age,
+            breed,
+            adoptername,
+            adoptemail,
+            adopterphone,
+            addrline,
+            adoptcity,
+            adoptstate,
+            zip,
+            image,
+            ...rest
+          }) => {
+            const tags = Object.keys(possibleDogTags).filter(tag => rest[tag]);
+            return (
+              <Card width={225} key={dogid} marginX="auto">
+                <CardHeader>
+                  <Flex direction="column">
+                    <Flex justifyContent="space-between">
+                      <Flex direction="row" gap={1}>
+                        <Image
+                          boxSize={10}
+                          borderRadius="500px"
+                          src={image || 'http://via.placeholder.com/250x250'}
+                          alt="Segun Adebayo"
+                        />
+                        <Flex direction="column">
+                          <Text fontWeight="bold" fontSize="md">
+                            {dogname}
+                          </Text>
+                          <Text fontSize="sm" color="gray.500">
+                            Grad Age: {calculateDogAgeAtGraduation(graddate, age)}
+                          </Text>
+                          <Text fontSize="sm" color="gray.500">
+                            Breed: {breed}
+                          </Text>
+                        </Flex>
                       </Flex>
+                      <Checkbox
+                        marginBottom="auto"
+                        isChecked={selected.includes(dogid)}
+                        onChange={e => {
+                          e.stopPropagation();
+                          toggleCheck(dogid);
+                        }}
+                      />
                     </Flex>
-                    <Checkbox
-                      marginBottom="auto"
-                      isChecked={selected.includes(dogid)}
-                      onChange={e => {
-                        e.stopPropagation();
-                        toggleCheck(dogid);
-                      }}
-                    />
+                    <SimpleGrid minChildWidth={30} spacing={1}>
+                      {tags.map(tag => (
+                        <Tag
+                          maxW={70}
+                          textAlign="center"
+                          key={tag}
+                          size="sm"
+                          variant="solid"
+                          color="white"
+                          bg={possibleDogTags[tag].color}
+                        >
+                          {possibleDogTags[tag].display}
+                        </Tag>
+                      ))}
+                    </SimpleGrid>
                   </Flex>
-                  <SimpleGrid minChildWidth={30} spacing={1}>
-                    {tags.map(tag => (
-                      <Tag
-                        maxW={70}
-                        textAlign="center"
-                        key={tag}
-                        size="sm"
-                        variant="solid"
-                        color="white"
-                        bg={possibleDogTags[tag].color}
-                      >
-                        {possibleDogTags[tag].display}
-                      </Tag>
-                    ))}
-                  </SimpleGrid>
-                </Flex>
-              </CardHeader>
-              <CardBody borderTopWidth={1}>
-                <VStack spacing={1} align="stretch">
-                  <Stack direction="row">
-                    <Text fontWeight="bold" fontSize="md" textDecoration="underline">
-                      Facility:
+                </CardHeader>
+                <CardBody borderTopWidth={1}>
+                  <VStack spacing={1} align="stretch">
+                    <Stack direction="row">
+                      <Text fontWeight="bold" fontSize="md" textDecoration="underline">
+                        Facility:
+                      </Text>
+                      <Text fontSize="md" margin="auto">
+                        {facilityName}
+                      </Text>
+                    </Stack>
+                    <Text fontSize="md" textDecoration="underline">
+                      Adopter
+                    </Text>
+                    <Text fontSize="sm" color="gray.500">
+                      Name: {adoptername}
+                    </Text>
+                    <Text fontSize="sm" color="gray.500">
+                      Email: {adoptemail}
+                    </Text>
+                    <Text fontSize="sm" color="gray.500">
+                      Phone: {adopterphone}
                     </Text>
-                    <Text fontSize="md" margin="auto">
-                      {facilityName}
+                    <Text fontSize="sm" color="gray.500">
+                      Address: {addrline}, {adoptcity}, {adoptstate} {zip}
                     </Text>
-                  </Stack>
-                  <Text fontSize="md" textDecoration="underline">
-                    Adopter
-                  </Text>
-                  <Text fontSize="sm" color="gray.500">
-                    Name: {adoptername}
-                  </Text>
-                  <Text fontSize="sm" color="gray.500">
-                    Email: {adoptemail}
-                  </Text>
-                  <Text fontSize="sm" color="gray.500">
-                    Phone: {adopterphone}
-                  </Text>
-                  <Text fontSize="sm" color="gray.500">
-                    Address: {addrline}, {adoptcity}, {adoptstate} {zip}
-                  </Text>
-                </VStack>
-              </CardBody>
-              <CardFooter>
-                <Button
-                  marginLeft="auto"
-                  size="sm"
-                  onClick={e => {
-                    e.stopPropagation();
-                    Navigate(`/dog/${dogid}`);
-                  }}
-                  bg="#319795"
-                  color="white"
-                >
-                  View More
-                </Button>
-              </CardFooter>
-            </Card>
-          );
-        },
-      )}
-    </SimpleGrid>
+                  </VStack>
+                </CardBody>
+                <CardFooter>
+                  <Button
+                    marginLeft="auto"
+                    size="sm"
+                    onClick={e => {
+                      e.stopPropagation();
+                      Navigate(`/dog/${dogid}`);
+                    }}
+                    bg="#319795"
+                    color="white"
+                  >
+                    View More
+                  </Button>
+                </CardFooter>
+              </Card>
+            );
+          },
+        )}
+      </SimpleGrid>
+    </Flex>
   );
 };
 
diff --git a/src/pages/ViewDog/ViewDog.jsx b/src/pages/ViewDog/ViewDog.jsx
index 1e7aece..72ad65e 100644
--- a/src/pages/ViewDog/ViewDog.jsx
+++ b/src/pages/ViewDog/ViewDog.jsx
@@ -188,7 +188,7 @@ const AddDog = () => {
         </MenuButton>
         <MenuList>
           <TagSetup tagBoolean={serviceTag} tagName="Service" setTag={setServiceTag} />
-          <TagSetup tagBoolean={therapyTag} tagName="Therapy" setTag={setTherapyTag} />
+          <TagSetup tagBoolean={therapyTag} tagName="Pets" setTag={setTherapyTag} />
           <TagSetup tagBoolean={staffAdoptionTag} tagName="Stf Adpt" setTag={setStaffAdoptionTag} />
           <TagSetup tagBoolean={specialTag} tagName="Other" setTag={setSpecialTag} />
           <TagSetup tagBoolean={deceasedTag} tagName="Decsd" setTag={setDeceasedTag} />