style: SomedayEventForm: box shadow

SwitchbackTech · Oct 24, 2024 · f234db9 · f234db9
1 parent f887abf
commit f234db9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/packages/web/src/common/styles/default-theme.d.ts b/packages/web/src/common/styles/default-theme.d.ts
@@ -22,6 +22,9 @@ declare module "styled-components" {
         shadow: string;
         text: string;
       };
+      shadow: {
+        default: string;
+      };
       status: {
         success: string;
         error: string;

diff --git a/packages/web/src/common/styles/theme.ts b/packages/web/src/common/styles/theme.ts
@@ -37,6 +37,7 @@ const gray100 = "hsl(47 7 73)";
 const white300 = "hsl(180 100% 97%)";
 const white200 = "hsl(0 0 98)";
 const white100 = "hsl(0 0 100)";
+const black300 = "hsla(0 0 0 / 25%)";
 
 export const darkBlueGradient = {
   level1: darkBlue400,
@@ -85,6 +86,9 @@ export const theme: DefaultTheme = {
       shadow: gray400,
       text: white200,
     },
+    shadow: {
+      default: black300,
+    },
     status: {
       success: green500,
       error: red500,

diff --git a/packages/web/src/views/Forms/EventForm/styled.ts b/packages/web/src/views/Forms/EventForm/styled.ts
@@ -1,8 +1,5 @@
 import styled from "styled-components";
-import { Priorities } from "@core/constants/core.constants";
-import { colorNameByPriority } from "@core/constants/colors";
-import { ColorNames, InvertedColorNames } from "@core/types/color.types";
-import { getColor, getInvertedColor } from "@core/util/color.utils";
+import { Priorities, Priority } from "@core/constants/core.constants";
 import { EVENT_WIDTH_MINIMUM } from "@web/views/Calendar/layout.constants";
 import {
   ANIMATION_TIME_3_MS,
@@ -11,6 +8,7 @@ import {
 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 { StyledFormProps } from "./types";
 
@@ -23,17 +21,9 @@ interface SomedayFormProps extends StyledFormProps {
 
 export const StyledEventForm = styled.form<SomedayFormProps>`
   background: ${({ priority }) =>
-    getColor(
-      colorNameByPriority[priority || Priorities.UNASSIGNED] as ColorNames
-    )};
+    hoverColorsByPriority[(priority as Priority) || Priorities.UNASSIGNED]};
   border-radius: 4px;
-  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
-  color: ${({ priority }) =>
-    getInvertedColor(
-      colorNameByPriority[
-        priority || Priorities.UNASSIGNED
-      ] as InvertedColorNames
-    )};
+  box-shadow: 0px 5px 5px ${({ theme }) => theme.color.shadow.default};
   font-size: 20px;
   padding: 18px 20px;
   transition: ${ANIMATION_TIME_3_MS};