From 810c8054521415bca1cb573858eb934a6e740222 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 17 Feb 2023 20:33:45 +0800
Subject: [PATCH] Polished design for dashboard and made elements size
 responsive to viewport

---
 .../DashboardContainer/DashboardContainer.tsx | 37 ++++----
 src/routes/Dashboard/Dashboard.tsx            | 86 ++++++++++++++-----
 src/styles.tsx                                | 31 ++++---
 3 files changed, 102 insertions(+), 52 deletions(-)

diff --git a/src/components/DashboardContainer/DashboardContainer.tsx b/src/components/DashboardContainer/DashboardContainer.tsx
index 0dfe259..ef390ba 100644
--- a/src/components/DashboardContainer/DashboardContainer.tsx
+++ b/src/components/DashboardContainer/DashboardContainer.tsx
@@ -2,28 +2,29 @@ import React from "react";
 
 export interface props {
   children: React.ReactNode;
-  width: string;
-  height: string;
 }
 
 export default function DashboardContainer(props: props) {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignSelf: "flex-start",
-        justifyContent: "left",
-        backgroundColor: "#1d3b33",
-        borderRadius: 16,
-        padding: 8,
-        paddingLeft: 48,
-        width: props.width,
-        height: props.height,
-        lineHeight: 0.4,
-      }}
-    >
-      {props.children}
+    <div style={{ marginRight: 32, marginLeft: 32 }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignSelf: "flex-start",
+          justifyContent: "left",
+          backgroundColor: "#1d3b33",
+          borderRadius: 16,
+          padding: 16,
+          width: "100%",
+          height: "100%",
+          lineHeight: 0.4,
+          marginLeft: 8,
+          marginRight: 8,
+        }}
+      >
+        {props.children}
+      </div>
     </div>
   );
 }
