From eb38bdd06964499c6d9dbc2baf60f300eb1fa573 Mon Sep 17 00:00:00 2001
From: MichaelAngeloTheFirst <siemic13@gmail.com>
Date: Sat, 17 Dec 2022 15:33:57 +0100
Subject: [PATCH 1/2] Button added

---
 src/components/SendPresents/SendPresents.tsx  | 219 +++++++++++-------
 src/components/TablePackages/PackButton.tsx   |  25 ++
 src/components/TablePackages/PackModal.tsx    |  20 ++
 .../TablePackages/PackageTableRow.tsx         |  31 +--
 src/components/TablePackages/types.ts         |  21 +-
 5 files changed, 203 insertions(+), 113 deletions(-)
 create mode 100644 src/components/TablePackages/PackButton.tsx
 create mode 100644 src/components/TablePackages/PackModal.tsx

diff --git a/src/components/SendPresents/SendPresents.tsx b/src/components/SendPresents/SendPresents.tsx
index 4477646..86f74a6 100644
--- a/src/components/SendPresents/SendPresents.tsx
+++ b/src/components/SendPresents/SendPresents.tsx
@@ -1,99 +1,140 @@
 import React from "react";
-import { Box, Button, Card, CardContent, Grid, makeStyles, Modal, Paper, styled, Typography } from "@mui/material";
-import StarIcon from '@mui/icons-material/Star';
-import CloseIcon from '@mui/icons-material/Close';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Grid,
+  makeStyles,
+  Modal,
+  Paper,
+  styled,
+  Typography,
+} from "@mui/material";
+import StarIcon from "@mui/icons-material/Star";
+import CloseIcon from "@mui/icons-material/Close";
 import ListModal from "../ListModal";
+import PackButton from "../TablePackages/PackButton";
 
+const SendPresents = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
 
-const SendPresents = () =>{
+  const style = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 650,
+    bgcolor: "background.paper",
+    borderRadius: "12px",
+    boxShadow: 24,
+    p: 4,
+    display: "flex",
+    padding: "0",
+    flexDirection: "column",
+  };
 
