From d260054087b3c8fa2458ef613ce134bb6d93c4c6 Mon Sep 17 00:00:00 2001
From: timmi <timmid999@gmail.com>
Date: Tue, 1 Apr 2025 23:15:53 -0700
Subject: [PATCH] Changed UI, added link to Tasks when hovering.

---
 frontend/react-app/src/css/home.css   | 74 +++++++++++++++++++++++----
 frontend/react-app/src/pages/Home.jsx | 17 +++---
 2 files changed, 73 insertions(+), 18 deletions(-)

diff --git a/frontend/react-app/src/css/home.css b/frontend/react-app/src/css/home.css
index ed98210..9068e8a 100644
--- a/frontend/react-app/src/css/home.css
+++ b/frontend/react-app/src/css/home.css
@@ -52,16 +52,63 @@ td {
     text-align: left;
     padding: 10px;
 }
+
+.rowFlexbox {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 40px;
+    width: 100%;
+    max-width: 1600px;
+    margin: 0 auto;
+}
+
+.column-box {
+    background-color: #e6e4f7;
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+    min-width: 0;
+}
+
+#teamSection {
+    flex: 0 0 30%;
+}
+
+#taskSection {
+    flex: 1 1 40%;
+}
+
+.section-divider {
+    border: none;
+    border-top: 2px solid #3f5d8b;
+    margin-top: 8px;
+    margin-bottom: 16px;
+    width: 100%;
+}
+
+.teamButtonContainer {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
+}
+
 .teamButton {
-    width: 70%;
-    height: 100%;
-    min-width:fit-content;
-    padding: 15px 40px;
+    width: 85%;
+    height: 10px;
+    padding: 15px 40px 15px 20px;
+    line-height: 1;
     border: none;
     border-radius: 15px;
-    background-color:#3B3355;
+    background-color:#53789d;
     color: white;
-    font-size: 1.5em;
+    font-size: 1em;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
 }
 
 .teamButton:hover {
@@ -79,6 +126,7 @@ td {
 tbody {
     width: 100%;
 }
+
 .miniButton {
     padding: 3px 6px;
     background-color:#3B3355;
@@ -95,10 +143,6 @@ tbody {
     text-decoration: underline;
 }
 
-#taskSection h2 {
-    text-decoration: underline;
-}
-
 .pageContainer {
     /* background-color: #f6edff; */
     background-color: white;
@@ -124,4 +168,14 @@ tbody {
     font-size: 1em;
     padding-left: 1%;
     border-radius: 10px;
+}
+
+.sectionLink {
+    color: inherit;
+    text-decoration: none;
+}
+
+.sectionLink:hover {
+    text-decoration: underline;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/frontend/react-app/src/pages/Home.jsx b/frontend/react-app/src/pages/Home.jsx
index bf71984..d427cf7 100644
--- a/frontend/react-app/src/pages/Home.jsx
+++ b/frontend/react-app/src/pages/Home.jsx
@@ -17,10 +17,8 @@ function setUpDataTasksToDo(obj){
             id: taskItem.id,
             name: taskItem.name,
             team: taskItem.team,
-            dueDate: taskItem.dueDate
-            
+            dueDate: taskItem.dueDate  
         }]
-    
    }
  }
 )
@@ -131,22 +129,25 @@ const Home = () => {
 
         <main className='pageBody'>
             <div className='rowFlexbox'>
-                <div id="teamSection">
-                    <h2>My Teams</h2>
+                <div id="teamSection" className="column-box">
+                    <h2>Teams</h2>
+                    <hr className="section-divider" />
                 
                     <div id="teamButtons" className='teamButtonContainer'>
                         {teams.map((team)=>(
                             <Link className="teamButton headerText1" to='/team-tasks' state={{ team: team}} key={team.teamId} >
                             {team.teamName}
                             </Link>
-                            
                         ))}
                     </div>
                 </div>
 
 
-                <div id="taskSection">
-                    <h2>My Tasks (Preview)</h2>
+                <div id="taskSection" className="column-box">
+                        <h2>
+                            <Link to="/my-tasks" className="sectionLink" title="My Tasks">Tasks</Link>  
+                        </h2>
+                        <hr className="section-divider" />
                         {setUpData(tasksToDo).length > 0 ? (
                         <TaskList
                         dataToUse={setUpData(tasksToDo)}