diff --git a/src/routes/Dashboard/Dashboard.tsx b/src/routes/Dashboard/Dashboard.tsx
index dd78185..c40d145 100644
--- a/src/routes/Dashboard/Dashboard.tsx
+++ b/src/routes/Dashboard/Dashboard.tsx
@@ -14,31 +14,71 @@ export default function Dashboard() {
         <HomeIcon size={64} color="white" />
         <h1 style={styles.text_large}>Dashboard</h1>
       </div>
-      <DashboardContainer width="70%" height="30%">
-        <div style={styles.wrapper_row}>
-          <TotalProductsIcon size={64} color="white" />
-          <h1 style={styles.text_dashboard_2}>Total Products</h1>
+      <div style={styles.DashboardWidget_WrapperRow}>
+        <div style={{ flex: 8 }}>
+          <div style={styles.DashboardWidget_WrapperColumn}>
+            <div style={{ display: "flex", flex: 5, flexDirection: "row" }}>
+              <div style={{ flex: 7 }}>
+                <DashboardContainer>
+                  <div style={styles.wrapper_row}>
+                    <TotalProductsIcon size={64} color="white" />
+                    <h1 style={styles.text_extra_large}>Total Products</h1>
+                  </div>
+                  <h1 style={styles.text_large}>2546 Unique Items</h1>
+                  <h1 style={styles.text_large}>In inventory</h1>
+                </DashboardContainer>
+              </div>
+              <div style={{ flex: 3 }}>
+                <DashboardContainer>
+                  <div style={styles.wrapper_row}>
+                    <TotalProductsIcon size={64} color="white" />
+                    <h1 style={styles.text_large}>Widget 2</h1>
+                  </div>
+                  <h1 style={styles.text_medium}>Placeholder</h1>
+                </DashboardContainer>
+              </div>
+            </div>
+            <div style={{ display: "flex", flex: 5, flexDirection: "row" }}>
+              <div style={{ flex: 7 }}>
+                <DashboardContainer>
+                  <div style={styles.wrapper_row}>
+                    <StatsIcon size={64} color="white" />
+                    <h1 style={styles.text_large}>Current Session</h1>
+                  </div>
+                  <div style={styles.wrapper_row}>
+                    <ColoredCube size={32} color="#a48e41" />
+                    <h1 style={styles.text_large}>Added</h1>
+                  </div>
+                  <h1 style={styles.text_medium}>254</h1>
+                  <div style={styles.wrapper_row}>
+                    <ColoredCube size={32} color="#a44141" />
+                    <h1 style={styles.text_large}>Removed</h1>
+                  </div>
+                  <h1 style={styles.text_medium}>64</h1>
+                </DashboardContainer>
+              </div>
+              <div style={{ flex: 3 }}>
+                <DashboardContainer>
+                  <div style={styles.wrapper_row}>
+                    <TotalProductsIcon size={64} color="white" />
+                    <h1 style={styles.text_large}>Widget 4</h1>
+                  </div>
+                  <h1 style={styles.text_medium}>Placeholder</h1>
+                </DashboardContainer>
+              </div>
+            </div>
+          </div>
         </div>
-        <h1 style={styles.text_dashboard_1}>2546 Unique Items</h1>
-        <h1 style={styles.text_dashboard_1}>In inventory</h1>
-      </DashboardContainer>
-      <div style={{ padding: 16 }} />
-      <DashboardContainer width="50%" height="40%">
-        <div style={styles.wrapper_row}>
-          <StatsIcon size={64} color="white" />
-          <h1 style={styles.text_dashboard_1}>Current Session</h1>
+        <div style={{ flex: 2 }}>
+          <DashboardContainer>
+            <div style={styles.wrapper_row}>
+              <TotalProductsIcon size={64} color="white" />
+              <h1 style={styles.text_large}>Widget 5</h1>
+            </div>
+            <h1 style={styles.text_medium}>Placeholder</h1>
+          </DashboardContainer>
         </div>
-        <div style={styles.wrapper_row}>
-          <ColoredCube size={32} color="#a48e41" />
-          <h1 style={styles.text_medium}>Added</h1>
-        </div>
-        <h1 style={styles.text_dashboard_1}>254</h1>
-        <div style={styles.wrapper_row}>
-          <ColoredCube size={32} color="#a44141" />
-          <h1 style={styles.text_medium}>Removed</h1>
-        </div>
-        <h1 style={styles.text_dashboard_1}>64</h1>
-      </DashboardContainer>
+      </div>
     </div>
   );
 }
diff --git a/src/styles.tsx b/src/styles.tsx
index 43874ea..8ff115f 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -17,26 +17,22 @@ const styles: { [key: string]: React.CSSProperties } = {
     paddingLeft: 16,
   },
   text: {
-    fontSize: 16,
+    fontSize: "1.3vw",
     color: "white",
     fontWeight: "bold",
   },
   text_medium: {
-    fontSize: 26,
+    fontSize: "1.2vw",
     color: "white",
     fontWeight: "bold",
   },
   text_large: {
-    fontSize: 36,
+    fontSize: "2.2vw",
     color: "white",
     fontWeight: "bold",
   },
-  text_dashboard_1: {
-    fontSize: 46,
-    color: "white",
-  },
-  text_dashboard_2: {
-    fontSize: 56,
+  text_extra_large: {
+    fontSize: "3.2vw",
     color: "white",
   },
   logo_title: {
@@ -91,8 +87,8 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   sidebar_button: {
     backgroundColor: "#0b2322",
-    width: 192,
-    height: 64,
+    width: "30vh",
+    height: "6vh",
     border: "none",
     padding: 8,
     borderTopLeftRadius: 32,
@@ -121,6 +117,19 @@ const styles: { [key: string]: React.CSSProperties } = {
     alignItems: "center",
     alignSelf: "flex-start",
   },
+  DashboardWidget_WrapperColumn: {
+    justifyContent: "center",
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    height: "100vh",
+  },
+  DashboardWidget_WrapperRow: {
+    justifyContent: "center",
+    display: "flex",
+    flexDirection: "row",
+    width: "95%",
+  },
 };
 
 export default styles;