-    const [open, setOpen] = React.useState(false);
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
-
-    const style = {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: 650,
-        bgcolor: 'background.paper',
-        borderRadius: '12px',
-        boxShadow: 24,
-        p: 4,
-        display: 'flex',
-        padding: '0',
-        flexDirection: 'column',
-    };
-
-
-    return (<>
-        <Button onClick={handleOpen}>Open modal</Button>
-        <Modal
-            open={open}
-            onClose={handleClose}
-            aria-labelledby="verify-letter-modal"
-            aria-describedby="verify-letter-modal"
-        >
-            <Box sx={style}>
-                <Grid container spacing={0}>
-                    <Grid item xs={4}>
-                        <Box sx={{ bgcolor: "#F3F7F9", borderTopLeftRadius: 12, borderBottomLeftRadius: 12 }}>
-                            <img style={{ borderTopLeftRadius: 12 }} src="https://s3-alpha-sig.figma.com/img/66c9/766b/c207d69c2b105689d11455c446de3096?Expires=1672012800&Signature=G-bz4llIrnYsmX7~YJnA3JZA8k8Q7iLhFUYmZbQwzpQfof4hejgLIAabKy1d4ranhvKZbrTKCbacGmz179yYdJ2Yp6y25tjYLSyyaiDCfGXDkS8cGjQCgzKDJJy78nHQjBTwfEtXKi7~MX1GY2mH09fltna7UIMFQsMWym7RyG5SUTnOHkfiSCRVMo1qvs0BgXWiBcj7TRu0CQ7xgjdYTI-hcMUSfuqWu7HbmtwPh0hGmtME23Io1ehvQTp99J9GfrJPPB9xsjPNerJKApJG68LmHQEae3iXBXvmfnwgKA8GbMkQy8o0vNcRQ5Q~4Ctd5RhyVwGCUSDIUy1u9O0L3w__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" width="100%" />
-                            <Typography sx={{ padding: 3 }}>
-                                <b>Imię:</b><br />
-                                x<br />
-                                <b>Nazwisko:</b><br />
-                                xxx xxxxxxxx<br />
-                                <b>Wiek:</b><br />
-                                x lat<br />
-                                <b>Grzeczność:</b><br />
-                                x<br />
-                                <b>Kraj:</b><br />
-                                x<br />
-                                <b>Miasto:</b><br />
-                                x<br />
-                                <b>Ulica:</b><br />
-                                x<br />
-                            </Typography>
-                        </Box>
+  return (
+    <>
+      <PackButton onClick={handleOpen}>Open modal</PackButton>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="verify-letter-modal"
+        aria-describedby="verify-letter-modal"
+      >
+        <Box sx={style}>
+          <Grid container spacing={0}>
+            <Grid item xs={4}>
+              <Box
+                sx={{
+                  bgcolor: "#F3F7F9",
+                  borderTopLeftRadius: 12,
+                  borderBottomLeftRadius: 12,
+                }}
+              >
+                <img
+                  style={{ borderTopLeftRadius: 12 }}
+                  src="https://s3-alpha-sig.figma.com/img/66c9/766b/c207d69c2b105689d11455c446de3096?Expires=1672012800&Signature=G-bz4llIrnYsmX7~YJnA3JZA8k8Q7iLhFUYmZbQwzpQfof4hejgLIAabKy1d4ranhvKZbrTKCbacGmz179yYdJ2Yp6y25tjYLSyyaiDCfGXDkS8cGjQCgzKDJJy78nHQjBTwfEtXKi7~MX1GY2mH09fltna7UIMFQsMWym7RyG5SUTnOHkfiSCRVMo1qvs0BgXWiBcj7TRu0CQ7xgjdYTI-hcMUSfuqWu7HbmtwPh0hGmtME23Io1ehvQTp99J9GfrJPPB9xsjPNerJKApJG68LmHQEae3iXBXvmfnwgKA8GbMkQy8o0vNcRQ5Q~4Ctd5RhyVwGCUSDIUy1u9O0L3w__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
+                  width="100%"
+                />
+                <Typography sx={{ padding: 3 }}>
+                  <b>Imię:</b>
+                  <br />
+                  x<br />
+                  <b>Nazwisko:</b>
+                  <br />
+                  xxx xxxxxxxx
+                  <br />
+                  <b>Wiek:</b>
+                  <br />
+                  x lat
+                  <br />
+                  <b>Grzeczność:</b>
+                  <br />
+                  x<br />
+                  <b>Kraj:</b>
+                  <br />
+                  x<br />
+                  <b>Miasto:</b>
+                  <br />
+                  x<br />
+                  <b>Ulica:</b>
+                  <br />
+                  x<br />
+                </Typography>
+              </Box>
+            </Grid>
+            <Grid item xs={8}>
+              <Box sx={{ borderTopRightRadius: 12, padding: 3 }}>
+                <Box>
+                  <Grid container spacing={0}>
+                    <Grid item xs={6}>
+                      <Typography sx={{ color: "#A9A9A9", width: "50%" }}>
+                        ID x<br />
+                        calendar xx.xx.xxxx
+                        <br />
+                      </Typography>
                     </Grid>
-                    <Grid item xs={8}>
-                        <Box sx={{ borderTopRightRadius: 12, padding: 3 }}>
-                            <Box>
-                                <Grid container spacing={0}>
-                                    <Grid item xs={6}>
-                                        <Typography sx={{ color: "#A9A9A9", width: "50%" }}>
-                                            ID x<br />
-                                            calendar  xx.xx.xxxx<br />
-                                        </Typography>
-                                    </Grid>
 
-                                    <Grid item xs={5}>
-                                        <Typography sx={{ borderRadius: 12, border: "solid", width: 100, textAlign: "center" }}>
-                                            category
-                                        </Typography>
-                                    </Grid>
-
-                                    <Grid item xs={1}>
-                                        <Button variant="text" sx={{ color: "black" }} onClick={handleClose}>
-                                            <CloseIcon />
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Box>
-                            <Box sx={{ margin: 3 }}>
-                                <Typography sx={{ fontSize: 25 }}>
-                                    <ListModal></ListModal>
-                                </Typography>
-                            </Box>
+                    <Grid item xs={5}>
+                      <Typography
+                        sx={{
+                          borderRadius: 12,
+                          border: "solid",
+                          width: 100,
+                          textAlign: "center",
+                        }}
+                      >
+                        category
+                      </Typography>
+                    </Grid>
 
-                        </Box>
+                    <Grid item xs={1}>
+                      <Button
+                        variant="text"
+                        sx={{ color: "black" }}
+                        onClick={handleClose}
+                      >
+                        <CloseIcon />
+                      </Button>
                     </Grid>
-                </Grid>
-            </Box>
-        </Modal>
-    </>)
-}
+                  </Grid>
+                </Box>
+                <Box sx={{ margin: 3 }}>
+                  <Typography sx={{ fontSize: 25 }}>
+                    <ListModal></ListModal>
+                  </Typography>
+                </Box>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+      </Modal>
+    </>
+  );
+};
 
