From d8b1d58fd0e4cd0222f8ff6f9c7736acf19cb899 Mon Sep 17 00:00:00 2001
From: erikaas24 <erikaaslopez@gmail.com>
Date: Thu, 7 Nov 2024 18:48:39 +0100
Subject: [PATCH] Add more styling to table

---
 .../components/pages/organization/OrgShop.tsx | 30 +++++++++++--------
 .../src/components/pages/orgs/ShopSale.tsx    |  6 ++--
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/pages/organization/OrgShop.tsx b/frontend/src/components/pages/organization/OrgShop.tsx
index f6404a007..bc527c0de 100644
--- a/frontend/src/components/pages/organization/OrgShop.tsx
+++ b/frontend/src/components/pages/organization/OrgShop.tsx
@@ -2,18 +2,17 @@ import { useQuery } from "@apollo/client";
 import { Box, Grid, Stack, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { useState } from "react";
-
 import { AdminOrganizationFragment, PaginatedShopOrdersDocument } from "@/generated/graphql";
-
 import { ShopSale } from "../orgs/ShopSale";
 import { TableStepper } from "../orgs/TableStepper";
+import { HEADER_DESKTOP_HEIGHT} from "@/lib/mui/theme/constants";
 
 type Props = {
   organization: AdminOrganizationFragment;
 };
 export const OrgProducts: React.FC<Props> = ({ organization }) => {
   const theme = useTheme();
-  const limit = 5;
+  const limit = 100;
   const [page, setPage] = useState(0);
 
   const handlePageChange = (newValue: number) => {
@@ -50,25 +49,26 @@ export const OrgProducts: React.FC<Props> = ({ organization }) => {
         spacing={0}
         padding={1}
         borderBottom={1}
-        sx={{ bgcolor: theme.palette.background.elevated, color: theme.palette.text.primary }}
+        position={"sticky"}
+        sx={{ bgcolor: theme.palette.background.elevated, color: theme.palette.text.primary, top: HEADER_DESKTOP_HEIGHT - 20, zIndex:1}}
       >
         <Box display="flex" alignItems="left" justifyContent="left" width={"25%"} padding={1}>
-          <Typography variant="body1">Navn på kunde</Typography>
+          <Typography variant="body1" fontWeight={"bold"}>Navn på kunde</Typography>
         </Box>
         <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
-          <Typography variant="body1">Kjøpt produkt</Typography>
+          <Typography variant="body1" fontWeight={"bold"}>Kjøpt produkt</Typography>
         </Box>
         <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
-          <Typography variant="body1">Antall bestilt</Typography>
+          <Typography variant="body1" fontWeight={"bold"}>Antall bestilt</Typography>
         </Box>
         <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
-          <Typography variant="body1">Betalt status</Typography>
+          <Typography variant="body1" fontWeight={"bold"}>Betalt status</Typography>
         </Box>
         <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
-          Mulige handlinger
+          <Typography fontWeight={"bold"}>Mulige handlinger</Typography>
         </Box>
         <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
-          <Typography variant="body1">Har vi levert varen</Typography>
+          <Typography variant="body1" fontWeight={"bold"}>Har vi levert varen</Typography>
         </Box>
       </Stack>
 
@@ -78,10 +78,16 @@ export const OrgProducts: React.FC<Props> = ({ organization }) => {
         data && (
           <>
             <Grid container spacing={0}>
-              {data?.paginatedShopOrders?.slice(0, limit).map((order) => {
+              {data?.paginatedShopOrders?.slice(0, limit).map((order, index) => {
                 return (
                   <Grid key={order.id} item xs={12} sm={12} md={12}>
-                    <Stack borderBottom={1} borderColor={"gray"}>
+                    <Stack
+                    borderBottom={1}
+                    borderColor={"gray"}
+                    sx={{
+                      bgcolor: index % 2 === 0 ? theme.palette.background.paper : theme.palette.background.elevated,
+                    }}
+                    >
                       <ShopSale
                         name={order.user.firstName + " " + order.user.lastName}
                         product_name={order.product.name}
diff --git a/frontend/src/components/pages/orgs/ShopSale.tsx b/frontend/src/components/pages/orgs/ShopSale.tsx
index 8c00d67f7..3911dfa49 100644
--- a/frontend/src/components/pages/orgs/ShopSale.tsx
+++ b/frontend/src/components/pages/orgs/ShopSale.tsx
@@ -2,7 +2,7 @@ import { useMutation } from "@apollo/client";
 import { Check, Clear } from "@mui/icons-material";
 import { Box, IconButton, Stack, Tooltip, Typography } from "@mui/material";
 import { useState } from "react";
-
+import { useTheme } from "@mui/material/styles";
 import { DeliveredProductDocument } from "@/generated/graphql";
 
 type Props = {
@@ -15,15 +15,17 @@ type Props = {
 };
 
 export const ShopSale: React.FC<Props> = ({ name, product_name, quantity, has_paid, is_delivered, order_id }) => {
+  const theme = useTheme();
   const [delivered, setdelivered] = useState(is_delivered);
   const [deliverProduct] = useMutation(DeliveredProductDocument);
 
+
   function handle_click(bool: boolean) {
     setdelivered(bool);
     deliverProduct({ variables: { orderId: order_id } });
   }
   return (
-    <Stack direction={"row"} padding={1} spacing={0}>
+    <Stack direction={"row"} padding={1} spacing={0} sx={{color: theme.palette.text.primary}}>
       <Box display="flex" alignItems="left" justifyContent="left" width={"25%"} padding={1}>
         <Typography variant="body1">{name}</Typography>
       </Box>