From 1c604c8fcf618b3223fd8512c31dbeecbba03ca7 Mon Sep 17 00:00:00 2001 From: Tyler Dane Date: Fri, 25 Oct 2024 08:44:56 -0500 Subject: [PATCH] style: Priority Buttons --- packages/web/src/common/styles/theme.ts | 2 +- packages/web/src/components/Button/index.tsx | 8 +---- packages/web/src/components/Button/styled.ts | 36 +++++++++++-------- .../PrioritySection/PrioritySection.tsx | 22 ++++++------ .../EventForm/SaveSection/SaveSection.tsx | 9 ++--- .../web/src/views/Forms/EventForm/styled.ts | 4 +-- 6 files changed, 38 insertions(+), 43 deletions(-) diff --git a/packages/web/src/common/styles/theme.ts b/packages/web/src/common/styles/theme.ts index fa7192ff..6b5e76dc 100644 --- a/packages/web/src/common/styles/theme.ts +++ b/packages/web/src/common/styles/theme.ts @@ -55,7 +55,7 @@ export const hoverColorsByPriority = { }; export const colorByPriority = { - [Priorities.UNASSIGNED]: gray700, + [Priorities.UNASSIGNED]: gray400, [Priorities.WORK]: green500, [Priorities.RELATIONS]: orange500, [Priorities.SELF]: blue500, diff --git a/packages/web/src/components/Button/index.tsx b/packages/web/src/components/Button/index.tsx index b78d7d99..51d2aa60 100644 --- a/packages/web/src/components/Button/index.tsx +++ b/packages/web/src/components/Button/index.tsx @@ -1,10 +1,4 @@ -import { - PalletteBtn, - StyledSaveBtn, - StyledFeedbackBtnContainer, -} from "./styled"; - -export const Button = PalletteBtn; +import { StyledSaveBtn, StyledFeedbackBtnContainer } from "./styled"; export const SaveBtn = StyledSaveBtn; diff --git a/packages/web/src/components/Button/styled.ts b/packages/web/src/components/Button/styled.ts index dbdda570..f666330f 100644 --- a/packages/web/src/components/Button/styled.ts +++ b/packages/web/src/components/Button/styled.ts @@ -1,7 +1,8 @@ import styled from "styled-components"; -import { ColorNames } from "@core/types/color.types"; -import { brighten, getColor, getInvertedColor } from "@core/util/color.utils"; +import { brighten, darken } from "@core/util/color.utils"; import { Flex } from "@web/components/Flex"; +import { Priorities, Priority } from "@core/constants/core.constants"; +import { colorByPriority } from "@web/common/styles/theme"; export const StyledFeedbackBtnContainer = styled(Flex)` position: absolute; @@ -18,41 +19,46 @@ export const Btn = styled.div` `; interface PalletteProps { - color?: ColorNames | string; + color?: string; bordered?: boolean; border?: string; } -export const PalletteBtn = styled(Btn)` - background: ${({ color }) => getColor(color)}; - color: ${({ color }) => getInvertedColor(color)}; +export const PriorityButton = styled(Btn)` + background: color; + color: ${({ theme }) => theme.color.text.secondary}; min-width: 158px; padding: 0 8px; border: ${({ border, bordered, theme }) => - border || (bordered && `1px solid ${theme.color.border.primaryDark}`)}; + border || (bordered && `2px solid ${theme.color.border.primaryDark}`)}; &:hover { - background: ${({ color }) => getInvertedColor(color)}; + background: ${({ theme }) => theme.color.bg.primary}; color: ${({ color }) => brighten(color)}; transition: background-color 0.5s; transition: color 0.55s; } `; interface CustomProps { - background: string; - color?: string; + priority: Priority; minWidth: number; } -export const StyledSaveBtn = styled(PalletteBtn)` - background: ${({ background }) => background}; - color: ${({ color }) => color}; +export const StyledSaveBtn = styled(PriorityButton)` + background: ${({ priority }) => darken(colorByPriority[priority])}; + color: ${({ priority, theme }) => + priority === Priorities.UNASSIGNED + ? theme.color.text.primary + : theme.color.text.secondary}; min-width: ${({ minWidth }) => minWidth}px; &:focus { - border: 1px solid ${({ theme }) => theme.color.border.primaryDark}; + border: 2px solid ${({ theme }) => theme.color.border.primaryDark}; } &:hover { - filter: brightness(120%); + color: ${({ priority, theme }) => + priority === Priorities.UNASSIGNED + ? theme.color.text.primary + : brighten(colorByPriority[priority])}; } `; diff --git a/packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx b/packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx index 8c1fa95f..999f55aa 100644 --- a/packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx +++ b/packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx @@ -1,8 +1,8 @@ import React from "react"; import { Priorities, Priority } from "@core/constants/core.constants"; -import { colorNameByPriority } from "@core/constants/colors"; import { JustifyContent } from "@web/components/Flex/styled"; -import { Button } from "@web/components/Button"; +import { colorByPriority } from "@web/common/styles/theme"; +import { PriorityButton } from "@web/components/Button/styled"; import { StyledPriorityFlex } from "./styled"; import { SetEventFormField } from "../types"; @@ -18,9 +18,9 @@ export const PrioritySection: React.FC = ({ }) => { return ( - + - + - + ); }; diff --git a/packages/web/src/views/Forms/EventForm/SaveSection/SaveSection.tsx b/packages/web/src/views/Forms/EventForm/SaveSection/SaveSection.tsx index 68526a45..91432a1e 100644 --- a/packages/web/src/views/Forms/EventForm/SaveSection/SaveSection.tsx +++ b/packages/web/src/views/Forms/EventForm/SaveSection/SaveSection.tsx @@ -1,8 +1,6 @@ import React from "react"; import { Priority } from "@core/constants/core.constants"; -import { brighten } from "@core/util/color.utils"; import { SaveBtn } from "@web/components/Button"; -import { colorByPriority } from "@web/common/styles/theme"; import { StyledSubmitRow } from "../styled"; @@ -15,18 +13,15 @@ export const SaveSection: React.FC = ({ onSubmit: _onSubmit, priority, }) => { - const origColor = colorByPriority[priority]; - const color = brighten(origColor); - return ( Save diff --git a/packages/web/src/views/Forms/EventForm/styled.ts b/packages/web/src/views/Forms/EventForm/styled.ts index 800286cd..a980511d 100644 --- a/packages/web/src/views/Forms/EventForm/styled.ts +++ b/packages/web/src/views/Forms/EventForm/styled.ts @@ -7,8 +7,8 @@ import { } from "@web/common/constants/web.constants"; import { Flex } from "@web/components/Flex"; import { Textarea } from "@web/components/Textarea"; -import { Button } from "@web/components/Button"; import { hoverColorsByPriority } from "@web/common/styles/theme"; +import { PriorityButton } from "@web/components/Button/styled"; import { StyledFormProps } from "./types"; @@ -50,7 +50,7 @@ export const StyledIconRow = styled(Flex)` justify-content: end; `; -export const StyledSubmitButton = styled(Button)` +export const StyledSubmitButton = styled(PriorityButton)` border: 2px solid; margin-top: 15px; min-width: ${EVENT_WIDTH_MINIMUM}px;