-export default SendPresents
\ No newline at end of file
+export default SendPresents;
diff --git a/src/components/TablePackages/PackButton.tsx b/src/components/TablePackages/PackButton.tsx
new file mode 100644
index 0000000..b627332
--- /dev/null
+++ b/src/components/TablePackages/PackButton.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@mui/material";
+import { PackButtonProps } from "./types";
+
+const PackButton = ({ onClick }: PackButtonProps) => {
+  return (
+    <Button
+      onClick={onClick}
+      sx={{
+        "&:hover": {
+          background: "white",
+          color: "#294C89",
+        },
+        background: "#294C89",
+        boxShadow:
+          "0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)",
+        borderRadius: "16px",
+        color: "white",
+      }}
+    >
+      PAKUJ
+    </Button>
+  );
+};
+
+export default PackButton;
diff --git a/src/components/TablePackages/PackModal.tsx b/src/components/TablePackages/PackModal.tsx
new file mode 100644
index 0000000..6bfacdd
--- /dev/null
+++ b/src/components/TablePackages/PackModal.tsx
@@ -0,0 +1,20 @@
+import { Modal, Typography } from "@mui/material";
+import { useState } from "react";
+import PackButton from "./PackButton";
+
+const PackModal = ({ id }: { id: number }) => {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <PackButton onClick={handleOpen} />
+      <Modal open={open} onClose={handleClose}>
+        <Typography>{id}</Typography>
+      </Modal>
+    </>
+  );
+};
+
+export default PackModal;
diff --git a/src/components/TablePackages/PackageTableRow.tsx b/src/components/TablePackages/PackageTableRow.tsx
index cfd5b8e..9a346ca 100644
--- a/src/components/TablePackages/PackageTableRow.tsx
+++ b/src/components/TablePackages/PackageTableRow.tsx
@@ -3,37 +3,38 @@ import { TableCell, TableRow } from "@mui/material";
 import PackagingStatus from "../PackagingStatus";
 import { Packages } from "./types";
 import CreationDate from "../CreationDate";
-import Name from "../../components/Name/Name"
-import Country from '../../components/Name/Country';
+import Name from "../../components/Name/Name";
+import Country from "../../components/Name/Country";
 import { SendPresents } from "../SendPresents";
 
