Merge pull request #35 from Mandla-tech/stylesDev

Styles dev-dark theme

.gitignore

@@ -1 +1,2 @@
-.idea
+.idea
+

expense-splitter/src/components/Friends/FriendName.jsx

@@ -2,7 +2,7 @@ function FriendName({friendName}) {
     return (
       <section className="flex items-center space-x-10 ">
         <img className="w-69 h-69 ml-10 rounded-full object-cover "  src="https://img.freepik.com/free-photo/portrait-young-businesswoman-holding-eyeglasses-hand-against-gray-backdrop_23-2148029483.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1726790400&semt=ais_hybrid" alt="friend" />
-        <h1 className="text-header font-bold text-secondary">{friendName}</h1>
+        <h1 className="text-header font-bold text-secondary dark:text-dark-text">{friendName}</h1>
       </section>
     );
   }

expense-splitter/src/components/Friends/FriendsChart.jsx

@@ -21,7 +21,7 @@ const data = [
 
 function FriendsChart() {
   return (
-    <div className="bg-white p-4 rounded-lg shadow-md w-custom-friend-width h-custom-friend-height">
+    <div className="bg-white dark:bg-dark-secondary p-4 ml-8 rounded-lg shadow-md w-custom-friend-width h-custom-friend-height">
       <ResponsiveContainer width="100%" height={335}>
         <LineChart
           data={data}

expense-splitter/src/components/Friends/FriendsEachMutualGroup.jsx

@@ -1,17 +1,17 @@
 function FriendsEachMutualGroup() {
     return (
-          <article className="p-3 flex items-center justify-between border-b border-separator ml-2 mr-2">
+          <article className="p-3  flex items-center justify-between border-b border-separator ml-2 mr-2">
             <div className="flex items-center space-x-4">
               <img
                 className="w-14 h-14 rounded-full object-cover"
                 src="https://media.istockphoto.com/id/1341288649/photo/75mpix-panorama-of-beautiful-mount-ama-dablam-in-himalayas-nepal.jpg?s=612x612&w=0&k=20&c=0xb_bb-NBIxjiJL_kqY-o3dCjv2PmKFZfRjHcVEijDc="
                 alt=""
               />
               <span>
-                <p className="text-sm font-bold text-secondary">Group 1</p>
-                <p className="text-xs font-medium">You owe</p>
+                <p className="text-sm font-bold text-secondary dark:text-primary">Group 1</p>
+                <p className="text-xs font-medium dark:text-dark-text">You owe</p>
               </span>
-              <p className="text-2xl font-bold text-secondary pl-6">20$</p>
+              <p className="text-2xl font-bold text-secondary pl-6 dark:text-primary">20$</p>
             </div>
             <button className="w-46 h-10 px-5 rounded-lg text-body font-bold bg-blizzard-blue text-primary duration-300">
               Send a reminder

expense-splitter/src/components/Friends/FriendsMutualGroups.jsx

@@ -2,9 +2,9 @@ import FriendsEachMutualGroup from "./FriendsEachMutualGroup";
 
 function FriendsMutualGroups() {
   return (
-    <article className="p-8 pt-4 ml-8  w-custom-friend-width h-custom-friend-height bg-white rounded-2xl">
+    <article className="p-8 pt-4 ml-8  w-custom-friend-width h-custom-friend-height bg-white dark:bg-dark-secondary rounded-2xl">
       <div className="py-3 px-4 flex justify-between">
-        <p className="text-lg font-bold text-secondary">4 Mutual groups</p>
+        <p className="text-lg font-bold text-secondary dark:text-primary">4 Mutual groups</p>
         <button className="w-20 h-8 rounded-lg text-body font-medium
         bg-blizzard-blue text-primary  duration-300">View all</button>
       </div>

expense-splitter/src/components/Friends/FriendsTable.jsx

@@ -20,7 +20,7 @@ function FriendsTable() {
   return (
     <section className="overflow-x-auto rounded-lg">
       <table className="table-auto text-left">
-        <thead className="uppercase bg-highlight text-body font-medium text-legend">
+        <thead className="uppercase bg-highlight dark:bg-dark-input text-body font-medium text-legend dark:text-black">
           <tr>
             <th scope="col" className="px-6 py-3">
               Type

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

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 // chart
 const COLORS = ["#0B7A75", "#843B62", "#F67E7D", "#00A1E4", "#F5B700", "#00A1E4", "#A8C686", "#7067CF", "#E27396", "#DC0073","#89FC00"];
 
-// props of numbers inside chart position and radius related 
+// props of numbers inside chart position and radius related
 const renderCustomizedLabel = ({
   cx,
   cy,
@@ -49,9 +49,9 @@ function GroupChart({ groupId }) {
   }));
 
   return (
-    <section className="flex flex-col items-center justify-center w-custom-wide-chart h-custom-height-chart bg-white p-6 ml-8 rounded-lg shadow">
+    <section className="flex flex-col items-center justify-center w-custom-wide-chart h-custom-height-chart bg-white dark:bg-dark-secondary dark:border p-6 ml-8 rounded-lg shadow">
       <div className="w-full flex justify-between">
-        <p className="text-lg font-bold text-secondary ml-8">Budget Split</p>
+        <p className="text-lg font-bold text-secondary ml-8 dark:text-primary">Budget Split</p>
         <button className="text-body font-medium text-primary bg-blizzard-blue w-30 h-8 mr-8 py-1 px-4 rounded-lg">
           Members ▼
         </button>

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

@@ -2,9 +2,9 @@ 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 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 border bg-white dark:bg-dark-secondary shadow-md">
       <div className="flex justify-between items-center mb-6">
-        <p className="text-lg font-bold text-secondary">Expense vs budget</p>
+        <p className="text-lg font-bold text-secondary dark:text-primary">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>
@@ -28,7 +28,7 @@ const ExpenseBar = ({ expense, budget }) => {
             ></p>
           </div>
           {/* numbers */}
-          <div className="flex justify-between text-sm font-bold text-secondary relative">
+          <div className="flex justify-between text-sm font-bold text-secondary relative dark:text-dark-text">
             <p
               style={{
                 left:

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

@@ -114,7 +114,7 @@ function GroupExpenseTable() {
   return (
     <section className="overflow-x-auto ml-8 rounded-lg">
       <table className="table-auto text-left">
-        <thead className="uppercase bg-highlight text-body font-medium text-legend">
+        <thead className="uppercase bg-highlight dark:bg-dark-input text-body font-medium text-legend dark:text-black ">
           <tr>
             <th scope="col" className="px-6 py-3">
               Expense

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

@@ -73,9 +73,9 @@ function GroupMembers() {
   };
 
   return (
-    <section className="bg-white p-6 ml-8 rounded-lg shadow w-custom-width">
+    <section className="bg-white dark:bg-dark-secondary dark:border p-6 ml-8 rounded-lg shadow w-custom-width">
       <div className="flex justify-between items-center mb-4 ml-4">
-        <p className="text-lg font-bold text-secondary">Members</p>
+        <p className="text-lg font-bold text-secondary dark:text-primary">Members</p>
         <button
           className="w-20 h-8 rounded-lg text-body font-medium
         bg-blizzard-blue text-primary  duration-300"
@@ -110,7 +110,7 @@ function GroupMembers() {
           className="flex-col flex items-center "
         >
           <MdGroups className="rounded-full w-14 h-14 bg-blizzard-blue p-3 text-primary" />
-          <p className="text-legend font-bold text-secondary">Add</p>
+          <p className="text-legend font-bold text-secondary dark:text-primary">Add</p>
         </button>
       </div>
 
@@ -120,9 +120,10 @@ function GroupMembers() {
           className="fixed inset-0 bg-black bg-opacity-20 flex justify-center items-center"
           onClick={handleModalClickOutside}
         >
-          <article className="bg-white p-6 rounded-lg w-96">
+
+          <article className="bg-white dark:bg-dark-secondary p-6 rounded-lg w-96">
             <div className="flex justify-between items-center">
-              <h2 className="text-2xl mb-4 font-bold">Add New Member</h2>
+              <h2 className="text-2xl mb-4 font-bold dark:text-dark-text">Add New Member</h2>
               <button
                 className="bg-white shadow rounded-full w-8 h-8 text-red-500 mb-4"
                 onClick={() => setIsModalOpen(false)}
@@ -133,27 +134,33 @@ function GroupMembers() {
 
             <form onSubmit={handleSubmit} className="space-y-3">
               <div>
-                <label className="text-body font-semibold">Member Name</label>
+
+                <label className="text-body font-semibold dark:text-dark-text">Member Name</label>
+
                 <input
                   type="text"
                   name="name"
                   value={newMember.name}
                   onChange={handleAddMemberInputChange}
-                  className="border p-2 w-full"
+                  className="border p-2 w-full dark:bg-dark-input"
                   placeholder="Enter member name"
                   required
                   style={{ fontSize: "14px" }}
                 />
               </div>
 
               <div>
-                <label className="text-body font-semibold">Member Number</label>
+
+                <label className="text-body font-semibold dark:text-dark-text">Member Number</label>
+
                 <input
                   type="text"
                   name="number"
                   value={newMember.number}
                   onChange={handleAddMemberInputChange}
-                  className="border p-2 w-full"
+
+                  className="border p-2 w-full dark:bg-dark-input"
+
                   placeholder="Enter member number"
                   required
                   style={{ fontSize: "14px" }}
@@ -162,7 +169,9 @@ function GroupMembers() {
 
               <button
                 type="submit"
-                className="px-4 py-2 bg-primary text-white rounded-xl"
+
+                className="px-4 py-2 bg-primary text-white rounded-xl dark:bg-dark-primary"
+
               >
                 Add Member
               </button>

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

@@ -2,7 +2,7 @@ function GroupName({groupName}) {
   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">{groupName}</h1>
+      <h1 className="text-header font-bold text-secondary dark:text-dark-text">{groupName}</h1>
     </section>
   );
 }

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

@@ -2,16 +2,16 @@
 
 function GroupSmallExpenseCard({ icon: Icon, label, value, button }) {
   return (
-<section className="bg-white p-8 mt-8 ml-8 space-x-6  rounded-global shadow 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 rounded-full w-14 h-14 p-3 text-primary"/>
+    <Icon className="bg-blizzard-blue dark:bg-dark-primary rounded-full w-14 h-14 p-3 text-primary"/>
     <span>
-      <p className="text-body font-medium text-title">{label}</p>
-      <p className="font-bold text-2xl text-secondary">{value}</p>
+      <p className="text-body font-medium text-title dark:text-dark-text">{label}</p>
+      <p className="text-2xl font-bold text-secondary dark:text-primary">{value}</p>
     </span>
   </div>
   {button && (
-    <button className="w-[67px] h-8 py-1 px-3 bg-blizzard-blue text-primary font-medium rounded-lg text-body ml-auto">
+    <button className="w-[67px] h-8 py-1 px-3 bg-blizzard-blue  text-primary font-medium rounded-lg text-body ml-auto">
       {button}
     </button>
   )}

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

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

expense-splitter/src/components/Home/HomeIndividualGroup.jsx

@@ -7,7 +7,7 @@ function HomeIndividualGroup({ group }) {
 
   const handleRemove = () => {
 
-  
+
     dispatch(removeGroup(group.id));
   };
 
@@ -18,13 +18,15 @@ function HomeIndividualGroup({ group }) {
   };
 
   return (
-    <section className="p-4 border bg-white rounded-xl ml-8 w-custom-card h-custom-card-height flex flex-col items-center">
+
+    <section className="p-4 border bg-white dark:bg-dark-secondary rounded-xl ml-8 w-custom-card h-custom-card-height flex flex-col items-center">
+
       <img className="w-14 h-14 mb-2 rounded-full object-cover flex justify-center"
         src="https://freedomdestinations.co.uk/wp-content/uploads/Diamond-Head-Crater-Honolulu.jpg" alt="group-logo" />
 
-      <p className="text-body font-medium text-title">{group.members.length} members</p>
+      <p className="text-body font-medium text-title dark:text-dark-text">{group.members.length} members</p>
 
-      <h2 className="font-bold text-secondary">{group.name}</h2>
+      <h2 className="font-bold text-secondary dark:text-primary">{group.name}</h2>
 
       <div className="flex justify-between w-full mt-auto">
         <Link

expense-splitter/src/components/Layout.jsx

@@ -6,7 +6,7 @@ import Sidebar from "./Sidebar";
 
 function Layout() {
   return (
-    <div className="flex bg-blizzard-blue">
+    <div className="flex bg-blizzard-blue dark:bg-dark-bg">
       <Sidebar />
       {/* <Members /> */}
       <div className="w-full ml-16 md:ml-56">

expense-splitter/src/pages/Groups.jsx

@@ -16,7 +16,7 @@ const {groupId} = useParams()
 const group = useSelector((state) => state.groups.groups.find((group) => group.id === parseInt(groupId)))
 
 if (!group) {
-  return <div>Group not found</div>;
+  return <div className="text-header font-bold text-secondary dark:text-dark-text">Group not found</div>;
 }
 
 const totalBudget = group.totalBudget;  // fake values update with actual logic later

expense-splitter/src/pages/Home.jsx

@@ -64,17 +64,19 @@ function Home() {
   return (
     <section className="text-xl text-secondary p-5 space-y-5">
       <div>
-      <h1 className="text-header font-bold text-secondary ml-8 mt-8">Welcome to SplitSmart!</h1>
-      <p className="text-sm font-normal text-secondary ml-8 mb-8 pt-6">Tracks expenses, calculates costs, and settles debts with friends &#128522;</p>
+      <h1 className="text-header font-bold text-secondary dark:text-dark-text ml-8 mt-8">Welcome to SplitSmart!</h1>
+      <p className="text-sm font-normal text-secondary dark:text-dark-text ml-8 mb-8 pt-6">Tracks expenses, calculates costs, and settles debts with friends &#128522;</p>
       </div>
-      <div className="bg-white rounded-2xl w-custom-card h-custom-card-height ml-8 shadow flex items-center justify-center flex-col">
+
+      <div className=" border bg-white dark:bg-dark-secondary rounded-2xl w-custom-card h-custom-card-height ml-8 shadow flex items-center justify-center flex-col">
+
         <button
           onClick={() => setIsModalOpen(true)}
-          className="hover:animate-ping rounded-full bg-primary w-16 h-16 text-5xl text-white hover:bg-primary"
+          className="hover:animate-ping rounded-full bg-primary dark:bg-dark-bg dark:border w-16 h-16 text-5xl text-white dark:text-dark-text hover:bg-primary"
         >
           +
         </button>
-        <p className="text-2xl mt-4 font-bold">Add</p>
+        <p className="text-2xl mt-4 font-bold dark:text-dark-text">Add</p>
       </div>
 
       {groups.map((group) => (
@@ -84,12 +86,12 @@ function Home() {
       {isModalOpen && (
         <section
           id="modal-overlay"
-          className="fixed inset-0 bg-black bg-opacity-20 flex justify-center items-center"
+          className="fixed inset-0 bg-black dark:bg-gray-500 dark:bg-opacity-20 bg-opacity-20 flex justify-center items-center"
           onClick={handleModalClickOutside}
         >
-          <article className="bg-white p-6 rounded-lg w-96">
+          <article className="bg-white dark:bg-dark-secondary p-6 rounded-lg w-96">
             <div className="flex justify-between items-center">
-              <h2 className="text-2xl mb-4 font-bold">Add New Group</h2>
+              <h2 className="text-2xl mb-4 font-bold dark:text-dark-text">Add New Group</h2>
               {/* add actual icon for close btn */}
               <button
                 className="bg-white shadow rounded-full w-8 h-8 text-red-500 mb-4"
@@ -101,47 +103,47 @@ function Home() {
 
             <form onSubmit={handleSubmit} className="space-y-3">
               <div>
-                <label className="text-body font-semibold">Group Name</label>
+                <label className="text-body font-semibold dark:text-dark-text">Group Name</label>
                 <input
                   type="text"
                   name="name"
                   value={newGroup.name}
                   onChange={handleInputChange}
-                  className="border p-2 w-full"
+                  className="border p-2 w-full dark:bg-dark-input"
                   placeholder="Enter group name"
                   required style={{ fontSize: '14px' }}
                 />
               </div>
 
               <div>
-                <label className="text-body font-semibold">Total Budget</label>
+                <label className="text-body font-semibold dark:text-dark-text">Total Budget</label>
                 <input
                   type="number"
                   name="totalBudget"
                   value={newGroup.totalBudget}
                   onChange={handleInputChange}
-                  className="border p-2 w-full"
+                  className="border p-2 w-full dark:bg-dark-input"
                   placeholder="Enter total budget"
                   required style={{ fontSize: '14px' }}
                 />
               </div>
 
               <div>
-                <label className="text-body font-semibold">Total Expense</label>
+                <label className="text-body font-semibold dark:text-dark-text">Total Expense</label>
                 <input
                   type="number"
                   name="totalExpense"
                   value={newGroup.totalExpense}
                   onChange={handleInputChange}
-                  className="border p-2 w-full"
+                  className="border p-2 w-full dark:bg-dark-input"
                   placeholder="Enter total expense"
                   required style={{ fontSize: '14px' }}
                 />
               </div>
 
               <button
                 type="submit"
-                className="px-4 py-2 bg-primary text-white rounded-xl"
+                className="px-4 py-2 bg-primary text-white rounded-xl dark:bg-dark-primary"
               >
                 Add Group
               </button>

expense-splitter/tailwind.config.js

@@ -42,6 +42,7 @@ export default {
         'dark-secondary': '#2d3748', // Darker secondary color
         'dark-bg': '#121212', // Background color for dark mode
         'dark-text': '#E2E8F0', // Lighter text for dark mode
+        'dark-input':'#D3D3D3'//gray background for input area
       },
       // Centralizing Common Spacing (Padding/Margin). Define custom spacing values for margins, padding, or gaps. This helps keep the UI consistent and makes it easy to change spacing globally.
       spacing: {