Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

frontend: move theme dialog to bottom left

Browse source
This commit is contained in:
Kentai Radiquum 2024-04-21 21:39:43 +05:00
parent b9af35ee75
commit 64886347f2
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 32 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
frontend/app/components/ColorPicker/ColorPicker.jsx
View file

@ -20,38 +20,37 @@ export const ColorPicker = (props) => {
const [mode, setMode] = useState(ui("mode")); const [mode, setMode] = useState(ui("mode"));
return ( return (
<dialog className="active"> <dialog className="active left round bottom small" style={{blockSize: "unset"}}>
<h5>Выбор темы</h5> <h5>Выбор темы</h5>
<div className="grid center-align"> <div className="grid center-align">
{colors.map((item) => { {colors.map((item) => {
return ( return (
<button <button
key={item.color} key={item.color}
className={`circle small ${item.color} s2`} className={`circle border small ${item.color} s2`}
onClick={() => props.theme(item.hex)} onClick={() => props.theme(item.hex)}
></button> ></button>
); );
})} })}
</div> </div>
<div className="medium-divider"></div> <div className="medium-divider"></div>
<nav> <nav>
<button <button
className={`circle small transparent`} className={`circle small transparent`}
onClick={() => { onClick={() => {
props.mode(); props.mode();
setMode(ui("mode")); setMode(ui("mode"));
}} }}
> >
{mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>} {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
</button> </button>
<span className="max"></span> <button
<button className={`circle small transparent `}
className={`circle small transparent `} onClick={() => props.setColorPicker(!props.colorPicker)}
onClick={() => props.setColorPicker(!props.colorPicker)} >
> <i>close</i>
<i>close</i> </button>
</button> </nav>
</nav> </dialog>
</dialog>
); );
}; };