style: Priority Buttons

SwitchbackTech · Oct 25, 2024 · 1c604c8 · 1c604c8
1 parent f234db9
commit 1c604c8
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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)<PalletteProps>`
-  background: ${({ color }) => getColor(color)};
-  color: ${({ color }) => getInvertedColor(color)};
+export const PriorityButton = styled(Btn)<PalletteProps>`
+  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)<CustomProps>`
-  background: ${({ background }) => background};
-  color: ${({ color }) => color};
+export const StyledSaveBtn = styled(PriorityButton)<CustomProps>`
+  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
@@ -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<Props> = ({
 }) => {
   return (
     <StyledPriorityFlex justifyContent={JustifyContent.SPACE_BETWEEN}>
-      <Button
+      <PriorityButton
         bordered={priority === Priorities.WORK}
-        color={colorNameByPriority.work}
+        color={colorByPriority.work}
         onClick={() => {
           onSetEventField("priority", Priorities.WORK);
         }}
@@ -30,23 +30,23 @@ export const PrioritySection: React.FC<Props> = ({
         title="Doing your best work"
       >
         Work
-      </Button>
+      </PriorityButton>
 
-      <Button
+      <PriorityButton
         bordered={priority === Priorities.SELF}
-        color={colorNameByPriority.self}
+        color={colorByPriority.self}
         onClick={() => onSetEventField("priority", Priorities.SELF)}
         onFocus={() => onSetEventField("priority", Priorities.SELF)}
         role="tab"
         tabIndex={0}
         title="Nurturing your authentic self"
       >
         Self
-      </Button>
+      </PriorityButton>
 
-      <Button
+      <PriorityButton
         bordered={priority === Priorities.RELATIONS}
-        color={colorNameByPriority.relationships}
+        color={colorByPriority.relationships}
         onClick={() => {
           onSetEventField("priority", Priorities.RELATIONS);
         }}
@@ -56,7 +56,7 @@ export const PrioritySection: React.FC<Props> = ({
         title="Connecting with others"
       >
         Relationships
-      </Button>
+      </PriorityButton>
     </StyledPriorityFlex>
   );
 };
diff --git 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<Props> = ({
   onSubmit: _onSubmit,
   priority,
 }) => {
-  const origColor = colorByPriority[priority];
-  const color = brighten(origColor);
-
   return (
     <StyledSubmitRow>
       <SaveBtn
-        background={color}
         minWidth={110}
-        onClick={_onSubmit}
+        priority={priority}
         role="tab"
         tabIndex={0}
         title="Save event"
+        onClick={_onSubmit}
       >
         Save
       </SaveBtn>

diff --git 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;