Merge pull request #5657 from msupply-foundation/5584-updated-program…

…-icons 5584 Updated program icons/styles
msupply-foundation · Dec 2, 2024 · aa84ee0 · aa84ee0
2 parents a22a385 + ce0ca63
commit aa84ee0
Show file tree

Hide file tree

Showing 33 changed files with 1,082 additions and 145 deletions.
diff --git a/client/packages/common/src/styles/theme.ts b/client/packages/common/src/styles/theme.ts
@@ -102,6 +102,12 @@ declare module '@mui/material/styles/createPalette' {
       pending: string;
       late: string;
     };
+    programs: {
+      encounterCategory: string;
+      encounterCategoryHover: string;
+      iconGradientStart: string;
+      iconGradientStop: string;
+    };
     drawerDivider: string;
     gray: PaletteColor & { pale: string };
     outline: Palette['primary'];
@@ -228,6 +234,12 @@ export const themeOptions = {
       pending: 'info.light',
       late: 'error.main',
     },
+    programs: {
+      encounterCategory: '#e7effe',
+      encounterCategoryHover: '#D2DFFF',
+      iconGradientStart: '#E73735',
+      iconGradientStop: '#FC7E08',
+    },
   },
   zIndex: {
     tableHeader: 1000,

diff --git a/client/packages/host/public/medical-icons.css b/client/packages/host/public/medical-icons.css
diff --git a/client/packages/host/webpack.config.js b/client/packages/host/webpack.config.js
@@ -155,7 +155,6 @@ module.exports = env => {
       }),
       new CopyPlugin({
         patterns: [
-          { from: './public/medical-icons.css', to: 'medical-icons.css' },
           { from: './public/game', to: 'game' },
           {
             context: path.resolve(

diff --git a/client/packages/programs/src/JsonForms/common/components/CategorizationTabLayout.tsx b/client/packages/programs/src/JsonForms/common/components/CategorizationTabLayout.tsx
@@ -23,9 +23,11 @@ import {
   Grid,
   Hidden,
   Typography,
-  styled,
   isEmpty,
+  Box,
+  ChevronDownIcon,
 } from '@openmsupply-client/common';
+import { ProgramsIcons } from '@openmsupply-client/programs';
 import { ModalProps, useDialog } from '@common/hooks';
 import {
   AjvProps,
@@ -61,12 +63,6 @@ export const categorizationTabLayoutTester: RankedTester = rankWith(
   )
 );
 
-const Icon = styled('i')(({ theme }) => ({
-  backgroundColor: theme.palette.primary.main,
-  height: 50,
-  width: 50,
-}));
-
 // Specialized layout render to fix some layout issues in the modal
 const CategoryLayoutRendererComponent = ({
   visible,
@@ -215,7 +211,7 @@ const UIComponent: FC<LayoutProps & AjvProps> = ({
     elements:
       activeCategory === undefined
         ? []
-        : categorization.elements[activeCategory]?.elements ?? [],
+        : (categorization.elements[activeCategory]?.elements ?? []),
     schema,
     // assume the root path if not specified
     path: path ?? '',
@@ -241,43 +237,74 @@ const UIComponent: FC<LayoutProps & AjvProps> = ({
       gap={2}
       padding={2}
     >
-      {categories.map((category: Category, idx: number) => (
-        <Grid item key={category.label}>
-          <Button
-            variant="outlined"
-            startIcon={<Icon className={`${category.options?.['icon']}`} />}
-            key={category.label}
-            onClick={() => setActiveCategory(idx)}
-            sx={{
-              width: '150px',
-              height: '150px',
-              flexDirection: 'column',
-              textTransform: 'none',
-              '& .MuiButton-startIcon': {
-                paddingBottom: '8px',
-                margin: 0,
-              },
-            }}
-          >
-            {category.label}
-            <ErrorStringComponent category={category} errorPaths={errorPaths} />
-          </Button>
-          <CategoryModal
-            sx={{
-              '& .MuiDialogTitle-root': {
-                fontSize: '1.5em',
-              },
-            }}
-            onClose={onClose}
-            isOpen={activeCategory === idx}
-            title={category.options?.['title'] ?? category.label}
-            okButton={<DialogButton variant="ok" onClick={onClose} />}
-            width={700}
-          >
-            <CategoryLayoutRenderer {...childProps} />
-          </CategoryModal>
-        </Grid>
-      ))}
+      {categories.map((category: Category, idx: number) => {
+        const iconName = category?.options?.[
+          'icon'
+        ] as keyof typeof ProgramsIcons;
+        const CategoryIcon =
+          ProgramsIcons[iconName] ?? ProgramsIcons['stethoscope'];
+        return (
+          <Grid item key={category.label}>
+            <Button
+              variant="outlined"
+              startIcon={<CategoryIcon sx={{ fontSize: '5em !important' }} />}
+              key={category.label}
+              onClick={() => setActiveCategory(idx)}
+              sx={{
+                width: '150px',
+                height: '150px',
+                padding: '5px 10px',
+                flexDirection: 'column',
+                textTransform: 'none',
+                '& .MuiButton-startIcon': {
+                  margin: 0,
+                },
+                border: 'none',
+                backgroundColor: 'programs.encounterCategory',
+                borderRadius: 5,
+                color: 'secondary.main',
+                '&:hover': {
+                  border: 'none',
+                  backgroundColor: 'programs.encounterCategoryHover',
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  lineHeight: 1.4,
+                  fontWeight: 600,
+                }}
+              >
+                {category.label}
+                <ChevronDownIcon
+                  fontSize="medium"
+                  sx={{ transform: 'rotate(-90deg)' }}
+                />
+              </Box>
+              <ErrorStringComponent
+                category={category}
+                errorPaths={errorPaths}
+              />
+            </Button>
+            <CategoryModal
+              sx={{
+                '& .MuiDialogTitle-root': {
+                  fontSize: '1.5em',
+                },
+              }}
+              onClose={onClose}
+              isOpen={activeCategory === idx}
+              title={category.options?.['title'] ?? category.label}
+              okButton={<DialogButton variant="ok" onClick={onClose} />}
+              width={700}
+            >
+              <CategoryLayoutRenderer {...childProps} />
+            </CategoryModal>
+          </Grid>
+        );
+      })}
     </Grid>
   );
 };

diff --git a/client/packages/programs/src/icons/Contraceptive.tsx b/client/packages/programs/src/icons/Contraceptive.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import { GradientStops } from './_gradient';
+
+export const ContraceptiveIcon = (props: SvgIconProps): JSX.Element => (
+  <SvgIcon {...props} viewBox="0 0 60 60" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M30.5025 10L12 14.5644V24.0421C12 36.6282 19.6174 47.6823 30.1059 50.3278L30.5102 50.4289L30.8909 50.3278C41.3826 47.6792 49 36.625 49 24.0388V14.564L30.5025 10ZM47.0308 24.0421C47.0308 35.6978 40.0926 45.9195 30.4977 48.3976C20.9108 45.9274 13.9646 35.7027 13.9646 24.0421V16.1057L30.5005 12.0261L47.0304 16.1057L47.0308 24.0421ZM15.7318 24.0421V17.4925L30.5025 13.8457L45.2635 17.4925V24.0421C45.2635 34.7251 39.0846 44.0971 30.4977 46.5672C21.9058 44.0924 15.7318 34.7251 15.7318 24.0421ZM30.6595 37.9892C35.3828 37.9892 39.2117 34.1602 39.2117 29.437C39.2117 24.7137 35.3828 20.8847 30.6595 20.8847C25.9362 20.8847 22.1072 24.7137 22.1072 29.437C22.1072 34.1602 25.9362 37.9892 30.6595 37.9892ZM30.6139 27.0912C30.9007 26.4423 31.6943 25.9383 32.63 25.9383C33.7828 25.9383 35.0053 26.5871 35.1501 28.4556V28.6004C35.1501 31.9142 30.6139 33.7131 30.6139 33.7131C30.6139 33.7131 26.1501 31.9114 26.1501 28.6004V28.3136C26.2949 26.5871 27.4449 25.9383 28.5978 25.9383C29.5334 25.9383 30.3271 26.37 30.6139 27.0912Z"
+      fill="url(#paint0_linear_247_41468)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_247_41468"
+        x1="30.6501"
+        y1="25.9383"
+        x2="30.6501"
+        y2="33.7131"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+    </defs>
+  </SvgIcon>
+);
diff --git a/client/packages/programs/src/icons/Docs.tsx b/client/packages/programs/src/icons/Docs.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import { GradientStops } from './_gradient';
+
+export const DocsIcon = (props: SvgIconProps): JSX.Element => (
+  <SvgIcon {...props} viewBox="0 0 60 60" fill="none">
+    <path
+      d="M14.8141 50.9128H41.9181V52H13V13.962H14.0899V50.1887C14.0899 50.5888 14.4144 50.9128 14.8141 50.9128ZM16.6282 47.6504V11.4238H15.5383V49.4645H44.4563V48.3746H17.3523C16.9522 48.3746 16.6282 48.0505 16.6282 47.6504ZM41.7797 9.02483V13.835H46.588L41.7797 9.02483ZM41.0555 15.2834H47.612V46.9263H18.0765V8H40.3309V14.5592C40.3309 14.9593 40.6558 15.2834 41.0555 15.2834ZM22.966 17.7034C22.966 18.1035 23.2905 18.4275 23.6902 18.4275H34.4601C34.8602 18.4275 35.1842 18.1035 35.1842 17.7034C35.1842 17.3032 34.8597 16.9792 34.4601 16.9792H23.6902C23.29 16.9792 22.966 17.3032 22.966 17.7034ZM31.0702 42.4121C31.0702 42.012 30.7458 41.688 30.3461 41.688H23.6906C23.2905 41.688 22.9665 42.012 22.9665 42.4121C22.9665 42.8122 23.291 43.1363 23.6906 43.1363H30.3461C30.7462 43.1363 31.0702 42.8122 31.0702 42.4121ZM42.7229 42.2861C42.7229 41.886 42.3984 41.5619 41.9987 41.5619H38.6717C38.8725 40.9143 38.8404 40.2318 38.5539 39.6342C38.2015 38.8999 37.5213 38.4737 36.7737 38.5232C36.0592 38.5704 34.7108 39.1085 33.7038 42.1871C33.5796 42.567 33.7868 42.9763 34.1672 43.1005C34.2419 43.1248 34.318 43.1367 34.3927 43.1367C34.6975 43.1367 34.9812 42.9429 35.0811 42.6372C35.754 40.5793 36.5217 39.9912 36.8691 39.9688C37.0707 39.955 37.1931 40.1461 37.2486 40.2612C37.4296 40.6379 37.3916 41.259 36.8984 41.797C36.7045 42.0088 36.6541 42.315 36.7696 42.578C36.8856 42.8407 37.1455 43.0107 37.4324 43.0107H41.9992C42.3993 43.0107 42.7234 42.6867 42.7234 42.2865L42.7229 42.2861ZM42.7229 34.9344C42.7229 34.5343 42.3984 34.2103 41.9987 34.2103H23.6906C23.2905 34.2103 22.9665 34.5343 22.9665 34.9344C22.9665 35.3345 23.291 35.6586 23.6906 35.6586H41.9987C42.3989 35.6586 42.7229 35.3345 42.7229 34.9344ZM42.7229 30.6279C42.7229 30.2278 42.3984 29.9038 41.9987 29.9038H23.6906C23.2905 29.9038 22.9665 30.2278 22.9665 30.6279C22.9665 31.028 23.291 31.3521 23.6906 31.3521H41.9987C42.3989 31.3521 42.7229 31.028 42.7229 30.6279ZM42.7229 26.3187C42.7229 25.9185 42.3984 25.5945 41.9987 25.5945H23.6906C23.2905 25.5945 22.9665 25.9185 22.9665 26.3187C22.9665 26.7188 23.291 27.0428 23.6906 27.0428H41.9987C42.3989 27.0428 42.7229 26.7188 42.7229 26.3187ZM41.9987 21.288H23.6906C23.2905 21.288 22.9665 21.612 22.9665 22.0122C22.9665 22.4123 23.291 22.7363 23.6906 22.7363H41.9987C42.3989 22.7363 42.7229 22.4123 42.7229 22.0122C42.7229 21.612 42.3984 21.288 41.9987 21.288Z"
+      fill="url(#paint0_linear_247_41391)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_247_41391"
+        x1="30.306"
+        y1="8"
+        x2="30.306"
+        y2="52"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+    </defs>
+  </SvgIcon>
+);
diff --git a/client/packages/programs/src/icons/GenderBasedViolence.tsx b/client/packages/programs/src/icons/GenderBasedViolence.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import { GradientStops } from './_gradient';
+
+export const GenderBasedViolenceIcon = (props: SvgIconProps): JSX.Element => (
+  <SvgIcon {...props} viewBox="0 0 60 60" fill="none">
+    <path
+      d="M18.543 11.5821C18.9739 11.5821 19.3873 11.4109 19.692 11.1061C19.9969 10.8014 20.168 10.388 20.168 9.95705V5.62506C20.168 5.04448 19.8582 4.50806 19.3555 4.21772C18.8527 3.92743 18.2332 3.92743 17.7305 4.21772C17.2277 4.50802 16.918 5.04444 16.918 5.62506V9.95705C16.918 10.388 17.0893 10.8014 17.3939 11.1061C17.6986 11.4109 18.112 11.5821 18.543 11.5821Z"
+      fill="url(#paint0_linear_247_41536)"
+    />
+    <path
+      d="M10.9572 15.9121H6.62506C6.04448 15.9121 5.50806 16.2219 5.21772 16.7246C4.92743 17.2274 4.92743 17.8469 5.21772 18.3496C5.50802 18.8524 6.04444 19.1621 6.62506 19.1621H10.9572C11.5378 19.1621 12.0742 18.8523 12.3646 18.3496C12.6549 17.8469 12.6549 17.2274 12.3646 16.7246C12.0743 16.2219 11.5378 15.9121 10.9572 15.9121Z"
+      fill="url(#paint1_linear_247_41536)"
+    />
+    <path
+      d="M11.0222 7.72511C10.6117 7.31445 10.0133 7.15415 9.45252 7.30447C8.8917 7.45479 8.45381 7.89268 8.30349 8.4535C8.15317 9.01432 8.31348 9.61266 8.72413 10.0232L11.9772 13.2762C12.2813 13.5841 12.6955 13.7579 13.1284 13.7593C13.561 13.7606 13.9764 13.5893 14.2825 13.2835C14.5883 12.9774 14.7596 12.5621 14.7584 12.1294C14.7571 11.6967 14.5832 11.2823 14.2753 10.9782L11.0222 7.72511Z"
+      fill="url(#paint2_linear_247_41536)"
+    />
+    <path
+      d="M16.916 27.8332C16.916 28.6072 17.3291 29.3226 17.9994 29.7095C18.6697 30.0967 19.4957 30.0967 20.166 29.7095C20.8364 29.3226 21.2494 28.6072 21.2494 27.8332C21.2499 26.1625 21.7722 24.5336 22.7434 23.174C23.7145 21.8144 25.0859 20.792 26.666 20.2497L22.3327 40.8113C22.2994 41.1075 22.4002 41.4033 22.6079 41.6172C22.8156 41.8312 23.1081 41.9409 23.4052 41.9163H25.5718V53.833C25.5718 54.6071 25.9849 55.3224 26.6552 55.7094C27.3255 56.0965 28.1515 56.0965 28.8218 55.7094C29.4922 55.3224 29.9052 54.6071 29.9052 53.833V14.833C22.311 15.2988 16.916 20.6397 16.916 27.833L16.916 27.8332Z"
+      fill="url(#paint3_linear_247_41536)"
+    />
+    <path
+      d="M26.6543 8.33333C26.6506 9.31089 26.966 10.263 27.5525 11.045C28.139 11.8273 28.9647 12.3965 29.9043 12.6667V4C28.9647 4.27016 28.139 4.83941 27.5525 5.62162C26.966 6.40366 26.6506 7.35582 26.6543 8.33333Z"
+      fill="url(#paint4_linear_247_41536)"
+    />
+    <path
+      d="M32.0938 14.8331V53.8331C32.0938 54.6072 32.5068 55.3225 33.1771 55.7095C33.8474 56.0966 34.6734 56.0966 35.3438 55.7095C36.0141 55.3225 36.4271 54.6072 36.4271 53.8331V20.2498C37.765 21.0057 38.8734 22.1101 39.6344 23.4451C40.3955 24.7803 40.7809 26.2966 40.7496 27.833C40.7496 28.6071 41.1626 29.3224 41.8329 29.7094C42.5032 30.0965 43.3293 30.0965 43.9996 29.7094C44.6699 29.3224 45.0829 28.6071 45.0829 27.833C45.0829 20.6397 39.6771 15.2988 32.0938 14.833V14.8331Z"
+      fill="url(#paint5_linear_247_41536)"
+    />
+    <path
+      d="M35.3437 8.33333C35.3475 7.35578 35.0321 6.40366 34.4456 5.62162C33.8591 4.83941 33.0333 4.27014 32.0938 4V12.6667C33.0334 12.3965 33.8591 11.8273 34.4456 11.045C35.0321 10.263 35.3474 9.31085 35.3437 8.33333Z"
+      fill="url(#paint6_linear_247_41536)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_247_41536"
+        x1="18.543"
+        y1="4"
+        x2="18.543"
+        y2="11.5821"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_247_41536"
+        x1="8.79114"
+        y1="15.9121"
+        x2="8.79114"
+        y2="19.1621"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_247_41536"
+        x1="11.5032"
+        y1="7.24902"
+        x2="11.5032"
+        y2="13.7593"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_247_41536"
+        x1="23.4106"
+        y1="14.833"
+        x2="23.4106"
+        y2="55.9997"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_247_41536"
+        x1="28.2793"
+        y1="4"
+        x2="28.2793"
+        y2="12.6667"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+      <linearGradient
+        id="paint5_linear_247_41536"
+        x1="38.5883"
+        y1="14.833"
+        x2="38.5883"
+        y2="55.9998"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+      <linearGradient
+        id="paint6_linear_247_41536"
+        x1="33.7188"
+        y1="4"
+        x2="33.7188"
+        y2="12.6667"
+        gradientUnits="userSpaceOnUse"
+      >
+        <GradientStops />
+      </linearGradient>
+    </defs>
+  </SvgIcon>
+);