refactor(frontend): one Icon component, color inherited, one 14px square frame

frontend/src/index.css

@@ -1,4 +1,6 @@
 @import "tailwindcss";
+/* into a layer so tailwind utilities can size icons */
+@import "@fortawesome/fontawesome-svg-core/styles.css" layer(base);
 
 @theme {
   --color-primary-50: #dadedb;

frontend/src/js/authorization/LoginPage.tsx

@@ -7,7 +7,7 @@ import { usePostLogin } from "../api/api";
 import { useAppTheme } from "../app-theme-context";
 import PrimaryButton from "../button/PrimaryButton";
 import ErrorMessage from "../error-message/ErrorMessage";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import InputPlain from "../ui-components/InputPlain/InputPlain";
 
 import { AuthTokenContext } from "./AuthTokenProvider";
@@ -121,11 +121,9 @@ const LoginPage = () => {
             large
             type="submit"
           >
-            <FaIcon
-              className="mr-[10px]"
-              large
-              white
+            <Icon
               icon={loading ? faSpinner : faCheck}
+              className="mr-[10px] text-white"
             />
             {t("login.submit")}
           </PrimaryButton>

frontend/src/js/button/HistoryButton.tsx

@@ -18,7 +18,7 @@ export const HistoryButton = () => {
 
   return (
     <TooltipTrigger>
-      <IconButton small frame icon={faListUl} onClick={onClick} />
+      <IconButton className="p-[7px]" frame icon={faListUl} onClick={onClick} />
       <Tooltip>{t("history.history")}</Tooltip>
     </TooltipTrigger>
   );

frontend/src/js/button/IconButton.tsx

@@ -1,7 +1,8 @@
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { memo, type Ref, useMemo } from "react";
+import { memo, type Ref } from "react";
 import { tv } from "tailwind-variants";
-import FaIcon, { type IconStyleProps } from "../icon/FaIcon";
+
+import { Icon } from "../ui-components/Icon";
 
 import BasicButton, { type BasicButtonProps } from "./BasicButton";
 
@@ -18,7 +19,6 @@ const iconButton = tv({
   ],
   variants: {
     // later wins when several are set
-    secondary: { true: "text-orange" },
     active: { true: "text-primary-500" },
     red: { true: "text-red" },
     frame: { true: "opacity-100 border border-gray-500 hover:bg-bg-100" },
@@ -28,33 +28,22 @@ const iconButton = tv({
   },
 });
 
+// The button's text color reaches the icon; this is the exception.
 const buttonIcon = tv({
-  base: "text-sm",
   variants: {
-    // later wins when several are set
-    secondary: { true: "text-orange" },
     light: { true: "text-gray-500" },
-    active: { true: "text-primary-500" },
-    red: { true: "text-red" },
-    small: { true: "text-xs" },
-    large: { true: "text-base" },
   },
 });
 
-export interface IconButtonPropsT extends BasicButtonProps {
-  iconProps?: IconStyleProps;
+export interface IconButtonPropsT extends Omit<BasicButtonProps, "small"> {
+  icon: IconProp;
   active?: boolean;
   large?: boolean;
-  small?: boolean;
-  icon: IconProp;
-  secondary?: boolean;
   tight?: boolean;
   red?: boolean;
-  left?: boolean;
   frame?: boolean;
   bare?: boolean;
   light?: boolean;
-  fixedIconWidth?: number;
   bgHover?: boolean;
   iconColor?: string;
 }
@@ -66,87 +55,39 @@ const IconButton = ({
   active,
   red,
   large,
-  left,
   children,
   tight,
-  iconProps,
-  small,
-  secondary,
   light,
-  fixedIconWidth,
   bgHover,
   iconColor,
   frame,
   className,
   ...restProps
-}: IconButtonPropsT & { ref?: Ref<HTMLButtonElement> }) => {
-  const iconElement = useMemo(() => {
-    const iconEl = (
-      <FaIcon
-        left={left}
-        icon={icon}
-        {...iconProps}
-        className={buttonIcon({
-          secondary,
-          light,
-          active,
-          red,
-          small,
-          large,
-        })}
-        style={
-          iconColor
-            ? { color: iconColor, ...iconProps?.style }
-            : iconProps?.style
-        }
-      />
-    );
-
-    return fixedIconWidth ? (
-      <span className="inline-block" style={{ width: fixedIconWidth }}>
-        {iconEl}
-      </span>
-    ) : (
-      iconEl
-    );
-  }, [
-    icon,
-    active,
-    red,
-    large,
-    left,
-    iconProps,
-    small,
-    secondary,
-    light,
-    fixedIconWidth,
-    iconColor,
-  ]);
-
-  return (
-    <BasicButton
-      active={active}
-      secondary={secondary}
-      large={large}
-      {...restProps}
-      className={iconButton({
-        secondary,
-        active,
-        red,
-        frame,
-        bgHover,
-        tight,
-        large,
-        className,
-      })}
-      ref={ref}
-    >
-      {iconElement}
-      {children && (
-        <span className="flex items-center gap-[5px]">{children}</span>
-      )}
-    </BasicButton>
-  );
-};
+}: IconButtonPropsT & { ref?: Ref<HTMLButtonElement> }) => (
+  <BasicButton
+    active={active}
+    large={large}
+    {...restProps}
+    className={iconButton({
+      active,
+      red,
+      frame,
+      bgHover,
+      tight,
+      large,
+      className,
+    })}
+    ref={ref}
+  >
+    <Icon
+      icon={icon}
+      className={buttonIcon({ light })}
+      style={iconColor ? { color: iconColor } : undefined}
+    />
+    {children && (
+      <span className="flex items-center gap-[5px]">{children}</span>
+    )}
+  </BasicButton>
+);
 
 export default memo(IconButton);

frontend/src/js/concept-trees/ConceptTree.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 import type { ConceptIdT, ConceptT } from "../api/types";
 import IconButton from "../button/IconButton";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import ConceptTreeNode from "./ConceptTreeNode";
 import ConceptTreeNodeText from "./ConceptTreeNodeText";
 import type { SearchT } from "./reducer";
@@ -46,7 +46,7 @@ const ConceptTree = ({
     return (
       <p className={message()} style={{ paddingLeft: 24 + depth * 15 }}>
         <span className="mr-[6px]">
-          <FaIcon icon={faSpinner} />
+          <Icon icon={faSpinner} />
         </span>
         <span>{label}</span>
       </p>

frontend/src/js/concept-trees/ConceptTreeNodeText.tsx

@@ -7,7 +7,7 @@ import type { Ref } from "react";
 import { tv } from "tailwind-variants";
 import { Highlighter } from "../common/components/Highlighter";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 // Root with transparent background.
 // relative: needed to fix a drag & drop issue in Safari
@@ -114,20 +114,34 @@ const ConceptTreeNodeText = ({
         {hasChildren && (
           <>
             <span className={caretIconContainer()}>
-              <FaIcon
-                disabled={disabled}
-                active
+              <Icon
                 icon={isOpen ? faCaretDown : faCaretRight}
+                className={[
+                  "text-primary-500",
+                  disabled ? "text-gray-400 cursor-not-allowed" : undefined,
+                ]}
               />
             </span>
             <span className={folderIconContainer()}>
-              <FaIcon active disabled={disabled} icon={icon} />
+              <Icon
+                icon={icon}
+                className={[
+                  "text-primary-500",
+                  disabled ? "text-gray-400 cursor-not-allowed" : undefined,
+                ]}
+              />
             </span>
           </>
         )}
         {!hasChildren && (
           <span className={dashIconContainer()}>
-            <FaIcon disabled={disabled} large active icon={icon} />
+            <Icon
+              icon={icon}
+              className={[
+                "text-primary-500",
+                disabled ? "text-gray-400 cursor-not-allowed" : undefined,
+              ]}
+            />
           </span>
         )}
         {resultCount && <span className={resultsNumber()}>{resultCount}</span>}

frontend/src/js/concept-trees/ConceptTreesLoading.tsx

@@ -2,14 +2,14 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 const ConceptTreesLoading = () => {
   const { t } = useTranslation();
 
   return (
     <div className="flex flex-row items-center px-3 py-[5px]">
-      <FaIcon className="mr-[10px]" icon={faSpinner} />
+      <Icon icon={faSpinner} className="mr-[10px]" />
       <span>{t("conceptTreeList.loading")}</span>
     </div>
   );

frontend/src/js/concept-trees/ConceptsProgressBar.tsx

@@ -2,7 +2,7 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 
 import ProgressBar from "../common/components/ProgressBar";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 import type { TreesT } from "./reducer";
 
@@ -21,7 +21,7 @@ const ConceptsProgressBar = ({ trees }: PropsT) => {
   return (
     <div className="m-[10px]">
       <div className="flex items-center">
-        <FaIcon icon={faSpinner} />
+        <Icon icon={faSpinner} />
         <p className="mx-[10px]">
           {t("conceptTreeList.loading")} {doneCount} / {treeIds.length}
         </p>

frontend/src/js/editor-v2/TreeNode.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
 import { DNDType } from "../common/constants/dndTypes";
-import FaIcon from "../icon/FaIcon";
 import { nodeIsConceptQueryNode, useActiveState } from "../model/node";
 import { getRootNodeLabel } from "../standard-query-editor/helper";
 import type {
@@ -16,6 +15,7 @@ import Dropzone, {
   type DropzoneProps,
   type PossibleDroppableObject,
 } from "../ui-components/Dropzone";
+import { Icon } from "../ui-components/Icon";
 import {
   Tooltip,
   TooltipTarget,
@@ -301,7 +301,10 @@ export function TreeNode({
                 )}
                 {tree.dates?.excluded && (
                   <div className={dates()}>
-                    <FaIcon red icon={faCalendarMinus} left />
+                    <Icon
+                      icon={faCalendarMinus}
+                      className="mr-[10px] text-red"
+                    />
                     {t("editorV2.datesExcluded")}
                   </div>
                 )}

frontend/src/js/editor-v2/date-restriction/DateModal.tsx

@@ -8,8 +8,8 @@ import { tv } from "tailwind-variants";
 import type { DateRangeT } from "../../api/types";
 import IconButton from "../../button/IconButton";
 import type { DateStringMinMax } from "../../common/helpers/dateHelper";
-import FaIcon from "../../icon/FaIcon";
 import Modal from "../../modal/Modal";
+import { Icon } from "../../ui-components/Icon";
 import InputCheckbox from "../../ui-components/InputCheckbox";
 import InputDateRange from "../../ui-components/InputDateRange";
 
@@ -99,7 +99,7 @@ export const DateModal = ({
         />
         <div>
           <p className={sectionHeadline()}>
-            <FaIcon icon={faCalendarMinus} red />
+            <Icon icon={faCalendarMinus} className="text-red" />
             {t("queryNodeEditor.excludeTimestamps")}
             <InputCheckbox
               label=""

frontend/src/js/entity-history/EntityIdsList.tsx

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { tv } from "tailwind-variants";
 
 import { IncrementalList } from "../common/components/IncrementalList";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import type { useUpdateHistorySession } from "./actions";
 import type { EntityIdsStatus } from "./History";
 import type { EntityId } from "./reducer";
@@ -91,7 +91,7 @@ export const EntityIdsList = ({
           <span className="font-light text-gray-500">({entityId.kind})</span>
         </div>
         {loadingId === entityId.id && (
-          <FaIcon className="mx-[6px] my-[3px]" icon={faSpinner} />
+          <Icon icon={faSpinner} className="mx-[6px] my-[3px]" />
         )}
         <div className="ml-auto flex items-center gap-[2px]">
           {entityIdsStatus[entityId.id] &&