From 64886347f2934682ef3ea87e1612670cd082a48e Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 21 Apr 2024 21:39:43 +0500
Subject: [PATCH] frontend: move theme dialog to bottom left
---
.../components/ColorPicker/ColorPicker.jsx | 65 +++++++++----------
1 file changed, 32 insertions(+), 33 deletions(-)
diff --git a/frontend/app/components/ColorPicker/ColorPicker.jsx b/frontend/app/components/ColorPicker/ColorPicker.jsx
index ffd64a6..a5082da 100644
--- a/frontend/app/components/ColorPicker/ColorPicker.jsx
+++ b/frontend/app/components/ColorPicker/ColorPicker.jsx
@@ -20,38 +20,37 @@ export const ColorPicker = (props) => {
const [mode, setMode] = useState(ui("mode"));
return (
- <dialog className="active">
- <h5>Выбор темы</h5>
- <div className="grid center-align">
- {colors.map((item) => {
- return (
- <button
- key={item.color}
- className={`circle small ${item.color} s2`}
- onClick={() => props.theme(item.hex)}
- ></button>
- );
- })}
- </div>
- <div className="medium-divider"></div>
- <nav>
- <button
- className={`circle small transparent`}
- onClick={() => {
- props.mode();
- setMode(ui("mode"));
- }}
- >
- {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
- </button>
- <span className="max"></span>
- <button
- className={`circle small transparent `}
- onClick={() => props.setColorPicker(!props.colorPicker)}
- >
- <i>close</i>
- </button>
- </nav>
- </dialog>
+ <dialog className="active left round bottom small" style={{blockSize: "unset"}}>
+ <h5>Выбор темы</h5>
+ <div className="grid center-align">
+ {colors.map((item) => {
+ return (
+ <button
+ key={item.color}
+ className={`circle border small ${item.color} s2`}
+ onClick={() => props.theme(item.hex)}
+ ></button>
+ );
+ })}
+ </div>
+ <div className="medium-divider"></div>
+ <nav>
+ <button
+ className={`circle small transparent`}
+ onClick={() => {
+ props.mode();
+ setMode(ui("mode"));
+ }}
+ >
+ {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
+ </button>
+ <button
+ className={`circle small transparent `}
+ onClick={() => props.setColorPicker(!props.colorPicker)}
+ >
+ <i>close</i>
+ </button>
+ </nav>
+ </dialog>
);
};