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

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

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