redesign shopping cards

theodo · Jun 16, 2023 · eb147ee · eb147ee
1 parent 4d67450
commit eb147ee
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 41 deletions.
diff --git a/public/product_assets/data/flour.json b/public/product_assets/data/flour.json
@@ -1,7 +1,7 @@
 [
   {
     "id": "6b121d2e-e02b-11ed-b5ea-0242ac120002",
-    "title": "Farine de d'épeautre",
+    "title": "Farine d'épeautre",
     "description": "Farine d'épeautre",
     "price": "1,23 €/kg",
     "previewImageUrl": "/product_assets/flours/spelt-flour.jpg",

diff --git a/public/product_assets/images/add.png b/public/product_assets/images/add.png
diff --git a/src/components/ui/Cards/AddToCartButton/AddToCartButton.tsx b/src/components/ui/Cards/AddToCartButton/AddToCartButton.tsx
@@ -1,6 +1,6 @@
-import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
-import { IconButton } from "@mui/material";
+import { Button } from "@mui/material";
 import { useAtom } from "jotai";
+import Image from "next/image";
 
 import { cartAtom } from "src/store/cart";
 import { Product } from "src/types/product";
@@ -24,15 +24,34 @@ const AddToCartButton: React.FC<IAddToCartButton> = ({
     });
   };
 
+  const styleButton: React.CSSProperties = {
+    borderRadius: 50,
+    backgroundColor: "white",
+    textTransform: "none",
+    color: "black",
+    display: "flex",
+    flexDirection: "row",
+    gap: "10px",
+    border: "grey 1px solid",
+  };
+
+  let addImageSize = 22;
+
+  if (tiny) {
+    styleButton.fontSize = "10px";
+    addImageSize = 15;
+  }
+
   return (
-    <IconButton
-      aria-label="Add cart"
-      color="inherit"
-      style={tiny ? { padding: 0 } : {}}
-      onClick={addToCart}
-    >
-      <AddShoppingCartIcon style={tiny ? { fontSize: "12px" } : {}} />
-    </IconButton>
+    <Button aria-label="Add cart" style={styleButton} onClick={addToCart}>
+      Ajouter
+      <Image
+        src={require("public/product_assets/images/add.png")}
+        width={addImageSize}
+        height={addImageSize}
+        alt=""
+      />
+    </Button>
   );
 };
 

diff --git a/src/components/ui/Cards/ProductCard/ProductCardStyle.tsx b/src/components/ui/Cards/ProductCard/ProductCardStyle.tsx
@@ -0,0 +1,26 @@
+import { Product } from "src/types/product";
+
+export const stylePrice: React.CSSProperties = {
+  borderRadius: 50,
+  backgroundColor: "white",
+  fontSize: "12px",
+  display: "flex",
+  alignItems: "center",
+  padding: "5px",
+  border: "grey 1px solid",
+};
+
+const imageSize = 218;
+
+export const getImageStyle = (product: Product, tiny: boolean) => {
+  const style: React.CSSProperties = {
+    height: imageSize,
+    width: tiny ? "" : imageSize,
+    backgroundImage: `url(${product.previewImageUrl})`,
+    backgroundSize: "cover",
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "center",
+  };
+  return style;
+};
diff --git a/src/components/ui/Cards/ProductCardImage/ProductCardImage.tsx b/src/components/ui/Cards/ProductCardImage/ProductCardImage.tsx
@@ -1,32 +1,26 @@
-import { Box, Typography, Paper } from "@mui/material";
-import Image from "next/image";
+import { Typography, Paper, Box } from "@mui/material";
 
 import { Product } from "src/types/product";
 
 import AddToCartButton from "../AddToCartButton/AddToCartButton";
+import { getImageStyle, stylePrice } from "../ProductCard/ProductCardStyle";
 
 export interface IProductCardImage {
   product: Product;
 }
 
 const ProductCardImage: React.FC<IProductCardImage> = ({ product }) => {
   return (
-    <Paper>
-      <Image
-        alt={product.title}
-        src={product.previewImageUrl}
-        width={218}
-        height={218}
-        layout="responsive"
-      />
+    <Paper style={getImageStyle(product, false)}>
       <Box
-        paddingX={3}
-        paddingY={1}
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          width: "100%",
+          padding: "5px",
+        }}
       >
-        <Typography>{product.price}</Typography>
+        <Typography style={stylePrice}>{product.price}</Typography>
         <AddToCartButton product={product} />
       </Box>
     </Paper>

diff --git a/src/components/ui/Cards/ProductCardTinyButton/ProductCardTinyButton.tsx b/src/components/ui/Cards/ProductCardTinyButton/ProductCardTinyButton.tsx
@@ -1,9 +1,9 @@
-import { Box, Typography, Paper } from "@mui/material";
-import Image from "next/image";
+import { Box, Paper, Typography } from "@mui/material";
 
 import { Product } from "src/types/product";
 
 import AddToCartButton from "../AddToCartButton/AddToCartButton";
+import { getImageStyle, stylePrice } from "../ProductCard/ProductCardStyle";
 
 export interface IProductCardTinyButton {
   product: Product;
@@ -14,21 +14,27 @@ const ProductCardTinyButton: React.FC<IProductCardTinyButton> = ({
 }) => {
   return (
     <Paper>
-      <Image
-        alt={product.title}
-        src={product.previewImageUrl}
-        width={218}
-        height={218}
-        layout="responsive"
-      />
-      <Box paddingX={3} paddingY={1}>
-        <Typography>{product.title}</Typography>
-
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Typography variant="caption">{product.price}</Typography>
+      <Box style={getImageStyle(product, true)}>
+        <Box
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            width: "100%",
+            padding: "5px",
+          }}
+        >
+          <Typography style={stylePrice}>{product.price}</Typography>
           <AddToCartButton product={product} tiny />
         </Box>
       </Box>
+      <Typography
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        {product.title}
+      </Typography>
     </Paper>
   );
 };