feat module 6, 7 : reduce the size of product info label and details inside - web, mobile view

src/components/ProductDetails/ProductDetails.jsx

@@ -386,16 +386,27 @@ const ProductDetails = () => {
     borderBottom: "1px solid #DDD"
   }
 
+  // Styles for the content inside each information panel (e.g., Material, Care Instruction)
   const infoPanelContentSx = {
     color: "text.secondary",
     fontSize: {
-      xs: "0.875rem",
-      md: "1rem"
+      xs: "0.8rem",
+      md: "0.90rem"
     },
     lineHeight: 1.6,
     pb: 2.5
   }
 
+  // Styles for the label of each information row (e.g., Material, Care Instruction)
+  const infoRowLabelSx = {
+    textTransform: "uppercase",
+    fontWeight: "400",
+    fontSize: {
+      xs: "0.8rem",
+      md: "0.90rem"
+    }
+  }
+
   const materialMetafield = product?.metafields?.material
   const careInstructionMetafield = product?.metafields?.care_instruction
   const shippingInformationMetafield = product?.metafields?.shipping_information
@@ -826,38 +837,9 @@ const ProductDetails = () => {
           </Alert>
         )}
 
-        {/*
-        {/*
-        <Box sx={{ mb: 5 }}>
-          <Typography variant="body1" sx={{ fontWeight: "400", color: "#000" }}>
-            Description
-          </Typography>
-          <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
-            <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
-          </Typography>
-        </Box>
-        */}
-
-        {/* <Box sx={{ mb: 5 }}>
-          <Typography variant="body1" sx={{ fontWeight: "400", color: "#000" }}>
-            Description
-          </Typography>
-          <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
-            <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
-          </Typography>
-        </Box> */}
-
         {/* Product information rows: store availability, details, material, care, shipping, and returns */}
         <Box sx={{ mt: 4, borderTop: "1px solid #DDD" }}>
           {/* Store Availability */}
-          {/*
-          <Box sx={{ display: "flex", alignItems: "center", py: 2, borderBottom: "1px solid #DDD" }}>
-            <StorefrontIcon sx={{ mr: 1, fontSize: 20 }} />
-            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
-              Store Availability
-            </Typography>
-          </Box>
-          */}
           <Box
             onClick={() => setStoreAvailabilityOpen(true)}
             sx={{
@@ -869,7 +851,7 @@ const ProductDetails = () => {
             }}
           >
             <StorefrontIcon sx={{ mr: 1, fontSize: 20 }} />
-            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+            <Typography variant="body2" sx={infoRowLabelSx}>
               Store Availability
             </Typography>
           </Box>
@@ -883,7 +865,7 @@ const ProductDetails = () => {
               borderBottom: "none"
             }}
           >
-            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+            <Typography variant="body2" sx={infoRowLabelSx}>
               Product Details
             </Typography>
             {expandedInfoRows.productDetails ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
@@ -899,7 +881,7 @@ const ProductDetails = () => {
               borderBottom: "none"
             }}
           >
-            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+            <Typography variant="body2" sx={infoRowLabelSx}>
               Material
             </Typography>
             {expandedInfoRows.material ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
@@ -915,7 +897,7 @@ const ProductDetails = () => {
               borderBottom: "none"
             }}
           >
-            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+            <Typography variant="body2" sx={infoRowLabelSx}>
               Care Instruction
             </Typography>
             {expandedInfoRows.careInstruction ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
@@ -931,7 +913,7 @@ const ProductDetails = () => {
               borderBottom: "none"
             }}
           >
-            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+            <Typography variant="body2" sx={infoRowLabelSx}>
               Shipping Information
             </Typography>
             {expandedInfoRows.shippingInformation ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
@@ -947,7 +929,7 @@ const ProductDetails = () => {
               borderBottom: "none"
             }}
           >
-            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+            <Typography variant="body2" sx={infoRowLabelSx}>
               Return & Exchanges
             </Typography>
             {expandedInfoRows.returnExchanges ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
@@ -964,7 +946,7 @@ const ProductDetails = () => {
                 borderBottom: "none"
               }}
             >
-              <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+              <Typography variant="body2" sx={infoRowLabelSx}>
                 Note
               </Typography>
               {expandedInfoRows.note ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}