Merge pull request #37 from Mandla-tech/stylesDev

Features and Styles on components

expense-splitter/TODO.md

@@ -9,19 +9,19 @@ MINOR
 CASH MEETING
 
 - AGREEMENT TO DELAY FOR NOW UNTIL ALL PREVIOUS TASKS ARE DONE discuss purpose of table inside group details and how to handle adding an expense
-- CASH [STEP TO BE DONE?] discuss implementing groups in the sidebar as well and the ability to add new groups from the sidebar [SHOW IMAGE]
+- ~~CASH-Done [STEP TO BE DONE?] discuss implementing groups in the sidebar as well and the ability to add new groups from the sidebar [SHOW IMAGE]~~ (backlog) Groups not yet creatable from side bar.
 - [STEP TO BE DONE?] implement editing groups total budget and expense from groups details page
-- CASH [STEP TO BE DONE?] fix styling and align everything well in GroupMembers.jsx
-- CASH [STEP TO BE DONE?] inside GroupMembers.jsx members section where you can add and remove members, make a bg change on hover and replace minus for removing members with x and make bg of x more red and do hover too
+- ~~CASH-Done [STEP TO BE DONE?] fix styling and align everything well in GroupMembers.jsx~~
+- ~~CASH-Done [STEP TO BE DONE?] inside GroupMembers.jsx members section where you can add and remove members, make a bg change on hover and replace minus for removing members with x and make bg of x more red and do hover too~~
 - PREDRAG [STEP TO BE DONE?] try to extract modal logic into a custom hook
 - PREDRAG [STEP TO BE DONE?] replace icons in Total budget/Total expense/Remaining budget cards to be empty not filled, and replace the bugged shopping cart icon with something else
 - PREDRAG [STEP TO BE DONE?] refactor the modal in GroupMembers.jsx and all logic related to "member number". it should be contribution, what % of it.
 - PREDRAG [STEP TO BE DONE?] add number of dollars that is percentage inside chart
-- CASH [STEP TO BE DONE?] implement editable description component both for individual group and individual friend
+- ~~CASH- Done[STEP TO BE DONE?] implement editable description component both for individual group and individual friend~~
 - CASH [STEP TO BE DONE?] complete the layout on all pages
 - PREDRAG [STEP TO BE DONE?] when there are no members in a group, the Budget Split component is bugged, fix it. ad text that says "there are no members for chart to display"
-- CASH [STEP TO BE DONE?] create styling for a btn for theme toggling and put it in place instead of "need help" btn
-- CASH [STEP TO BE DONE?] make logo clickable, it should take user to homepage
+- ~~CASH-Done [STEP TO BE DONE?] create styling for a btn for theme toggling and put it in place instead of "need help" btn~~
+- ~~CASH- Done [STEP TO BE DONE?] make logo clickable, it should take user to homepage~~
 - AGREEMENT TO REMOVE discuss removing "montly" and "view all" btns in groups details page
 - AGREEMENT TO REMOVE [IMAGE] discuss displayed list of friends on the homepage
 - AGREEMENT TO DISCUSS FURTHER WITH THE REST OF THE TEAM discuss friends details page, NEEDS BIG CHANGES

expense-splitter/src/components/DarkModeToggle.jsx

@@ -20,9 +20,11 @@ function DarkModeToggle() {
   return (
     <button
       onClick={toggleDarkMode}
-      className="bg-gray-200 dark:bg-gray-800 p-2 rounded-full text-sm dark:text-white"
+      className="bg-gray-200 dark:bg-gray-800 p-2 rounded-full text-sm dark:text-white
+      flex items-center space-x-2 w-full md:w-auto"
     >
-      {darkMode ? "🌙 Light mode" : "☀️ Dark mode"}
+      {darkMode ? "🌙" : "☀️"}
+      <span className="hidden md:flex ml-2">{darkMode ? "Light mode" : "Dark mode"}</span>
     </button>
   );
 }

expense-splitter/src/components/Groups/GroupMembers.jsx

