From 59a7849173ef62191e807d0b7fbf465d1cabe8a2 Mon Sep 17 00:00:00 2001 From: Michael Zhang Date: Wed, 23 Aug 2023 22:24:44 -0500 Subject: [PATCH] a bit of styling --- .tokeignore | 1 + lib/datascript.ts | 0 src/calendar/Calendar.tsx | 20 ++++++++++++++++++-- src/calendar/Month.module.scss | 7 +++++++ src/calendar/Month.tsx | 7 ++++--- src/global.scss | 10 +++++++--- src/widgets/Button.module.scss | 7 +++++++ src/widgets/Button.tsx | 8 ++++++++ src/widgets/InputBox.tsx | 13 +++++++++++++ src/widgets/ToggleSwitch.module.scss | 12 ++++++++---- src/widgets/ToggleSwitch.tsx | 4 ++-- 11 files changed, 75 insertions(+), 14 deletions(-) create mode 100644 .tokeignore create mode 100644 lib/datascript.ts create mode 100644 src/widgets/Button.module.scss create mode 100644 src/widgets/Button.tsx create mode 100644 src/widgets/InputBox.tsx diff --git a/.tokeignore b/.tokeignore new file mode 100644 index 0000000..483a9c4 --- /dev/null +++ b/.tokeignore @@ -0,0 +1 @@ +package-lock.json \ No newline at end of file diff --git a/lib/datascript.ts b/lib/datascript.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/calendar/Calendar.tsx b/src/calendar/Calendar.tsx index 12582f1..29d41ab 100644 --- a/src/calendar/Calendar.tsx +++ b/src/calendar/Calendar.tsx @@ -4,6 +4,7 @@ import { addDays, addMonths, differenceInWeeks, + isSameMonth, startOfMonth, subMonths, } from "date-fns"; @@ -11,6 +12,8 @@ import Month from "./Month"; import { monthNameOf, weekBoundsOfMonth } from "lib/month"; import { useJournals } from "lib/queries"; import ToggleSwitch from "src/widgets/ToggleSwitch"; +import InputBox from "src/widgets/InputBox"; +import Button from "src/widgets/Button"; const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const NUM_MONTHS_SHOWN = 5; @@ -24,15 +27,15 @@ export default function Calendar({ onDateClick }: CalendarProps) { const [viewportHeight, setViewportHeight] = useState(0); const [scrollyEl, setScrollyEl] = useState(null); - const [centerMonth, setCenterMonth] = useState(startOfMonth(now)); const [resetScrollToEl, setResetScrollToEl] = useState< [HTMLElement, number] | null >(null); const range = [-2, -1, 0, 1, 2]; const [monthsShown, setMonthsShown] = useState( - range.map((x) => addMonths(centerMonth, x)) + range.map((x) => addMonths(startOfMonth(now), x)) ); + const centerMonth = monthsShown[2]; const startDate = monthsShown[0]; const endDate = monthsShown[NUM_MONTHS_SHOWN - 1]; @@ -144,6 +147,8 @@ export default function Calendar({ onDateClick }: CalendarProps) { // middleMonthEl?.scrollIntoView(); // }, [middleMonthRef]); + const [searchQuery, setSearchQuery] = useState(""); + const [currentLayout, setCurrentLayout] = useState("Month"); const [currentView, setCurrentView] = useState("Calendar"); @@ -156,7 +161,17 @@ export default function Calendar({ onDateClick }: CalendarProps) { {centerMonth.getFullYear()} +
+ +
+
+ + void; } function Month( - { month, dateGridHeight, dateCellHeight, onDateClick }: MonthProps, + { month, dateGridHeight, isActive, dateCellHeight, onDateClick }: MonthProps, ref ) { const now = new Date(); @@ -46,7 +47,7 @@ function Month( return ( <>
-

j: {JSON.stringify(hasJournal)}

+

{hasJournal && "journal"}

); diff --git a/src/global.scss b/src/global.scss index b0c2e1e..f800e3b 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,8 +1,12 @@ :root { - --text-color: black; + --normal-text-color: black; + --disabled-text-color: #aaa; + + --border-radius: 6px; @media (prefers-color-scheme: dark) { - --text-color: white; + --normal-text-color: white; + --disabled-text-color: #666; } } @@ -16,5 +20,5 @@ body, padding: 0; font-family: sans-serif; - color: var(--text-color); + color: var(--normal-text-color); } diff --git a/src/widgets/Button.module.scss b/src/widgets/Button.module.scss new file mode 100644 index 0000000..3386b65 --- /dev/null +++ b/src/widgets/Button.module.scss @@ -0,0 +1,7 @@ +.button { + cursor: pointer; + border-radius: var(--border-radius); + border: none; + padding: 4px 12px; + background-color: lightgray; +} diff --git a/src/widgets/Button.tsx b/src/widgets/Button.tsx new file mode 100644 index 0000000..c9fbe3b --- /dev/null +++ b/src/widgets/Button.tsx @@ -0,0 +1,8 @@ +import { HTMLProps } from "react"; +import styles from "./Button.module.scss"; + +export interface ButtonProps extends HTMLProps {} + +export default function Button({ children }: ButtonProps) { + return ; +} diff --git a/src/widgets/InputBox.tsx b/src/widgets/InputBox.tsx new file mode 100644 index 0000000..0633bf9 --- /dev/null +++ b/src/widgets/InputBox.tsx @@ -0,0 +1,13 @@ +import { HTMLProps } from "react"; + +interface InputBoxProps extends HTMLProps { + setValue: (_: string) => any; +} + +export default function InputBox({ setValue, ...props }: InputBoxProps) { + const newOnChange = (evt) => { + setValue(evt.target.value); + }; + + return ; +} diff --git a/src/widgets/ToggleSwitch.module.scss b/src/widgets/ToggleSwitch.module.scss index 0e3c2ff..07e0198 100644 --- a/src/widgets/ToggleSwitch.module.scss +++ b/src/widgets/ToggleSwitch.module.scss @@ -1,19 +1,23 @@ .toggleSwitch { display: flex; - gap: 6px; + gap: 2px; - border-radius: 9999px; + border-radius: var(--border-radius); background-color: lightgray; font-size: 14px; - padding: 4px; + padding: 0; } .option { - border-radius: 9999px; + border-radius: var(--border-radius); + border: none; + + background-color: inherit; padding: 4px 12px; cursor: pointer; &.selected { background-color: gray; + color: white; } } diff --git a/src/widgets/ToggleSwitch.tsx b/src/widgets/ToggleSwitch.tsx index 66c0211..36e2e7f 100644 --- a/src/widgets/ToggleSwitch.tsx +++ b/src/widgets/ToggleSwitch.tsx @@ -19,13 +19,13 @@ export default function ToggleSwitch({ {options.map((option) => { const isSelected = option === value; return ( -
setValue(option)} > {option} -
+ ); })}