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

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

@ -56,55 +56,55 @@ export default function Drawer() {
marginBottom: 8, marginBottom: 8,
}} }}
/> />
<DrawerButton <div style={styles.flex_row}>
onClick={() => { <HomeIcon
navigate("/dashboard"); style={{
}} width: "48px",
icon={ height: "48px",
<HomeIcon color: "white",
style={{ marginRight: "2px",
width: "48px", alignSelf: "center",
height: "48px", justifySelf: "center",
color: "white", }}
marginRight: "2px", />
alignSelf: "center", <DrawerButton
justifySelf: "center", onClick={() => {
}} navigate("/dashboard");
/> }}
} label={"Dashboard"}
label={"Dashboard"} />
/> </div>
<DrawerButton <div style={styles.flex_row}>
onClick={async () => { <LogoutIcon
navigate("/"); style={{
await dispatch(auth_toggle()); width: "48px",
await setAccessToken(""); height: "48px",
await setRefreshToken(""); color: "white",
toast("Logged out", { marginRight: "2px",
position: "top-right", alignSelf: "center",
autoClose: 2000, justifySelf: "center",
hideProgressBar: false, }}
closeOnClick: true, />
pauseOnHover: true, <DrawerButton
draggable: true, onClick={async () => {
progress: undefined, navigate("/");
theme: "light", await dispatch(auth_toggle());
}); await setAccessToken("");
}} await setRefreshToken("");
icon={ toast("Logged out", {
<LogoutIcon position: "top-right",
style={{ autoClose: 2000,
width: "48px", hideProgressBar: false,
height: "48px", closeOnClick: true,
color: "white", pauseOnHover: true,
marginRight: "2px", draggable: true,
alignSelf: "center", progress: undefined,
justifySelf: "center", theme: "light",
}} });
/> }}
} label={"Log out"}
label={"Log out"} />
/> </div>
</div> </div>
); );
} }

28
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}> <p
{clicked ? <></> : props.icon} style={{
<p ...(clicked ? styles.text_light : styles.text_dark),
style={{ ...styles.text_M,
...(clicked ? styles.text_dark : styles.text_light), ...{ textAlign: "left", marginLeft: "4px" },
...styles.text_M, }}
...{ marginLeft: "4px" }, >
}} {props.label}
> </p>
{props.label}
</p>
</div>
</button> </button>
</div> </div>
); );