Style stuff (#190)

* fix - Savings goal now diplayed in user specified currency

* feat - Added currency utility

* refactor - Moved currency conversion into currency util file

* feat - Added connection to dashboard.css file

* refactor - Moved CSS into individual stylesheets for reuseability

* feat - Restyled savings progress bar

* feat - Styled background

* feat - Added generic button file

* fix - Fixed sonar quality check problem

* feat - Refactored goal bar CSS

* feat - Added consistent default button styles

* feat - Added SO MUCH STUFF I DEFINITELY SHOULD HAVE COMMITTED MORE FREQUENTLY (we live and we learn)

* fix - Fixed currency consistency

* fix - Fixed number rounding issue

* fix - I HATE SONAR

* fix - I REALLY HATE SONAR

* fix - Okay maybe it isnt that bad

frontend/src/assets/css/currencyDropdown.css

@@ -0,0 +1,41 @@
+@import url("variables.css");
+
+.currencyOptionList_open, .currencyOptionList_closed {
+  width: 100%
+}
+
+.currencyOptionList_open {
+  transition-duration: 50ms;
+  height: calc(100vh - 5 * var(--itemHeight) - 3.5 * var(--subSectionPadding) - var(--topBarHeight) - 40px);
+  padding-top: calc(var(--subSectionPadding) * 2);
+}
+
+.currencyOptionList_closed {
+  transition-duration: 50ms;
+  height: 0;
+  padding-top: 0;
+  overflow: hidden;
+}
+
+.currencyOption {
+  width: 100%;
+}
+
+.defaultButton {
+  position: relative;
+  z-index: 2;
+}
+
+.defaultContainer {
+  position: relative;
+  z-index: 1;
+  float: left;
+  margin-left: var(--subSectionPadding);
+  margin-top: calc(var(--subSectionPadding) * -1 - var(--standardRadius) * 2);
+  min-height: calc(var(--standardRadius) * 2);
+}
+
+.currencyOption {
+  width: 100%;
+  float: left;
+}

frontend/src/assets/css/dashboard.css

@@ -1,9 +1,11 @@
 @import url("variables.css");
 
 body {
-  background: linear-gradient(90deg, rgba(42,4,126,1) 0%, rgba(77,4,126,1) 100%);
+  /* background: linear-gradient(90deg, rgba(42,4,126,1) 0%, rgba(77,4,126,1) 100%); */
+  background: var(--color1);
   overflow: hidden;
   font-family: "Roboto Mono", monospace;
+  font-size: var(--standardFontSize);
 }
 
 .topBar {
@@ -26,19 +28,21 @@ body {
 }
 
 .sideBar {
-  background: linear-gradient(180deg, rgba(42,4,126,1) 0%, rgba(77,4,126,1) 100%);
   width: var(--sideBarWidth);
   height: calc(100vh - var(--topBarHeight));
   float: right;
 }
 
 .scrollableContent {
+  display: flex;
+  flex-direction: column;
   background-color: var(--color2);
   box-shadow: inset 0px 10px 20px 0px rgba(0,0,0,0.5);
   border-radius: var(--standardRadius);
   width: calc(100vw - var(--sideBarWidth));
   height: calc(100vh - var(--topBarHeight));
   float: left;
-  padding: calc( 2 * var(--subSectionPadding));
+  padding: calc( 4 * var(--subSectionPadding));
+  gap: calc( 4 * var(--subSectionPadding));
   overflow: scroll;
 }

frontend/src/assets/css/default.css

@@ -0,0 +1,106 @@
+@import url("variables.css");
+
+/* ---- ---- Default Container ---- ---- */
+
+.defaultContainer, .defaultButtonContainer, .defaultDropdownContainer {
+  width: calc(var(--sideBarWidth) - 2 * var(--subSectionPadding));
+  padding: calc(var(--subSectionPadding) * 0.5);
+  border-radius: var(--standardRadius);
+  background: var(--noAffordanceBackground);
+}
+
+/* ---- ---- Default Button and Default Dropdown ---- ---- */
+
+.defaultButtonContainer, .defaultDropdownContainer {
+  transition-duration: 100ms;
+  margin-left: var(--subSectionPadding);
+  margin-bottom: var(--subSectionPadding);
+  overflow: hidden;
+  box-shadow: var(--noAffordanceShadow);
+  float: left;
+}
+
+.defaultButton {
+  transition-duration: 100ms;
+  width: 100%;
+  height: calc(var(--itemHeight) - var(--subSectionPadding));
+  border-radius: calc(var(--standardRadius) * 0.75);
+  background: var(--physicalAffordanceBackground);
+  box-shadow: var(--physicalAffordanceShadow);
+  color: var(--color2);
+  font-size: var(--standardFontSize);
+}
+
+.defaultButtonContainer:hover, .defaultDropdownContainer:hover {
+  transition-duration: 100ms;
+  padding: 0;
+}
+
+.defaultButtonContainer:hover {
+  box-shadow: var(--noAddordanceShadow_hover);
+  background: rgb(100, 100, 100);
+}
+
+.defaultButtonContainer:hover .defaultButton, .defaultDropdownContainer:hover .defaultButton {
+  transition-duration: 100ms;
+  background: var(--physicalAffordanceBackground_hover);
+  box-shadow: var(--physicalAffordanceShadow_hover);
+  border-radius: var(--standardRadius);
+  font-size: calc(var(--standardFontSize) + 1px);
+  height: var(--itemHeight);
+}
+
+/* ---- ---- Goal Bar ---- ---- */
+
+.goalBarContainer, .goalDivider, .subGoalContainer {
+  height: calc((var(--topBarHeight) - 3 * var(--subSectionPadding)) * 0.5);
+}
+
+.goalBarContainer {
+  /* Origonal styling => w-full bg-gray-200 rounded-lg h-6 relative */
+  width: 100%;
+  background: rgb(211, 211, 211);
+  border-radius: var(--standardRadius);
+  position: relative;
+}
+
+.goalBarContainer {
+  padding: 3px;
+  background: var(--noAffordanceBackground);
+  box-shadow: var(--noAffordanceShadow);
+}
+
+.goalBar {
+  /* Origonal styling => bg-gradient-to-r from-blue-400 bg-primary h-full rounded-lg */
+  height: 100%;
+  border-radius: var(--standardRadius);
+  border-top: 2px;
+  background: var(--visualAffordanceBackground);
+  box-shadow: var(--visualAffordanceShadow);
+}
+
+.goalDivider {
+/* Origonal styling => absolute border-l border-gray-400 */
+  position: absolute;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  top: 0;
+}
+
+.subGoalContainer {
+/* Origonal styling => absolute w-full flex justify-between -top-6 */
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  top: calc((var(--topBarHeight) - var(--subSectionPadding)) * 0.5);
+}
+
+/* Origonal styling => {`absolute left-1/2 transform -translate-x-1/2 text-xs 
+    ${Number(balance) >= Number(subgoal) ? "text-green-700 border-green-500" : "text-gray-300 border-gray-300"} 
+    border rounded px-1`} */
+
+.subGoal, .subGoalCompleted {
+  text-align: center;
+  width: 0;
+  position: relative;
+}

frontend/src/assets/css/savingsTracker.css

@@ -2,47 +2,30 @@
 
 .trackerContainer {
   position: absolute;
-  width: calc(100vw - 2 * var(--sideBarWidth) - 2 * var(--subSectionPadding));
-  right: var(--sideBarWidth);
+  width: calc(100vw - 2 * var(--sideBarWidth) - 2 * var(--subSectionPadding) - 10vw);
+  right: calc(var(--sideBarWidth) + 5vw);
   height: calc(var(--topBarHeight) - 2 * var(--subSectionPadding));
   margin-top: var(--subSectionPadding);
   margin-left: var(--subSectionPadding);
   float: left;
 }
 
-.trackerTextContainer, .progressBarContainer {
+.balanceCounterContainer {
+  display: flex;
+  justify-content: center;
   position: absolute;
-  left: 0;
+  height: calc((var(--topBarHeight) - 3 * var(--subSectionPadding)) * 0.5);
   top: 0;
+  left: 0;
   width: 100%;
-  height: 100%;
-}
-
-.trackerTextContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
-.trackerText {
+.balanceCounter {
+  padding-left: var(--subSectionPadding);
+  padding-right: var(--subSectionPadding);
+  width: fit-content;
+  height: calc(100% - var);
+  background-color: rgba(255, 255, 255, 0.5);
   text-align: center;
-  color: var(--color2);
-  z-index: 2;
-}
-
-.progressBarContainer {
-  box-sizing: border-box;
-  border-width: 2px;
-  border-color: var(--color1);
-  border-radius: var(--standardRadius);
-  overflow: hidden;
-}
-
-.progressBar {
-  position: absolute;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background-color: var(--color1);
-  z-index: 1;
+  font-size: 0.75rem;
 }

frontend/src/assets/css/transactions.css

@@ -0,0 +1,14 @@
+@import url("variables.css");
+
+.transactionLog {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+  border: solid 4px var(--color3);
+  border-radius: var(--standardRadius);
+}
+
+.transaction {
+
+}

frontend/src/assets/css/variables.css

@@ -1,11 +1,27 @@
 :root {
-  --color1: black;
-  --color2: white;
+  --color1: rgb(50, 48, 50);
+  --color2: rgb(222, 218, 225);
+  --color3: rgb(9, 158, 106);
   --topBarHeight: 64px;
-  --topBarBtnHeight: 32px;
-  --topBarBtnWidth: 64px;
   --sideBarWidth: calc(16vw);
   --subSectionPadding: 8px;
   --itemHeight: 10vh;
-  --standardRadius: 10px
+  --standardRadius: 10px;
+  --standardFontSize: 16px;
+
+  --color1_gradientInner: rgb(40, 39, 40);
+  --color1_hover: rgb(54, 52, 54);
+  --color1_gradientInner_hover: rgb(44, 43, 44);
+
+  --noAffordanceBackground: var(--color2);
+  --noAffordanceShadow: inset 0px 2px 3px 0px rgba(0,0,0,0.5);
+  --noAddordanceShadow_hover: 0px 4px 4px 0px rgba(0,0,0,0.25);
+
+  --visualAffordanceBackground: linear-gradient(90deg, rgb(5, 87, 68), rgb(43, 177, 99));
+  --visualAffordanceShadow: inset -3px 3px 4px 2px rgba(200, 255, 184, 0.4);
+
+  --physicalAffordanceBackground: linear-gradient(var(--color1), var(--color1_gradientInner));
+  --physicalAffordanceShadow: inset 0px 1px 4px 1px rgba(153, 148, 155, 0.3);
+  --physicalAffordanceBackground_hover: linear-gradient(var(--color1_hover), var(--color1_gradientInner_hover));
+  --physicalAffordanceShadow_hover: inset 0px 1.5px 5px 1px rgba(153, 148, 155, 0.2);
 }

frontend/src/components/Transaction.jsx

@@ -9,7 +9,6 @@ const Transaction = ({ transaction }) => {
 
     const handleCheckboxChange = (e) => {
         handleSelect(transaction.id, e.target.checked);
-        console.log("clicked: ", transaction.id);
       };
       return (
         <div className="flex flex-row justify-start text-body pl-[8x]">

frontend/src/components/default/DefaultButton.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import '../../assets/css/default.css';
+
+export default function DefaultButton(props) {
+  return (
+    <div className="defaultButtonContainer">
+      <button className="defaultButton" onClick={props.onClick}>
+        {props.children}
+      </button>
+    </div>
+  );
+}

frontend/src/components/metrics/BalanceGraph.jsx

@@ -24,28 +24,22 @@ export default function BalanceGraph() {
     const parseDate = (dateString) => {
         // Parse the date string
         const date = new Date(dateString);
-        console.log(date)
 
         // Create a new date object for the start of the year
         const startOfYear = new Date(date.getFullYear(), 0, 0);
-        console.log(startOfYear)
 
         // Calculate the difference in milliseconds
         const diff = date - startOfYear;
 
         // Convert milliseconds to days and return the day of the year
         const oneDay = 1000 * 60 * 60 * 24;
         const parseDate = Math.floor(diff / oneDay);
-        console.log(parseDate)
 
         return parseDate;
     }
 
     useEffect(() => {
 
-        console.log(balance)
-        console.log(transactions)
-
         let pastBalance = balance
         const newBalanceData = transactions.reduce((acc, transaction) => {
 
@@ -67,9 +61,6 @@ export default function BalanceGraph() {
         newBalanceData.push({x: 0, y: pastBalance})
 
         setBalanceData(newBalanceData)
-
-        console.log(newBalanceData)
-
     }, [balance, transactions])
 
     return (