mirror of
https://github.com/lemeow125/Ivy-Frontend.git
synced 2025-05-14 18:41:06 +08:00
Polished code. Reorganized text styling into separate sizes and colors. Also polished svg icons
This commit is contained in:
parent
c9b18608a1
commit
01c7c288c4
33 changed files with 478 additions and 165 deletions
|
|
@ -14,41 +14,68 @@ export default function Dashboard() {
|
|||
<div style={{ margin: 32, height: "100%" }}>
|
||||
<div style={styles.flex_row}>
|
||||
<HomeIcon size={64} color="white" />
|
||||
<h1 style={styles.text_large}>Dashboard</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 7 }}>
|
||||
<div style={styles.flex_column}>
|
||||
<div style={{ ...styles.widget, ...{ flex: 5 } }}>
|
||||
<div
|
||||
style={{
|
||||
...styles.widget,
|
||||
...{ flex: 5 },
|
||||
}}
|
||||
>
|
||||
<div style={styles.content_row}>
|
||||
<TotalProductsIcon size={64} color="white" />
|
||||
<h1 style={styles.text_extra_large}>Total Products</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Total Products
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_large}>2546 Unique Items</h1>
|
||||
<h1 style={styles.text_large}>In inventory</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
2546 Unique Items
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
In inventory
|
||||
</h1>
|
||||
</div>
|
||||
<div style={styles.flex_row}>
|
||||
<div style={{ ...styles.widget, ...{ flex: 6 } }}>
|
||||
<div
|
||||
style={{
|
||||
...styles.widget,
|
||||
...{ flex: 5 },
|
||||
}}
|
||||
>
|
||||
<div style={styles.content_row}>
|
||||
<StatsIcon size={64} color="white" />
|
||||
<h1 style={styles.text_large}>Current Session</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Current Session
|
||||
</h1>
|
||||
</div>
|
||||
<div style={styles.content_row}>
|
||||
<ColoredCube size={32} color="#a48e41" />
|
||||
<h1 style={styles.text_large}>Added</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Added
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_large}>254</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>254</h1>
|
||||
<div style={styles.content_row}>
|
||||
<ColoredCube size={32} color="#a44141" />
|
||||
<h1 style={styles.text_large}>Removed</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Removed
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_large}>118</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>118</h1>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
flex: 4,
|
||||
flex: 5,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
@ -60,10 +87,16 @@ export default function Dashboard() {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<LowStockIcon size={64} color="white" />
|
||||
<h1 style={styles.text_medium}>Low Stock</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Low Stock
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_medium}>Canned Pagmamahal</h1>
|
||||
<h1 style={styles.text_tiny}>In Stock: 3</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Canned Pagmamahal
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
In Stock: 3
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -73,10 +106,21 @@ export default function Dashboard() {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<RecentlyAddedIcon size={64} color="white" />
|
||||
<h1 style={styles.text_medium}>Recently Added</h1>
|
||||
<h1
|
||||
style={{
|
||||
...styles.text_white,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Recently Added
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_medium}>Zidane's Water</h1>
|
||||
<h1 style={styles.text_tiny}>Added 02/17/2023</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Zidane's Water
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added 02/17/2023
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,33 +131,66 @@ export default function Dashboard() {
|
|||
<div style={styles.content_row}>
|
||||
<LogsIcon size={64} color="white" />
|
||||
<div style={styles.wrapper_column}>
|
||||
<h1 style={styles.text_medium}>Recent</h1>
|
||||
<h1 style={styles.text_medium}>Transactions</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Recent
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Transactions
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Kopiko Blanca
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 96
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 105
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
<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>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Zidane's Water
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 49
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 24
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
<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>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Dan's Beefed Corn
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 32
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 64
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<div style={styles.content_column}>
|
||||
<h1 style={styles.text}>Canned</h1>
|
||||
<h1 style={styles.text}>Pagmamahal</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Canned Pagmamahal
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_small}>Added: 0</h1>
|
||||
<h1 style={styles.text_small}>Removed: 60</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 60
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue