From 0fa69045f941a24fd3285b865234dfc654bcb26b Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 24 Nov 2024 17:04:21 +0100 Subject: [PATCH 1/2] UPDATE: WIP --- webapp/src/components/colorPicker.tsx | 51 +++++++++++++++++---------- 1 file changed, 32 insertions(+), 19 deletions(-) diff --git a/webapp/src/components/colorPicker.tsx b/webapp/src/components/colorPicker.tsx index 1ebc483..fa3a29a 100644 --- a/webapp/src/components/colorPicker.tsx +++ b/webapp/src/components/colorPicker.tsx @@ -71,6 +71,7 @@ const ColorPicker = (properties: ColorPickerProps) => { setColor(newColor); }} /> + {"Hex"} @@ -131,6 +132,8 @@ const ColorPicker = (properties: ColorPickerProps) => { const RecentLabel = styled.div` font-family: "Inter"; font-size: 12px; + font-family: Inter; + margin: 8px; color: ${theme.palette.text.secondary}; `; @@ -138,14 +141,16 @@ const ColorList = styled.div` display: flex; flex-wrap: wrap; flex-direction: row; + margin: 8px; + justify-content: space-between; `; const Button = styled.button<{ $color: string }>` - width: 20px; - height: 20px; + width: 16px; + height: 16px; ${({ $color }): string => { 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};`; }} @@ -153,17 +158,14 @@ const Button = styled.button<{ $color: string }>` return $color; }}; box-sizing: border-box; - margin-top: 10px; - margin-right: 10px; - border-radius: 2px; + margin-top: 0px; + border-radius: 4px; `; const HorizontalDivider = styled.div` height: 0px; width: 100%; - border-top: 1px solid ${theme.palette.grey["400"]}; - margin-top: 15px; - margin-bottom: 5px; + border-top: 1px solid ${theme.palette.grey["200"]}; `; // const StyledPopover = styled(Popover)` @@ -183,7 +185,7 @@ const HorizontalDivider = styled.div` const ColorPickerDialog = styled.div` background: ${theme.palette.background.default}; width: ${colorPickerWidth}px; - padding: 15px; + padding: 0px; display: flex; flex-direction: column; @@ -193,11 +195,11 @@ const ColorPickerDialog = styled.div` } & .react-colorful__saturation { border-bottom: none; - border-radius: 5px; + border-radius: 0px; } & .react-colorful__hue { - height: 20px; - margin-top: 15px; + height: 8px; + margin: 8px; border-radius: 5px; } & .react-colorful__saturation-pointer { @@ -206,19 +208,22 @@ const ColorPickerDialog = styled.div` } & .react-colorful__hue-pointer { width: 7px; - border-radius: 3px; + border-radius: 8px; + height: 16px; + width: 16px; + border-bottom: 1px solid #eee; } `; const HashLabel = styled.div` margin: auto 0px auto 10px; font-size: 13px; - color: #7d8ec2; + color: #333; font-family: ${theme.typography.button.fontFamily}; `; const HexLabel = styled.div` - margin: auto 10px auto 0px; + margin: auto 0px; font-size: 12px; display: inline-flex; font-family: ${theme.typography.button.fontFamily}; @@ -227,15 +232,22 @@ const HexLabel = styled.div` const HexColorInputBox = styled.div` display: inline-flex; flex-grow: 1; - margin-right: 10px; width: 140px; height: 28px; - border: 1px solid ${theme.palette.grey["600"]}; + border: 1px solid ${theme.palette.grey["300"]}; border-radius: 5px; + &:hover { + border: 1px solid ${theme.palette.grey["600"]}; + } + &:focus-within { + outline: 2px solid ${theme.palette.secondary.main}; + outline-offset: 1px; + } `; const HexWrapper = styled.div` display: flex; + gap: 8px; flex-grow: 1; & input { min-width: 0px; @@ -273,7 +285,8 @@ const ColorPickerInput = styled.div` display: flex; flex-direction: row; align-items: center; - margin-top: 15px; + margin: 8px; + gap: 8px; `; export default ColorPicker; From c39540a747007ab4e19b6c806dd38816173eea6b Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 8 Dec 2024 22:21:06 +0100 Subject: [PATCH 2/2] UPDATE: Changing the color picker to look like in the Figmas --- webapp/src/components/colorPicker.tsx | 12 +++++++++--- webapp/src/components/workbook.tsx | 2 +- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/colorPicker.tsx b/webapp/src/components/colorPicker.tsx index fa3a29a..3a629ae 100644 --- a/webapp/src/components/colorPicker.tsx +++ b/webapp/src/components/colorPicker.tsx @@ -133,7 +133,7 @@ const RecentLabel = styled.div` font-family: "Inter"; font-size: 12px; font-family: Inter; - margin: 8px; + margin: 8px 8px 0px 8px; color: ${theme.palette.text.secondary}; `; @@ -142,7 +142,8 @@ const ColorList = styled.div` flex-wrap: wrap; flex-direction: row; margin: 8px; - justify-content: space-between; + justify-content: flex-start; + gap: 4.7px; `; const Button = styled.button<{ $color: string }>` @@ -160,6 +161,11 @@ const Button = styled.button<{ $color: string }>` box-sizing: border-box; margin-top: 0px; border-radius: 4px; + &:hover { + cursor: pointer; + outline: 1px solid ${theme.palette.grey["300"]}; + outline-offset: 1px; + } `; const HorizontalDivider = styled.div` @@ -271,7 +277,7 @@ const Swatch = styled.div<{ $color: string }>` display: inline-flex; ${({ $color }): string => { 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};`; }} diff --git a/webapp/src/components/workbook.tsx b/webapp/src/components/workbook.tsx index a2b2b1d..b0e832f 100644 --- a/webapp/src/components/workbook.tsx +++ b/webapp/src/components/workbook.tsx @@ -530,7 +530,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => { ); setRedrawId((id) => id + 1); }} - fillColor={style.fill.fg_color || "#FFF"} + fillColor={style.fill.fg_color || "#FFFFFF"} fontColor={style.font.color} bold={style.font.b} underline={style.font.u}