Merge pull request #31 from chingu-voyages/layout-predrag

Partial redux toolkit logic for manipulating groups
chingu-voyages · Sep 27, 2024 · 2f0798b · 2f0798b
2 parents 059fe64 + f1afc7a
commit 2f0798b
Show file tree

Hide file tree

Showing 9 changed files with 349 additions and 107 deletions.
diff --git a/expense-splitter/package-lock.json b/expense-splitter/package-lock.json
diff --git a/expense-splitter/src/App.jsx b/expense-splitter/src/App.jsx
@@ -12,6 +12,7 @@ function App() {
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
           <Route path="groups" element={<Groups />} />
+          <Route path="groups/:groupId" element={<Groups/>} />
           <Route path="friends" element={<Friends />} />
         </Route>
       </Routes>

diff --git a/expense-splitter/src/components/Groups/GroupExpenseBar.jsx b/expense-splitter/src/components/Groups/GroupExpenseBar.jsx
@@ -2,14 +2,16 @@ const ExpenseBar = ({ expense, budget }) => {
   const expensePercentage = (expense / budget) * 100;
 
   return (
-    <section className="flex flex-col justify-between w-full w-custom-width h-custom-expense-height rounded-global p-8 pt-6 ml-8 bg-white shadow-md">
+    <section className="flex flex-col justify-between  w-custom-width h-custom-expense-height rounded-global p-8 pt-6 ml-8 bg-white shadow-md">
       <div className="flex justify-between items-center mb-6">
         <p className="text-lg font-bold text-secondary">Expense vs budget</p>
-        <button className="text-body font-medium text-primary bg-blizzard-blue py-1 px-4 mr-8 rounded-lg">Monthly ▼</button>
+        <button className="text-body font-medium text-primary bg-blizzard-blue py-1 px-4 mr-8 rounded-lg">
+          Monthly ▼
+        </button>
       </div>
 
       <div className="flex justify-between items-start">
-      <article className="w-custom-bar pr-4">
+        <article className="w-custom-bar pr-4">
           {/* progress bar */}
           <div className="relative w-full h-8 rounded-lg bg-gray-200 mb-2 mt-4 overflow-hidden">
             <p
@@ -20,18 +22,18 @@ const ExpenseBar = ({ expense, budget }) => {
             <p
               className="absolute top-0 bg-white h-full transition-all duration-500 ease-out"
               style={{
-                width: '4px', // width of the white tip in front of primary bar
+                width: "4px", // width of the white tip in front of primary bar
                 left: `calc(${expensePercentage}% - 2px)`, //the white tip moves with the progress
               }}
             ></p>
           </div>
-            {/* numbers */}
+          {/* numbers */}
           <div className="flex justify-between text-sm font-bold text-secondary relative">
             <p
               style={{
                 left:
                   expensePercentage > 70
-                    ? 'calc(70% - 13px)' // Stop at 70% to avoid overlapping with budget figure
+                    ? "calc(70% - 13px)" // Stop at 70% to avoid overlapping with budget figure
                     : `calc(${expensePercentage}% - 13px)`,
               }}
               className="absolute transition-all duration-500 ease-out"
@@ -46,11 +48,11 @@ const ExpenseBar = ({ expense, budget }) => {
         <article className="flex flex-col items-start text-xs font-bold space-y-2 p-4 w-44 h-24 rounded-lg bg-white shadow-custom">
           <div className="flex items-center">
             <span className="w-3 h-3 rounded-full bg-primary mr-2"></span>
-            <span className="text-legend font-bold text-legend">Expense</span>
+            <span className="font-bold text-legend">Expense</span>
           </div>
           <div className="flex items-center">
             <span className="w-3 h-3 rounded-full bg-gray-300 mr-2"></span>
-            <span className="text-legend font-bold text-legend">Remaining budget</span>
+            <span className="text-legend font-bold ">Remaining budget</span>
           </div>
         </article>
       </div>