Move styles into Vite

Make sidebar work better

reminder-dashboard/src/components/Reminder/IntervalSelector/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "preact/hooks";
-import { useReminder } from "./ReminderContext";
+import "./style.scss";
 
 function divmod(a: number, b: number) {
     return [Math.floor(a / b), a % b];

reminder-dashboard/src/components/Reminder/IntervalSelector/style.scss

@@ -0,0 +1,42 @@
+div.interval-group {
+    height: unset !important;
+}
+
+div.interval-group .clear:focus {
+    outline: none;
+    box-shadow: none !important;
+}
+
+div.interval-group .no-break {
+    text-wrap: avoid;
+    white-space: nowrap;
+}
+
+div.interval-group .clear {
+    border: none;
+    background: none;
+    padding: 1px;
+    margin-right: -3px;
+}
+
+div.interval-group > .interval-group-left input {
+    -webkit-appearance: none;
+    border-style: none;
+    background-color: #eee;
+    font-size: 1rem;
+    font-family: monospace;
+}
+
+div.interval-group > .interval-group-left input.w2 {
+    width: 3ch;
+}
+
+div.interval-group > .interval-group-left input.w3 {
+    width: 3ch;
+}
+
+div.interval-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}

reminder-dashboard/src/components/Reminder/Settings.tsx

@@ -6,14 +6,12 @@ import { fetchUserInfo } from "../../api";
 import { useReminder } from "./ReminderContext";
 import { Attachment } from "./Attachment";
 import { TTS } from "./TTS";
-import { useTimezone } from "../App/TimezoneProvider";
 import { TimeInput } from "./TimeInput";
 
 export const Settings = () => {
     const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
 
     const [reminder, setReminder] = useReminder();
-    const [timezone] = useTimezone();
 
     if (!userFetched) {
         return <></>;