touchup: always place icon inside indicators

previously was using some icons as the whole indicator, which was inconsistent in terms of the icons' borders.
amelioro · Nov 1, 2024 · 542f4e4 · 542f4e4
1 parent eaa86ad
commit 542f4e4
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 50 deletions.
diff --git a/src/web/topic/components/Indicator/CommentIndicator.tsx b/src/web/topic/components/Indicator/CommentIndicator.tsx
@@ -31,7 +31,6 @@ export const CommentIndicator = ({ graphPartId, graphPartType, partColor }: Prop
       Icon={ChatBubbleOutline}
       title={`Has ${commentCount} threads`} // could count total comments as well but logic is more annoying, and doesn't seem that important
       onClick={onClick}
-      iconHasBackground={false}
       color={partColor}
     />
   );

diff --git a/src/web/topic/components/Indicator/ContextIndicator.tsx b/src/web/topic/components/Indicator/ContextIndicator.tsx
@@ -30,7 +30,6 @@ export const ContextIndicator = ({ graphPart }: Props) => {
   return (
     <Indicator
       Icon={ControlCamera}
-      iconHasBackground={false}
       filled={hasContext}
       title={"View context"}
       onClick={() => partContextMethods.viewContext(graphPart.id)}

diff --git a/src/web/topic/components/Indicator/CriteriaTableIndicator.tsx b/src/web/topic/components/Indicator/CriteriaTableIndicator.tsx
@@ -1,4 +1,4 @@
-import { TableChart } from "@mui/icons-material";
+import { TableChartOutlined } from "@mui/icons-material";
 import { memo, useCallback } from "react";
 
 import { Indicator } from "@/web/topic/components/Indicator/Indicator";
@@ -24,7 +24,7 @@ const CriteriaTableIndicatorBase = ({ nodeId }: Props) => {
 
   return (
     <Indicator
-      Icon={TableChart}
+      Icon={TableChartOutlined}
       filled={hasCriteria}
       title={"View criteria table"}
       onClick={onClick}

diff --git a/src/web/topic/components/Indicator/DetailsIndicator.tsx b/src/web/topic/components/Indicator/DetailsIndicator.tsx
@@ -1,4 +1,4 @@
-import { Article } from "@mui/icons-material";
+import { Notes } from "@mui/icons-material";
 import { useCallback } from "react";
 
 import { emitter } from "@/web/common/event";
@@ -18,5 +18,5 @@ export const DetailsIndicator = ({ graphPartId, notes }: Props) => {
     emitter.emit("viewTopicDetails");
   }, [graphPartId]);
 
-  return <Indicator Icon={Article} title={"View details"} onClick={onClick} filled={hasDetails} />;
+  return <Indicator Icon={Notes} title={"View details"} onClick={onClick} filled={hasDetails} />;
 };
diff --git a/src/web/topic/components/Indicator/ForceShownIndicator.tsx b/src/web/topic/components/Indicator/ForceShownIndicator.tsx
@@ -26,7 +26,6 @@ const ForceShownIndicatorBase = ({ nodeId, partColor }: Props) => {
       Icon={WbTwilight}
       title={"Stop forcing node to show"}
       onClick={onClick}
-      iconHasBackground={false}
       color={partColor}
     />
   );

diff --git a/src/web/topic/components/Indicator/FoundResearchIndicator.tsx b/src/web/topic/components/Indicator/FoundResearchIndicator.tsx
@@ -1,4 +1,4 @@
-import { Code, InfoOutlined, School } from "@mui/icons-material";
+import { Code, InfoOutlined, SchoolOutlined } from "@mui/icons-material";
 import { type ButtonProps } from "@mui/material";
 import { useCallback } from "react";
 
@@ -37,10 +37,9 @@ export const FoundResearchIndicator = ({ graphPartId, partColor }: Props) => {
   if (facts.length > 0 && sources.length > 0)
     return (
       <Indicator
-        Icon={School}
+        Icon={SchoolOutlined}
         title={`Has ${facts.length} facts and ${sources.length} sources`}
         onClick={onClick}
-        iconHasBackground={false}
         color={color}
       />
     );
@@ -50,7 +49,6 @@ export const FoundResearchIndicator = ({ graphPartId, partColor }: Props) => {
         Icon={InfoOutlined}
         title={`Has ${facts.length} facts`}
         onClick={onClick}
-        iconHasBackground={false}
         color={color}
       />
     );
@@ -60,7 +58,6 @@ export const FoundResearchIndicator = ({ graphPartId, partColor }: Props) => {
         Icon={Code}
         title={`Has ${sources.length} sources`}
         onClick={onClick}
-        iconHasBackground={false}
         color={color}
       />
     );

diff --git a/src/web/topic/components/Indicator/Indicator.tsx b/src/web/topic/components/Indicator/Indicator.tsx
@@ -8,13 +8,6 @@ interface IndicatorProps {
   Icon: MuiIcon;
   title: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  /**
-   * Determines where colors are applied, because otherwise color and hover feel inconsistent.
-   *
-   * If the icon has a background, then it will be colored and have hover effect.
-   * If the icon doesn't have a background, then the button will be colored and have hover effect.
-   */
-  iconHasBackground?: boolean;
   color?: ButtonProps["color"];
   filled?: boolean;
 }
@@ -23,7 +16,6 @@ export const Indicator = ({
   Icon,
   title,
   onClick,
-  iconHasBackground = true,
   color = "neutral",
   filled = true,
 }: IndicatorProps) => {
@@ -38,31 +30,17 @@ export const Indicator = ({
 
   return (
     <>
-      {iconHasBackground ? (
-        <StyledButton
-          title={title}
-          aria-label={title}
-          variant="contained"
-          color="neutralContrast"
-          onClick={onClickHandler}
-          // hover color for black button is impossible to see, so a custom hover is added to the svg instead of the button
-          className={`[&_>_svg]:hover:text-neutral-dark ${!onClick ? "pointer-events-none" : ""}`}
-        >
-          <Icon color={filled ? color : "paper"} />
-        </StyledButton>
-      ) : (
-        <StyledButton
-          title={title}
-          aria-label={title}
-          variant="contained"
-          color={filled ? color : "paper"}
-          onClick={onClickHandler}
-          // text-base seems to fit more snuggly than the default 14px
-          className={`border border-solid text-base ${!onClick ? "pointer-events-none" : ""}`}
-        >
-          <Icon color="neutralContrast" fontSize="inherit" />
-        </StyledButton>
-      )}
+      <StyledButton
+        title={title}
+        aria-label={title}
+        variant="contained"
+        color={filled ? color : "paper"}
+        onClick={onClickHandler}
+        // text-base seems to fit more snuggly than the default 14px
+        className={`border border-solid text-base ${!onClick ? "pointer-events-none" : ""}`}
+      >
+        <Icon color="neutralContrast" fontSize="inherit" />
+      </StyledButton>
     </>
   );
 };
diff --git a/src/web/topic/components/Indicator/JustificationIndicator.tsx b/src/web/topic/components/Indicator/JustificationIndicator.tsx
@@ -39,7 +39,6 @@ export const JustificationIndicator = ({ graphPartId, partColor }: Props) => {
         Icon={ThumbsUpDownOutlined}
         title={`Has ${supports.length} supports and ${critiques.length} critiques`}
         onClick={onClick}
-        iconHasBackground={false}
         color={partColor}
       />
     );
@@ -49,7 +48,6 @@ export const JustificationIndicator = ({ graphPartId, partColor }: Props) => {
         Icon={ThumbUpOutlined}
         title={`Has ${supports.length} supports`}
         onClick={onClick}
-        iconHasBackground={false}
         color={scoreColor ?? partColor}
       />
     );
@@ -59,7 +57,6 @@ export const JustificationIndicator = ({ graphPartId, partColor }: Props) => {
         Icon={ThumbDownOutlined}
         title={`Has ${critiques.length} critiques`}
         onClick={onClick}
-        iconHasBackground={false}
         color={scoreColor ?? partColor}
       />
     );

diff --git a/src/web/topic/components/Indicator/JustificationTreeIndicator.tsx b/src/web/topic/components/Indicator/JustificationTreeIndicator.tsx
@@ -32,7 +32,6 @@ export const JustificationTreeIndicator = ({ graphPartId }: Props) => {
   return (
     <Indicator
       Icon={AccountTree}
-      iconHasBackground={false}
       filled={justificationCount > 0}
       title={title}
       onClick={justificationCount > 0 ? onClick : undefined}

diff --git a/src/web/topic/components/Indicator/QuestionIndicator.tsx b/src/web/topic/components/Indicator/QuestionIndicator.tsx
@@ -39,7 +39,6 @@ export const QuestionIndicator = ({ graphPartId, partColor }: Props) => {
       Icon={Icon}
       title={`Has ${questions.length} questions`}
       onClick={onClick}
-      iconHasBackground={false}
       color={scoreColor ?? partColor}
     />
   );