From 394be8612b81f1683b05d1b0de5367287590d11a Mon Sep 17 00:00:00 2001
From: mihaic195 <mihai@sortlist.com>
Date: Thu, 22 Jul 2021 15:16:21 +0300
Subject: [PATCH] fix: settings page was missing value prop and restyled dark
 theme elements on booking page

---
 pages/[user]/book.tsx      |  8 ++++++--
 pages/settings/profile.tsx | 15 ++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index 34430e30e6..4bc1eea2e1 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -218,7 +218,9 @@ export default function Book(props: any): JSX.Element {
                   </div>
                   {locations.length > 1 && (
                     <div className="mb-4">
-                      <span className="block text-sm font-medium text-gray-700">Location</span>
+                      <span className="block text-sm font-medium dark:text-white text-gray-700">
+                        Location
+                      </span>
                       {locations.map((location) => (
                         <label key={location.type} className="block">
                           <input
@@ -230,7 +232,9 @@ export default function Book(props: any): JSX.Element {
                             value={location.type}
                             checked={selectedLocation === location.type}
                           />
-                          <span className="text-sm ml-2">{locationLabels[location.type]}</span>
+                          <span className="text-sm ml-2 dark:text-gray-500">
+                            {locationLabels[location.type]}
+                          </span>
                         </label>
                       ))}
                     </div>
diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx
index 6f7836ebfd..86f99256e8 100644
--- a/pages/settings/profile.tsx
+++ b/pages/settings/profile.tsx
@@ -12,6 +12,11 @@ import TimezoneSelect from "react-timezone-select";
 import { UsernameInput } from "../../components/ui/UsernameInput";
 import ErrorAlert from "../../components/ui/alerts/Error";
 
+const themeOptions = [
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+];
+
 export default function Settings(props) {
   const [successModalOpen, setSuccessModalOpen] = useState(false);
   const usernameRef = useRef<HTMLInputElement>();
@@ -19,18 +24,13 @@ export default function Settings(props) {
   const descriptionRef = useRef<HTMLTextAreaElement>();
   const avatarRef = useRef<HTMLInputElement>();
   const hideBrandingRef = useRef<HTMLInputElement>();
-  const [selectedTheme, setSelectedTheme] = useState({ value: "" });
+  const [selectedTheme, setSelectedTheme] = useState({ value: props.user.theme });
   const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
-  const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: "" });
+  const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart });
 
   const [hasErrors, setHasErrors] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
-  const themeOptions = [
-    { value: "light", label: "Light" },
-    { value: "dark", label: "Dark" },
-  ];
-
   useEffect(() => {
     setSelectedTheme(
       props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null
@@ -182,6 +182,7 @@ export default function Settings(props) {
                       id="theme"
                       isDisabled={!selectedTheme}
                       defaultValue={selectedTheme || themeOptions[0]}
+                      value={selectedTheme || themeOptions[0]}
                       onChange={setSelectedTheme}
                       className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
                       options={themeOptions}