From f4ea806292853954d5400e89bcee44f3edd15d43 Mon Sep 17 00:00:00 2001
From: Chris <colah2123@outlook.com>
Date: Thu, 30 Mar 2023 01:40:45 -0400
Subject: [PATCH] Adding Current Balance Widget (without functionality)

---
 src/pages/AddNewBill.css                      |   3 +-
 src/pages/AddNewBill.js                       |   2 +-
 src/pages/CurrentBalance.css                  |  29 ++++++++++++++++++
 src/pages/CurrentBalance.js                   |  17 ++++++++++
 src/pages/Dashboard.jsx                       |   4 +--
 .../widget_logos/current_balance_logo.png     | Bin 0 -> 934 bytes
 6 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/CurrentBalance.css
 create mode 100644 src/pages/CurrentBalance.js
 create mode 100644 src/pages/widget_logos/current_balance_logo.png

diff --git a/src/pages/AddNewBill.css b/src/pages/AddNewBill.css
index ba22a79..aa697a3 100644
--- a/src/pages/AddNewBill.css
+++ b/src/pages/AddNewBill.css
@@ -2,9 +2,10 @@
     max-width: 20%;
     background-color: rgb(223, 245, 229);
     padding: 10px;
+    margin: 1%;
 }
 .widget_header {
-    margin:0px;
+    margin: 0px;
     margin-bottom: 20px;
     position: relative;
 }
diff --git a/src/pages/AddNewBill.js b/src/pages/AddNewBill.js
index 3b5c697..9ac1097 100644
--- a/src/pages/AddNewBill.js
+++ b/src/pages/AddNewBill.js
@@ -17,7 +17,7 @@ export default function AddNewBill() {
                             <p>Leisure</p>
                             <p>Gas</p>
                         </div>
-                    
+
                 </div>
                 <button>Add Bill</button>  
                 </div>
diff --git a/src/pages/CurrentBalance.css b/src/pages/CurrentBalance.css
new file mode 100644
index 0000000..c569276
--- /dev/null
+++ b/src/pages/CurrentBalance.css
@@ -0,0 +1,29 @@
+.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%;
+}
+
+.current_balance_widget h1 {
+    padding-left: 70px;
+    margin: 0;
+}
+.current_balance_widget h6 {
+    color: green;
+    margin: 0;
+    margin-bottom: 10px;
+    padding-left: 70px;
+}
diff --git a/src/pages/CurrentBalance.js b/src/pages/CurrentBalance.js
new file mode 100644
index 0000000..99e5239
--- /dev/null
+++ b/src/pages/CurrentBalance.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import './CurrentBalance.css'
+import logo from './widget_logos/current_balance_logo.png';
+
+export default function CurrentBalance() {
+    return (
+        <>
+            <div class="current_balance_widget">
+                <h5 class="widget_header">Current Balance</h5> 
+                <img src={logo} />          
+                <h1>$1238.56</h1>
+                <h6>+ $179.97 (17%) last month</h6>
+            </div>
+        </>
+        
+    )
+}
\ No newline at end of file
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 1b20f7f..88458df 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -1,12 +1,12 @@
  import AddNewBill from './AddNewBill'
+ import CurrentBalance from './CurrentBalance'
  
  export default function Dashboard() {
-
     return (
         <>
             <h1>Dashboard</h1>
+            <CurrentBalance />
             <AddNewBill />
         </>
-        
     )
  }
\ No newline at end of file
diff --git a/src/pages/widget_logos/current_balance_logo.png b/src/pages/widget_logos/current_balance_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..819acbdefad317614a8dab66beef52841f485837
GIT binary patch
literal 934
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGooCO|{#S9GG!XV7ZFl&wk0|Rq}
zr;B4q#hkZuEHgwBCEDhzNbL#eP~cMgctB>VQpJ*>#b%2>z7V+>)WNY#=wO0khkBE*
zmg9zvf-D;a4jww>rp+&4b8vM);GPbt%|-^y-Z$=^v9~t9f9Blp1J~cyeLnm9%$all
zHgj?)wg@;uh`_m*R8)oBn0h8MB&!^d;55L_T=s%VjLCT#vq+?a^@lU}&l`t1i-ZE1
zHHY@i+a|H3gUL#(MgGdiE$y1K8u%U@Rrzf*=b3}6&<2(Y*`)b<t)fgAeGjy<tUo;W
z!08DO`x$?0OlVMhkaW|`z2TX}Z+)gX%a;AqMK+3E;E7qa;jZ?9DH6Z*neU~U)?_p4
z9(XEsdmoq2+Qs$LlYdkj9Po1JuAkz+?XUEKEgXM$H<t4~e1D9Cn{n-dtrH$rl(Ns5
z8t|jOVXnlaZ4F@$b~*oWyvv%_{^CCK9{!u3%{MS7UlK8p-65*@XMr3;arT$@r9Ac4
zk_x(v#tpYifj$sUaGd(V-lE0c!Og?@fX{!cxUQA+ew{wSc)GEl?_s{Ovx;s4UxEIy
z56z$UMd-4I0abG4s3xmuF5unqUf@;7em(hbU-KKzE5`rkzTv~>>E#gJ@?ozkXTP%H
zd|mrS-;^mTEN7VItXN96IrTRmsPK81uX6Z^Zi3y18;T2pO{-)X{#})<vzJu&V|<%>
zKH@d6{ekHDKcyA_$RA)Ua)@EF%C>p7I^?)a75|TN1HFgq)zyzECTu)>xUcX*L5t<~
zALT}ghvMD)R)jljKRoHZMZt=`$h`^sufF&%`a(JVit>Tfx2ZA`J&E^1L*M<~`{DW|
z=S5rvKiRC<-t-qfn<~8RZR`HFIYO=t;s?|pAFtW_Z`ObD1XD}3t_H{U*7dQR=k7g~
z=h><DN;N}+pWj;QuXDwYQ`K&pw>`OiV*5h%Pg_1*?O?L;n^w#D%D>`Xn=&6`W6M64
z=Q$CNgcOvN7>{{07z!oyut+EqVg|onUbjl5;HPfApmyQ8^aOQp$#q9wcK%=&a9tU4
zA+ljD!~6fA?wmPrG3->r#APh+eJ(uZkY;>3pYwTx`+@H~GL1_Y&0&Nla9~nziuovi
YI<1Iv(VmbBV8&zcboFyt=akR{0BZ1z;s5{u

literal 0
HcmV?d00001