keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-04-08 11:01:29 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made icon sizing based on px rather than vh

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-03 12:35:32 +08:00
parent 2551b1fb38
commit c9b18608a1
24 changed files with 83 additions and 65 deletions
src
Components
ColoredCube
ColoredCube.tsx
Header
Header.tsx
Icons
AppLogo
AppLogo.tsx
HomeIcon
HomeIcon.tsx
InventoryIcon
InventoryIcon.tsx
LogoutIcon
LogoutIcon.tsx
LogsIcon
LogsIcon.tsx
LowStockIcon
LowStockIcon.tsx
NotFoundIcon
NotFoundIcon.tsx
ProductIcon
ProductIcon.tsx
ProductsIcon
ProductsIcon.tsx
RecentlyAddedIcon
RecentlyAddedIcon.tsx
StatsIcon
StatsIcon.tsx
TotalProductsIcon
TotalProductsIcon.tsx
Sidebar
Sidebar.tsx
Routes
Dashboard
Dashboard.tsx
Error
Error.tsx
Logs
Logs.tsx
Products
Products.tsx
components/Icons
AddIcon
AddIcon.tsx
CancelIcon
CancelIcon.tsx
DeleteIcon
DeleteIcon.tsx
EditIcon
EditIcon.tsx
routes/Inventory
Inventory.tsx

4
src/Components/ColoredCube/ColoredCube.tsx
View file

