Re-organize project

src/components/AddNewBill.css

@@ -0,0 +1,58 @@
+.add_bill_widget {
+    background-color: rgb(223, 245, 229);
+    max-height: 50%;
+  }
+.widget_header {
+    margin: 0px;
+    margin-bottom: 20px;
+}
+input {
+    max-width: 50%;
+}
+button {
+    margin-left: 20%;
+    margin-right: auto;
+}
+.buttons{
+}
+/* Style The Dropdown Button */
+.dropbtn {
+    cursor: pointer;
+  }
+  
+  /* The container <div> - needed to position the dropdown content */
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  /* Dropdown Content (Hidden by Default) */
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  /* Links inside the dropdown */
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  /* Change color of dropdown links on hover */
+  .dropdown-content a:hover {background-color: #f1f1f1}
+  
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  /* Change the background color of the dropdown button when the dropdown content is shown */
+  .dropdown:hover .dropbtn {
+    background-color: #3e8e41;
+  }

src/components/AddNewBill.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import './AddNewBill.css'
+
+export default function AddNewBill() {
+    return (
+        <>
+            <div class="add_bill_widget">
+                <h4 class="widget_header">Add New Bill</h4>
+                <input type="number"></input> 
+                <div class="buttons">
+                    <div class="dropdown">
+                        <button class="dropbtn">Categories</button>
+                        <div class="dropdown-content">
+                            <p>Bills</p>
+                            <p>Groceries</p>
+                            <p>Rent</p>
+                            <p>Leisure</p>
+                            <p>Gas</p>
+                        </div>
+
+                </div>
+                <button>Add Bill</button>  
+                </div>
+                
+            </div>
+        </>
+        
+    )
+}

src/components/CurrentBalance.css

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

src/components/CurrentBalance.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './CurrentBalance.css'
+import logo from '../assets/widget_logos/current_balance_logo.png';
+
+export default function CurrentBalance() {
+    return (
+        <>
+            <div class="current_balance_widget">
+                <h4 class="widget_header">Current Balance</h4> 
+                <img src={logo} />          
+                <h1>$1238.56</h1>
+                <h6>+ $179.97 (17%) last month</h6>
+            </div>
+        </>
+        
+    )
+}

src/components/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/components/Expenses.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './Expenses.css'
+import logo from '../assets/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/components/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/components/Income.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './Income.css'
+import logo from '../assets/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/components/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/components/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/components/SideNav.css

@@ -1,3 +1,7 @@
+.sidebar {
+    padding: 0 12px;
+}
+
 .sidebar-header {
     display: flex;
     align-items: center;

src/components/SideNav.js

@@ -12,7 +12,7 @@ import './SideNav.css'
 
 export default function SideNav() {
     return(
-        <Sidebar backgroundColor='transparent'>
+        <Sidebar className='sidebar' backgroundColor='transparent'>
             <div className='sidebar-header'>
                 <div className='sidebar-avatar'>
                     <Avatar />

src/components/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/components/budget.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './budget.css'
+import logo from '../assets/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>
+        </>
+        
+    )
+}