mirror of
https://github.com/StanGirard/quivr.git
synced 2024-12-22 19:01:49 +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>
22 lines
552 B
TypeScript
22 lines
552 B
TypeScript
/* eslint-disable */
|
|
"use client";
|
|
import { MdDarkMode, MdLightMode } from "react-icons/md";
|
|
|
|
import Button from "@/lib/components/ui/Button";
|
|
import { useTheme } from "./hooks/useTheme";
|
|
|
|
export const DarkModeToggle = (): JSX.Element => {
|
|
const { isDark, setTheme } = useTheme();
|
|
|
|
return (
|
|
<Button
|
|
aria-label="toggle dark mode"
|
|
className="focus:outline-none text-3xl"
|
|
onClick={() => setTheme(isDark ? "light" : "dark")}
|
|
variant={"tertiary"}
|
|
>
|
|
{isDark ? <MdLightMode /> : <MdDarkMode />}
|
|
</Button>
|
|
);
|
|
};
|