quivr/frontend/app/user/components/ThemeSelect/DarkModeToggle.tsx
Nick Guernsey 253e866a86
feat: enhance user page UI (#1319)
# 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>
2023-10-05 17:50:02 +02:00

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>
);
};