@ -10,8 +10,8 @@ export default function ColoredCube(props: props) {
<div
style={{
backgroundColor: props.color,
width: props.size + "vh",
height: props.size + "vh",
width: props.size + "px",
height: props.size + "px",
}}
/>
</div>

2
src/Components/Header/Header.tsx
View file

@ -7,7 +7,7 @@ export default function Header() {
return (
<div style={styles.header_wrapper}>
<div style={styles.header_left}>
<AppLogo size={8} color="#80b38b" />
<AppLogo size={64} color="#80b38b" />
<p style={styles.logo_title}>Ivy</p>
</div>
<div style={styles.header_right}>

4
src/Components/Icons/AppLogo/AppLogo.tsx
View file

@ -9,8 +9,8 @@ export default function AppLogo(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-plant-2"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/Components/Icons/HomeIcon/HomeIcon.tsx
View file

@ -9,8 +9,8 @@ export default function HomeIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-home-2"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/Components/Icons/InventoryIcon/InventoryIcon.tsx
View file

@ -9,8 +9,8 @@ export default function InventoryIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-box-seam"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/LogoutIcon/LogoutIcon.tsx
View file

@ -9,8 +9,8 @@ export default function LogoutIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-logout"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/LogsIcon/LogsIcon.tsx
View file

@ -9,8 +9,8 @@ export default function LogsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-clipboard-data"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/LowStockIcon/LowStockIcon.tsx
View file

@ -9,8 +9,8 @@ export default function LowStockIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-zoom-exclamation"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
View file

@ -9,8 +9,8 @@ export default function NotFoundIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-error-404"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/ProductIcon/ProductIcon.tsx
View file

@ -8,8 +8,8 @@ export default function ProductIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/Components/Icons/ProductsIcon/ProductsIcon.tsx
View file

@ -9,8 +9,8 @@ export default function ProductsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-list-numbers"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
View file

@ -9,8 +9,8 @@ export default function RecentlyAddedIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-book-upload"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/StatsIcon/StatsIcon.tsx
View file

@ -9,8 +9,8 @@ export default function StatsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-align-box-bottom-center"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
View file

@ -9,8 +9,8 @@ export default function TotalProductsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-packages"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

16
src/Components/Sidebar/Sidebar.tsx
View file

@ -37,20 +37,20 @@ export default function Sidebar() {
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={4} color="white" />
<HomeIcon size={48} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Products")}
name="Products"
>
<ProductsIcon size={4} color="white" />
<ProductsIcon size={48} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={4} color="white" />
<InventoryIcon size={48} color="white" />
</SidebarButton>
</div>
</div>
@ -75,25 +75,25 @@ export default function Sidebar() {
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={4} color="white" />
<HomeIcon size={48} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Products")}
name="Products"
>
<ProductsIcon size={4} color="white" />
<ProductsIcon size={48} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={4} color="white" />
<InventoryIcon size={48} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/Logs")} name="Logs">
<LogsIcon size={4} color="white" />
<LogsIcon size={48} color="white" />
</SidebarButton>
<Logout>
<LogoutIcon size={4} color="white" />
<LogoutIcon size={48} color="white" />
</Logout>
</div>
</div>

50
src/Routes/Dashboard/Dashboard.tsx
View file

@ -13,7 +13,7 @@ export default function Dashboard() {
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.flex_row}>
<HomeIcon size={8} color="white" />
<HomeIcon size={64} color="white" />
<h1 style={styles.text_large}>Dashboard</h1>
</div>
<div style={{ display: "flex", flexDirection: "row" }}>
@ -21,7 +21,7 @@ export default function Dashboard() {
<div style={styles.flex_column}>
<div style={{ ...styles.widget, ...{ flex: 5 } }}>
<div style={styles.content_row}>
<TotalProductsIcon size={8} color="white" />
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_extra_large}>Total Products</h1>
</div>
<h1 style={styles.text_large}>2546 Unique Items</h1>
@ -30,31 +30,49 @@ export default function Dashboard() {
<div style={styles.flex_row}>
<div style={{ ...styles.widget, ...{ flex: 6 } }}>
<div style={styles.content_row}>
<StatsIcon size={8} color="white" />
<StatsIcon size={64} color="white" />
<h1 style={styles.text_large}>Current Session</h1>
</div>
<div style={styles.content_row}>
<ColoredCube size={3} color="#a48e41" />
<ColoredCube size={32} color="#a48e41" />
<h1 style={styles.text_large}>Added</h1>
</div>
<h1 style={styles.text_large}>254</h1>
<div style={styles.content_row}>
<ColoredCube size={3} color="#a44141" />
<h1 style={styles.text_large}>Removed</h1>{" "}
<ColoredCube size={32} color="#a44141" />
<h1 style={styles.text_large}>Removed</h1>
</div>
<h1 style={styles.text_large}>118</h1>
</div>
<div style={{ ...styles.flex_column, ...{ flex: 4 } }}>
<div style={{ ...styles.widget, ...{ flex: 1 } }}>
<div
style={{
...styles.flex_column,
...{
flex: 4,
},
}}
>
<div
style={{
...styles.widget,
...{ flex: 1 },
}}
>
<div style={styles.content_row}>
<LowStockIcon size={8} color="white" />
<LowStockIcon size={64} color="white" />
<h1 style={styles.text_medium}>Low Stock</h1>
</div>
<h1 style={styles.text_medium}>Canned Pagmamahal</h1>
<h1 style={styles.text_tiny}>In Stock: 3</h1>
</div>
<div style={{ ...styles.widget, ...{ flex: 1 } }}>
<div
style={{
...styles.widget,
...{ flex: 1 },
}}
>
<div style={styles.content_row}>
<RecentlyAddedIcon size={8} color="white" />
<RecentlyAddedIcon size={64} color="white" />
<h1 style={styles.text_medium}>Recently Added</h1>
</div>
<h1 style={styles.text_medium}>Zidane's Water</h1>
@ -67,28 +85,28 @@ export default function Dashboard() {
<div style={{ flex: 3 }}>
<div style={styles.widget}>
<div style={styles.content_row}>
<LogsIcon size={8} color="white" />
<LogsIcon size={64} color="white" />
<div style={styles.wrapper_column}>
<h1 style={styles.text_medium}>Recent</h1>
<h1 style={styles.text_medium}>Transactions</h1>
</div>
</div>
<div style={{ marginBottom: "2vh" }} />
<div style={{ marginBottom: "8px" }} />
<h1 style={styles.text}>Kopiko Blanca</h1>
<h1 style={styles.text_small}>Added: 96</h1>
<h1 style={styles.text_small}>Removed: 105</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<div style={{ marginBottom: "8px" }} />
<h1 style={styles.text}>Zidane's Water</h1>
<h1 style={styles.text_small}>Added: 49</h1>
<h1 style={styles.text_small}>Removed: 24</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<div style={{ marginBottom: "8px" }} />
<h1 style={styles.text}>Dan's Beefed Corn</h1>
<h1 style={styles.text_small}>Added: 32</h1>
<h1 style={styles.text_small}>Removed: 64</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<div style={{ marginBottom: "8px" }} />
<div style={styles.content_column}>
<h1 style={styles.text}>Canned</h1>
<h1 style={styles.text}>Pagmamahal</h1>

4
src/Routes/Error/Error.tsx
View file

@ -5,8 +5,8 @@ import NotFoundIcon from "../../Components/Icons/NotFoundIcon/NotFoundIcon";
export default function Error() {
return (
<div style={styles.content_center}>
<div style={styles.content_column}>
<NotFoundIcon size={64} color="#a44141" />
<div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
<NotFoundIcon size={256} color="#a44141" />
<p style={styles.text}>Could not find the requested page</p>
</div>
</div>

2
src/Routes/Logs/Logs.tsx
View file

@ -22,7 +22,7 @@ export default function Logs() {
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.flex_row}>
<LogsIcon size={8} color="white" />
<LogsIcon size={64} color="white" />
<h1 style={styles.text_large}>Logs</h1>
</div>
<TableContainer

4
src/Routes/Products/Products.tsx
View file

@ -23,7 +23,7 @@ export default function Products() {
<div style={styles.content_row}>
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<ProductsIcon size={8} color="white" />
<ProductsIcon size={64} color="white" />
<h1 style={styles.text_large}>Products</h1>
</div>
<div
@ -36,7 +36,7 @@ export default function Products() {
onClick={() => navigate("/Products/AddProduct")}
style={styles.button_add_product}
>
<AddIcon size={8} color="white" />
<AddIcon size={32} color="white" />
<p style={styles.text_medium}>Add Product</p>
</Button>
</div>

4
src/components/Icons/AddIcon/AddIcon.tsx
View file

@ -8,8 +8,8 @@ export default function AddIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
fill="none"
stroke={props.color}

4
src/components/Icons/CancelIcon/CancelIcon.tsx
View file

@ -9,8 +9,8 @@ export default function CancelIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
fill="none"
stroke={props.color}

4
src/components/Icons/DeleteIcon/DeleteIcon.tsx
View file

@ -8,8 +8,8 @@ export default function DeleteIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
fill="none"
stroke={props.color}

4
src/components/Icons/EditIcon/EditIcon.tsx
View file

@ -8,8 +8,8 @@ export default function EditIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
width={props.size + "px"}
height={props.size + "px"}
viewBox="0 0 24 24"
fill="none"
stroke={props.color}

2
src/routes/Inventory/Inventory.tsx
View file

@ -79,7 +79,7 @@ export default function Inventory() {
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}>
<InventoryIcon size={8} color="white" />
<InventoryIcon size={64} color="white" />
<h1 style={styles.text_large}>Inventory</h1>
</div>
<TableContainer