From b7afa1d0d6e304c8079c506e819a48f773819a90 Mon Sep 17 00:00:00 2001 From: intercalaris Date: Thu, 9 Jan 2025 17:39:48 -0500 Subject: [PATCH 1/6] No associated issue: Updated all CSS files and classes to be component specific. Moved favorites to home page Co-authored-by: Abdiladif Gurhan Co-authored-by: Bongi Sibanda --- .../CompanyListing/CompanyListing.jsx | 4 +-- .../CompanyListing/companyListing.css | 6 ++-- src/components/Feed/Feed.jsx | 20 +++++------ src/components/Feed/feed.css | 22 ++++++------ src/components/LeftSidebar/LeftSidebar.jsx | 10 +++--- src/components/ReviewList/ReviewList.jsx | 10 +++--- src/components/ReviewList/reviewList.css | 20 +++++------ src/components/RightSidebar/RightSidebar.jsx | 16 +++++---- src/components/RightSidebar/rightSidebar.css | 18 +++++----- src/index.css | 2 +- src/pages/Companies/Companies.jsx | 4 +-- src/pages/Companies/companies.css | 34 +++++++++---------- src/pages/Company/Company.jsx | 4 +-- src/pages/Company/company.css | 4 +-- src/pages/Home/Home.jsx | 6 ++-- src/pages/Home/home.css | 14 ++++++-- src/pages/Profile/Profile.jsx | 6 ++-- 17 files changed, 104 insertions(+), 96 deletions(-) diff --git a/src/components/CompanyListing/CompanyListing.jsx b/src/components/CompanyListing/CompanyListing.jsx index b502e20..59f0037 100644 --- a/src/components/CompanyListing/CompanyListing.jsx +++ b/src/components/CompanyListing/CompanyListing.jsx @@ -23,9 +23,9 @@ const CompanyListing = () => { fetchCompanies() }, []) return ( -
+
{companies.map((company) => ( -
+
{company.name}
))} diff --git a/src/components/CompanyListing/companyListing.css b/src/components/CompanyListing/companyListing.css index d0e8bbe..9fa2ea6 100644 --- a/src/components/CompanyListing/companyListing.css +++ b/src/components/CompanyListing/companyListing.css @@ -1,12 +1,12 @@ /* Flexbox Grid Layout */ -.company-grid { +.companyListing_company-grid { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 2rem; } -.company-card { +.companyListing_company-card { flex: 1 1 calc(25% - 2rem); /* Adjusts dynamically to screen size */ max-width: 200px; background-color: #292929; @@ -19,7 +19,7 @@ cursor: pointer; } -.company-card:hover { +.companyListing_company-card:hover { transform: scale(1.05); background-color: #333; } diff --git a/src/components/Feed/Feed.jsx b/src/components/Feed/Feed.jsx index e93e16f..3369906 100644 --- a/src/components/Feed/Feed.jsx +++ b/src/components/Feed/Feed.jsx @@ -141,7 +141,7 @@ export default function Feed() { const response = await fetch(`/api/review/allCompanyReviews`) if (!response.ok) throw new Error('Failed to fetch posts.') const data = await response.json() - console.log(data, 'I AM DATA!!!! '); + if (data.length === 0) { // If no reviews fetched, use fallback reviews setReviews([]) @@ -157,23 +157,23 @@ export default function Feed() { }, []) return ( -
+
{reviews.map((review, index) => ( -
-

{review.companyName}

-

+

+

{review.companyName}

+

Position: {review.position}

-
+
{Object.entries(review.questions).map( ([category, value]) => ( -
- +
+ {category .replace(/([A-Z])/g, ' $1') .toLowerCase()} -
+
{[1, 2, 3, 4, 5].map((star) => ( {`${star ))}
diff --git a/src/components/Feed/feed.css b/src/components/Feed/feed.css index 1c0911d..f0c10d3 100644 --- a/src/components/Feed/feed.css +++ b/src/components/Feed/feed.css @@ -1,4 +1,4 @@ -.feed { +.feed_feed { padding: 1rem; display: flex; flex-direction: column; @@ -6,7 +6,7 @@ overflow-y: auto; } -.feed-item { +.feed_feed-item { display: flex; flex-direction: column; background-color: #292929; @@ -18,49 +18,49 @@ box-sizing: border-box; } -.company-name { +.feed_company-name { font-size: 1.6rem; color: #ffc107; margin-bottom: 1rem; } -.role { +.feed_role { font-size: 1.2rem; color: #ccc; margin-bottom: 1rem; } -.ratings-grid { +.feed_ratings-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + grid-template-columns: repeat(auto-fit, 140px); gap: 1rem; margin-bottom: 1rem; } -.rating-cell { +.feed_rating-cell { display: flex; flex-direction: column; align-items: center; text-align: center; } -.category-name { +.feed_category-name { font-size: 1.1rem; color: #e0e0e0; margin-bottom: 0.5rem; } -.stars { +.feed_stars { display: flex; gap: 0.2rem; } -.star-img { +.feed_star-img { width: 20px; height: 20px; } -.comment { +.feed_comment { margin-top: 1rem; font-size: 1.2rem; color: #aaa; diff --git a/src/components/LeftSidebar/LeftSidebar.jsx b/src/components/LeftSidebar/LeftSidebar.jsx index c3e5d28..45fbfe9 100644 --- a/src/components/LeftSidebar/LeftSidebar.jsx +++ b/src/components/LeftSidebar/LeftSidebar.jsx @@ -1,6 +1,5 @@ import { useState, useEffect } from 'react' import './leftSidebar.css' -import AddReviewBtn from '../AddReviewBtn/AddReviewBtn' export default function LeftSidebar() { const [favoriteCompanies, setFavoriteCompanies] = useState([]) @@ -22,12 +21,11 @@ export default function LeftSidebar() { }, []) return ( -