From 148970ff27b3575e339a8eaa7df82a2ece4dcc4a Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Mon, 13 Jan 2025 17:12:25 -0500 Subject: [PATCH 01/10] Trying my best to implement changes to the front end of the Host page --- views/js/evently/src/AboutUs.jsx | 7 +++--- views/js/evently/src/HostList.css | 42 ++++++++++++++++++++++++++----- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/views/js/evently/src/AboutUs.jsx b/views/js/evently/src/AboutUs.jsx index 1f53fee..8df274c 100644 --- a/views/js/evently/src/AboutUs.jsx +++ b/views/js/evently/src/AboutUs.jsx @@ -41,9 +41,10 @@ function AboutUs() {

Hi, I'm Sara! I'm a sophomore at CUNY Lehman College and Macaulay Honors College studying Computer Graphics and Imaging with a minor in Media Communications Studies. I hope to combine my creative and technical skills to pursue a career in product design. In my free time, I like to binge-watch shows, bake, visit new places, and spend time with family and friends.

Connect with me on LinkedIn! - - - + + + +
diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css index 1d2ef92..d38f85a 100644 --- a/views/js/evently/src/HostList.css +++ b/views/js/evently/src/HostList.css @@ -1,16 +1,45 @@ .header{ - text-align: center; - font-family: "Bree Serif"; -} + + color:#252628; + font-family: "Bitly Display ExtraBold", "Helvetica Neue", Helvetica, Arial, sans-serif; + display: block; + font-size: 40px; + line-height: 48px; + font-weight:800; + font-style: normal; + text-rendering: optimizeLegibility; + margin-top: 0; + margin: 0; + padding: 0; + box-sizing: inherit; + margin-block-start: 0.67em; + margin-block-end: 0.67em; + margin-inline-start: 0px; + margin-inline-end: 0px; + unicode-bidi: isolate; +} .host-button{ - background-color: #2A5DB7; - margin-bottom: 3rem; + + background: #2a5bd7; + margin: 0 0 1rem 0; color: white; font-size: 1.5rem; + font-weight: 400; + font-family: inherit; text-decoration: none; padding: 1.2rem 2rem; - border-radius: 0.8rem; + text-align: center; + cursor: pointer; + outline: none !important; + display: inline-block; + vertical-align: middle; + box-sizing: inherit; + border: 1px solid transparent; + border-radius: 6px; + text-rendering: optimizeLegibility; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing:antialiased; } .column-names{ @@ -22,6 +51,7 @@ table{ border-collapse: collapse; width: 100%; table-layout: fixed; + font-weight: 400; } td, th { border: 1px solid #dddddd; From 6a25d7ac045ecaf3020b5cd4a326720139ba03fd Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Wed, 15 Jan 2025 13:12:29 -0500 Subject: [PATCH 02/10] Worked on frontend for people page + form page to play around with design implmenetation --- views/js/evently/src/CreateHost.css | 106 ++++++++++++---------- views/js/evently/src/CreateHost.jsx | 133 ++++++++++++++++------------ views/js/evently/src/HostList.css | 81 ++++++++++++++++- views/js/evently/src/HostList.jsx | 22 ++--- views/js/evently/src/header.js | 10 +-- 5 files changed, 235 insertions(+), 117 deletions(-) diff --git a/views/js/evently/src/CreateHost.css b/views/js/evently/src/CreateHost.css index b6a3b24..46c92e0 100644 --- a/views/js/evently/src/CreateHost.css +++ b/views/js/evently/src/CreateHost.css @@ -1,48 +1,64 @@ -.row { - display: flex; - justify-content: center; - flex-direction: row; - -} - -.column { - float: left; - width: 50%; - padding-right: 17rem; - padding-top: 2rem; - padding-left: 14rem; -} - -.input-form { - display: flex; - flex-direction: column; -} - .create-host-container { - display: flex; - flex-direction: column; -} - -.profile-image { - width: 10rem; - height: auto; - display: flex; - flex-direction: column; - margin: auto; - border-radius: 100%; -} - -.account-layout { - display: flex; - flex-direction: column; - text-align: left; - align-self: baseline; -} - -.button { - color: white; - background-color: #2A5DB7; + padding: 20px; + max-width: 800px; + margin: 0 auto; + background-color: #f9f9f9; border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + .row { + display: flex; + justify-content: space-between; + gap: 20px; + } + + .column { + flex: 1; + } + + .account-layout, .input-form { + padding: 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .profile-image { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 10px; + } + + label { + display: block; + font-weight: bold; + margin-bottom: 5px; + } + + input, select { + width: 100%; + padding: 8px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 5px; + } + + .button { + display: block; + width: 100%; padding: 10px; - margin-top: 1rem; -} + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + } + + .button:hover { + background-color: #45a049; + } + \ No newline at end of file diff --git a/views/js/evently/src/CreateHost.jsx b/views/js/evently/src/CreateHost.jsx index 6c64963..3d72e48 100644 --- a/views/js/evently/src/CreateHost.jsx +++ b/views/js/evently/src/CreateHost.jsx @@ -30,66 +30,89 @@ function CreateHost() { } } - return ( - -
- -
- -
-
-
- Profile picture -
- - setProfileImage(e.target.value)}/> -
- -
- - setLink(e.target.value)}/> -
- -
-
+ return ( + +
+ +

Create Your Profile

+ + {/* Profile Image Section */} +
+ Profile picture + + setProfileImage(e.target.value)} + /> +
-
-
-

Are you an individual or an organization?

- -
- - setName(e.target.value)}/> - - setPhone(e.target.value)}/> + {/* Name Input */} +
+ + setName(e.target.value)} + /> +
+ + {/* Phone Number Input */} +
+ + setPhone(e.target.value)} + /> +
+ + {/* Email Input */} +
+ + setEmail(e.target.value)} + /> +
-

Do you want to make your phone number public?

- -
- - setEmail(e.target.value)}/> + {/* Role Selection */} +
+ + +
-

Do you want to make your email public?

- - -
-
- -
+ {/* Links Section */} +
+ + setLink(e.target.value)} + /> +
-
+ {/* Submit Button */} + + +
+ ); + - ) } export default CreateHost; \ No newline at end of file diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css index d38f85a..f7ee6c3 100644 --- a/views/js/evently/src/HostList.css +++ b/views/js/evently/src/HostList.css @@ -69,4 +69,83 @@ td, th { max-width: 100%; max-height: 100%; object-fit: cover; -} \ No newline at end of file +} + +/* General Reset */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f9f5f2; + color: #333; + } + + + .cta-button { + background-color: #007bff; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + } + + .cta-button:hover { + background-color: #0056b3; + } + + .illustration img { + margin-top: 20px; + max-width: 100%; + height: auto; + } + + /* Search & Grid */ + .search-grid { + padding: 20px; + text-align: center; + } + + .search-bar input { + width: 80%; + max-width: 600px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + } + + .grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + margin-top: 30px; + padding: 0 20px; + } + + .card { + background-color: white; + border: 1px solid #ddd; + border-radius: 10px; + padding: 15px; + text-align: center; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + .card img { + border-radius: 50%; + width: 80px; + height: 80px; + margin-bottom: 10px; + } + + .card .name { + font-weight: bold; + margin: 5px 0; + } + + .card .email { + color: #666; + font-size: 0.9rem; + } + \ No newline at end of file diff --git a/views/js/evently/src/HostList.jsx b/views/js/evently/src/HostList.jsx index a651a70..ed52fb5 100644 --- a/views/js/evently/src/HostList.jsx +++ b/views/js/evently/src/HostList.jsx @@ -28,12 +28,13 @@ function HostList() { return (
-
-

All Hosts

- Create Host -
+
+

Discover New People

+ Join now +
+ - + @@ -44,16 +45,16 @@ function HostList() { {hosts.map(host => ( -
- @@ -63,6 +64,7 @@ function HostList() {
Profile First Name
- + {`Image + /> + {host.first_name} {host.last_name} {host.email}
); + } export default HostList; \ No newline at end of file diff --git a/views/js/evently/src/header.js b/views/js/evently/src/header.js index a7968c4..61966c2 100644 --- a/views/js/evently/src/header.js +++ b/views/js/evently/src/header.js @@ -34,13 +34,11 @@ function Header() { People +
  • + Community +
  • - isActive ? 'nav-links active-link' : 'nav-links'} - > - Events - + Events
  • Date: Wed, 15 Jan 2025 14:06:07 -0500 Subject: [PATCH 03/10] Got rid of the duplicates in the header --- views/js/evently/src/header.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/views/js/evently/src/header.js b/views/js/evently/src/header.js index 61966c2..3f1cc70 100644 --- a/views/js/evently/src/header.js +++ b/views/js/evently/src/header.js @@ -26,6 +26,7 @@ function Header() { Create
    • +<<<<<<< HEAD
  • Community
    • +======= +>>>>>>> 9fa083d (Got rid of the duplicates in the header)
  • Events
    • From da381a7fc994892412391b16cc6be0cd45f17f15 Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Wed, 15 Jan 2025 17:06:19 -0500 Subject: [PATCH 04/10] Trying to figure out how to revamp this page with ChatGPT, needs a lot of work --- views/js/evently/src/HostList.jsx | 40 ++++++++++++++++++------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/views/js/evently/src/HostList.jsx b/views/js/evently/src/HostList.jsx index ed52fb5..f828c01 100644 --- a/views/js/evently/src/HostList.jsx +++ b/views/js/evently/src/HostList.jsx @@ -27,41 +27,49 @@ function HostList() { return ( -
    +
    -

    Discover New People

    - Join now -
    +

    All Hosts

    + + Create Host + +
    - + - + - {hosts.map(host => ( - - + + + + + + )) + ) : ( + + - - - - ))} + )} -
    Profile First Name Last NameEmailEmail
    -
    + {hosts.length > 0 ? ( + hosts.map((host) => ( +
    {`Image - + {host.first_name}{host.last_name}{host.email}
    + No hosts available {host.first_name}{host.last_name}{host.email}
    +
    ); From 47640ce6d3a1cdd0b792011550a9e1599caa1ac2 Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Thu, 16 Jan 2025 09:50:02 -0500 Subject: [PATCH 05/10] Trying to get the latest version of the code --- views/js/evently/src/HostList.css | 186 ++++++++---------------------- 1 file changed, 45 insertions(+), 141 deletions(-) diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css index f7ee6c3..22985fd 100644 --- a/views/js/evently/src/HostList.css +++ b/views/js/evently/src/HostList.css @@ -1,151 +1,55 @@ -.header{ - - color:#252628; - font-family: "Bitly Display ExtraBold", "Helvetica Neue", Helvetica, Arial, sans-serif; - display: block; - font-size: 40px; - line-height: 48px; - font-weight:800; - font-style: normal; - text-rendering: optimizeLegibility; - margin-top: 0; - margin: 0; - padding: 0; - box-sizing: inherit; - margin-block-start: 0.67em; - margin-block-end: 0.67em; - margin-inline-start: 0px; - margin-inline-end: 0px; - unicode-bidi: isolate; +body { + font-family: Arial, sans-serif; + background-color: #fdfaf6; /* Matches the off-white background */ +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + border-bottom: 2px solid #f5f5f5; +} + +.header h1 { + font-size: 2.5rem; + color: #000; +} +.host-button { + background-color: #0047ff; + color: #fff; + padding: 10px 20px; + font-size: 1rem; + border: none; + border-radius: 5px; + text-decoration: none; } -.host-button{ - background: #2a5bd7; - margin: 0 0 1rem 0; - color: white; - font-size: 1.5rem; - font-weight: 400; - font-family: inherit; - text-decoration: none; - padding: 1.2rem 2rem; - text-align: center; - cursor: pointer; - outline: none !important; - display: inline-block; - vertical-align: middle; - box-sizing: inherit; - border: 1px solid transparent; - border-radius: 6px; - text-rendering: optimizeLegibility; - -webkit-text-size-adjust: 100%; - -webkit-font-smoothing:antialiased; +.host-button:hover { + background-color: #0036cc; } -.column-names{ - border: 1px solid #dddddd; - text-align: left; - padding: 8px; +table { + width: 100%; + margin: 20px 0; + border-collapse: collapse; } -table{ - border-collapse: collapse; - width: 100%; - table-layout: fixed; - font-weight: 400; + +table thead { + background-color: #0047ff; + color: #fff; } -td, th { - border: 1px solid #dddddd; - text-align: center; - padding: 15px; - font-family: "Bree Serif"; - } -.profile-img{ - width: auto; - height: auto; - border: 1px solid #dddddd; - padding: 15px; + +table th, table td { + text-align: left; + padding: 15px; + border: 1px solid #ccc; } -.profile-img img{ - max-width: 100%; - max-height: 100%; - object-fit: cover; + +.profile-img img { + width: 50px; + height: 50px; + border-radius: 50%; } -/* General Reset */ -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - background-color: #f9f5f2; - color: #333; - } - - - .cta-button { - background-color: #007bff; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 1rem; - } - - .cta-button:hover { - background-color: #0056b3; - } - - .illustration img { - margin-top: 20px; - max-width: 100%; - height: auto; - } - - /* Search & Grid */ - .search-grid { - padding: 20px; - text-align: center; - } - - .search-bar input { - width: 80%; - max-width: 600px; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - } - - .grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 20px; - margin-top: 30px; - padding: 0 20px; - } - - .card { - background-color: white; - border: 1px solid #ddd; - border-radius: 10px; - padding: 15px; - text-align: center; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - } - - .card img { - border-radius: 50%; - width: 80px; - height: 80px; - margin-bottom: 10px; - } - - .card .name { - font-weight: bold; - margin: 5px 0; - } - - .card .email { - color: #666; - font-size: 0.9rem; - } - \ No newline at end of file From a5e07e00b6132c1e44479d6b1a63276b48827f92 Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Thu, 16 Jan 2025 11:33:02 -0500 Subject: [PATCH 06/10] Struggling to center a button ;-; --- views/js/evently/src/HostList.css | 6 ++++-- views/js/evently/src/HostList.jsx | 10 ++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css index 22985fd..155c2e3 100644 --- a/views/js/evently/src/HostList.css +++ b/views/js/evently/src/HostList.css @@ -5,7 +5,7 @@ body { .header { display: flex; - justify-content: space-between; + justify-content:center; align-items: center; padding: 20px; border-bottom: 2px solid #f5f5f5; @@ -24,6 +24,8 @@ body { border: none; border-radius: 5px; text-decoration: none; + margin: 0 auto; + display: block; } .host-button:hover { @@ -32,7 +34,7 @@ body { table { width: 100%; - margin: 20px 0; + margin: 0; border-collapse: collapse; } diff --git a/views/js/evently/src/HostList.jsx b/views/js/evently/src/HostList.jsx index f828c01..18ae512 100644 --- a/views/js/evently/src/HostList.jsx +++ b/views/js/evently/src/HostList.jsx @@ -29,12 +29,14 @@ function HostList() { return (
    -

    All Hosts

    - - Create Host - +

    Discover New People

    +
    + + Join now + + From a4070bfd841814cdbe03f2b305b65b48bb98714f Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Thu, 16 Jan 2025 16:57:03 -0500 Subject: [PATCH 07/10] Added grid layout to People page --- views/js/evently/src/HostList.css | 52 ++++++++++++++++- views/js/evently/src/HostList.jsx | 94 +++++++++++++++++++++++++++++-- 2 files changed, 139 insertions(+), 7 deletions(-) diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css index 155c2e3..6d34404 100644 --- a/views/js/evently/src/HostList.css +++ b/views/js/evently/src/HostList.css @@ -8,7 +8,6 @@ body { justify-content:center; align-items: center; padding: 20px; - border-bottom: 2px solid #f5f5f5; } .header h1 { @@ -17,6 +16,9 @@ body { } .host-button { + display: inline-block; /* Ensures it doesn't stretch */ + margin: 0 auto; /* Centers it if the parent has a fixed width */ + text-align: center; background-color: #0047ff; color: #fff; padding: 10px 20px; @@ -24,8 +26,6 @@ body { border: none; border-radius: 5px; text-decoration: none; - margin: 0 auto; - display: block; } .host-button:hover { @@ -55,3 +55,49 @@ table th, table td { border-radius: 50%; } +.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; + padding: 30px 10px 140px 20px; +} + +.accountContainer { + display: flex; + flex-direction: column; /* Ensures vertical stacking */ + align-items: center; /* Centers content horizontally */ + justify-content: center; /* Centers content vertically */ + padding: 20px; + background-color: #0036cc; + border-radius: 20px; + text-align: center; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional shadow for card */ +} + +.accountInfo { + width: 100px; + height: 100px; + overflow: hidden; + border-radius: 50%; /* Circular image */ + margin-bottom: 16px; /* Adds space between image and text */ +} + +.accountInfo img { + width: 100%; + height: 100%; + object-fit: cover; /* Ensures image fits nicely in circle */ +} + +.accountInfo p { + margin: 0; + padding: 0; + font-size: 14px; /* Adjusts text size */ + color: #ffffff; /* Text color for better contrast */ + text-align: center; /* Centers text within container */ +} + + diff --git a/views/js/evently/src/HostList.jsx b/views/js/evently/src/HostList.jsx index 18ae512..6d12447 100644 --- a/views/js/evently/src/HostList.jsx +++ b/views/js/evently/src/HostList.jsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import "./HostList.css"; import axios from 'axios'; import { useNavigate, Link } from "react-router-dom"; +import profileImage1 from "./profile_img.jpg" function HostList() { const [hosts, setHosts] = useState([]); @@ -30,14 +31,12 @@ function HostList() {

    Discover New People

    -
    - Join now - + -
    + {/*
    @@ -72,6 +71,93 @@ function HostList() { )}
    Profile
    +*/} + + +
    + + +
    + + +
    + + +
    +
    + Profile picture +
    +

    John Doe

    +
    + + + +
    +
    + Profile picture +
    +

    John Doe

    +
    + +
    +
    + Profile picture +
    +

    John Doe

    +
    + +
    +
    + Profile picture +
    +

    John Doe

    +
    + + + + +
    +
    + Profile picture +
    +

    John Doe

    +
    + +
    +
    + Profile picture +
    +

    John Doe

    +
    + +
    +
    + Profile picture +
    +

    John Doe

    +
    + +
    +
    + Profile picture +
    +

    John Doe

    +
    + +
    +
    + Profile picture +
    +

    John Doe

    +
    + + + +
    + + + +
    ); From 5fe4787a7121b162810923d41936c86f4a02f5d6 Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Fri, 17 Jan 2025 15:15:35 -0500 Subject: [PATCH 08/10] Successfully added the nav bar & button to the People's page --- views/js/evently/src/HostList.css | 67 ++++++++++++++++++++++++++----- views/js/evently/src/HostList.jsx | 23 +++++------ 2 files changed, 68 insertions(+), 22 deletions(-) diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css index 6d34404..868c247 100644 --- a/views/js/evently/src/HostList.css +++ b/views/js/evently/src/HostList.css @@ -16,20 +16,22 @@ body { } .host-button { - display: inline-block; /* Ensures it doesn't stretch */ - margin: 0 auto; /* Centers it if the parent has a fixed width */ - text-align: center; - background-color: #0047ff; - color: #fff; - padding: 10px 20px; - font-size: 1rem; + background-color: #007bff; /* Button background color */ + color: #fff; /* Button text color */ + border: none; /* Remove border */ + padding: 0.75rem 1rem; /* Adjust padding as needed */ border: none; - border-radius: 5px; + border-radius: 5rem; /* Optional: Rounds the button edges */ + font-size: 1.2rem; + outline: none; + margin: 2rem; + cursor: pointer; /* Pointer cursor on hover */ + transition: background 0.25s; text-decoration: none; } .host-button:hover { - background-color: #0036cc; + background-color: #0056b3; /* Darker shade on hover */ } table { @@ -63,7 +65,7 @@ table th, table td { max-width: 1200px; margin: 20px auto; /* Centers the grid */ background-color: #d9d9d9; - padding: 30px 10px 140px 20px; + background-attachment: fixed; } .accountContainer { @@ -101,3 +103,48 @@ table th, table td { } +.nav-bar-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; /* Full width */ + background: #fff; /* Optional: Background color */ + margin: 0; /* Remove default body margin if needed */ +} + + +.account-search-bar { + --padding: 14px; + + width: max-content; + display: flex; + align-items: center; /* Align items in the navbar vertically */ + gap: 8px; /* Optional: Adds spacing between the button and the navbar content */ + padding: var(--padding); + border-radius: 28px; + background: #f6f6f6; + transition: background 0.25s; +} + +.account-search-bar:focus-within { + background: #f1f1f1; +} + +.account-search-bar input { + font-size: 16px; + font-family: 'Lexend', sans-serif; + color: #333333; + margin-left: var(--padding); + outline: none; + border: none; + background: transparent; + flex: 1; + width: 300px; + padding: 0; + margin-bottom: 0; +} + +.account-search-input::placeholder { + color: rgba(0, 0, 0, 0.2) +} + diff --git a/views/js/evently/src/HostList.jsx b/views/js/evently/src/HostList.jsx index 6d12447..8598a9f 100644 --- a/views/js/evently/src/HostList.jsx +++ b/views/js/evently/src/HostList.jsx @@ -32,9 +32,6 @@ function HostList() {

    Discover New People

    - - Join now - {/* @@ -74,10 +71,14 @@ function HostList() { */} -
    - - + +
    + Join now + +
    @@ -87,10 +88,10 @@ function HostList() {
    Profile picture
    -

    John Doe

    +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    - -
    @@ -113,9 +114,6 @@ function HostList() {

    John Doe

    - - -
    Profile picture @@ -128,6 +126,7 @@ function HostList() { Profile picture

    John Doe

    +
    From f3a24b7bf0326b2fa706f3f09bf93f7b81b7579a Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Fri, 17 Jan 2025 16:57:17 -0500 Subject: [PATCH 09/10] Added some CSS to make people page look nicer --- views/js/evently/src/HostList.css | 22 +++++++++------ views/js/evently/src/HostList.jsx | 45 ++++++++++++++++++------------- 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css index 868c247..68d005b 100644 --- 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 index 8598a9f..01598f7 100644 --- a/views/js/evently/src/HostList.jsx +++ b/views/js/evently/src/HostList.jsx @@ -70,8 +70,6 @@ function HostList() {
    */} - -
    Join now
    - -
    - - +
    +
    Profile picture @@ -97,67 +93,80 @@ function HostList() {
    Profile picture
    -

    John Doe

    +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    Profile picture
    -

    John Doe

    +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    Profile picture
    -

    John Doe

    +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    Profile picture
    -

    John Doe

    +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    Profile picture
    -

    John Doe

    - +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    Profile picture
    -

    John Doe

    +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    Profile picture
    -

    John Doe

    +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    Profile picture
    -

    John Doe

    +

    Attendee

    +

    John Doe

    +

    fake@gmail.com

    - - -
    +
    ); } From a2f2bee3ecff67ae951cc881769aaf03fbe305b4 Mon Sep 17 00:00:00 2001 From: Jennifer Perez-Juarez Date: Tue, 21 Jan 2025 11:17:30 -0500 Subject: [PATCH 10/10] Added some finishing touches to the people page --- views/js/evently/src/HostList.css | 16 +++++----------- views/js/evently/src/HostList.jsx | 4 +++- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/views/js/evently/src/HostList.css b/views/js/evently/src/HostList.css index 68d005b..5e4c0fd 100644 --- a/views/js/evently/src/HostList.css +++ b/views/js/evently/src/HostList.css @@ -11,7 +11,7 @@ body { } .header h1 { - font-size: 2.5rem; + font-size: 3rem; color: #000; } @@ -86,6 +86,10 @@ table th, table td { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional shadow for card */ } +.accountContainer h2 { + margin: 10px; + font-size: 25px; +} .accountInfo { width: 100px; height: 100px; @@ -100,15 +104,6 @@ table th, table td { object-fit: cover; /* Ensures image fits nicely in circle */ } -.accountInfo p { - margin: 0; - padding: 0; - font-size: 14px; /* Adjusts text size */ - color: #ffffff; /* Text color for better contrast */ - text-align: center; /* Centers text within container */ -} - - .nav-bar-container { display: flex; justify-content: center; @@ -118,7 +113,6 @@ table th, table td { margin: 0; /* Remove default body margin if needed */ } - .account-search-bar { --padding: 14px; diff --git a/views/js/evently/src/HostList.jsx b/views/js/evently/src/HostList.jsx index 01598f7..d8feddc 100644 --- a/views/js/evently/src/HostList.jsx +++ b/views/js/evently/src/HostList.jsx @@ -80,7 +80,9 @@ function HostList() {
    -
    + + +
    Profile picture