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

Polished styling and fixed product page

Browse source
This commit is contained in:
keannu125 2023-03-08 23:39:26 +08:00
parent 971a798af0
commit 78b2b62137
2 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/Routes/Product/Product.tsx
View file

@ -25,6 +25,7 @@ export default function Product() {
mutationFn: DeleteProduct, mutationFn: DeleteProduct,
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries("products"); queryClient.invalidateQueries("products");
queryClient.invalidateQueries("logs");
}, },
}); });
const old_session_checked = useSelector( const old_session_checked = useSelector(

37
src/styles.tsx
View file

@ -1,3 +1,12 @@
export const colors = {
background: "#0b2322",
red: "#a44141",
orange: "#c57331",
green: "#80b28a",
yellow: "#9e8500",
header: "#3d4848",
widget: "#1d3b33",
};
const styles: { [key: string]: React.CSSProperties } = { const styles: { [key: string]: React.CSSProperties } = {
route_wrapper: { route_wrapper: {
width: "85%", width: "85%",
@ -7,28 +16,20 @@ const styles: { [key: string]: React.CSSProperties } = {
height: "100%", height: "100%",
backgroundColor: "#0b2322", backgroundColor: "#0b2322",
}, },
/*
Font Sizes
Extra-Large: 2rem
Large: 1.6rem
Medium: 1.2rem
Small: 1rem
Tiny: 0.8rem
*/
text_white: { text_white: {
color: "white", color: "white",
fontWeight: "bold", fontWeight: "bold",
}, },
text_red: { text_red: {
color: "#a44141", color: colors.red,
fontWeight: "bold", fontWeight: "bold",
}, },
text_orange: { text_orange: {
color: "#c57331", color: colors.orange,
fontWeight: "bold", fontWeight: "bold",
}, },
text_green: { text_green: {
color: "#80b28a", color: colors.green,
fontWeight: "bold", fontWeight: "bold",
}, },
text_XL: { text_XL: {
@ -47,7 +48,7 @@ const styles: { [key: string]: React.CSSProperties } = {
fontSize: "0.8rem", fontSize: "0.8rem",
}, },
logo_text: { logo_text: {
color: "#80b38b", color: colors.green,
fontSize: "2rem", fontSize: "2rem",
fontWeight: "bold", fontWeight: "bold",
}, },
@ -56,7 +57,7 @@ const styles: { [key: string]: React.CSSProperties } = {
flexDirection: "row", flexDirection: "row",
position: "sticky", position: "sticky",
top: 0, top: 0,
backgroundColor: "#3d4848", backgroundColor: colors.header,
paddingRight: 32, paddingRight: 32,
paddingLeft: 0, paddingLeft: 0,
}, },
@ -76,7 +77,7 @@ const styles: { [key: string]: React.CSSProperties } = {
alignItems: "center", alignItems: "center",
}, },
login_button: { login_button: {
backgroundColor: "#9e8500", backgroundColor: colors.yellow,
width: "8rem", width: "8rem",
height: 32, height: 32,
border: "none", border: "none",
@ -84,7 +85,7 @@ const styles: { [key: string]: React.CSSProperties } = {
borderRadius: 16, borderRadius: 16,
}, },
button_add_product: { button_add_product: {
backgroundColor: "#80b38b", backgroundColor: colors.green,
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
width: "14rem", width: "14rem",
@ -103,7 +104,7 @@ const styles: { [key: string]: React.CSSProperties } = {
margin: 4, margin: 4,
}, },
sidebar_button: { sidebar_button: {
backgroundColor: "#0b2322", backgroundColor: colors.background,
width: "14rem", width: "14rem",
height: "3rem", height: "3rem",
border: "none", border: "none",
@ -118,7 +119,7 @@ const styles: { [key: string]: React.CSSProperties } = {
widget: { widget: {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
backgroundColor: "#1d3b33", backgroundColor: colors.widget,
alignSelf: "stretch", alignSelf: "stretch",
borderRadius: 8, borderRadius: 8,
paddingLeft: 16, paddingLeft: 16,
@ -157,7 +158,7 @@ const styles: { [key: string]: React.CSSProperties } = {
height: "100vh", height: "100vh",
width: "100%", width: "100%",
paddingLeft: "2rem", paddingLeft: "2rem",
backgroundColor: "#3d4848", backgroundColor: colors.header,
}, },
}; };