@@ -87,12 +87,12 @@ function GroupMembers() {
       </div>
 
       {/* note to self, add bg-red-500 to line under to better checking for aligments */}
-      <article className="flex flex-wrap justify-start">
-        
-      <div className="bg-white dark:bg-dark-secondary rounded-2xl flex items-center flex-col">
+      <article className="flex flex-wrap justify-start items-centre">
+
+      <div className="bg-white dark:bg-dark-secondary rounded-2xl flex items-center flex-col ml-6">
         <button
           onClick={() => setIsModalOpen(true)}
-          className="w-14 h-14 rounded-full shadow-lg  bg-primary dark:bg-dark-bg text-4xl text-white dark:text-dark-text hover:bg-primary"
+          className="w-16 h-16 rounded-full shadow-lg  bg-primary dark:bg-dark-bg text-4xl text-white dark:text-dark-text hover:bg-primary"
         >
           +
         </button>
@@ -102,9 +102,9 @@ function GroupMembers() {
           <div
             key={member.id}
             // note to self, add bg-red-200 to line under to better checking for aligments
-            className="bg-red-200 flex flex-col items-center m-1"
+            className="hover:bg-slate-100 flex flex-col items-center m-1 rounded-md"
           >
-            <Link to={`/friends/${member.name}`} className="hover:bg-slate-100 transition-colors rounded-md bg-red-400">
+            <Link to={`/friends/${member.name}`} className="hover:bg-slate-100 transition-colors rounded-xl">
               <GroupsEachMember
                 member={{
                   name: member.name,
@@ -116,7 +116,7 @@ function GroupMembers() {
               onClick={() => handleRemoveMember(member.id, member.name)}
               className="bg-highlight flex items-center justify-center rounded-full font-extrabold text-lg text-alert hover:bg-red-400 w-6 h-6 pb-1 relative bottom-20 left-5"
             >
-              -
+              x
             </button>
           </div>
         ))}

expense-splitter/src/components/Groups/GroupName.jsx

@@ -1,9 +1,19 @@
-function GroupName({groupName}) {
+function GroupName({groupName, description}) {
   return (
     <section className="flex items-center space-x-10 ">
       <img className="w-69 h-69 ml-10 rounded-full object-cover "  src="https://freedomdestinations.co.uk/wp-content/uploads/Diamond-Head-Crater-Honolulu.jpg" alt="group-logo" />
-      <h1 className="text-header font-bold text-secondary dark:text-dark-text">{groupName}</h1>
+      <div className="flex flex-col">
+        <h1 className="text-header font-bold text-secondary dark:text-dark-text">
+          {groupName}
+        </h1>
+        <p className="text-body dark:text-dark-text">
+          {description}
+        </p>
+      </div>
+
     </section>
+
+
   );
 }
 

expense-splitter/src/components/Groups/GroupsEachMember.jsx

@@ -7,7 +7,7 @@ function GroupsEachMember({ member }) {
         alt={member.name}
       />
 
-      <p className="font-bold text-legend dark:text-dark-text">{member.name}</p>
+      <p className="font-bold text-legend dark:text-dark-text dark:hover:text-black">{member.name}</p>
     </section>
   );
 }

expense-splitter/src/components/Sidebar.jsx

@@ -3,65 +3,127 @@ import { IoMdPerson } from "react-icons/io";
 import { IoWalletSharp } from "react-icons/io5";
 import { NavLink } from "react-router-dom";
 import DarkModeToggle from './DarkModeToggle';
+import { useSelector } from "react-redux";
+import { useState } from "react";
 
 function Sidebar() {
+  const [expanded, setExpanded] = useState(false); // State to control expansion
   const SIDEBAR_LINKS = [
     { id: 1, path: "/", name: "Home", icon: MdGroups },
     { id: 2, path: "/groups", name: "Groups", icon: IoMdPerson },
     { id: 3, path: "/friends", name: "Friends", icon: IoWalletSharp },
   ];
 
-  (isActive) => "nav-link" + (!isActive ? " unselected" : "");
+  // Fetching groups from the Redux store
+  const groups = useSelector((state) => state.groups.groups);
 
   return (
-    <div className="w-16 md:w-56 fixed left-0 top-0 z-10 h-screen border-r pt-8 px4 bg-white dark:bg-dark-bg">
+    <div className="w-16 md:w-56 fixed left-0 top-0 z-10 h-screen border-r pt-8 px-4 bg-white dark:bg-dark-bg">
       <div className="mb-8 flex justify-center">
-        <img
-          src="./src/assets/logo.png"
-          alt="logo"
-          className="hidden md:flex"
-        />
-        <img
-          src="./src/assets/logo.png"
-          alt="logo"
-          className="mr-1 flex md:hidden"
-        />
+        <NavLink to="/" className="flex cursor-pointer">
+          <img
+            src="./src/assets/logo.png"
+            alt="logo"
+            className="mr-1 flex md:hidden"
+          />
+          <img
+            src="./src/assets/logo.png"
+            alt="logo"
+            className="hidden md:flex"
+          />
+        </NavLink>
       </div>
 
-      {/* Navigation */}
-      <nav className="">
-        {SIDEBAR_LINKS.map((link, index) => (
-          <NavLink
-            key={index}
-            to={link.path}
-            className={({ isActive }) =>
-              `flex items-center px-4 py-5 space-x-5 text-xl font-extrabold ${
-                isActive ? "text-primary" : "text-title"
-              }`
-            }
-          >
-            <span>{link.icon()}</span>
-            <span className="text-body font-medium text-title hidden md:flex">
-              {link.name}
-            </span>
-          </NavLink>
-        ))}
-      </nav>
+  {/* Navigation */}
+  <nav>
+    {SIDEBAR_LINKS.map((link, index) => {
+      if (link.name === "Groups") {
+        return (
+          <div key={link.id}>
+            <NavLink
+              to={link.path}
+              className={({ isActive }) =>
+                `flex items-center px-4 py-5 space-x-5 text-xl font-extrabold ${
+                  isActive ? "text-primary" : "text-title"
+                }`
+              }
+            >
+              <span>{link.icon()}</span>
+              <span className="text-body font-medium text-title hidden md:flex">
+                {link.name}
+              </span>
+            </NavLink>
 
-      {/* Dark Mode Toggle  */}
-      <div className="mt-4 md:mt-2 flex items-center justify-center">
-        <DarkModeToggle /> {/* This is the dark mode toggle button */}
-      </div>
+            {/* Listing the created groups directly below the "Groups" link */}
+            <div>
+              {/*display the first 3 groups in sidebar*/}
+              {groups.slice(0,2).map((group) => (
+                <NavLink
+                  key={group.id}
+                  to={`/groups/${group.id}`} //Hooking from routes for each group
+                  className={({ isActive }) =>
+                    `flex items-center px-8 py-2 space-x-5 text-base font-medium ${
+                      isActive ? "text-primary" : "text-title"
+                    }`
+                  }
+                >
+                <span className="text-sm truncate hover:text-black dark:hover:text-primary w-full">{group.name}</span>
+                </NavLink>
+              ))}
 
+              {/* Expansion Logic, I set this to slice at 2 groups for now */}
+              {expanded && groups.slice(2).map((group) => ( // Here we will additional groups if expanded
+              <NavLink
+                  key={group.id}
+                  to={`/groups/${group.id}`} // Hooking from routes for each group
+                  className={({ isActive }) =>
+                    `flex items-center px-8 py-2 space-x-2 text-base font-medium ${
+                      isActive ? "text-primary" : "text-title"
+                    }`
+                  }
+                >
+                  <span className="text-sm truncate hover:text-black dark:hover:text-primary w-full">{group.name}</span>
+              </NavLink>
+                ))}
 
-      <div className="w-full absolute bottom-5 left-0 px-4 py-2 cursor-pointer text-center">
-        <p
-          className="w-full flex items-center justify-center space-x-2 text-sm text-white py-2 px-4
-        bg-primary rounded-xl hover:bg-secondary hover:text-blizzard-blue transition duration-300 ease-in-out"
+              {/* Toggle Button for more groups to be shown if more than 2*/}
+              {groups.length > 2 && (
+                <button
+                    onClick={() => setExpanded(!expanded)}
+                    className="text-sm truncate mt-2 px-8 text-primary focus:outline-none">
+                  <span className="hidden md:flex">{expanded ? "Show Less" : "Show More"}</span>
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <NavLink
+          key={index}
+          to={link.path}
+          className={({ isActive }) =>
+            `flex items-center px-4 py-5 space-x-5 text-xl font-extrabold ${
+              isActive ? "text-primary" : "text-title"
+            }`
+          }
         >
-          <span>?</span>
-          <span className="hidden md:flex">Need help</span>
-        </p>
+          <span>{link.icon()}</span>
+          <span className="text-body font-medium text-title hidden md:flex">
+            {link.name}
+          </span>
+        </NavLink>
+      );
+    })}
+
+  </nav>
+
+      <div className="w-full absolute bottom-5 left-0 px-4 py-2 cursor-pointer text-center">
+        {/* Dark Mode Toggle  */}
+        <div className="mt-4 md:mt-2 flex items-center justify-center">
+          <DarkModeToggle /> {/* This is our dark mode toggle button */}
+        </div>
       </div>
     </div>
   );

expense-splitter/src/pages/Groups.jsx

@@ -25,7 +25,7 @@ const totalBudget = group.totalBudget;  // fake values update with actual logic
 
   return (
     <section className="flex flex-col gap-8 m-6">
-      <GroupName groupName={group.name} />
+      <GroupName groupName={group.name} description={group.description} />
 
       <div className="flex gap-6 flex-col xl:flex-row">
         <GroupSmallExpenseCard

expense-splitter/src/pages/Home.jsx

@@ -25,6 +25,7 @@ function Home() {
 
   const [newGroup, setNewGroup] = useState({
     name: "",
+    description:"",
     totalBudget: "",
     totalExpense: "",
   });
@@ -44,6 +45,7 @@ function Home() {
       addGroup({
         id: groups.length + 1,
         name: newGroup.name,
+        description:newGroup.description,
         totalBudget: newGroup.totalBudget,
         totalExpense: newGroup.totalExpense,
         members: [], // empty for now
@@ -52,6 +54,7 @@ function Home() {
 
     setNewGroup({
       name: "",
+      description:"",
       totalBudget: "",
       totalExpense: "",
     });
@@ -148,6 +151,24 @@ function Home() {
                 />
               </div>
 
+              <div>
+              <label className="text-body font-semibold dark:text-dark-text">
+                  Description
+                </label>
+                <input textarea
+                  name="description"
+                  value={newGroup.description}
+                  onChange={handleInputChange}
+                  className="border p-2 w-full dark:bg-dark-input"
+                  placeholder="Enter group description"
+                  required
+                  maxLength={70}
+                  style={{ fontSize: "14px" }}
+                />
+              </div>
+
+
+
               <div>
                 <label className="text-body font-semibold dark:text-dark-text">
                   Total Budget
@@ -183,7 +204,8 @@ function Home() {
               <button
                 type="submit"
                 className="px-4 py-2 bg-primary text-white rounded-xl dark:bg-dark-primary"
-              >
+
+>
                 Add Group
               </button>
             </form>