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

Made icon sizing based on px rather than vh

Browse source
This commit is contained in:
keannu125 2023-03-03 12:35:32 +08:00
parent 2551b1fb38
commit c9b18608a1
24 changed files with 83 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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