refactor icon size into theme

SocialGouv · Oct 6, 2020 · 9c25483 · 9c25483
1 parent 713ea1c
commit 9c25483
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 24 deletions.
diff --git a/targets/frontend/src/components/alerts/AlertTitle.js b/targets/frontend/src/components/alerts/AlertTitle.js
@@ -25,7 +25,7 @@ export function AlertTitle({ alertId, info, ...props }) {
           <IconButton variant="secondary">
             <IoIosLink
               aria-label="Voir la convention sur legifrance"
-              style={{ height: "1em", width: "1em" }}
+              style={{ height: "iconXSmall", width: "iconXSmall" }}
             />
           </IconButton>
         </a>
@@ -38,7 +38,7 @@ export function AlertTitle({ alertId, info, ...props }) {
       >
         <IoMdChatbubbles
           aria-label="Voir les commentaires"
-          style={{ height: "1em", width: "1em" }}
+          style={{ height: "iconXSmall", width: "iconXSmall" }}
         />
       </IconButton>
       {showComment && <Comments alertId={alertId} />}

diff --git a/targets/frontend/src/components/alerts/Status.js b/targets/frontend/src/components/alerts/Status.js
@@ -33,10 +33,12 @@ export function AlertStatus({ alertId }) {
         En cours
       </MenuItem>
       <MenuItem onSelect={() => updateStatus("done")}>
-        <IoIosCheckmark style={{ height: "1.5em", width: "1.5em" }} /> Traité
+        <IoIosCheckmark style={{ height: "iconSmall", width: "iconSmall" }} />{" "}
+        Traité
       </MenuItem>
       <MenuItem onSelect={() => updateStatus("rejected")}>
-        <IoIosClose style={{ height: "1.5em", width: "1.5em" }} /> Rejeté
+        <IoIosClose style={{ height: "iconSmall", width: "iconSmall" }} />{" "}
+        Rejeté
       </MenuItem>
     </MenuButton>
   );

diff --git a/targets/frontend/src/components/forms/ContentPicker/SortableList.js b/targets/frontend/src/components/forms/ContentPicker/SortableList.js
@@ -65,7 +65,7 @@ const SortableRow = SortableElement(
               onDeleteContent(cdtnId);
             }}
           >
-            <IoMdTrash sx={{ height: "1.4rem", width: "1.4rem" }} />
+            <IoMdTrash sx={{ height: "iconSmall", width: "iconSmall" }} />
           </Button>
         </Flex>
       )}
@@ -79,6 +79,6 @@ const SortHandle = SortableHandle(() => (
     type="button"
     sx={{ cursor: "grab", flex: "0 0 auto", height: "auto", mr: "xsmall" }}
   >
-    <IoIosReorder sx={{ height: "2rem", width: "2rem" }} />
+    <IoIosReorder sx={{ height: "iconMedium", width: "iconMedium" }} />
   </IconButton>
 ));
diff --git a/targets/frontend/src/components/forms/IconPicker.js b/targets/frontend/src/components/forms/IconPicker.js
@@ -78,18 +78,18 @@ function RootIconPicker({ disabled, value, onChange }) {
             }}
             sx={{
               bg: "white",
-              height: "2rem",
+              height: "iconMedium",
               ml: "xsmall",
               position: "absolute",
               right: "-0.5rem",
               top: "-0.5rem",
-              width: "2rem",
+              width: "iconMedium",
             }}
           >
             <IoMdCloseCircle
               sx={{
-                height: "1.5rem",
-                width: "1.5rem",
+                height: "iconSmall",
+                width: "iconSmall",
               }}
             />
           </IconButton>

