Moved icon button styling to separate file and increased button size

jgiven · Mar 1, 2024 · ae503a7 · ae503a7
1 parent afedd68
commit ae503a7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 39 deletions.
diff --git a/new/src/components/ScenarioOverview/ScenarioHead.styles.ts b/new/src/components/ScenarioOverview/ScenarioHead.styles.ts
@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { Drawer, Link } from "@mui/material";
+import { Box, Button, Drawer, Link } from "@mui/material";
 
 export const StyledDrawer = styled(Drawer)({
     // width: 240,
@@ -17,3 +17,23 @@ export const StyledContent = styled("div")(({ theme }) => ({
 export const StyledLink = styled(Link)({
     cursor: "pointer"
 });
+
+export const StyledIconContainer = styled(Box)({
+    width: "30px",
+    height: "30px",
+    p: 0.01,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "1px solid grey",
+    borderRadius: 1,
+    marginRight: "5px"
+});
+
+export const StyledIconButton = styled(Button)({
+    "&:hover": { textDecoration: "none", color: "inherit" },
+    "min-width": "1px",
+    "min-height": "1px",
+    height: "30px",
+    color: "black"
+});
diff --git a/new/src/components/ScenarioOverview/ScenarioHead.tsx b/new/src/components/ScenarioOverview/ScenarioHead.tsx
@@ -1,8 +1,6 @@
 import type { ReportStatistics } from "../../reportModel";
 import {
-    Box,
     Breadcrumbs,
-    Button,
     Divider,
     Grid,
     Link,
@@ -23,7 +21,13 @@ import { createReportCircle } from "./DonutChart";
 import React, { MouseEventHandler } from "react";
 import { processWords } from "../../wordProcessor";
 import { useSearchParams } from "react-router-dom";
-import { StyledContent, StyledDrawer, StyledLink } from "./ScenarioHead.styles";
+import {
+    StyledContent,
+    StyledDrawer,
+    StyledIconButton,
+    StyledIconContainer,
+    StyledLink
+} from "./ScenarioHead.styles";
 
 export interface ScenarioOverviewProps {
     statistic: ReportStatistics;
@@ -147,57 +151,36 @@ function ScenarioActionButtons(props: { targets: ActionButtonTargets }) {
     return (
         <Grid container>
             <Grid item>
-                <ScenarioOverviewItem action={props.targets.minusButtonTarget}>
+                <ScenarioHeaderIcon action={props.targets.minusButtonTarget}>
                     <RemoveIcon fontSize="inherit" />
-                </ScenarioOverviewItem>
+                </ScenarioHeaderIcon>
             </Grid>
             <Grid item>
-                <ScenarioOverviewItem action={props.targets.plusButtonTarget}>
-                    <AddIcon></AddIcon>
-                </ScenarioOverviewItem>
+                <ScenarioHeaderIcon action={props.targets.plusButtonTarget}>
+                    <AddIcon />
+                </ScenarioHeaderIcon>
             </Grid>
             <Grid item>
-                <ScenarioOverviewItem action={props.targets.printButtonTarget}>
+                <ScenarioHeaderIcon action={props.targets.printButtonTarget}>
                     <PrintOutlinedIcon fontSize="inherit" />
-                </ScenarioOverviewItem>
+                </ScenarioHeaderIcon>
             </Grid>
             <Grid item>
-                <ScenarioOverviewItem action={props.targets.bookmarkButtonTarget}>
+                <ScenarioHeaderIcon action={props.targets.bookmarkButtonTarget}>
                     <BookmarkOutlinedIcon fontSize="inherit" />
-                </ScenarioOverviewItem>
+                </ScenarioHeaderIcon>
             </Grid>
         </Grid>
     );
 }
 
-function ScenarioOverviewItem(props: { children: React.ReactNode; action: MouseEventHandler }) {
-    const sx = {
-        width: "12px", // or some other value
-        height: "12px", // same as width
-        p: 0.01,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        border: "1px solid grey",
-        borderRadius: 1,
-        marginRight: "5px"
-    };
+function ScenarioHeaderIcon(props: { children: React.ReactNode; action: MouseEventHandler }) {
     return (
-        <Box sx={sx} component="span">
-            <Button
-                className="actionPanelButton"
-                color="inherit"
-                sx={{
-                    "&:hover": { textDecoration: "none", color: "inherit" },
-                    "min-width": "1px",
-                    "min-height": "1px",
-                    height: sx.height
-                }}
-                onClick={props.action}
-            >
+        <StyledIconContainer>
+            <StyledIconButton className="actionPanelButton" onClick={props.action}>
                 {props.children}
-            </Button>
-        </Box>
+            </StyledIconButton>
+        </StyledIconContainer>
     );
 }