Update settings button style

This commit is contained in:
Xiangxuan Liu 2023-03-18 23:40:05 +08:00
parent 6bf8bacec0
commit 934ba277a6
2 changed files with 5 additions and 5 deletions

View File

@ -9,10 +9,10 @@ interface Props {
export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
return (
<div
className="flex hover:bg-[#343541] py-2 px-4 rounded-md cursor-pointer w-[200px] items-center"
className="flex hover:bg-[#343541] py-2 px-2 rounded-md cursor-pointer w-full items-center"
onClick={onClick}
>
<div className="mr-3">{icon}</div>
<div className="mr-2">{icon}</div>
<div>{text}</div>
</div>
);

View File

@ -1,4 +1,4 @@
import { IconMoon, IconSun } from "@tabler/icons-react";
import { IconMoon, IconSun, IconTrash } from "@tabler/icons-react";
import { FC } from "react";
import { SidebarButton } from "./SidebarButton";
@ -9,10 +9,10 @@ interface Props {
export const SidebarSettings: FC<Props> = ({ lightMode, onToggleLightMode }) => {
return (
<div className="flex flex-col items-center border-t border-neutral-500 py-4">
<div className="flex flex-col items-center border-t border-neutral-500 p-2 text-sm">
<SidebarButton
text={lightMode === "light" ? "Dark mode" : "Light mode"}
icon={lightMode === "light" ? <IconMoon /> : <IconSun />}
icon={lightMode === "light" ? <IconMoon size={16} /> : <IconSun size={16} />}
onClick={() => onToggleLightMode(lightMode === "light" ? "dark" : "light")}
/>
</div>