diff --git a/targets/frontend/src/components/themes/List.js b/targets/frontend/src/components/themes/List.js
@@ -126,9 +126,9 @@ const ThemeRow = SortableElement(({ isAdmin, sortable, theme }) => (
           <IoIosArrowDroprightCircle
             sx={{
               color: "secondary",
-              height: "2rem",
+              height: "iconMedium",
               ml: "small",
-              width: "2rem",
+              width: "iconMedium",
             }}
           />
         </Flex>
@@ -142,6 +142,6 @@ const SortHandle = SortableHandle(() => (
     variant="secondary"
     sx={{ cursor: "grab", height: "auto", mr: "xsmall" }}
   >
-    <IoIosReorder sx={{ height: "2rem", width: "2rem" }} />
+    <IoIosReorder sx={{ height: "iconMedium", width: "iconMedium" }} />
   </IconButton>
 ));
diff --git a/targets/frontend/src/components/themes/MapModal.js b/targets/frontend/src/components/themes/MapModal.js
@@ -15,7 +15,9 @@ export const MapModal = () => {
     <>
       <Flex sx={{ justifyContent: "flex-end" }}>
         <Button variant="secondary" onClick={() => setShowThemeMap(true)}>
-          <IoMdMap sx={{ height: "2rem", mr: "small", width: "2rem" }} />
+          <IoMdMap
+            sx={{ height: "iconMedium", mr: "small", width: "iconMedium" }}
+          />
           Carte des thèmes
         </Button>
       </Flex>

diff --git a/targets/frontend/src/pages/themes/[[...id]].js b/targets/frontend/src/pages/themes/[[...id]].js
@@ -127,9 +127,9 @@ export function ThemePage() {
                       <IoMdCreate
                         sx={{
                           flex: "0 0 auto",
-                          height: "1.5rem",
+                          height: "iconSmall",
                           mr: "xxsmall",
-                          width: "1.5rem",
+                          width: "iconSmall",
                         }}
                       />
                       Éditer
@@ -139,9 +139,9 @@ export function ThemePage() {
                       <IoMdEye
                         sx={{
                           flex: "0 0 auto",
-                          height: "1.5rem",
+                          height: "iconSmall",
                           mr: "xxsmall",
-                          width: "1.5rem",
+                          width: "iconSmall",
                         }}
                       />
                       Consulter
@@ -192,7 +192,9 @@ const AddAThemeButton = ({ themeId }) => (
       passHref
     >
       <Button as="a" sx={{ mr: "medium" }}>
-        <IoMdAdd sx={{ height: "2rem", mr: "xxsmall", width: "2rem" }} />
+        <IoMdAdd
+          sx={{ height: "iconMedium", mr: "xxsmall", width: "iconMedium" }}
+        />
         Ajouter un thème ici
       </Button>
     </Link>
@@ -221,9 +223,9 @@ const ParentLink = ({ id, ...props }) => (
         <IoIosArrowDropleftCircle
           sx={{
             color: "secondary",
-            height: "2rem",
+            height: "iconMedium",
             mr: "small",
-            width: "2rem",
+            width: "iconMedium",
           }}
         />
         <div {...props} />

diff --git a/targets/frontend/src/pages/themes/edit/[id].js b/targets/frontend/src/pages/themes/edit/[id].js
@@ -180,7 +180,11 @@ export function EditThemePage() {
                     }}
                   >
                     <IoMdTrash
-                      sx={{ height: "1.5rem", mr: "xsmall", width: "1.5rem" }}
+                      sx={{
+                        height: "iconSmall",
+                        mr: "xsmall",
+                        width: "iconSmall",
+                      }}
                     />
                     Supprimer le thème
                   </Button>

diff --git a/targets/frontend/src/theme.js b/targets/frontend/src/theme.js
@@ -189,8 +189,9 @@ export const theme = {
       "0 0 4px 0px rgba(28,28,28,.1), 0 3px 18px -4px rgba(28,28,28,.1), 0 5px 30px -12px rgba(28,28,28,.2)",
   },
   sizes: {
-    normal: "xsmall",
-    small: "xxsmall",
+    iconsXSmall: "1rem",
+    iconSmall: "1.5rem",
+    iconMedium: "2rem",
     container: 1440,
   },
   space: {

diff --git a/yarn.lock b/yarn.lock
@@ -5410,6 +5410,11 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
   integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
 
+cuint@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
+  integrity sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -14346,6 +14351,13 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+xxhashjs@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
+  integrity sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==
+  dependencies:
+    cuint "^0.2.2"
+
 y18n@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"