ui updated

public/index.html

@@ -8,6 +8,9 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

src/Components/AddTransaction.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React from 'react';
+import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 
-const AddTransaction = () => {
-  return (
-    <div>AddTransaction</div>
-  )
-}
-
-export default AddTransaction
+export default function AddTransaction() {
+ return (
+    <div style={{'borderRadius':'100%', 'backgroundColor': 'lightgrey','color':'red','position':'absolute','bottom':'60px','right':'20px'}}>
+      <ModeEditOutlineOutlinedIcon color='white'/>
+    </div>
+  );
+}

src/Components/Footer/footer.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 .footer{
     background-color: rgb(0, 0, 0) !important;
     height: 35px;
@@ -12,6 +13,7 @@
     right: 0px;
 }
 .footer-heading{
+    font-family: 'Roboto', sans-serif;
     font-weight: bold;
     color: rgb(211, 211, 211);
 }

src/Components/Graphs/Graph.jsx

@@ -23,41 +23,38 @@ ChartJS.register(
     Tooltip,
     Legend
 );
-const options = {
-    responsive: true,
-    plugins: {
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Chart.js Line Chart',
-        },
-    },
-};
-const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-const data = {
-    labels,
-    datasets: [
-        {
-            label: 'Dataset 1',
-            data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
-            borderColor: 'rgb(255, 99, 132)',
-            backgroundColor: 'rgba(255, 99, 132, 0.5)',
-        },
-        {
-            label: 'Dataset 2',
-            data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
-            borderColor: 'rgb(53, 162, 235)',
-            backgroundColor: 'rgba(53, 162, 235, 0.5)',
-        },
-    ],
-};
 
 
-const Graph = () => {
+const Graph = ({ labels }) => {
+
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'bottom',
+            }
+        },
+    };
+    const data = {
+        labels,
+        datasets: [
+            {
+                label: 'Expense',
+                data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+                borderColor: 'rgb(255, 99, 132)',
+                backgroundColor: 'rgba(255, 99, 132, 0.5)',
+            },
+            {
+                label: 'Income',
+                data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+                borderColor: 'rgb(10, 51, 4)',
+                backgroundColor: 'rgba(31, 138, 17)',
+            },
+        ],
+    };
     return (
-        <Line className='graph'  options={options} data={data} />
+        <Line className='graph' options={options} data={data} />
     )
 }
 

src/Components/Graphs/Graphs.jsx

@@ -1,17 +1,21 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Graph from './Graph'
 import './graphs.css'
 
 const Graphs = () => {
+
+const labels_1 = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];  
+const labels_2 = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const [labels, setLabels] = useState(labels_1);
+
   return (
     <div className='graphs_div'>
       <div className='filters_div'>
-        <p>Daily</p>
-        <p>Weekly</p>
-        <p>Monthly</p>
+        <button onClick={()=>{setLabels(labels_1)}}>Daily</button>
+        <button onClick={()=>{setLabels(labels_2)}}>Monthly</button>
       </div>
       <div className='graphs'>
-        <Graph/>
+        <Graph labels={labels}/>
       </div>
     </div>
   )

src/Components/Graphs/graphs.css

@@ -15,12 +15,15 @@
     font-weight: 800;
     font-size: 13px;
 }
-.filters_div p{
+.filters_div button{
+    outline: none;
+    background-color: transparent;
     color: rgb(211, 211, 211);
     margin: 12px 8px;
     cursor: pointer;
+    font-family: 'Roboto', sans-serif;
 }
-.filters_div p:hover{
+.filters_div button:hover{
     color: rgb(160, 131, 1);
 }
 .active_filter{

src/Components/TxContainer/txContainer.css

@@ -6,6 +6,7 @@
 .bar_container{
     display: flex;
     justify-self: center;
+    font-family: 'Roboto', sans-serif;
     justify-content: flex-start;
     flex-wrap: wrap;
 }

src/Components/TxLogsContainer/TxLogsContainer.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import Transactions from './Transactions'
 import './txLogsContainer.css'
+import AddTransaction from '../AddTransaction'
 
 const TransactionLogsContainer = () => {
   return (
     <div className='tx_logs_div'>
       <h1 className='logs_heading'>Transactions Logs</h1>
       <Transactions/>
+      <AddTransaction/>
     </div>
   )
 }

src/Components/TxLogsContainer/txLogsContainer.css

@@ -7,13 +7,14 @@
 .logs_heading {
     color: rgb(211, 211, 211);
     text-align: center;
+    font-family: 'Roboto', sans-serif;
     font-weight: bold !important;
     font-size: 23px !important;
     text-shadow: 8px 7px 6px rgba(0, 0, 0, 0.2);
 }
 .tx_log_div{
     padding: 10px 5px;
-    max-height: 375px;
+    max-height: 400px;
     overflow-x: hidden;
     overflow-y: auto;
 }