Polished code. Reorganized text styling into separate sizes and colors. Also polished svg icons

This commit is contained in:
Keannu Christian Bernasol 2023-03-05 23:48:49 +08:00
parent c9b18608a1
commit 01c7c288c4
33 changed files with 478 additions and 165 deletions

View file

@ -2,7 +2,6 @@ import React, { useState } from "react";
import styles from "../../styles";
import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
import {
Button,
Table,
TableBody,
TableCell,
@ -30,6 +29,7 @@ export default function Inventory() {
style={{
...styles.text_red,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@ -47,6 +47,7 @@ export default function Inventory() {
style={{
...styles.text_orange,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@ -64,6 +65,7 @@ export default function Inventory() {
style={{
...styles.text_green,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@ -80,7 +82,7 @@ export default function Inventory() {
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}>
<InventoryIcon size={64} color="white" />
<h1 style={styles.text_large}>Inventory</h1>
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</h1>
</div>
<TableContainer
style={{
@ -91,9 +93,15 @@ export default function Inventory() {
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={styles.text}>Product ID</TableCell>
<TableCell style={styles.text}>Product</TableCell>
<TableCell style={styles.text}>In Stock</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Product ID
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Product
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
In Stock
</TableCell>
</TableRow>
</TableHead>
<TableBody>
@ -102,8 +110,12 @@ export default function Inventory() {
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={styles.text}>{row.id}</TableCell>
<TableCell style={styles.text}>{row.name}</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.id}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.name}
</TableCell>
{StockRender(row.in_stock)}
</TableRow>
))}