Skip to content

Commit e5a2a24

Browse files
trevorpfiztrevorpfiz
committed
feat: calendar polish
1 parent bd974e1 commit e5a2a24

File tree

4 files changed

+70
-48
lines changed

4 files changed

+70
-48
lines changed

‎apps/expo/src/components/calendar/basic-calendar.tsx

+27-42
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ import type {
55
import React from "react";
66
import { View } from "react-native";
77
import { Calendar, useCalendar } from "@marceloterreiro/flash-calendar";
8-
import colors from "tailwindcss/colors";
98

109
import { Button } from "~/components/ui/button";
1110
import { Text } from "~/components/ui/text";
1211
import { mockScoresData } from "~/data/scores";
13-
import { NAV_THEME } from "~/lib/constants";
12+
import { CALENDAR_THEME } from "~/lib/constants";
1413
import { ChevronLeft } from "~/lib/icons/chevron-left";
1514
import { ChevronRight } from "~/lib/icons/chevron-right";
1615
import { useColorScheme } from "~/lib/use-color-scheme";
@@ -24,28 +23,27 @@ interface BasicCalendarProps extends CalendarProps {
2423
onNextMonthPress: () => void;
2524
}
2625

27-
function getScoreColor(score: number) {
28-
if (score >= 70) return colors.green[500];
29-
if (score >= 50) return colors.yellow[500];
30-
return colors.red[500];
31-
}
32-
3326
export function BasicCalendar(props: BasicCalendarProps) {
3427
const { calendarRowMonth, weekDaysList, weeksList } = useCalendar(props);
3528
const { colorScheme } = useColorScheme();
3629
const isDark = colorScheme === "dark";
37-
const theme = isDark ? NAV_THEME.dark : NAV_THEME.light;
30+
const theme = isDark ? CALENDAR_THEME.dark : CALENDAR_THEME.light;
31+
32+
function getScoreColor(score: number) {
33+
if (score >= 70) return theme.good;
34+
if (score >= 50) return theme.ok;
35+
return theme.bad;
36+
}
3837

3938
const calendarTheme: CalendarTheme = {
4039
rowMonth: {
4140
container: {
4241
height: MONTH_HEADER_HEIGHT,
43-
backgroundColor: theme.background,
4442
paddingHorizontal: 4,
4543
},
4644
content: {
47-
color: theme.primary,
48-
fontSize: 16,
45+
color: theme.text,
46+
fontSize: 14,
4947
fontWeight: "bold",
5048
textAlign: "center",
5149
},
@@ -57,8 +55,10 @@ export function BasicCalendar(props: BasicCalendarProps) {
5755
},
5856
itemWeekName: {
5957
content: {
60-
color: isDark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)",
58+
color: theme.primary,
59+
opacity: 0.3,
6160
fontSize: 12,
61+
fontWeight: "bold",
6262
},
6363
},
6464
itemDay: {
@@ -70,7 +70,7 @@ export function BasicCalendar(props: BasicCalendarProps) {
7070
container: {
7171
padding: 0,
7272
borderRadius: DAY_HEIGHT / 2,
73-
backgroundColor: isPressed ? "transparent" : "transparent",
73+
backgroundColor: isPressed ? theme.highlight : "transparent",
7474
},
7575
content: {
7676
fontSize: 14,
@@ -80,48 +80,41 @@ export function BasicCalendar(props: BasicCalendarProps) {
8080
},
8181
};
8282
},
83-
idle: ({ isPressed, id }) => {
84-
const score = mockScoresData.find((s) => s.date === id)?.value;
85-
const scoreColor = score ? getScoreColor(score) : theme.text;
86-
83+
idle: () => {
8784
return {
8885
container: {
89-
backgroundColor: isPressed ? theme.primary : "transparent",
86+
// backgroundColor: isPressed ? theme.highlight : "transparent",
9087
},
9188
content: {
92-
color: scoreColor,
93-
// color: isPressed ? theme.background : theme.text,
89+
// color: scoreColor,
9490
},
9591
};
9692
},
97-
today: ({ isPressed }) => ({
93+
today: () => ({
9894
container: {
9995
borderColor: theme.primary,
10096
borderWidth: 1,
101-
backgroundColor: isPressed ? theme.primary : "transparent",
10297
padding: 0,
10398
},
104-
content: {
105-
color: isPressed ? theme.background : theme.text,
106-
},
99+
content: {},
107100
}),
108-
active: () => ({
101+
active: ({ isToday }) => ({
109102
container: {
110-
backgroundColor: theme.primary,
103+
backgroundColor: theme.active,
111104
borderTopLeftRadius: DAY_HEIGHT / 2,
112105
borderTopRightRadius: DAY_HEIGHT / 2,
113106
borderBottomLeftRadius: DAY_HEIGHT / 2,
114107
borderBottomRightRadius: DAY_HEIGHT / 2,
108+
borderColor: theme.primary,
109+
borderWidth: isToday ? 1 : 0,
115110
},
116-
content: {
117-
color: theme.background,
118-
},
111+
content: {},
119112
}),
120113
},
121114
};
122115

123116
return (
124-
<View className="flex-1 bg-background">
117+
<View>
125118
<Calendar.VStack spacing={props.calendarRowVerticalSpacing}>
126119
<Calendar.HStack
127120
alignItems="center"
@@ -134,11 +127,7 @@ export function BasicCalendar(props: BasicCalendarProps) {
134127
size={"icon"}
135128
className="bg-transparent active:opacity-50"
136129
>
137-
<ChevronLeft
138-
size={40}
139-
strokeWidth={1.5}
140-
className="text-foreground"
141-
/>
130+
<ChevronLeft size={40} strokeWidth={1.5} color={theme.text} />
142131
</Button>
143132
<Text style={calendarTheme.rowMonth?.content}>
144133
{calendarRowMonth.toUpperCase()}
@@ -148,11 +137,7 @@ export function BasicCalendar(props: BasicCalendarProps) {
148137
size={"icon"}
149138
className="bg-transparent active:opacity-50"
150139
>
151-
<ChevronRight
152-
className="text-foreground"
153-
size={40}
154-
strokeWidth={1.5}
155-
/>
140+
<ChevronRight color={theme.text} size={40} strokeWidth={1.5} />
156141
</Button>
157142
</Calendar.HStack>
158143

‎apps/expo/src/components/calendar/home-calendar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export function HomeCalendar() {
4646
}, [currentCalendarMonth]);
4747

4848
return (
49-
<View className="py-safe max-h-96 flex-1 px-1">
49+
<View>
5050
<BasicCalendar
5151
calendarActiveDateRanges={calendarActiveDateRanges}
5252
calendarDisabledDateIds={[]}

‎apps/expo/src/components/home/home-header.tsx

+17-5
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,17 @@ import {
1010
DialogTrigger,
1111
} from "~/components/ui/dialog";
1212
import { Text } from "~/components/ui/text";
13+
import { CALENDAR_THEME } from "~/lib/constants";
1314
import { Bell } from "~/lib/icons/bell";
1415
import { Calendar } from "~/lib/icons/calendar";
16+
import { useColorScheme } from "~/lib/use-color-scheme";
1517
import { useDateStore } from "~/stores/dateStore";
1618

1719
export default function HomeHeader() {
1820
const { selectedDate, isCalendarOpen, setIsCalendarOpen } = useDateStore();
21+
const { colorScheme } = useColorScheme();
22+
const isDark = colorScheme === "dark";
23+
const theme = isDark ? CALENDAR_THEME.dark : CALENDAR_THEME.light;
1924

2025
const formattedDate = isToday(selectedDate)
2126
? "Today"
@@ -31,15 +36,22 @@ export default function HomeHeader() {
3136
</Button>
3237
</DialogTrigger>
3338
<DialogContent
34-
className="rounded-none border-0 p-0"
39+
className="py-safe max-h-[32rem] max-w-full rounded-none border-0 px-1"
3540
overlayClassName="justify-start p-0"
41+
style={{ backgroundColor: theme.background }}
3642
noClose
3743
>
3844
<HomeCalendar />
39-
<DialogFooter className="flex-row-reverse p-4">
40-
<Text className="font-semibold text-green-500">{`\u2022 >=70`}</Text>
41-
<Text className="font-semibold text-yellow-500">{`\u2022 50-69`}</Text>
42-
<Text className="font-semibold text-red-500">{`\u2022 <50`}</Text>
45+
<DialogFooter className="flex-row-reverse px-4 py-12">
46+
<Text className="font-semibold" style={{ color: theme.good }}>
47+
{"\u2022 >=70"}
48+
</Text>
49+
<Text className="font-semibold" style={{ color: theme.ok }}>
50+
{"\u2022 50-69"}
51+
</Text>
52+
<Text className="font-semibold" style={{ color: theme.bad }}>
53+
{"\u2022 <50"}
54+
</Text>
4355
</DialogFooter>
4456
</DialogContent>
4557
</Dialog>

‎apps/expo/src/lib/constants.ts

+25
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,31 @@ export const NAV_THEME = {
2121
},
2222
};
2323

24+
export const CALENDAR_THEME = {
25+
light: {
26+
background: colors.white,
27+
text: colors.gray[900],
28+
primary: colors.gray[900],
29+
disabled: "rgba(0, 0, 0, .3)",
30+
active: "rgba(0, 0, 0, .1)",
31+
highlight: "rgba(0, 0, 0, .1)",
32+
good: colors.green[500],
33+
ok: colors.yellow[500],
34+
bad: colors.red[500],
35+
},
36+
dark: {
37+
background: colors.gray[900],
38+
primary: colors.white,
39+
text: colors.gray[100],
40+
disabled: "rgba(255, 255, 255, .3)",
41+
active: "rgba(255, 255, 255, .1)",
42+
highlight: "rgba(255, 255, 255, .1)",
43+
good: colors.green[400],
44+
ok: colors.yellow[400],
45+
bad: colors.red[500],
46+
},
47+
};
48+
2449
export const INTRO_CONTENT = [
2550
{
2651
title: "scribeHC",

0 commit comments

Comments
 (0)