sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: Several cosmetic changes to make the toolbar look like the figmas

Browse Source
This commit is contained in:
Daniel
2024-12-15 18:52:46 +01:00
committed by Nicolás Hatcher Andrés
parent 0b2de92053
commit f214070299
1 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
webapp/src/components/toolbar.tsx
View File

@@ -18,7 +18,7 @@ import {
Grid2x2X, Grid2x2X,
Italic, Italic,
PaintBucket, PaintBucket,
Paintbrush2, PaintRoller,
Percent, Percent,
Redo2, Redo2,
Strikethrough, Strikethrough,
@@ -114,7 +114,7 @@ function Toolbar(properties: ToolbarProperties) {
onClick={properties.onCopyStyles} onClick={properties.onCopyStyles}
title={t("toolbar.copy_styles")} title={t("toolbar.copy_styles")}
> >
<Paintbrush2 /> <PaintRoller />
</StyledButton> </StyledButton>
<Divider /> <Divider />
<StyledButton <StyledButton
@@ -183,8 +183,7 @@ function Toolbar(properties: ToolbarProperties) {
title={t("toolbar.format_number")} title={t("toolbar.format_number")}
sx={{ sx={{
width: "40px", // Keep in sync with anchorOrigin in FormatMenu above width: "40px", // Keep in sync with anchorOrigin in FormatMenu above
fontSize: "13px", padding: "0px 4px",
fontWeight: 400,
}} }}
> >
{"123"} {"123"}
@@ -391,7 +390,9 @@ const ToolbarContainer = styled("div")`
font-family: Inter; font-family: Inter;
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;
overflow-x: auto; overflow-x: auto;
padding-left: 11px; padding: 0px 12px;
gap: 4px;
scrollbar-width: none;
`; `;
type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string }; type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
@@ -399,15 +400,16 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
({ disabled, $pressed, $underlinedColor }) => { ({ disabled, $pressed, $underlinedColor }) => {
const result = { const result = {
width: "24px", width: "24px",
minWidth: "24px",
height: "24px", height: "24px",
display: "inline-flex", display: "inline-flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
fontSize: "26px", fontSize: "12px",
border: "0px solid #fff", border: `0px solid ${theme.palette.common.white}`,
borderRadius: "2px", borderRadius: "4px",
marginRight: "5px",
transition: "all 0.2s", transition: "all 0.2s",
outline: `1px solid ${theme.palette.common.white}`,
cursor: "pointer", cursor: "pointer",
backgroundColor: "white", backgroundColor: "white",
padding: "0px", padding: "0px",
@@ -419,19 +421,28 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
if (disabled) { if (disabled) {
return { return {
...result, ...result,
color: theme.palette.grey["600"], color: theme.palette.grey["400"],
cursor: "default", cursor: "default",
}; };
} }
return { return {
...result, ...result,
borderTop: $underlinedColor ? "3px solid #FFF" : "none", borderTop: $underlinedColor
? `3px solid ${theme.palette.common.white}`
: "none",
borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none", borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none",
color: "#21243A", color: theme.palette.grey["900"],
backgroundColor: $pressed ? "#EEE" : "#FFF", backgroundColor: $pressed
? theme.palette.grey["300"]
: theme.palette.common.white,
"&:hover": { "&:hover": {
backgroundColor: "#F1F2F8", transition: "all 0.2s",
borderTopColor: "#F1F2F8", outline: `1px solid ${theme.palette.grey["200"]}`,
borderTopColor: theme.palette.common.white,
},
"&:active": {
backgroundColor: theme.palette.grey["300"],
outline: `1px solid ${theme.palette.grey["300"]}`,
}, },
}; };
}, },
@@ -439,10 +450,9 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
const Divider = styled("div")({ const Divider = styled("div")({
width: "0px", width: "0px",
height: "10px", height: "12px",
borderLeft: "1px solid #E0E0E0", borderLeft: `1px solid ${theme.palette.grey["300"]}`,
marginLeft: "5px", margin: "0px 12px",
marginRight: "10px",
}); });
export default Toolbar; export default Toolbar;