[CCUBE-1616][MAHI]Clean up typings, background colour and box shadow …

…to use colour tokens
LifeSG · Nov 18, 2024 · ec49a50 · ec49a50
1 parent 378301f
commit ec49a50
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 14 deletions.
diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx
@@ -161,8 +161,8 @@ export const TimeSlotComponent = styled(TimeSlot)<TimeSlotCellProps>`
                             135deg,
                             ${props.$bgColor2 || Colour["bg-strongest"]} 0px,
                             ${props.$bgColor2 || Colour["bg-strongest"]} 10px,
-                            ${props.$bgColor} 10px,
-                            ${props.$bgColor} 20px
+                            ${props.$bgColor || Colour["bg-stronger"]} 10px,
+                            ${props.$bgColor || Colour["bg-stronger"]} 20px
                         )`};
             `;
         }

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -2,6 +2,7 @@ import dayjs, { Dayjs } from "dayjs";
 import React, { useMemo, useState } from "react";
 import { InternalCalendarProps } from "../shared/internal-calendar";
 import { CellStyleProps, DayCell } from "../shared/internal-calendar/day-cell";
+import { Colour } from "../theme";
 import { TimeSlot } from "../time-slot-bar/types";
 import { CalendarHelper } from "../util/calendar-helper";
 import {
@@ -193,7 +194,7 @@ export const TimeSlotBarWeekDays = ({
             endTime: "",
             clickable: false,
             styleAttributes: {
-                backgroundColor: "#E0E4E5",
+                backgroundColor: Colour["bg-stronger"],
             },
             cellLength,
         };

diff --git a/src/time-slot-bar/time-slot-bar.styles.tsx b/src/time-slot-bar/time-slot-bar.styles.tsx
@@ -46,8 +46,8 @@ export interface TimeSlotStyleProps {
     $width?: number;
     $left?: number;
     $styleType: SlotStyle;
-    $bgColor: string;
-    $bgColor2?: string;
+    $bgColor: string | ((props: unknown) => string);
+    $bgColor2?: string | ((props: unknown) => string);
     $clickable?: boolean;
 }
 
@@ -75,7 +75,8 @@ export const ArrowButton = styled(ClickableIcon)<ArrowStyleProps>`
     position: absolute;
     bottom: ${({ $variant }) => ($variant === "default" ? "0.25rem" : "0rem")};
     background-color: ${Colour.bg};
-    box-shadow: 0px 2px 8px rgba(104, 104, 104, 0.5);
+    box-shadow: 0px 2px 8px
+        rgb(from ${Colour.Primitive["neutral-50"]} r g b / 50%);
     border-radius: 50%;
     padding: 0.5rem;
     width: 2rem;
@@ -137,7 +138,8 @@ export const TimeMarker = styled.div<TimeMarkerStyleProps>`
     display: inline-block;
     width: ${({ $variant }) => `${getCellWidth($variant)}px`};
     position: relative;
-    border-left: ${Border["width-010"]} solid ${Colour["border-stronger"]};
+    border-left: ${Border["width-010"]} ${Border.solid}
+        ${Colour["border-stronger"]};
     ${(props) => {
         let markerHeight = 0;
 
@@ -196,8 +198,8 @@ export const TimeSlot = styled.div<TimeSlotStyleProps>`
                 135deg,
                 ${props.$bgColor2 || Colour["bg-strongest"]} 0px,
                 ${props.$bgColor2 || Colour["bg-strongest"]} 10px,
-                ${props.$bgColor} 10px,
-                ${props.$bgColor} 20px
+                ${props.$bgColor || Colour["bg-stronger"]} 10px,
+                ${props.$bgColor || Colour["bg-stronger"]} 20px
             );
         `}
 `;
@@ -207,7 +209,8 @@ export const TimeSlotBorder = styled.div<{ $variant: TimeSlotBarVariant }>`
     top: ${MAX_LINE_HEIGHT}rem;
     height: ${({ $variant }) => `${getCellHeight($variant)}px`};
     z-index: 1;
-    border-right: ${Border["width-010"]} solid ${Colour["border-stronger"]};
+    border-right: ${Border["width-010"]} ${Border.solid}
+        ${Colour["border-stronger"]};
 `;
 
 export const CellText = styled(Typography.BodyXS)<CellTextStyleProps>`

diff --git a/src/time-slot-bar/types.ts b/src/time-slot-bar/types.ts
@@ -10,9 +10,9 @@ interface TimeSlotBarStyleAttributes {
     /** The label color */
     color?: string;
     /** The background color */
-    backgroundColor: string;
+    backgroundColor: string | ((props: unknown) => string);
     /** The secondary background color. Used in conjunction if styleType is "stripes" */
-    backgroundColor2?: string;
+    backgroundColor2?: string | ((props: unknown) => string);
 }
 
 export interface TimeSlotBarProps {

diff --git a/src/time-slot-week-view/time-slot-week-days.tsx b/src/time-slot-week-view/time-slot-week-days.tsx
@@ -1,5 +1,6 @@
 import dayjs, { Dayjs } from "dayjs";
 import isBetween from "dayjs/plugin/isBetween";
+import { Colour } from "../theme";
 import { useMemo } from "react";
 import { InternalCalendarProps } from "../shared/internal-calendar";
 import {
@@ -44,8 +45,8 @@ const fallbackSlot = {
     clickable: false,
     styleAttributes: {
         styleType: "stripes",
-        backgroundColor: "#ECEFEF",
-        backgroundColor2: "#E0E4E5",
+        backgroundColor: Colour["bg-stronger"],
+        backgroundColor2: Colour["bg-strongest"],
     },
 };