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

UPDATE: Changing the color picker to look like in the Figmas

Browse Source
This commit is contained in:
Daniel
2024-12-08 22:21:06 +01:00
parent 0fa69045f9
commit c39540a747
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/src/components/colorPicker.tsx
View File

@@ -133,7 +133,7 @@ const RecentLabel = styled.div`
font-family: "Inter"; font-family: "Inter";
font-size: 12px; font-size: 12px;
font-family: Inter; font-family: Inter;
margin: 8px; margin: 8px 8px 0px 8px;
color: ${theme.palette.text.secondary}; color: ${theme.palette.text.secondary};
`; `;
@@ -142,7 +142,8 @@ const ColorList = styled.div`
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
margin: 8px; margin: 8px;
justify-content: space-between; justify-content: flex-start;
gap: 4.7px;
`; `;
const Button = styled.button<{ $color: string }>` const Button = styled.button<{ $color: string }>`
@@ -160,6 +161,11 @@ const Button = styled.button<{ $color: string }>`
box-sizing: border-box; box-sizing: border-box;
margin-top: 0px; margin-top: 0px;
border-radius: 4px; border-radius: 4px;
&:hover {
cursor: pointer;
outline: 1px solid ${theme.palette.grey["300"]};
outline-offset: 1px;
}
`; `;
const HorizontalDivider = styled.div` const HorizontalDivider = styled.div`
@@ -271,7 +277,7 @@ const Swatch = styled.div<{ $color: string }>`
display: inline-flex; display: inline-flex;
${({ $color }): string => { ${({ $color }): string => {
if ($color.toUpperCase() === "#FFFFFF") { if ($color.toUpperCase() === "#FFFFFF") {
return `border: 1px solid ${theme.palette.grey["600"]};`; return `border: 1px solid ${theme.palette.grey["300"]};`;
} }
return `border: 1px solid ${$color};`; return `border: 1px solid ${$color};`;
}} }}

2
webapp/src/components/workbook.tsx
View File

@@ -530,7 +530,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
); );
setRedrawId((id) => id + 1); setRedrawId((id) => id + 1);
}} }}
fillColor={style.fill.fg_color || "#FFF"} fillColor={style.fill.fg_color || "#FFFFFF"}
fontColor={style.font.color} fontColor={style.font.color}
bold={style.font.b} bold={style.font.b}
underline={style.font.u} underline={style.font.u}