From 01c7c288c472afb19af266931df44fe75c8272bf Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sun, 5 Mar 2023 23:48:49 +0800 Subject: [PATCH] Polished code. Reorganized text styling into separate sizes and colors. Also polished svg icons --- package-lock.json | 29 ++++ package.json | 1 + src/Components/Api/Api.tsx | 143 ++++++++++++++++ src/Components/Container/Container.tsx | 5 +- src/Components/Header/Header.tsx | 2 +- src/Components/Icons/AppLogo/AppLogo.tsx | 8 +- src/Components/Icons/HomeIcon/HomeIcon.tsx | 8 +- .../Icons/InventoryIcon/InventoryIcon.tsx | 8 +- .../Icons/LogoutIcon/LogoutIcon.tsx | 8 +- src/Components/Icons/LogsIcon/LogsIcon.tsx | 8 +- .../Icons/LowStockIcon/LowStockIcon.tsx | 8 +- .../Icons/NotFoundIcon/NotFoundIcon.tsx | 8 +- .../Icons/ProductIcon/ProductIcon.tsx | 7 +- .../Icons/ProductsIcon/ProductsIcon.tsx | 8 +- .../RecentlyAddedIcon/RecentlyAddedIcon.tsx | 8 +- src/Components/Icons/StatsIcon/StatsIcon.tsx | 8 +- .../TotalProductsIcon/TotalProductsIcon.tsx | 8 +- src/Components/Login/Login.tsx | 6 +- src/Components/Logout/Logout.tsx | 2 +- .../BlobView/BlobView.tsx | 8 +- .../TableView/TableView.tsx | 25 ++- .../SidebarButton/SidebarButton.tsx | 2 +- src/Interfaces/Interfaces.tsx | 51 ++++++ src/Routes/Dashboard/Dashboard.tsx | 153 +++++++++++++----- src/Routes/Error/Error.tsx | 2 +- src/Routes/Login/Login.tsx | 12 ++ src/Routes/Products/Products.tsx | 18 ++- src/components/Icons/AddIcon/AddIcon.tsx | 1 - .../Icons/CancelIcon/CancelIcon.tsx | 1 - .../Icons/DeleteIcon/DeleteIcon.tsx | 1 - src/components/Icons/EditIcon/EditIcon.tsx | 1 - src/routes/Inventory/Inventory.tsx | 26 ++- src/styles.tsx | 59 ++++--- 33 files changed, 478 insertions(+), 165 deletions(-) create mode 100644 src/Components/Api/Api.tsx rename src/Components/{Products => ProductsPage}/BlobView/BlobView.tsx (70%) rename src/Components/{Products => ProductsPage}/TableView/TableView.tsx (51%) create mode 100644 src/Routes/Login/Login.tsx diff --git a/package-lock.json b/package-lock.json index 13dc126..4ad0668 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@types/node": "^16.18.12", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.10", + "axios": "^1.3.4", "localforage": "^1.10.0", "match-sorter": "^6.3.1", "react": "^18.2.0", @@ -5258,6 +5259,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", + "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -14349,6 +14373,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index dc5b642..89af1bf 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/node": "^16.18.12", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.10", + "axios": "^1.3.4", "localforage": "^1.10.0", "match-sorter": "^6.3.1", "react": "^18.2.0", diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx new file mode 100644 index 0000000..ac5c5e4 --- /dev/null +++ b/src/Components/Api/Api.tsx @@ -0,0 +1,143 @@ +import axios from "axios"; +import { + ActivationParams, + UpdateProductParams, + AddProductParams, + LoginParams, + RegistrationParams, +} from "../../Interfaces/Interfaces"; + +// Note APIs + +export function GetProducts() { + const token = JSON.parse(localStorage.getItem("token") || "{}"); + return axios + .get("http://localhost:8000/api/v1/products/", { + headers: { + Authorization: "Token " + token, + }, + }) + .then((response) => { + return response.data; + }); +} + +export function GetNote(id: number) { + const token = JSON.parse(localStorage.getItem("token") || "{}"); + return axios + .get("http://localhost:8000/api/v1/products/" + id + "/", { + headers: { + Authorization: "Token " + token, + }, + }) + .then((response) => { + return response.data; + }); +} + +export function UpdateProduct(note: UpdateProductParams) { + const token = JSON.parse(localStorage.getItem("token") || "{}"); + return axios + .patch("http://localhost:8000/api/v1/products/" + note.id + "/", note, { + headers: { + Authorization: "Token " + token, + }, + }) + .then((response) => { + return response.data; + }) + .catch((error) => { + console.log("Error updating product", error); + return error; + }); +} + +export function AddProduct(note: AddProductParams) { + const token = JSON.parse(localStorage.getItem("token") || "{}"); + return axios + .post("http://localhost:8000/api/v1/products/", note, { + headers: { + Authorization: "Token " + token, + }, + }) + .then((response) => { + return response.data; + }) + .catch((error) => { + console.log("Error adding product", error); + return error; + }); +} + +export function DeleteProduct(id: number) { + const token = JSON.parse(localStorage.getItem("token") || "{}"); + return axios + .delete("http://localhost:8000/api/v1/products/" + id + "/", { + headers: { + Authorization: "Token " + token, + }, + }) + .catch((error) => { + console.log("Error deleting product", error); + return error; + }); +} + +// User APIs + +export function UserRegister(register: RegistrationParams) { + return axios + .post("http://localhost:8000/api/v1/accounts/users/", register) + .then(async (response) => { + console.log(response.data); + return true; + }) + .catch((error) => { + console.log("Registration failed: " + error); + return false; + }); +} + +export function UserLogin(user: LoginParams) { + return axios + .post("http://localhost:8000/api/v1/accounts/token/login/", user) + .then(async (response) => { + localStorage.setItem("token", JSON.stringify(response.data.auth_token)); + console.log( + "Login Success! Stored Token: ", + JSON.parse(localStorage.getItem("token") || "{}") + ); + return true; + }) + .catch((error) => { + console.log("Login Failed: " + error); + return false; + }); +} + +export function UserInfo() { + const token = JSON.parse(localStorage.getItem("token") || "{}"); + return axios + .get("http://localhost:8000/api/v1/accounts/users/me/", { + headers: { + Authorization: "Token " + token, + }, + }) + .then((response) => { + console.log(response.data); + return response.data; + }); +} + +export function UserActivate(activation: ActivationParams) { + return axios + .post("http://localhost:8000/api/v1/accounts/users/activation/", activation) + .then(async (response) => { + console.log("Activation Success"); + return true; + }) + .catch((error) => { + console.log("Activation failed: " + error); + return false; + }); +} diff --git a/src/Components/Container/Container.tsx b/src/Components/Container/Container.tsx index 89d6a63..a664f9d 100644 --- a/src/Components/Container/Container.tsx +++ b/src/Components/Container/Container.tsx @@ -14,7 +14,10 @@ export default function Container(props: props) {
-
{props.children}
+
+ {props.children} +
+
); } diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx index 2c2e826..56b926f 100644 --- a/src/Components/Header/Header.tsx +++ b/src/Components/Header/Header.tsx @@ -8,7 +8,7 @@ export default function Header() {
-

Ivy

+

Ivy

diff --git a/src/Components/Icons/AppLogo/AppLogo.tsx b/src/Components/Icons/AppLogo/AppLogo.tsx index 24b7f9c..139e79a 100644 --- a/src/Components/Icons/AppLogo/AppLogo.tsx +++ b/src/Components/Icons/AppLogo/AppLogo.tsx @@ -7,16 +7,14 @@ export interface props { export default function AppLogo(props: props) { return ( diff --git a/src/Components/Icons/HomeIcon/HomeIcon.tsx b/src/Components/Icons/HomeIcon/HomeIcon.tsx index 749c414..5391625 100644 --- a/src/Components/Icons/HomeIcon/HomeIcon.tsx +++ b/src/Components/Icons/HomeIcon/HomeIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function HomeIcon(props: props) { return ( diff --git a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx index b335378..b93ba69 100644 --- a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx +++ b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function InventoryIcon(props: props) { return ( diff --git a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx index 89a663b..885b628 100644 --- a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx +++ b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function LogoutIcon(props: props) { return ( diff --git a/src/Components/Icons/LogsIcon/LogsIcon.tsx b/src/Components/Icons/LogsIcon/LogsIcon.tsx index 612175d..ce5fc84 100644 --- a/src/Components/Icons/LogsIcon/LogsIcon.tsx +++ b/src/Components/Icons/LogsIcon/LogsIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function LogsIcon(props: props) { return ( diff --git a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx index 5f31896..16dc3d1 100644 --- a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx +++ b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function LowStockIcon(props: props) { return ( diff --git a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx index ad44ff8..7ea5663 100644 --- a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx +++ b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function NotFoundIcon(props: props) { return ( diff --git a/src/Components/Icons/ProductIcon/ProductIcon.tsx b/src/Components/Icons/ProductIcon/ProductIcon.tsx index 8636941..e45b16b 100644 --- a/src/Components/Icons/ProductIcon/ProductIcon.tsx +++ b/src/Components/Icons/ProductIcon/ProductIcon.tsx @@ -7,15 +7,14 @@ export interface props { export default function ProductIcon(props: props) { return ( diff --git a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx index e0881ed..25f82e4 100644 --- a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx +++ b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function ProductsIcon(props: props) { return ( diff --git a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx index 0ad36ed..53058ee 100644 --- a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx +++ b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function RecentlyAddedIcon(props: props) { return ( diff --git a/src/Components/Icons/StatsIcon/StatsIcon.tsx b/src/Components/Icons/StatsIcon/StatsIcon.tsx index e156c4e..4a0e263 100644 --- a/src/Components/Icons/StatsIcon/StatsIcon.tsx +++ b/src/Components/Icons/StatsIcon/StatsIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function StatsIcon(props: props) { return ( diff --git a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx index 8050da3..de494cd 100644 --- a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx +++ b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx @@ -7,16 +7,14 @@ export interface props { export default function TotalProductsIcon(props: props) { return ( diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx index 5986d58..3e8e11f 100644 --- a/src/Components/Login/Login.tsx +++ b/src/Components/Login/Login.tsx @@ -17,7 +17,9 @@ export default function Login() { } if (logged_in) { - return

Welcome Jophiel

; + return ( +

Welcome Jophiel

+ ); } else { return (
@@ -27,7 +29,7 @@ export default function Login() { variant="contained" style={styles.login_button} > -

Login

+

Login

); diff --git a/src/Components/Logout/Logout.tsx b/src/Components/Logout/Logout.tsx index d7c90ff..42c983a 100644 --- a/src/Components/Logout/Logout.tsx +++ b/src/Components/Logout/Logout.tsx @@ -32,7 +32,7 @@ export default function Logout(props: props) { style={styles.logout_button} > {props.children} -

Log Out

+

Log Out

); diff --git a/src/Components/Products/BlobView/BlobView.tsx b/src/Components/ProductsPage/BlobView/BlobView.tsx similarity index 70% rename from src/Components/Products/BlobView/BlobView.tsx rename to src/Components/ProductsPage/BlobView/BlobView.tsx index 4a3ab3c..5eddc30 100644 --- a/src/Components/Products/BlobView/BlobView.tsx +++ b/src/Components/ProductsPage/BlobView/BlobView.tsx @@ -22,11 +22,13 @@ export default function BlobView({ Products }: ProductList) { >
{" "} -

{row.name}

+

{row.name}

-

ID: {row.id}

-

Last Modified: {row.last_modified}

+

ID: {row.id}

+

+ Last Modified: {row.last_modified} +

))} diff --git a/src/Components/Products/TableView/TableView.tsx b/src/Components/ProductsPage/TableView/TableView.tsx similarity index 51% rename from src/Components/Products/TableView/TableView.tsx rename to src/Components/ProductsPage/TableView/TableView.tsx index 8cfda06..5550cc9 100644 --- a/src/Components/Products/TableView/TableView.tsx +++ b/src/Components/ProductsPage/TableView/TableView.tsx @@ -1,6 +1,5 @@ import * as React from "react"; import { - Button, Table, TableBody, TableCell, @@ -22,9 +21,15 @@ export default function TableView({ Products }: ProductList) { - Product ID - Product - Last Modified + + Product ID + + + Product + + + Last Modified + @@ -33,9 +38,15 @@ export default function TableView({ Products }: ProductList) { key={row.id} sx={{ "&:last-child td, &:last-child th": { border: 0 } }} > - {row.id} - {row.name} - {row.last_modified} + + {row.id} + + + {row.name} + + + {row.last_modified} + ))} diff --git a/src/Components/SidebarButton/SidebarButton.tsx b/src/Components/SidebarButton/SidebarButton.tsx index f8534c6..137d959 100644 --- a/src/Components/SidebarButton/SidebarButton.tsx +++ b/src/Components/SidebarButton/SidebarButton.tsx @@ -20,7 +20,7 @@ export default function SidebarButton(props: props) { style={styles.sidebar_button} > {props.children} -

{props.name}

+

{props.name}

); diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx index 13037cf..300bb2b 100644 --- a/src/Interfaces/Interfaces.tsx +++ b/src/Interfaces/Interfaces.tsx @@ -7,3 +7,54 @@ export interface Product { name: string; last_modified: string; } + +// Redux Interfaces +export interface LoginState { + Login: { logged_in: boolean }; +} + +export interface LoggedInUserState { + LoggedInUser: { + value: { + email: string; + id: number; + username: string; + }; + }; +} + +// Component Props Interfaces + +export interface IconProps { + size: number; + color: string; +} + +// API Interfaces + +export interface RegistrationParams { + email: string; + username: string; + password: string; +} + +export interface LoginParams { + username: string; + password: string; +} + +export interface ActivationParams { + uid: string; + token: string; +} + +export interface AddProductParams { + name: string; + quantity: string; +} + +export interface UpdateProductParams { + id: number; + name: string; + quantity: string; +} diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx index 8abbd5c..751c3ba 100644 --- a/src/Routes/Dashboard/Dashboard.tsx +++ b/src/Routes/Dashboard/Dashboard.tsx @@ -14,41 +14,68 @@ export default function Dashboard() {
-

Dashboard

+

Dashboard

-
+
-
+
-

Total Products

+

+ Total Products +

-

2546 Unique Items

-

In inventory

+

+ 2546 Unique Items +

+

+ In inventory +

-
+
-

Current Session

+

+ Current Session +

-

Added

+

+ Added +

-

254

+

254

-

Removed

+

+ Removed +

-

118

+

118

@@ -60,10 +87,16 @@ export default function Dashboard() { >
-

Low Stock

+

+ Low Stock +

-

Canned Pagmamahal

-

In Stock: 3

+

+ Canned Pagmamahal +

+

+ In Stock: 3 +

-

Recently Added

+

+ Recently Added +

-

Zidane's Water

-

Added 02/17/2023

+

+ Zidane's Water +

+

+ Added 02/17/2023 +

@@ -87,33 +131,66 @@ export default function Dashboard() {
-

Recent

-

Transactions

+

+ Recent +

+

+ Transactions +

-

Kopiko Blanca

-

Added: 96

-

Removed: 105

-

02/17/2023

+

+ Kopiko Blanca +

+

+ Added: 96 +

+

+ Removed: 105 +

+

+ 02/17/2023 +

-

Zidane's Water

-

Added: 49

-

Removed: 24

-

02/17/2023

+

+ Zidane's Water +

+

+ Added: 49 +

+

+ Removed: 24 +

+

+ 02/17/2023 +

-

Dan's Beefed Corn

-

Added: 32

-

Removed: 64

-

02/17/2023

+

+ Dan's Beefed Corn +

+

+ Added: 32 +

+

+ Removed: 64 +

+

+ 02/17/2023 +

-

Canned

-

Pagmamahal

+

+ Canned Pagmamahal +

-

Added: 0

-

Removed: 60

-

02/17/2023

+

Added: 0

+

+ Removed: 60 +

+

+ 02/17/2023 +

diff --git a/src/Routes/Error/Error.tsx b/src/Routes/Error/Error.tsx index 4aae12f..5602a82 100644 --- a/src/Routes/Error/Error.tsx +++ b/src/Routes/Error/Error.tsx @@ -7,7 +7,7 @@ export default function Error() {
-

Could not find the requested page

+

Page Not Found

); diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx new file mode 100644 index 0000000..4da7e4c --- /dev/null +++ b/src/Routes/Login/Login.tsx @@ -0,0 +1,12 @@ +import * as React from "react"; +import styles from "../../styles"; + +export default function Login() { + return ( +
+
+

Login

+
+
+ ); +} diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx index ea93a97..916da6f 100644 --- a/src/Routes/Products/Products.tsx +++ b/src/Routes/Products/Products.tsx @@ -5,8 +5,8 @@ import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon"; import AddIcon from "../../Components/Icons/AddIcon/AddIcon"; import { Button, Switch } from "@mui/material"; import { SampleProducts } from "../../Components/SampleData/SampleData"; -import TableView from "../../Components/Products/TableView/TableView"; -import BlobView from "../../Components/Products/BlobView/BlobView"; +import TableView from "../../Components/ProductsPage/TableView/TableView"; +import BlobView from "../../Components/ProductsPage/BlobView/BlobView"; export default function Products() { const navigate = useNavigate(); @@ -24,7 +24,9 @@ export default function Products() {
-

Products

+

+ Products +

+ toggleTableView(!tableView)} />
-
- toggleTableView(!tableView)} /> -

View Type

-
+ {view()}
); diff --git a/src/components/Icons/AddIcon/AddIcon.tsx b/src/components/Icons/AddIcon/AddIcon.tsx index a1d1843..6c87295 100644 --- a/src/components/Icons/AddIcon/AddIcon.tsx +++ b/src/components/Icons/AddIcon/AddIcon.tsx @@ -7,7 +7,6 @@ export interface props { export default function AddIcon(props: props) { return ( ) => { @@ -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) => { @@ -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) => { @@ -80,7 +82,7 @@ export default function Inventory() {
-

Inventory

+

Inventory

- Product ID - Product - In Stock + + Product ID + + + Product + + + In Stock + @@ -102,8 +110,12 @@ export default function Inventory() { key={row.id} sx={{ "&:last-child td, &:last-child th": { border: 0 } }} > - {row.id} - {row.name} + + {row.id} + + + {row.name} + {StockRender(row.in_stock)} ))} diff --git a/src/styles.tsx b/src/styles.tsx index 82542af..18d2b20 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -7,54 +7,48 @@ const styles: { [key: string]: React.CSSProperties } = { height: "100%", backgroundColor: "#0b2322", }, - text_tiny: { - fontSize: "0.6vw", - color: "white", - fontWeight: "bold", - }, - text_small: { - fontSize: "0.8vw", - color: "white", - fontWeight: "bold", - }, - text: { - fontSize: "1.3vw", - color: "white", - fontWeight: "bold", - }, - text_medium: { - fontSize: "1.2vw", - color: "white", - fontWeight: "bold", - }, - text_large: { - fontSize: "2.2vw", - color: "white", - fontWeight: "bold", - }, - text_extra_large: { - fontSize: "3.2vw", + /* + Font Sizes + Extra-Large: 2rem + Large: 1.6rem + Medium: 1.2rem + Small: 1rem + Tiny: 0.8rem + */ + text_white: { color: "white", fontWeight: "bold", }, text_red: { - fontSize: "1.3vw", color: "#a44141", fontWeight: "bold", }, text_orange: { - fontSize: "1.3vw", color: "#c57331", fontWeight: "bold", }, text_green: { - fontSize: "1.3vw", color: "#80b28a", fontWeight: "bold", }, - logo_title: { + text_XL: { + fontSize: "2rem", + }, + text_L: { + fontSize: "1.6rem", + }, + text_M: { + fontSize: "1.2rem", + }, + text_S: { + fontSize: "1rem", + }, + text_XS: { + fontSize: "0.8rem", + }, + logo_text: { color: "#80b38b", - fontSize: 26, + fontSize: "2rem", fontWeight: "bold", }, header_wrapper: { @@ -130,6 +124,7 @@ const styles: { [key: string]: React.CSSProperties } = { display: "flex", flexDirection: "column", backgroundColor: "#1d3b33", + alignSelf: "stretch", borderRadius: 8, paddingLeft: 16, paddingRight: 16,