mirror of
https://github.com/StanGirard/quivr.git
synced 2024-12-18 08:02:03 +03:00
253e866a86
# Description Hope ya'll don't mind, I updated the User Profile's UI to be a bit more readable. Kept the design neutral to not impose styles. I also kept the original toggle buttons for Theme and Language in case we still want to use those in other places in the app, where a select menu isn't necessary. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate): https://github.com/StanGirard/quivr/assets/64866427/d0320852-ece1-4002-a180-0005df132e71 https://github.com/StanGirard/quivr/assets/64866427/be3c67ec-8d42-44f9-8131-35a70aec20ef --------- Co-authored-by: Zineb El Bachiri <100568984+gozineb@users.noreply.github.com> Co-authored-by: Stan Girard <girard.stanislas@gmail.com>
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { FormEvent } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
/* eslint-disable-next-line sort-imports */
|
|
import { useTheme, type Theme } from "./hooks/useTheme";
|
|
|
|
const ThemeSelect = (): JSX.Element => {
|
|
const { theme, setTheme } = useTheme();
|
|
const { t } = useTranslation(["translation"]);
|
|
const handleChange = (e: FormEvent<HTMLSelectElement>) => {
|
|
setTheme(e.currentTarget.value as Theme);
|
|
};
|
|
|
|
return (
|
|
<fieldset name="theme" className="mb-2">
|
|
<label
|
|
className="block text-slate-700 dark:text-slate-300 mb-2"
|
|
htmlFor="theme"
|
|
>
|
|
{t("themeSelect")}
|
|
</label>
|
|
|
|
<select
|
|
data-testid="theme-select"
|
|
name="theme"
|
|
id="theme"
|
|
value={theme}
|
|
onChange={handleChange}
|
|
className="bg-slate-50 focus:outline-none focus-visible:ring-none border rounded dark:bg-black dark:text-white p-2 w-full md:w-1/2 lg:w-1/3"
|
|
>
|
|
<option data-testid="theme-dark" value="dark">
|
|
Dark
|
|
</option>
|
|
<option data-testid="theme-light" value="light">
|
|
Light
|
|
</option>
|
|
</select>
|
|
</fieldset>
|
|
);
|
|
};
|
|
|
|
ThemeSelect.displayName = "ThemeSelect";
|
|
|
|
export default ThemeSelect;
|