-const PackageTableRow = ({ id, kindness, createdAt, status, ...rest }: Packages) => {
+const PackageTableRow = ({
+  id,
+  kindness,
+  createdAt,
+  status,
+  ...rest
+}: Packages) => {
   return (
     <TableRow>
       <TableCell>
         <CheckBoxOutlineBlankOutlined />
       </TableCell>
 
+      <TableCell>{id}</TableCell>
       <TableCell>
-        {id}
+        <Name fullName={rest.name} />
       </TableCell>
       <TableCell>
-      <Name fullName={rest.name}/>
+        <PackagingStatus status={status} />
       </TableCell>
       <TableCell>
-      <PackagingStatus status={status}/>
+        <Country country={rest.country} />
       </TableCell>
+      <TableCell>{rest.city}</TableCell>
+      <CreationDate date={createdAt} />
       <TableCell>
-      <Country country={rest.country}/>
+        <SendPresents />
       </TableCell>
-      <TableCell>
-        {rest.city}
-      </TableCell>
-      <CreationDate date={createdAt}/>
-      <TableCell>
-        <SendPresents/>
-      </TableCell>
-
     </TableRow>
   );
 };
diff --git a/src/components/TablePackages/types.ts b/src/components/TablePackages/types.ts
index da63e8a..4636a57 100644
--- a/src/components/TablePackages/types.ts
+++ b/src/components/TablePackages/types.ts
@@ -13,14 +13,17 @@ export interface Packages {
   createdAt: string;
 }
 
+export interface DeliveryStatus {
+  id: number;
+  wish_list_id: number;
+  name: string;
+  kindness: number;
+  status: string;
+  country: string;
+  city: string;
+  created_at: string;
+}
 
-export interface DeliveryStatus{
-  id: number
-  wish_list_id: number
-  name: string
-  kindness: number
-  status: string
-  country: string
-  city: string
-  created_at: string
+export interface PackButtonProps {
+  onClick: () => void;
 }

From 6ab7e0ed552495e1ac34c1dde6f3c3be210b55ae Mon Sep 17 00:00:00 2001
From: MichaelAngeloTheFirst <siemic13@gmail.com>
Date: Sat, 17 Dec 2022 16:38:37 +0100
Subject: [PATCH 2/2] xDDDDD

---
 .../PackagingStatus/PackagingStatus.tsx       | 22 ++++++++++++++-----
 src/components/SendPresents/SendPresents.tsx  |  2 +-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/PackagingStatus/PackagingStatus.tsx b/src/components/PackagingStatus/PackagingStatus.tsx
index 1b21283..23785fa 100644
--- a/src/components/PackagingStatus/PackagingStatus.tsx
+++ b/src/components/PackagingStatus/PackagingStatus.tsx
@@ -1,12 +1,22 @@
 import Box from "@mui/system/Box";
 import { useEffect, useState } from "react";
-import {DeliveryStatus} from './types';
+import { DeliveryStatus } from "./types";
 
-const PackagingStatus = ({status}: {status:string}) => {  
+const PackagingStatus = ({ status }: { status: string }) => {
   return (
-    <Box> {status}
+    <Box
+      border={1}
+      marginX={"auto"}
+      width={40}
+      alignContent={"center"}
+      borderRadius={"50px"}
+      textAlign="center"
+      justifyItems={"center"}
+      justifyContent={"center"}
+    >
+      {status}
     </Box>
-  )
-}
+  );
+};
 
-export default PackagingStatus;
\ No newline at end of file
+export default PackagingStatus;
diff --git a/src/components/SendPresents/SendPresents.tsx b/src/components/SendPresents/SendPresents.tsx
index 86f74a6..a3c0672 100644
--- a/src/components/SendPresents/SendPresents.tsx
+++ b/src/components/SendPresents/SendPresents.tsx
@@ -38,7 +38,7 @@ const SendPresents = () => {
 
   return (
     <>
-      <PackButton onClick={handleOpen}>Open modal</PackButton>
+      <PackButton onClick={handleOpen} />
       <Modal
         open={open}
         onClose={handleClose}