Implementing Widget Structure (no functionality)

src/Main.js

@@ -11,8 +11,6 @@ import ContactUs from './pages/Contact-Us'
 import Error from './pages/Error-Page'
 import './styles.css'
 
-
-
 export default function Main() {
     let Layout
     switch (window.location.pathname) {

src/pages/AddNewBill.css

@@ -1,13 +1,10 @@
 .add_bill_widget {
-    max-width: 20%;
     background-color: rgb(223, 245, 229);
-    padding: 10px;
-    margin: 1%;
-}
+    max-height: 50%;
+  }
 .widget_header {
     margin: 0px;
     margin-bottom: 20px;
-    position: relative;
 }
 input {
     max-width: 50%;
@@ -17,7 +14,6 @@ button {
     margin-right: auto;
 }
 .buttons{
-    margin-top: 10px;
 }
 /* Style The Dropdown Button */
 .dropbtn {

src/pages/AddNewBill.js

@@ -5,7 +5,7 @@ export default function AddNewBill() {
     return (
         <>
             <div class="add_bill_widget">
-                <h5 class="widget_header">Add New Bill</h5>
+                <h4 class="widget_header">Add New Bill</h4>
                 <input type="number"></input> 
                 <div class="buttons">
                     <div class="dropdown">

src/pages/CurrentBalance.css

@@ -1,29 +1,23 @@
 .current_balance_widget {
-    max-width: 20%;
     background-color: rgb(223, 245, 229);
-    padding: 10px;
-    margin: 1%;
 }
 .widget_header {
-    margin: 0px;
-    margin-bottom: 20px;
-    position: relative;
 }
 
 img {
-    position: relative;
     float: left;
     height: 40px;
-    padding: 5%;
+    margin-left: 5%;
 }
 
 .current_balance_widget h1 {
-    padding-left: 70px;
+    float: left;
     margin: 0;
+    margin-left: 10%;
 }
 .current_balance_widget h6 {
     color: green;
+    float: left;
     margin: 0;
-    margin-bottom: 10px;
-    padding-left: 70px;
+    margin-left: 33%;
 }

src/pages/CurrentBalance.js

@@ -6,7 +6,7 @@ export default function CurrentBalance() {
     return (
         <>
             <div class="current_balance_widget">
-                <h5 class="widget_header">Current Balance</h5> 
+                <h4 class="widget_header">Current Balance</h4> 
                 <img src={logo} />          
                 <h1>$1238.56</h1>
                 <h6>+ $179.97 (17%) last month</h6>

src/pages/Dashboard.jsx

@@ -1,11 +1,18 @@
  import AddNewBill from './AddNewBill'
  import CurrentBalance from './CurrentBalance'
+ import Expenses from './Expenses'
+ import Income from './Income'
+ import Budget from './budget'
+import RecentTransactions from './RecentTransactions'
  
  export default function Dashboard() {
     return (
         <>
-            <h1>Dashboard</h1>
             <CurrentBalance />
+            <Budget />
+            <Expenses />
+            <Income />
+            <RecentTransactions />
             <AddNewBill />
         </>
     )

src/pages/Expenses.css

@@ -0,0 +1,20 @@
+.expenses_widget {
+    background-color: rgb(223, 245, 229);
+}
+.widget_header {
+}
+
+img {
+    height: 40px;
+}
+
+.expenses_widget h1 {
+    float: left;
+    margin: 0;
+    margin-left: 10%;
+}
+.expenses_widget h6 {
+    color: red;
+    float: right;
+    margin: 0;
+}

src/pages/Expenses.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './Expenses.css'
+import logo from './widget_logos/expenses_logo.png';
+
+export default function Expenses() {
+    return (
+        <>
+            <div class="expenses_widget">
+                <h4 class="widget_header">This Month's Expenses</h4> 
+                <img src={logo} />          
+                <h1>$456.78</h1>
+                <h6>+ $359.97 (26%) last month (17%)</h6>
+            </div>
+        </>
+        
+    )
+}

src/pages/Income.css

@@ -0,0 +1,20 @@
+.income_widget {
+    background-color: rgb(223, 245, 229);
+}
+.widget_header {
+}
+
+img {
+    height: 40px;
+}
+
+.income_widget h1 {
+    float: left;
+    margin: 0;
+    margin-left: 10%;
+}
+.income_widget h6 {
+    color: green;
+    margin: 0;
+    float: right;
+}

src/pages/Income.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './Income.css'
+import logo from './widget_logos/income_logo.png';
+
+export default function Income() {
+    return (
+        <>
+            <div class="income_widget">
+                <h4 class="widget_header">This Month's Income</h4> 
+                <img src={logo} />          
+                <h1>$1,525.00</h1>
+                <h6>+ $1,037.51 (42%) last month</h6>
+            </div>
+        </>
+        
+    )
+}

src/pages/RecentTransaction.css

@@ -0,0 +1,15 @@
+.transactions_widget {
+    background-color: rgb(223, 245, 229);
+}
+
+.transaction_table {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 30px 30px 30px 30px;
+    box-sizing: border-box;
+}
+
+.transaction_table p {
+    margin: 0;
+    float: left;
+}

src/pages/RecentTransactions.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import './RecentTransaction.css'
+
+export default function RecentTransactions() {
+    return (
+        <>
+            <div class="transactions_widget">
+                <h4 class="widget_header">Recent Transactions</h4> 
+                <div class="transaction_table">
+                    <p>Bill</p>
+                    <p>$35.00</p>
+                    <p>2/15/23</p>
+                    <p>Food</p>
+                    <p>$29.95</p>
+                    <p>2/11/23</p>
+                    <p>Wage</p>
+                    <p>$723.40</p>
+                    <p>2/10/23</p>
+                    <p>Pet</p>
+                    <p>$56.98</p>
+                    <p>2/5/23</p>
+                    <p>Leisure</p>
+                    <p>$60.04</p>
+                    <p>2/03/23</p>
+                </div>
+            </div>
+        </>
+        
+    )
+}

src/pages/budget.css

@@ -0,0 +1,23 @@
+.budget_widget {
+    background-color: rgb(223, 245, 229);
+}
+.widget_header {
+}
+
+img {
+    float: left;
+    height: 40px;
+    margin-left: 5%;
+}
+
+.budget_widget h1 {
+    float: left;
+    margin: 0;
+    margin-left: 10%;
+}
+.budget_widget h6 {
+    color: green;
+    float: left;
+    margin: 0;
+    margin-left: 37%;
+}

src/pages/budget.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './budget.css'
+import logo from './widget_logos/budget_logo.png';
+
+export default function Budget() {
+    return (
+        <>
+            <div class="budget_widget">
+                <h4 class="widget_header">Budget Remaining</h4> 
+                <img src={logo} />          
+                <h1>$456.78</h1>
+                <h6>Still on budget</h6>
+            </div>
+        </>
+        
+    )
+}

src/styles.css

@@ -24,6 +24,16 @@ code {
   border-radius: 20px;
   padding: 20px 30px;
   width: 100vw;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: 125px 250px 100px 100px;
+  gap: 10px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.page-display div {
+  padding: 10px;
 }
 
 .page-display > * {