style: improve content style

ddecrulle · Jul 16, 2023 · 0ea6515 · 0ea6515
1 parent 4933418
commit 0ea6515
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 51 deletions.
diff --git a/src/ui/components/pages/service/section/contentBloc.jsx b/src/ui/components/pages/service/section/contentBloc.jsx
@@ -23,20 +23,24 @@ export const ContentBloc = ({ functions, products }) => {
       } = getProduct(products, idProduct);
       return (
         <div key={idProduct} className={classes.productFunctions}>
-          <img src={iconUrl} alt='' height='50px' width='50px' />
-          <Divider
-            component='div'
-            orientation='vertical'
-            className={cx(
-              css({
-                backgroundColor: color,
-              }),
-              classes.titleDivider
-            )}
-          />
-          <Typography className={classes.productTitle} variant='h4'>
-            {labelProduct}
-          </Typography>
+          <div className={classes.title}>
+            <div>
+              <img src={iconUrl} alt='' height='50px' width='50px' />
+              <Divider
+                component='div'
+                orientation='vertical'
+                className={cx(
+                  css({
+                    backgroundColor: color,
+                  }),
+                  classes.titleDivider
+                )}
+              />
+            </div>
+            <Typography className={classes.productTitle} variant='h4'>
+              {labelProduct}
+            </Typography>
+          </div>
           <FunctionsByProducts
             productFunctions={groupedFunctions}
             labelProduct={labelProduct}
@@ -49,8 +53,12 @@ export const ContentBloc = ({ functions, products }) => {
 };
 
 const useStyles = makeStyles()((theme) => ({
+  title: {
+    display: 'inline-flex',
+  },
   titleDivider: {
     width: theme.spacing(6),
+    height: theme.spacing(0.5),
     borderWidth: '3px',
     borderRadius: '10px',
   },

diff --git a/src/ui/components/pages/service/serviceOffer.jsx b/src/ui/components/pages/service/serviceOffer.jsx
@@ -43,7 +43,10 @@ export const ServiceOffer = () => {
                     treeState={searchParams}
                     setTreeState={updateParams}
                     tree={products['children'] ?? []}
-                    autoCompleteLabel='Produits, GSBPM, Jalons ...'
+                    autoComplete={{
+                      isEnabled: true,
+                      label: 'Produits, GSBPM, Jalons ...',
+                    }}
                   />
                 </Card>
               </Box>

diff --git a/src/ui/components/pages/tools/productContentBloc/productContentBloc.jsx b/src/ui/components/pages/tools/productContentBloc/productContentBloc.jsx
@@ -12,32 +12,40 @@ export const ProductContentBloc = ({ products }) => {
     const { id, iconUrl, label: labelProduct, color, description } = product;
     return (
       <div key={id} className={classes.productFunctions}>
-        <img src={iconUrl} alt='' height='50px' width='50px' />
-        <Divider
-          component='div'
-          orientation='vertical'
-          className={cx(
-            css({
-              backgroundColor: color,
-            }),
-            classes.titleDivider
-          )}
-        />
-        <Typography className={classes.productTitle} variant='h4'>
-          {labelProduct}
-          <Typography textTransform='none' variant='body1' color='gray'>
-            {description}
+        <div className={classes.title}>
+          <div>
+            <img src={iconUrl} alt='' height='50px' width='50px' />
+            <Divider
+              component='div'
+              orientation='vertical'
+              className={cx(
+                css({
+                  backgroundColor: color,
+                }),
+                classes.titleDivider
+              )}
+            />
+          </div>
+          <Typography className={classes.productTitle} variant='h4'>
+            {labelProduct}
+            <Typography textTransform='none' variant='body1' color='gray'>
+              {description}
+            </Typography>
           </Typography>
-        </Typography>
+        </div>
         <ProductTools product={product} color={color} />
       </div>
     );
   });
 };
 
 const useStyles = makeStyles()((theme) => ({
+  title: {
+    display: 'inline-flex',
+  },
   titleDivider: {
     width: theme.spacing(6),
+    height: theme.spacing(0.5),
     borderWidth: '3px',
     borderRadius: '10px',
   },

diff --git a/src/ui/components/pages/tools/tools.jsx b/src/ui/components/pages/tools/tools.jsx
@@ -31,7 +31,7 @@ export const Tools = () => {
                     treeState={searchParams}
                     setTreeState={updateParams}
                     tree={products['children'] ?? []}
-                    autoCompleteLabel='Applications'
+                    autoComplete={{ isEnabled: false }}
                   />
                 </Card>
               </Box>

diff --git a/src/ui/components/shared/treeFilter/treeFilter.jsx b/src/ui/components/shared/treeFilter/treeFilter.jsx
@@ -15,12 +15,7 @@ const renderTree = (nodes) => (
   </TreeItem>
 );
 
-export const TreeFilter = ({
-  treeState,
-  setTreeState,
-  tree,
-  autoCompleteLabel,
-}) => {
+export const TreeFilter = ({ treeState, setTreeState, tree, autoComplete }) => {
   const { classes } = useStyles();
 
   const handleAutocomplete = (_, newValue) => {
@@ -45,19 +40,26 @@ export const TreeFilter = ({
 
   return (
     <>
-      <Autocomplete
-        multiple
-        className={classes.autocomplete}
-        id='tags-standard'
-        getOptionLabel={(option) => option.title}
-        renderInput={(params) => (
-          <TextField {...params} variant='outlined' label={autoCompleteLabel} />
-        )}
-        options={[]}
-        value={treeState.filtered}
-        onChange={handleAutocomplete}
-        disabled
-      />
+      {autoComplete.isEnabled && (
+        <Autocomplete
+          multiple
+          className={classes.autocomplete}
+          id='tags-standard'
+          getOptionLabel={(option) => option.title}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              variant='outlined'
+              label={autoComplete.label}
+            />
+          )}
+          options={[]}
+          value={treeState.filtered}
+          onChange={handleAutocomplete}
+          disabled
+        />
+      )}
+
       <Button
         onClick={handleCollapseClick}
         disabled={treeState.expanded.length === 0}