a bit of styling

.tokeignore

@@ -0,0 +1 @@
+package-lock.json

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<HTMLDivElement | null>(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()}
           </div>
 
+          <div>
+            <InputBox
+              value={searchQuery}
+              setValue={setSearchQuery}
+              placeholder="Search..."
+            />
+          </div>
+
           <div className={styles.controlButtons}>
+            <Button>Today</Button>
+
             <ToggleSwitch
               options={["Week", "Month", "Year"]}
               value={currentLayout}
@@ -191,6 +206,7 @@ export default function Calendar({ onDateClick }: CalendarProps) {
             month,
             dateGridHeight,
             dateCellHeight,
+            isActive: isSameMonth(centerMonth, month),
           };
           const ref = undefined;
           // (month === currentlyShownMonth && middleMonthRef) || undefined;

src/calendar/Month.module.scss

@@ -14,6 +14,13 @@
   border-width: 1px 0 0 1px;
   border-color: lightgray;
   border-style: solid;
+
+  color: var(--disabled-text-color);
+  transition: color 0.1s ease-out;
+}
+
+.active .dateCell {
+  color: var(--normal-text-color);
 }
 
 .dateNumber {

src/calendar/Month.tsx

@@ -15,13 +15,14 @@ import { journalFmt, useJournals } from "lib/queries";
 
 interface MonthProps {
   month: Date;
+  isActive: boolean;
   dateGridHeight: number;
   dateCellHeight: number;
   onDateClick?: (_: Date) => 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 (
     <>
       <div
-        className={styles.dateGrid}
+        className={classNames(styles.dateGrid, isActive && styles.active)}
         // style={{ height: `${dateGridHeight}px` }}
         style={{ gridTemplateRows: `repeat(${numWeeks}, ${dateCellHeight}px)` }}
         ref={ref}
@@ -76,7 +77,7 @@ function Month(
               </div>
 
               <div className={styles.dateCellBody}>
-                <p>j: {JSON.stringify(hasJournal)}</p>
+                <p>{hasJournal && "journal"}</p>
               </div>
             </div>
           );

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);
 }

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;
+}

src/widgets/Button.tsx

@@ -0,0 +1,8 @@
+import { HTMLProps } from "react";
+import styles from "./Button.module.scss";
+
+export interface ButtonProps extends HTMLProps<HTMLButtonElement> {}
+
+export default function Button({ children }: ButtonProps) {
+  return <button className={styles.button}>{children}</button>;
+}

src/widgets/InputBox.tsx

@@ -0,0 +1,13 @@
+import { HTMLProps } from "react";
+
+interface InputBoxProps extends HTMLProps<HTMLInputElement> {
+  setValue: (_: string) => any;
+}
+
+export default function InputBox({ setValue, ...props }: InputBoxProps) {
+  const newOnChange = (evt) => {
+    setValue(evt.target.value);
+  };
+
+  return <input onChange={newOnChange} {...props} />;
+}

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;
   }
 }

src/widgets/ToggleSwitch.tsx

@@ -19,13 +19,13 @@ export default function ToggleSwitch({
       {options.map((option) => {
         const isSelected = option === value;
         return (
-          <div
+          <button
             key={option}
             className={classNames(styles.option, isSelected && styles.selected)}
             onClick={() => setValue(option)}
           >
             {option}
-          </div>
+          </button>
         );
       })}
     </div>