Merge pull request #178 from 0101oak/feature/improve-care-composition-cards-styles

improve care composition cards styles

Author: ijustseeblood

package.json

@@ -68,6 +68,7 @@
     "@types/react-color": "^3.0.7",
     "@types/react-image-crop": "^8.1.6",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-swipeable-views": "^0.13.5",
     "axios": "^1.6.7",
     "buffer": "^6.0.3",
     "calculate-aspect-ratio": "^0.1.3",
@@ -99,6 +100,7 @@
     "react-router": "^6.22.3",
     "react-router-dom": "^6.22.3",
     "react-select-country-list": "^2.2.3",
+    "react-swipeable-views": "^0.14.0",
     "react-text-expander": "^1.0.0",
     "react-text-truncate": "^0.19.0",
     "react-use-auth": "^2.1.0-14",

src/components/managers/products/genericProductComponent/care/care.scss

@@ -23,6 +23,7 @@
       padding: 0.4rem;
       display: flex;
       justify-content: center;
+      align-items: center;
       flex: 0 0 auto;
     }
 

src/components/managers/products/genericProductComponent/care/careInstructions.tsx

@@ -12,6 +12,7 @@ import {
   useTheme,
 } from '@mui/material';
 import { FC, useState } from 'react';
+import SwipeableViews from 'react-swipeable-views';
 import styles from './care.scss';
 import { careInstruction } from './careInstruction';
 
