Style settings menu

adipascu · Oct 12, 2023 · b61b59d · b61b59d
1 parent 6a021b7
commit b61b59d
Showing 1 changed file with 50 additions and 1 deletion.
diff --git a/src/Settings.tsx b/src/Settings.tsx
@@ -1,17 +1,49 @@
 import { createSignal } from "solid-js";
 import { Temporal } from "temporal-polyfill";
+import FONT_FAMILY from "./font";
+import getDarkMode from "./dark-signal";
 
 export default ({
   onBirthDay,
 }: {
   onBirthDay: (birthDay: Temporal.PlainDate | null) => void;
 }) => {
   const [date, setDate] = createSignal<Temporal.PlainDate | null>(null);
+  const colorLabel = () => (getDarkMode() ? "#b9b3aa" : "#b0b5b9");
+  const colorCounter = () => (getDarkMode() ? "#bab4ab" : "#494949");
+  const colorBackground = () => (getDarkMode() ? "#181a1b" : "#ffffff");
+
   return (
-    <div>
+    <div
+      style={{
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "center",
+        "justify-content": "center",
+      }}
+    >
+      <label
+        style={{
+          "font-family": FONT_FAMILY,
+          "font-size": "19.2px",
+          "font-weight": "bold",
+          color: colorCounter(),
+          "margin-bottom": "4px",
+        }}
+      >
+        Enter your Birthday
+      </label>
       <input
         autofocus
         type="date"
+        style={{
+          "margin-bottom": "10px",
+          padding: "10px",
+          "font-size": "16px",
+          border: "2px solid",
+          "border-color": colorLabel(),
+          "border-radius": "4px",
+        }}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             const inputDate = date();
@@ -33,6 +65,23 @@ export default ({
           }
           onBirthDay(inputDate);
         }}
+        style={{
+          padding: "10px 20px",
+          "font-size": "16px",
+          "font-weight": "bold",
+          "border-radius": "4px",
+          border: "none",
+          "background-color": colorCounter(),
+          color: colorBackground(),
+          cursor: "pointer",
+          transition: "background-color 0.2s ease",
+        }}
+        onMouseOver={(e) => {
+          e.currentTarget.style.backgroundColor = colorCounter();
+        }}
+        onMouseOut={(e) => {
+          e.currentTarget.style.backgroundColor = colorLabel();
+        }}
       >
         Motivate
       </button>