public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #379 from mihaic195/fix/settings-page-and-theme-on-booking-page 

Fix: Settings page bug and dark theme adjustments
pull/406/head
Bailey Pumfleet 2021-08-03 08:27:29 +01:00 committed by GitHub
parent de5571c8b6 394be8612b
commit fd535fc308
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/[user]/book.tsx
View File

@ -218,7 +218,9 @@ export default function Book(props: any): JSX.Element {
</div> </div>
{locations.length > 1 && ( {locations.length > 1 && (
<div className="mb-4"> <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) => ( {locations.map((location) => (
<label key={location.type} className="block"> <label key={location.type} className="block">
<input <input
@ -230,7 +232,9 @@ export default function Book(props: any): JSX.Element {
value={location.type} value={location.type}
checked={selectedLocation === 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> </label>
))} ))}
</div> </div>

15
pages/settings/profile.tsx
View File

@ -12,6 +12,11 @@ import TimezoneSelect from "react-timezone-select";
import { UsernameInput } from "../../components/ui/UsernameInput"; import { UsernameInput } from "../../components/ui/UsernameInput";
import ErrorAlert from "../../components/ui/alerts/Error"; import ErrorAlert from "../../components/ui/alerts/Error";
const themeOptions = [
{ value: "light", label: "Light" },
{ value: "dark", label: "Dark" },
];
export default function Settings(props) { export default function Settings(props) {
const [successModalOpen, setSuccessModalOpen] = useState(false); const [successModalOpen, setSuccessModalOpen] = useState(false);
const usernameRef = useRef<HTMLInputElement>(); const usernameRef = useRef<HTMLInputElement>();
@ -19,18 +24,13 @@ export default function Settings(props) {
const descriptionRef = useRef<HTMLTextAreaElement>(); const descriptionRef = useRef<HTMLTextAreaElement>();
const avatarRef = useRef<HTMLInputElement>(); const avatarRef = useRef<HTMLInputElement>();
const hideBrandingRef = 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 [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 [hasErrors, setHasErrors] = useState(false);
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
const themeOptions = [
{ value: "light", label: "Light" },
{ value: "dark", label: "Dark" },
];
useEffect(() => { useEffect(() => {
setSelectedTheme( setSelectedTheme(
props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null
@ -179,6 +179,7 @@ export default function Settings(props) {
id="theme" id="theme"
isDisabled={!selectedTheme} isDisabled={!selectedTheme}
defaultValue={selectedTheme || themeOptions[0]} defaultValue={selectedTheme || themeOptions[0]}
value={selectedTheme || themeOptions[0]}
onChange={setSelectedTheme} onChange={setSelectedTheme}
className="shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm" className="shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
options={themeOptions} options={themeOptions}