@@ -41,6 +42,11 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
   const [selectedCare, setSelectedCare] = useState<string | null>('Washing');
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const currentCategoryIndex = careCategories.indexOf(selectedCare!);
+
+  const handleCategorySwipe = (index: number) => {
+    setSelectedCare(careCategories[index]);
+  };
 
   const handleSelectCare = (category: string) => {
     setSelectedCare(category);
@@ -65,16 +71,23 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
                 <Grid container className={styles['care-card']}>
                   {img && (
                     <Grid className={styles['care-card-img-container']}>
-                      <img src={img} alt={method} style={{ width: isMobile ? '25px' : '50px' }} />
+                      <img
+                        src={img}
+                        alt={method}
+                        style={{
+                          width: isMobile ? '30px' : '50px',
+                          ...(isSelected && { width: '80%' }),
+                        }}
+                      />
                     </Grid>
                   )}
                   <Grid className={styles['care-card-text']}>
                     <Typography
                       variant='overline'
-                      fontSize={isMobile ? '0.4em' : '0.55em'}
+                      fontSize={isMobile ? '0.4em' : '0.58em'}
                       className={styles.text}
                     >
-                      {method}
+                      {isSelected ? code : method}
                     </Typography>
                   </Grid>
                 </Grid>
@@ -119,23 +132,45 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
       </IconButton>
       <Grid container spacing={2} sx={{ p: 2 }}>
         <Grid size={{ xs: 12 }} sx={{ display: 'flex', justifyContent: 'center' }}>
-          <FormControl>
-            <RadioGroup
-              row
-              value={selectedCare}
-              onChange={(e) => handleSelectCare(e.target.value)}
-              sx={{ gap: 4 }}
+          {isMobile ? (
+            <SwipeableViews
+              index={currentCategoryIndex}
+              onChangeIndex={handleCategorySwipe}
+              enableMouseEvents
+              resistance
+              style={{ width: '100%' }}
             >
               {careCategories.map((category) => (
-                <FormControlLabel
+                <Typography
                   key={category}
-                  value={category}
-                  control={<Radio />}
-                  label={category}
-                />
+                  variant='h6'
+                  textTransform='uppercase'
+                  align='center'
+                  sx={{ p: 1 }}
+                >
+                  {category}
+                </Typography>
               ))}
-            </RadioGroup>
-          </FormControl>
+            </SwipeableViews>
+          ) : (
+            <FormControl>
+              <RadioGroup
+                row
+                value={selectedCare}
+                onChange={(e) => handleSelectCare(e.target.value)}
+                sx={{ gap: 4 }}
+              >
+                {careCategories.map((category) => (
+                  <FormControlLabel
+                    key={category}
+                    value={category}
+                    control={<Radio />}
+                    label={category.toUpperCase()}
+                  />
+                ))}
+              </RadioGroup>
+            </FormControl>
+          )}
         </Grid>
         {selectedCare && (
           <Grid size={{ xs: 12 }}>

src/components/managers/products/genericProductComponent/composition/composition-modal/composition-modal.tsx

@@ -9,8 +9,11 @@ import {
   RadioGroup,
   TextField,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from '@mui/material';
 import { FC, useEffect, useMemo, useState } from 'react';
+import SwipeableViews from 'react-swipeable-views';
 import { composition } from '../garment-composition/garment-composition';
 import styles from '../styles/composition.scss';
 
@@ -41,6 +44,9 @@ export const CompositionModal: FC<CompositionModalProps> = ({
   const isSelected = (key: string) => {
     return !!localSelectedInstructions[key];
   };
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const currentCategoryIndex = compositionCategories.indexOf(selectedCategory);
 
   useEffect(() => {
     setLocalSelectedInstructions(selectedInstructions);
@@ -50,6 +56,10 @@ export const CompositionModal: FC<CompositionModalProps> = ({
     return Object.values(localSelectedInstructions).reduce((acc, curr) => acc + curr.percentage, 0);
   }, [localSelectedInstructions]);
 
+  const handleCategorySwipe = (index: number) => {
+    setSelectedCategory(compositionCategories[index]);
+  };
+
   const handlePercentageChange = (key: string, value: string) => {
     const percentage = parseInt(value) || 0;
     if (percentage >= 0 && percentage <= 100) {
@@ -97,6 +107,7 @@ export const CompositionModal: FC<CompositionModalProps> = ({
     <Dialog
       open={isOpen}
       onClose={onClose}
+      fullScreen={isMobile}
       fullWidth
       maxWidth='xl'
       PaperProps={{ sx: { p: 2, position: 'relative' } }}
@@ -105,29 +116,54 @@ export const CompositionModal: FC<CompositionModalProps> = ({
         <CloseIcon />
       </IconButton>
       <Grid container spacing={2}>
-        <Grid size={{ xs: 12 }} sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>
-          <FormControl>
-            <RadioGroup
-              row
-              value={selectedCategory}
-              onChange={(e) => handleSelectCategory(e.target.value)}
-              sx={{
-                gap: 1,
-                '& .MuiFormControlLabel-root': {
-                  minWidth: 'fit-content',
-                },
-              }}
+        <Grid
+          size={{ xs: 12 }}
+          sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', p: 1 }}
+        >
+          {isMobile ? (
+            <SwipeableViews
+              index={currentCategoryIndex}
+              onChangeIndex={handleCategorySwipe}
+              enableMouseEvents
+              resistance
+              style={{ width: '100%' }}
             >
               {compositionCategories.map((category) => (
-                <FormControlLabel
+                <Typography
                   key={category}
-                  value={category}
-                  control={<Radio />}
-                  label={category}
-                />
+                  variant='h6'
+                  textTransform='uppercase'
+                  align='center'
+                  sx={{ p: 1 }}
+                >
+                  {category}
+                </Typography>
               ))}
-            </RadioGroup>
-          </FormControl>
+            </SwipeableViews>
+          ) : (
+            <FormControl>
+              <RadioGroup
+                value={selectedCategory}
+                onChange={(e) => handleSelectCategory(e.target.value)}
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(2, 1fr)',
+                  '& .MuiFormControlLabel-root': {
+                    minWidth: 'fit-content',
+                  },
+                }}
+              >
+                {compositionCategories.map((category) => (
+                  <FormControlLabel
+                    key={category}
+                    value={category}
+                    control={<Radio />}
+                    label={category.toUpperCase()}
+                  />
+                ))}
+              </RadioGroup>
+            </FormControl>
+          )}
         </Grid>
         <Grid size={{ xs: 12 }}>
           <Grid container spacing={2}>