Merge pull request #8 from nauxliu/settings-button-style
Update settings button style
This commit is contained in:
		
						commit
						8aa0d1185a
					
				|  | @ -9,10 +9,10 @@ interface Props { | ||||||
| export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => { | export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => { | ||||||
|   return ( |   return ( | ||||||
|     <div |     <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} |       onClick={onClick} | ||||||
|     > |     > | ||||||
|       <div className="mr-3">{icon}</div> |       <div className="mr-2">{icon}</div> | ||||||
|       <div>{text}</div> |       <div>{text}</div> | ||||||
|     </div> |     </div> | ||||||
|   ); |   ); | ||||||
|  |  | ||||||
|  | @ -1,4 +1,4 @@ | ||||||
| import { IconMoon, IconSun } from "@tabler/icons-react"; | import { IconMoon, IconSun, IconTrash } from "@tabler/icons-react"; | ||||||
| import { FC } from "react"; | import { FC } from "react"; | ||||||
| import { SidebarButton } from "./SidebarButton"; | import { SidebarButton } from "./SidebarButton"; | ||||||
| 
 | 
 | ||||||
|  | @ -9,10 +9,10 @@ interface Props { | ||||||
| 
 | 
 | ||||||
| export const SidebarSettings: FC<Props> = ({ lightMode, onToggleLightMode }) => { | export const SidebarSettings: FC<Props> = ({ lightMode, onToggleLightMode }) => { | ||||||
|   return ( |   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 |       <SidebarButton | ||||||
|         text={lightMode === "light" ? "Dark mode" : "Light mode"} |         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")} |         onClick={() => onToggleLightMode(lightMode === "light" ? "dark" : "light")} | ||||||
|       /> |       /> | ||||||
|     </div> |     </div> | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue