Merge pull request #41 from Mandla-tech/stylesDev

feat(layout): Improve responsive layout for Groups components
chingu-voyages · Oct 7, 2024 · b06035d · b06035d
2 parents 76493bf + 94e7375
commit b06035d
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 30 deletions.
diff --git a/expense-splitter/package-lock.json b/expense-splitter/package-lock.json
diff --git a/expense-splitter/src/components/Groups/GroupChart.jsx b/expense-splitter/src/components/Groups/GroupChart.jsx
@@ -150,8 +150,9 @@ function GroupChart({ groupId }) {
           content={
             <form onSubmit={handleSubmit} className="space-y-3">
               {group.members.map((member) => (
-                <div key={member.id}>
+                <div key={member.id} className="grid grid-cols-[152px_auto] items-center"  >
                   <label>{member.name} Contribution</label>
+                  <div className="flex items-center">
                   <input
                     type="number"
                     value={customContributions[member.id]}
@@ -161,7 +162,8 @@ function GroupChart({ groupId }) {
                     className="border mr-3 p-2 w-[10rem] dark:bg-dark-input"
                     required
                   />
-                  %
+                 <span> % </span>
+                 </div>
                 </div>
               ))}
               <p className="text-md">
@@ -207,7 +209,7 @@ function GroupChart({ groupId }) {
               ))}
             </Pie>
           </PieChart>
-          <article className="p-3 ml-3 flex rounded-lg shadow-custom flex-wrap justify-start">
+          <article className="p-3 w-full flex rounded-lg shadow-custom flex-wrap justify-start gap-2">
             {group.members.map((entry, index) => (
               <div
                 key={index}

diff --git a/expense-splitter/src/components/Groups/GroupExpenseBar.jsx b/expense-splitter/src/components/Groups/GroupExpenseBar.jsx
@@ -2,13 +2,14 @@ const ExpenseBar = ({ expense, budget }) => {
   const expensePercentage = (expense / budget) * 100;
 
   return (
-    <section className="flex flex-col justify-between  w-custom-width h-custom-expense-height rounded-global p-8 pt-6 ml-8 border bg-white dark:bg-dark-secondary shadow-md">
+    <section className="flex flex-col justify-between w-full  min-w-0 h-auto rounded-global ml-8 lg:ml-8 p-4 md:p-6 pt-4
+     bg-white dark:bg-dark-secondary shadow-md overflow-hidden">
       <p className="text-groupComponentHeader font-bold text-secondary dark:text-primary">
         Expense vs budget
       </p>
 
-      <div className="flex justify-between items-start">
-        <article className="w-custom-bar pr-4">
+      <div className="flex flex-col md:flex-row justify-between items-start">
+        <article className="w-custom-bar pr-4  min-w-0">
           {/* progress bar */}
           <div className="relative w-full h-8 rounded-lg bg-gray-200 mb-2 mt-4 overflow-hidden">
             <p
@@ -42,7 +43,7 @@ const ExpenseBar = ({ expense, budget }) => {
         </article>
 
         {/* legend */}
-        <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">
+        <article className="flex flex-col items-start text-xs font-bold space-y-2 p-4 w-full md:w-44 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="font-bold text-legend">Expense</span>

diff --git a/expense-splitter/src/components/Groups/GroupMembers.jsx b/expense-splitter/src/components/Groups/GroupMembers.jsx
@@ -81,7 +81,8 @@ function GroupMembers() {
   };
 
   return (
-    <section className="bg-white dark:bg-dark-secondary dark:border p-6 ml-8 rounded-lg shadow w-custom-width">
+    <section className="bg-white dark:bg-dark-secondary dark:border p-4 ml-8 lg:ml-8 rounded-lg shadow
+      w-full gap-y-1 mb-6">
       <p className="ml-3 mb-6 text-groupComponentHeader font-bold text-secondary dark:text-primary">
         Members
       </p>
@@ -102,9 +103,9 @@ function GroupMembers() {
           <div
             key={member.id}
             // note to self, add bg-red-200 to line under to better checking for aligments
-            className="hover:bg-slate-100 flex flex-col items-center  rounded-md"
+            className="hover:bg-dark-bg flex flex-col items-center m-1 rounded-md"
           >
-            <Link to={`/friends/${member.name}`} className="hover:bg-slate-100 transition-colors rounded-xl">
+            <Link to={`/friends/${member.name}`} className="hover:bg-dark-bg transition-colors rounded-xl">
               <GroupsEachMember
                 member={{
                   name: member.name,

diff --git a/expense-splitter/src/components/Groups/GroupName.jsx b/expense-splitter/src/components/Groups/GroupName.jsx
@@ -26,7 +26,7 @@ function GroupName({ group }) {
   const handleEditToggle = () => {
     setIsEditing(!isEditing);
     dispatch(updateGroupName({ groupId: group.id, newName: groupName }));
-   
+
   };
 
   const handleImageSelect = (image) => {
@@ -73,21 +73,22 @@ function GroupName({ group }) {
           style={{ width: `${Math.max(groupName.length * 20, 200)}px` }}
         />
       ) : (
-        <div>
+        <>
+        <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">
         {group.description}
-      </p> 
+      </p>
       </div>
-
+      </>
       )}
       <button
         onClick={handleEditToggle}
-        className="rounded-full hover:bg-white p-3 relative right-8 border border-transparent hover:border hover:border-black"
+        className="rounded-full  hover:bg-white p-3 relative right-8 border border-transparent hover:border hover:border-black"
       >
-        <MdEdit className="w-6 h-6 " />
+        <MdEdit className="w-6 h-6 dark:text-dark-text dark:hover:text-black"  />
       </button>
 
       {isOpen && (

diff --git a/expense-splitter/src/components/Groups/GroupSmallExpenseCard.jsx b/expense-splitter/src/components/Groups/GroupSmallExpenseCard.jsx
@@ -2,7 +2,8 @@
 
 function GroupSmallExpenseCard({ icon: Icon, label, value, button, onClick }) {
   return (
-    <section className="bg-white dark:bg-dark-secondary border p-8 mt-8 ml-8 space-x-6  rounded-global  flex items-start w-custom-card">
+    <section className="bg-white dark:bg-dark-secondary border p-8 mt-8 ml-8 space-x-6  rounded-global
+      flex items-start w-custom-card">
       <div className="flex items-start space-x-4 flex-grow">
         <Icon className="bg-blizzard-blue dark:bg-dark-primary rounded-full w-14 h-14 p-3 text-primary" />
         <span>

diff --git a/expense-splitter/src/components/Groups/GroupsEachMember.jsx b/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 dark:hover:text-black">{member.name}</p>
+      <p className="font-bold text-legend dark:text-dark-text">{member.name}</p>
     </section>
   );
 }

diff --git a/expense-splitter/src/components/Layout.jsx b/expense-splitter/src/components/Layout.jsx
@@ -7,10 +7,10 @@ import Sidebar from "./Sidebar";
 
 function Layout() {
   return (
-    <section className="flex bg-blizzard-blue dark:bg-dark-bg">
+    <section className="flex bg-blizzard-blue dark:bg-dark-bg overflow-auto">
       <Sidebar />
-      
-      <div className="w-full ml-16 md:ml-56">
+
+      <div className="w-full ml-16 mr-8 md:ml-56">
         <Outlet />
       </div>
     </section>

diff --git a/expense-splitter/src/components/Sidebar.jsx b/expense-splitter/src/components/Sidebar.jsx
@@ -18,7 +18,7 @@ function Sidebar() {
   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 px-4 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-primary">
       <div className="mb-8 flex justify-center">
         <NavLink to="/" className="flex cursor-pointer">
           <img
@@ -56,7 +56,7 @@ function Sidebar() {
 
             {/* Listing the created groups directly below the "Groups" link */}
             <div>
-              {/*display the first 3 groups in sidebar*/}
+              {/*display the first 2 groups in sidebar*/}
               {groups.slice(0,2).map((group) => (
                 <NavLink
                   key={group.id}

diff --git a/expense-splitter/src/components/Utils/Modal.jsx b/expense-splitter/src/components/Utils/Modal.jsx
@@ -3,12 +3,12 @@ const Modal = ({ content, onClose, handleClickOutside }) => {
     <section
       id="modal-overlay"
       className="!m-0 fixed z-50 inset-0 bg-black bg-opacity-20 flex justify-center items-center"
-      onClick={handleClickOutside} 
+      onClick={handleClickOutside}
     >
-      <article className="bg-white p-10 rounded-lg w-[30rem]">
+      <article className="bg-white dark:bg-dark-secondary p-10 rounded-lg w-[30rem]">
         <div className="flex justify-between items-center">
-          <h2 className="text-2xl mb-4 font-bold">Modal</h2>
-       
+        <h2 className="text-2xl mb-4 font-bold dark:text-primary">Create New</h2>
+
           <button
             className="bg-white shadow rounded-full w-8 h-8 text-red-500"
             onClick={onClose}

diff --git a/expense-splitter/src/pages/Groups.jsx b/expense-splitter/src/pages/Groups.jsx
@@ -90,6 +90,7 @@ function Groups() {
       <GroupName group={group}/>
 
       <div className="flex gap-6 flex-col xl:flex-row">
+
         <GroupSmallExpenseCard
           icon={GiMoneyStack}
           label="Total budget"
@@ -109,9 +110,20 @@ function Groups() {
         />
       </div>
 
-      <ExpenseBar expense={totalExpense} budget={totalBudget} />
-      <GroupChart groupId={groupId} />
-      <GroupMembers members={group.members} />
+      {/* Flex container for ExpenseBar and GroupChart styling */}
+      <div className="flex flex-col lg:flex-row w-full gap-6 ">
+      {/* Left column container */}
+      <div className="flex flex-col gap-6 lg:w-1/2 min-w-0">
+          <ExpenseBar expense={totalExpense} budget={totalBudget} />
+          <GroupMembers members={group.members} />
+        </div>
+        <div className="lg:w-1/2 min-w-0"> {/* GroupChart will take the available width */}
+          <GroupChart groupId={groupId} />
+        </div>
+      </div>
+
+
+
       <GroupExpenseTable />
 
       {isOpen && (