Added some CSS to make people page look nicer

bitly · Jan 17, 2025 · 15a7588 · 15a7588
1 parent 1578d18
commit 15a7588
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 26 deletions.
diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css
@@ -1,6 +1,6 @@
 body {
   font-family: Arial, sans-serif;
-  background-color: #fdfaf6; /* Matches the off-white background */
+  background-color: #ffffff; /* Matches the off-white background */
 }
 
 .header {
@@ -21,7 +21,7 @@ body {
   border: none; /* Remove border */
   padding: 0.75rem 1rem; /* Adjust padding as needed */
   border: none;
-  border-radius: 5rem; /* Optional: Rounds the button edges */
+  border-radius: 20px; /* Optional: Rounds the button edges */
   font-size: 1.2rem;
   outline: none;
   margin: 2rem;
@@ -57,15 +57,21 @@ table th, table td {
   border-radius: 50%;
 }
 
+.peopleSection-container {
+  background-color: #ffffff; /* Ensure the background spans the full width */
+  background-attachment: fixed; /* Keeps the background fixed during scroll */
+  width: 100%; /* Ensures the background spans the full width of the viewport */
+  padding: 20px 0; /* Optional: Add vertical spacing inside the section */
+}
+
 .peopleSection {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* Ensures 3 columns */
   grid-auto-rows: minmax(100px, auto);
   gap: 60px; /* Spacing between cards */
   max-width: 1200px;
-  margin: 20px auto; /* Centers the grid */
-  background-color: #d9d9d9;
-  background-attachment: fixed;
+  margin: 0 auto; /* Centers the grid inside the full-width section */
+  padding: 0 20px; /* Optional: Horizontal padding for content */
 }
 
 .accountContainer {
@@ -74,8 +80,8 @@ table th, table td {
   align-items: center; /* Centers content horizontally */
   justify-content: center; /* Centers content vertically */
   padding: 20px;
-  background-color: #0036cc;
-  border-radius: 20px;
+  background-color: #F2ECE8;
+  border-radius: 80px;
   text-align: center;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional shadow for card */
 }
@@ -108,7 +114,7 @@ table th, table td {
   justify-content: center;
   align-items: center;
   width: 100%; /* Full width */
-  background: #fff; /* Optional: Background color */
+  background: #ffffff; /* Optional: Background color */
   margin: 0; /* Remove default body margin if needed */
 }
 

diff --git a/views/js/evently/src/HostList.jsx b/views/js/evently/src/HostList.jsx
@@ -70,8 +70,6 @@ function HostList() {
       </table>
 */}
 
-
-
       <div class="nav-bar-container">
       <Link to="/create-host" className="host-button">Join now</Link>
         <div class="account-search-bar">
@@ -80,10 +78,8 @@ function HostList() {
         </div>
       </div>
 
-
-        <div class="peopleSection">
-
-
+    <div class="peopleSection-container">
+      <div class="peopleSection">
         <div class="accountContainer">
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
@@ -97,67 +93,80 @@ function HostList() {
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
           </div>
-            <p>John Doe</p>
+            <p>Attendee</p>
+            <h2>John Doe</h2>
+            <h2>[email protected]</h2>
         </div>
 
         <div class="accountContainer">
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
           </div>
-            <p>John Doe</p>
+            <p>Attendee</p>
+            <h2>John Doe</h2>
+            <h2>[email protected]</h2>
         </div>
 
         <div class="accountContainer">
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
           </div>
-            <p>John Doe</p>
+            <p>Attendee</p>
+            <h2>John Doe</h2>
+            <h2>[email protected]</h2>
         </div>
 
         <div class="accountContainer">
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
           </div>
-            <p>John Doe</p>
+            <p>Attendee</p>
+            <h2>John Doe</h2>
+            <h2>[email protected]</h2>
         </div>
 
         <div class="accountContainer">
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
           </div>
-            <p>John Doe</p>
-
+            <p>Attendee</p>
+            <h2>John Doe</h2>
+            <h2>[email protected]</h2>
         </div>
 
         <div class="accountContainer">
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
           </div>
-            <p>John Doe</p>
+            <p>Attendee</p>
+            <h2>John Doe</h2>
+            <h2>[email protected]</h2>
         </div>
 
         <div class="accountContainer">
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
           </div>
-            <p>John Doe</p>
+            <p>Attendee</p>
+            <h2>John Doe</h2>
+            <h2>[email protected]</h2>
         </div>
 
         <div class="accountContainer">
           <div class="accountInfo">
             <img src={profileImage1} alt="Profile picture" className="profile-image" />
           </div>
-            <p>John Doe</p>
+            <p>Attendee</p>
+            <h2>John Doe</h2>
+            <h2>[email protected]</h2>
         </div>
-
-
-
       </div>
 
 
 
 
     </div>
+  </div>
   );
 
 }