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

Separate button icons and buttons themselves to address mobile issue of buttons not functioning when clicking the enveloped icon

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-17 23:49:17 +08:00
parent a14b09f2a0
commit ab2525ad95
2 changed files with 61 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/Components/Drawer/Drawer.tsx
View file

@ -56,11 +56,7 @@ export default function Drawer() {
marginBottom: 8, marginBottom: 8,
}} }}
/> />
<DrawerButton <div style={styles.flex_row}>
onClick={() => {
navigate("/dashboard");
}}
icon={
<HomeIcon <HomeIcon
style={{ style={{
width: "48px", width: "48px",
@ -71,9 +67,24 @@ export default function Drawer() {
justifySelf: "center", justifySelf: "center",
}} }}
/> />
} <DrawerButton
onClick={() => {
navigate("/dashboard");
}}
label={"Dashboard"} label={"Dashboard"}
/> />
</div>
<div style={styles.flex_row}>
<LogoutIcon
style={{
width: "48px",
height: "48px",
color: "white",
marginRight: "2px",
alignSelf: "center",
justifySelf: "center",
}}
/>
<DrawerButton <DrawerButton
onClick={async () => { onClick={async () => {
navigate("/"); navigate("/");
@ -91,20 +102,9 @@ export default function Drawer() {
theme: "light", theme: "light",
}); });
}} }}
icon={
<LogoutIcon
style={{
width: "48px",
height: "48px",
color: "white",
marginRight: "2px",
alignSelf: "center",
justifySelf: "center",
}}
/>
}
label={"Log out"} label={"Log out"}
/> />
</div> </div>
</div>
); );
} }

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

@ -5,7 +5,6 @@ import { colors } from "../../styles";
export interface props { export interface props {
onClick: React.MouseEventHandler<HTMLButtonElement>; onClick: React.MouseEventHandler<HTMLButtonElement>;
children?: React.ReactNode; children?: React.ReactNode;
icon?: React.ReactNode;
label: string; label: string;
} }
export default function DrawerButton(props: props) { export default function DrawerButton(props: props) {
@ -23,8 +22,8 @@ export default function DrawerButton(props: props) {
onMouseLeave={() => setClicked(false)} onMouseLeave={() => setClicked(false)}
style={{ style={{
borderRadius: 24, borderRadius: 24,
minWidth: "128px", minWidth: "192px",
maxWidth: "128px", maxWidth: "192px",
borderColor: colors.button_border, borderColor: colors.button_border,
borderStyle: "solid", borderStyle: "solid",
borderWidth: "2px", borderWidth: "2px",
@ -34,21 +33,18 @@ export default function DrawerButton(props: props) {
paddingLeft: "4px", paddingLeft: "4px",
marginBottom: "4px", marginBottom: "4px",
marginTop: "4px", marginTop: "4px",
backgroundColor: clicked ? colors.button_light : colors.button_dark, backgroundColor: clicked ? colors.button_dark : colors.button_light,
}} }}
> >
<div style={styles.flex_row}>
{clicked ? <></> : props.icon}
<p <p
style={{ style={{
...(clicked ? styles.text_dark : styles.text_light), ...(clicked ? styles.text_light : styles.text_dark),
...styles.text_M, ...styles.text_M,
...{ marginLeft: "4px" }, ...{ textAlign: "left", marginLeft: "4px" },
}} }}
> >
{props.label} {props.label}
</p> </p>
</div>
</button> </button>
</div> </div>
); );