[CCUBE-1626][RL] Refactor to used shared text style in HeaderCell

LifeSG · Dec 11, 2024 · 6715511 · 6715511
1 parent 4b7eccc
commit 6715511
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 44 deletions.
diff --git a/src/shared/internal-calendar/fixed-range/fixed-range-calendar-day-view.tsx b/src/shared/internal-calendar/fixed-range/fixed-range-calendar-day-view.tsx
@@ -1,6 +1,5 @@
 import dayjs, { Dayjs } from "dayjs";
 import { useMemo, useState } from "react";
-import { Typography } from "../../../typography";
 import { CalendarHelper } from "../../../util/calendar-helper";
 import { HeaderCell, RowDayCell, Wrapper } from "../standard";
 import { CommonCalendarProps } from "../types";
@@ -64,9 +63,7 @@ export const FixedRangeCalendarDayView = ({
     const renderHeader = () => {
         return weeksOfTheMonth[0].map((day, index) => (
             <HeaderCell key={`week-day-${index}`}>
-                <Typography.BodySM weight="semibold">
-                    {dayjs(day).format("ddd")}
-                </Typography.BodySM>
+                {dayjs(day).format("ddd")}
             </HeaderCell>
         ));
     };

diff --git a/src/shared/internal-calendar/single/index.ts b/src/shared/internal-calendar/single/index.ts
@@ -1,2 +1 @@
 export * from "./single-calendar-day-view";
-export * from "./single-calendar-day-view.style";
diff --git a/src/shared/internal-calendar/single/single-calendar-day-view.style.tsx b/src/shared/internal-calendar/single/single-calendar-day-view.style.tsx
diff --git a/src/shared/internal-calendar/single/single-calendar-day-view.tsx b/src/shared/internal-calendar/single/single-calendar-day-view.tsx
@@ -1,14 +1,9 @@
 import dayjs, { Dayjs } from "dayjs";
 import isBetween from "dayjs/plugin/isBetween";
 import { useMemo, useState } from "react";
-import { Typography } from "../../../typography";
 import { CalendarHelper } from "../../../util/calendar-helper";
+import { HeaderCell, RowDayCell, Wrapper } from "../standard";
 import { CommonCalendarProps } from "../types";
-import {
-    HeaderCell,
-    RowDayCell,
-    Wrapper,
-} from "./single-calendar-day-view.style";
 import { SingleCell } from "./single-cell";
 
 dayjs.extend(isBetween);
@@ -70,9 +65,7 @@ export const SingleCalendarDayView = ({
     const renderHeader = () => {
         return weeksOfTheMonth[0].map((day, index) => (
             <HeaderCell key={`week-day-${index}`}>
-                <Typography.BodySM weight="semibold">
-                    {dayjs(day).format("ddd")}
-                </Typography.BodySM>
+                {dayjs(day).format("ddd")}
             </HeaderCell>
         ));
     };

diff --git a/src/shared/internal-calendar/standard/standard-calendar-day-view.style.tsx b/src/shared/internal-calendar/standard/standard-calendar-day-view.style.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Colour, Font } from "../../../theme";
 
 export const Wrapper = styled.div`
     width: 100%;
@@ -14,6 +15,9 @@ export const HeaderCell = styled.div`
     height: 2.5rem;
     pointer-events: none;
     user-select: none;
+
+    ${Font["body-sm-semibold"]};
+    color: ${Colour["text"]};
 `;
 
 export const RowDayCell = styled.div`

diff --git a/src/shared/internal-calendar/standard/standard-calendar-day-view.tsx b/src/shared/internal-calendar/standard/standard-calendar-day-view.tsx
@@ -1,7 +1,6 @@
 import dayjs, { Dayjs } from "dayjs";
 import isBetween from "dayjs/plugin/isBetween";
 import { useMemo, useState } from "react";
-import { Typography } from "../../../typography";
 import { CalendarHelper } from "../../../util/calendar-helper";
 import { CommonCalendarProps, FocusType } from "../types";
 import {
@@ -76,9 +75,7 @@ export const StandardCalendarDayView = ({
     const renderHeader = () => {
         return weeksOfTheMonth[0].map((day, index) => (
             <HeaderCell key={`week-day-${index}`}>
-                <Typography.BodySM weight="semibold">
-                    {dayjs(day).format("ddd")}
-                </Typography.BodySM>
+                {dayjs(day).format("ddd")}
             </HeaderCell>
         ));
     };

diff --git a/src/shared/internal-calendar/week/week-calendar-day-view.tsx b/src/shared/internal-calendar/week/week-calendar-day-view.tsx
@@ -1,6 +1,5 @@
 import dayjs, { Dayjs } from "dayjs";
 import { useMemo, useState } from "react";
-import { V2_Text } from "../../../v2_text/text";
 import { CalendarHelper } from "../../../util/calendar-helper";
 import { HeaderCell, RowDayCell, Wrapper } from "../standard";
 import { CommonCalendarProps } from "../types";
@@ -64,9 +63,7 @@ export const WeekCalendarDayView = ({
     const renderHeader = () => {
         return weeksOfTheMonth[0].map((day, index) => (
             <HeaderCell key={`week-day-${index}`}>
-                <V2_Text.H6 weight="semibold">
-                    {dayjs(day).format("ddd")}
-                </V2_Text.H6>
+                {dayjs(day).format("ddd")}
             </HeaderCell>
         ));
     };
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from "./single-calendar-day-view";
		export * from "./single-calendar-day-view.style";