Icon component refactor (#442)

* Color inherit style is now applied as inline CSS instead of class * Minor reorganization of imports in icon component * Differentiated container and icon classname and style props in custom icon component
LIBCAS · Jul 23, 2024 · dcfc045 · dcfc045
1 parent b99c8fd
commit dcfc045
Show file tree

Hide file tree

Showing 16 changed files with 65 additions and 44 deletions.
diff --git a/web/src/components/app-header/LoginAppHeader.tsx b/web/src/components/app-header/LoginAppHeader.tsx
@@ -116,7 +116,7 @@ const LoginAppHeader = ({
                   <Icon
                     useMaterialUiIcon
                     name="edit-on"
-                    style={{
+                    iconStyle={{
                       fontSize: "14px",
                       color: "#cccccc",
                     }}
@@ -132,7 +132,7 @@ const LoginAppHeader = ({
                   <Icon
                     useMaterialUiIcon
                     name="edit-off"
-                    style={{
+                    iconStyle={{
                       fontSize: "14px",
                       color: "#cccccc",
                     }}

diff --git a/web/src/components/dialogs/audio-dialog/audio-dialog.tsx b/web/src/components/dialogs/audio-dialog/audio-dialog.tsx
@@ -163,7 +163,11 @@ const AudioSlider = ({
           content: tooltipContent ?? "",
         }}
       >
-        <Icon name={iconName} useMaterialUiIcon style={{ fontSize: "26px" }} />
+        <Icon
+          name={iconName}
+          useMaterialUiIcon
+          iconStyle={{ fontSize: "26px" }}
+        />
       </Button>
 
       <Slider

diff --git a/web/src/components/dialogs/chapters-dialog/screen-item.tsx b/web/src/components/dialogs/chapters-dialog/screen-item.tsx
@@ -85,7 +85,7 @@ export const ScreenItem = ({
           <Icon
             name="arrow_right"
             color={shouldHighlight ? "expoThemeIcons" : "muted-400"}
-            //className={shouldHighlight ? "text-primary" : "text-muted-400"}
+            //containerClassName={shouldHighlight ? "text-primary" : "text-muted-400"}
           />
         )}
 

diff --git a/web/src/components/dialogs/files-dialog/file-item.tsx b/web/src/components/dialogs/files-dialog/file-item.tsx
@@ -44,7 +44,7 @@ export const FileItem = ({
       )}
     >
       <Icon
-        className="text-gray"
+        containerClassName="text-gray"
         name={getDocumentIconName(
           "name" in file
             ? file.type

diff --git a/web/src/components/dialogs/overlay-dialog/overlay-dialog.tsx b/web/src/components/dialogs/overlay-dialog/overlay-dialog.tsx
@@ -127,7 +127,7 @@ const OverlayDialog = ({
             <Icon
               color="expoThemeMode"
               name="chevron_left"
-              style={{ fontSize: "32px" }}
+              iconStyle={{ fontSize: "32px" }}
             />
           </Button>
 
@@ -137,7 +137,7 @@ const OverlayDialog = ({
               <Icon
                 color="expoThemeMode"
                 name={shouldIncrement ? "pause" : "play_arrow"}
-                style={{ fontSize: "32px" }}
+                iconStyle={{ fontSize: "32px" }}
               />
             }
             onClick={shouldIncrement ? pause : play}
@@ -149,7 +149,7 @@ const OverlayDialog = ({
             <Icon
               color="expoThemeMode"
               name="chevron_right"
-              style={{ fontSize: "32px" }}
+              iconStyle={{ fontSize: "32px" }}
             />
           </Button>
         </div>

diff --git a/web/src/components/editors/ImageBox.tsx b/web/src/components/editors/ImageBox.tsx
@@ -422,7 +422,7 @@ const SettingsPanel = ({
         <Icon
           useMaterialUiIcon
           name="zoom_in"
-          style={{ fontSize: "24px", opacity: 0.6 }}
+          iconStyle={{ fontSize: "24px", opacity: 0.6 }}
           onClick={() => {
             setCurrZoom((prevZoom) => prevZoom + 0.2);
           }}
@@ -436,7 +436,7 @@ const SettingsPanel = ({
         <Icon
           useMaterialUiIcon
           name="search"
-          style={{ fontSize: "24px", opacity: 0.6 }}
+          iconStyle={{ fontSize: "24px", opacity: 0.6 }}
           onClick={() => {
             setCurrZoom(1);
           }}
@@ -450,7 +450,7 @@ const SettingsPanel = ({
         <Icon
           useMaterialUiIcon
           name="zoom_out"
-          style={{ fontSize: "24px", opacity: 0.6 }}
+          iconStyle={{ fontSize: "24px", opacity: 0.6 }}
           onClick={() => {
             setCurrZoom((prevZoom) =>
               prevZoom <= 1 ? prevZoom : prevZoom - 0.2
@@ -469,7 +469,7 @@ const SettingsPanel = ({
         <Icon
           useMaterialUiIcon
           name="folder"
-          style={{ fontSize: "24px", opacity: 0.6 }}
+          iconStyle={{ fontSize: "24px", opacity: 0.6 }}
           onClick={() => {
             changeImage();
           }}
@@ -483,7 +483,7 @@ const SettingsPanel = ({
         <Icon
           useMaterialUiIcon
           name="palette"
-          style={{ fontSize: "24px", opacity: 0.6 }}
+          iconStyle={{ fontSize: "24px", opacity: 0.6 }}
           onClick={() => {
             const imageEditorObj = {
               expoId: expoId,
@@ -503,7 +503,7 @@ const SettingsPanel = ({
         <Icon
           useMaterialUiIcon
           name="delete"
-          style={{ fontSize: "24px", opacity: 0.6 }}
+          iconStyle={{ fontSize: "24px", opacity: 0.6 }}
           onClick={() => {
             dispatch(
               setDialog(DialogType.ConfirmDialog, {

diff --git a/web/src/components/form/formik/ColorPicker.tsx b/web/src/components/form/formik/ColorPicker.tsx
@@ -79,17 +79,17 @@ const ColorPicker = ({ name, color, setColor, label }: ColorPickerProps) => {
           <div className="w-1/6 self-center flex justify-end mr-2 gap-2">
             <Icon
               name={isColorEditModeOn ? "done" : "edit"}
-              className="cursor-pointer"
+              containerClassName="cursor-pointer"
               useMaterialUiIcon
-              style={{ fontSize: "24px" }}
+              iconStyle={{ fontSize: "24px" }}
               onClick={() => setIsColorEditModeOn((prev) => !prev)}
             />
             <div ref={paletteIconContainerRef}>
               <Icon
                 name="palette"
-                className="cursor-pointer"
+                containerClassName="cursor-pointer"
                 useMaterialUiIcon
-                style={{ fontSize: "24px" }}
+                iconStyle={{ fontSize: "24px" }}
                 onClick={() => !isColorEditModeOn && openColorPicker()}
               />
             </div>

diff --git a/web/src/components/icon/icon.tsx b/web/src/components/icon/icon.tsx
@@ -1,16 +1,18 @@
 import { CSSProperties, ReactNode } from "react";
-
 import { useExpoDesignData } from "hooks/view-hooks/expo-design-data-hook";
 
+// Components
 import { Icon as MuiIcon } from "@mui/material";
 import FontIcon from "react-md/lib/FontIcons/FontIcon";
-
 import { BasicTooltip } from "components/tooltip/BasicTooltip";
 import { BasicTooltipProps } from "components/tooltip/tooltip-props";
 
+// Utils
 import cx from "classnames";
 
-interface IconProps {
+// - - - -
+
+type IconProps = {
   name: string | ReactNode; // name either for FontIcon from 'react-md' or Icon from 'material-ui'
   useMaterialUiIcon?: boolean;
   color?:
@@ -23,19 +25,25 @@ interface IconProps {
     | "inheritFromParents";
   onClick?: () => void;
   noCenterPlace?: boolean; // by default, icon should be inside some container and centered
-  className?: string;
-  style?: CSSProperties;
+  containerClassName?: string;
+  containerStyle?: CSSProperties;
+  iconClassName?: string;
+  iconStyle?: CSSProperties;
   tooltip?: BasicTooltipProps;
-}
+};
+
+// - - - -
 
 export const Icon = ({
   name,
   useMaterialUiIcon = false,
   color = "inheritFromParents",
-  className,
-  style,
   onClick,
   noCenterPlace = false,
+  containerClassName,
+  containerStyle,
+  iconClassName,
+  iconStyle,
   tooltip,
 }: IconProps) => {
   const { expoDesignData, fgThemingIf } = useExpoDesignData();
@@ -58,20 +66,29 @@ export const Icon = ({
           "text-muted-400": color === "muted-400",
           "hover:cursor-pointer": !!onClick,
         },
-        className
+        containerClassName
       )}
       style={{
+        ...containerStyle,
         color: themeEnabledIconsColor,
       }}
       data-tooltip-id={tooltip?.id ?? undefined}
     >
       {/* Icon color either inherited from Button parent or div if some color prop is used */}
       {useMaterialUiIcon ? (
-        <MuiIcon onClick={onClick} className="!text-inherit" sx={style}>
+        <MuiIcon
+          onClick={onClick}
+          className={cx(iconClassName)}
+          sx={{ color: "inherit", ...iconStyle }}
+        >
           {name}
         </MuiIcon>
       ) : (
-        <FontIcon onClick={onClick} className="!text-inherit" style={style}>
+        <FontIcon
+          onClick={onClick}
+          className={cx(iconClassName)}
+          style={{ color: "inherit", ...iconStyle }}
+        >
           {name}
         </FontIcon>
       )}

diff --git a/web/src/components/infopoint/components/tooltip-infopoint/VideoContentBody.tsx b/web/src/components/infopoint/components/tooltip-infopoint/VideoContentBody.tsx
@@ -143,7 +143,7 @@ const VideoContentBody = ({
                 useMaterialUiIcon
                 name={isVideoPlaying ? "pause" : "play_arrow"}
                 onClick={() => playPauseVideo()}
-                style={{ fontSize: "22px" }}
+                iconStyle={{ fontSize: "22px" }}
               />
             </div>
 
@@ -176,8 +176,8 @@ const VideoContentBody = ({
                       setVideoVolume(prevVideoVolume);
                     }
                   }}
-                  style={{ fontSize: "22px" }}
-                  className="ml-auto"
+                  iconStyle={{ fontSize: "22px" }}
+                  containerClassName="ml-auto"
                 />
               </div>
 

diff --git a/...src/containers/expo-administration/expo-editor/screen-game-options/answers/AnswerItem.tsx b/...src/containers/expo-administration/expo-editor/screen-game-options/answers/AnswerItem.tsx
@@ -260,7 +260,7 @@ const AnswerItem = ({
               <Icon
                 useMaterialUiIcon
                 name="delete"
-                style={{ fontSize: "24px" }}
+                iconStyle={{ fontSize: "24px" }}
                 tooltip={{
                   id: "delete-answer-icon-tooltip",
                   content: t("deleteAnswerTooltip"),

diff --git a/web/src/containers/expo-administration/expo-editor/screen-signpost/LinkItem.tsx b/web/src/containers/expo-administration/expo-editor/screen-signpost/LinkItem.tsx
@@ -202,7 +202,7 @@ export const LinkItem = ({
               <Icon
                 useMaterialUiIcon
                 name="delete"
-                style={{ fontSize: "24px" }}
+                iconStyle={{ fontSize: "24px" }}
                 tooltip={{
                   id: "link-delete-icon-tooltip",
                   content: t("deleteIconTooltip"),

diff --git a/web/src/containers/expositions/ExpoCard.tsx b/web/src/containers/expositions/ExpoCard.tsx
@@ -148,7 +148,7 @@ const ExpoCard = ({
                     >
                       <Icon
                         name="launch"
-                        style={{ fontSize: "12px" }}
+                        iconStyle={{ fontSize: "12px" }}
                         tooltip={{
                           id: "rating-redirect-icon",
                           content: t("expoCard.ratingRedirectLabel"),

diff --git a/web/src/containers/views/view-finish/rating-panel/SendButton.tsx b/web/src/containers/views/view-finish/rating-panel/SendButton.tsx
@@ -34,7 +34,7 @@ const SendButton = ({ disabled, onClick, isSubmitting }: SendButtonProps) => {
     >
       {t("sendActionButtonLabel")}
       {!isSubmitting && (
-        <Icon name="send" useMaterialUiIcon style={{ fontSize: "24px" }} />
+        <Icon name="send" useMaterialUiIcon iconStyle={{ fontSize: "24px" }} />
       )}
       {isSubmitting && (
         <Spinner

diff --git a/web/src/containers/views/view-photogallery/Lightbox.tsx b/web/src/containers/views/view-photogallery/Lightbox.tsx
@@ -150,7 +150,7 @@ const Toolbar = ({
                 useMaterialUiIcon
                 color="white"
                 onClick={zoomInside}
-                style={{ fontSize: "24px" }}
+                iconStyle={{ fontSize: "24px" }}
               />
             </Button>
           </div>
@@ -168,7 +168,7 @@ const Toolbar = ({
                 useMaterialUiIcon
                 color="white"
                 onClick={reset}
-                style={{ fontSize: "24px" }}
+                iconStyle={{ fontSize: "24px" }}
               />
             </Button>
           </div>
@@ -186,7 +186,7 @@ const Toolbar = ({
                 useMaterialUiIcon
                 color="white"
                 onClick={zoomOutside}
-                style={{ fontSize: "24px" }}
+                iconStyle={{ fontSize: "24px" }}
               />
             </Button>
           </div>
@@ -205,7 +205,7 @@ const Toolbar = ({
                   useMaterialUiIcon
                   color="white"
                   onClick={openInformationDialog}
-                  style={{ fontSize: "24px" }}
+                  iconStyle={{ fontSize: "24px" }}
                 />
               </Button>
             </div>
@@ -226,7 +226,7 @@ const Toolbar = ({
                 useMaterialUiIcon
                 name="close"
                 onClick={closeLightBox}
-                style={{ fontSize: "24px" }}
+                iconStyle={{ fontSize: "24px" }}
               />
             </Button>
           </div>

diff --git a/web/src/containers/views/view-screen-overlay/ActionsPanel/ReactivateTutorialButton.tsx b/web/src/containers/views/view-screen-overlay/ActionsPanel/ReactivateTutorialButton.tsx
@@ -37,7 +37,7 @@ const ReactivateTutorialButton = ({
           content: t("reactivateTooltipButtonTooltip"),
         }}
       >
-        <Icon name="quiz" useMaterialUiIcon style={{ fontSize: "24px" }} />
+        <Icon name="quiz" useMaterialUiIcon iconStyle={{ fontSize: "24px" }} />
       </Button>
     </div>
   );

diff --git a/web/src/containers/views/view-signpost/ReferenceItem.tsx b/web/src/containers/views/view-signpost/ReferenceItem.tsx
@@ -73,7 +73,7 @@ const ReferenceItem = ({
               <Icon
                 useMaterialUiIcon
                 name="launch"
-                style={{ fontSize: "24px" }}
+                iconStyle={{ fontSize: "24px" }}
               />
             </div>
           </div>
@@ -86,7 +86,7 @@ const ReferenceItem = ({
               <Icon
                 useMaterialUiIcon
                 name="launch"
-                style={{ color: `${palette["blue"]} !important` }}
+                iconStyle={{ color: `${palette["blue"]} !important` }}
               />
             )}