Fix expand icon size.

ICTU · Feb 14, 2025 · 33870df · 33870df
1 parent 4a56c04
commit 33870df
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/components/frontend/src/widgets/HeaderWithDetails.jsx b/components/frontend/src/widgets/HeaderWithDetails.jsx
@@ -25,7 +25,7 @@ export function HeaderWithDetails({ children, header, item_uuid, level, settings
             <AccordionSummary
                 aria-controls={showDetails ? `accordion-content-${item_uuid}` : null}
                 aria-label="Expand/collapse"
-                expandIcon={<CaretRight size={{ h1: "5em", h2: "4em", h3: "3em" }[level]} />}
+                expandIcon={<CaretRight size={{ h1: "48px", h2: "32px", h3: "24px" }[level]} />}
                 id={`accordion-header-${item_uuid}`}
                 sx={{
                     border: "0",

diff --git a/components/frontend/src/widgets/buttons/ExpandButton.jsx b/components/frontend/src/widgets/buttons/ExpandButton.jsx
@@ -6,7 +6,7 @@ import { CaretDown, CaretRight } from "../icons"
 export function ExpandButton({ expand, onClick }) {
     return (
         <IconButton aria-label="Expand/collapse" onClick={onClick}>
-            {expand ? <CaretDown /> : <CaretRight />}
+            {expand ? <CaretDown size="1.5em" /> : <CaretRight size="1.5em" />}
         </IconButton>
     )
 }

diff --git a/components/frontend/src/widgets/icons.jsx b/components/frontend/src/widgets/icons.jsx
@@ -8,17 +8,24 @@ import MoveDownIcon from "@mui/icons-material/MoveDown"
 import OpenInNewIcon from "@mui/icons-material/OpenInNew"
 import VisibilityIcon from "@mui/icons-material/Visibility"
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"
+import { string } from "prop-types"
 
 export function AddItemIcon() {
     return <AddIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
 }
 
-export function CaretDown() {
-    return <ArrowDropDownIcon title="expand" sx={{ verticalAlign: "middle", fontSize: "1.5em" }} />
+export function CaretDown({ size }) {
+    return <ArrowDropDownIcon title="expand" sx={{ verticalAlign: "middle", fontSize: size }} />
+}
+CaretDown.propTypes = {
+    size: string.isRequired,
 }
 
-export function CaretRight() {
-    return <ArrowRightIcon title="expand" sx={{ verticalAlign: "middle", fontSize: "1.5em" }} />
+export function CaretRight({ size }) {
+    return <ArrowRightIcon title="expand" sx={{ verticalAlign: "middle", fontSize: size }} />
+}
+CaretRight.propTypes = {
+    size: string.isRequired,
 }
 
 export function CopyItemIcon() {