keannu125/EquipmentTracker-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/EquipmentTracker-Frontend.git synced 2024-11-17 06:09:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reduce drawer button width

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-18 15:59:29 +08:00
parent ab2525ad95
commit ad83423fc2
1 changed files with 31 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/Components/DrawerButton/DrawerButton.tsx
View file

@ -10,42 +10,39 @@ export interface props {
export default function DrawerButton(props: props) { export default function DrawerButton(props: props) {
const [clicked, setClicked] = useState(false); const [clicked, setClicked] = useState(false);
return ( return (
<div> <button
<button onClick={props.onClick}
onClick={props.onClick} onMouseDown={() => {
onMouseDown={() => { if (!clicked) {
if (!clicked) { setClicked(!clicked);
setClicked(!clicked); }
} }}
}} onMouseUp={() => setClicked(false)}
onMouseUp={() => setClicked(false)} onMouseLeave={() => setClicked(false)}
onMouseLeave={() => setClicked(false)} style={{
borderRadius: 24,
minWidth: "160px",
maxWidth: "160px",
borderColor: colors.button_border,
borderStyle: "solid",
borderWidth: "2px",
paddingBottom: 0,
paddingTop: 0,
paddingLeft: "4px",
marginBottom: "4px",
marginTop: "4px",
backgroundColor: clicked ? colors.button_dark : colors.button_light,
}}
>
<p
style={{ style={{
borderRadius: 24, ...(clicked ? styles.text_light : styles.text_dark),
minWidth: "192px", ...styles.text_M,
maxWidth: "192px", ...{ textAlign: "left", marginLeft: "16px" },
borderColor: colors.button_border,
borderStyle: "solid",
borderWidth: "2px",
paddingBottom: 0,
paddingTop: 0,
paddingRight: "4px",
paddingLeft: "4px",
marginBottom: "4px",
marginTop: "4px",
backgroundColor: clicked ? colors.button_dark : colors.button_light,
}} }}
> >
<p {props.label}
style={{ </p>
...(clicked ? styles.text_light : styles.text_dark), </button>
...styles.text_M,
...{ textAlign: "left", marginLeft: "4px" },
}}
>
{props.label}
</p>
</button>
</div>
); );
} }