Merge PR #106 from Resilient-Labs/feature/move-favorites-profile

Updated all CSS files and classes to be component specific. Moved favorites to home page
Resilient-Labs · Jan 10, 2025 · e0a974d · e0a974d
2 parents ded53e8 + 61ffd40
commit e0a974d
Show file tree

Hide file tree

Showing 34 changed files with 327 additions and 182 deletions.
diff --git a/public/img/favicon.ico b/public/img/favicon.ico
diff --git a/src/components/AddReviewBtn/addReviewBtn.css b/src/components/AddReviewBtn/addReviewBtn.css
@@ -9,12 +9,12 @@
     text-align: center;
     transition: background-color 0.2s;
     font-family: inherit;
-    background-color: #413f9f;
+    background-color: #896346;
     color: white;
     border-radius: 4px;
 }
 
 .review-btn:hover,
 .review-btn:active {
-    background-color: #282763;
+    background-color: #3d2c1f;
 }
diff --git a/src/components/CompanyBanner/CompanyBanner.jsx b/src/components/CompanyBanner/CompanyBanner.jsx
@@ -30,7 +30,7 @@ const CompanyBanner = (props) => {
                 src={`/img${props.companyLogo} `}
                 className="company-logo"
             />
-            <h1 className="company-name">{props.name}</h1>
+            <h1 className="companyBanner-name">{props.name}</h1>
             {/* <nav className="company-tabs">
                 <a href="#overview" className="tab">
                     Overview
@@ -42,10 +42,12 @@ const CompanyBanner = (props) => {
                     Salaries
                 </a>
             </nav> */}
-            <a onClick={addFavorite}>
-                <img className = "favImg" src="/img/red-heart.png" alt="" />
-            </a>
-            <AddReviewBtn/>
+            <div className="companyBanner_buttons">
+                <a onClick={addFavorite}>
+                    <img className = "favImg" src="/img/red-heart.png" alt="" />
+                </a>
+                <AddReviewBtn/>
+            </div>
         </section>
     )
 }

diff --git a/src/components/CompanyBanner/companyBanner.css b/src/components/CompanyBanner/companyBanner.css
@@ -42,6 +42,12 @@
     background-color: #444;
 }
 
+.companyBanner-name {
+   font-size: 2.5rem;
+   color: white;
+   margin-bottom: 1rem;
+}
+
 .action-btn {
     border: none;
     padding: 1rem 2rem;
@@ -62,9 +68,12 @@
 .favImg{
     width: 25px;
     transition: transform 0.3s ease;
-    position: relative;
-    left: 310px;
 }
 .favImg:hover {
     transform: scale(1.2); /*makes heart bigger on hover*/
 }
+.companyBanner_buttons{
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
diff --git a/src/components/CompanyListing/CompanyListing.jsx b/src/components/CompanyListing/CompanyListing.jsx
@@ -23,9 +23,9 @@ const CompanyListing = () => {
         fetchCompanies()
     }, [])
     return (
-        <section className="company-grid">
+        <section className="companyListing_company-grid">
             {companies.map((company) => (
-                <div className="company-card" key={company._id}>
+                <div className="companyListing_company-card" key={company._id}>
                     <Link to={`/company/${company._id}`}>{company.name}</Link>
                 </div>
             ))}

diff --git a/src/components/CompanyListing/companyListing.css b/src/components/CompanyListing/companyListing.css
@@ -1,15 +1,15 @@
 /* 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;
+    background-color: #896346;
     padding: 2rem;
     border: 1px solid #444;
     border-radius: 8px;
@@ -19,11 +19,14 @@
     cursor: pointer;
 }
 
-.company-card:hover {
+.companyListing_company-card:hover {
     transform: scale(1.05);
-    background-color: #333;
+    background-color: #2d2016;
 }
 a {
     text-decoration: none;
     color: inherit;
 }
+.companies_page-title {
+    color: #523a28;
+}
diff --git a/src/components/CompanyReviews/CompanyReviews.jsx b/src/components/CompanyReviews/CompanyReviews.jsx
@@ -84,9 +84,8 @@ const CompanyReviews = ({review, setReviews}) => {
     }
 
     return (
-        <div className="review"> 
-            <ul className="review-list">
-                    <li>
+        <div className="companyReviews_review"> 
+            <ul className="companyReviews_review-list">
                         {!isEditing ? (
                             <ul>
                                 <li>{`Company Name: ${review.companyName}`}</li>
@@ -238,22 +237,22 @@ const CompanyReviews = ({review, setReviews}) => {
                             </form>
                         )}
 
-                        <div className="btn-wrapper">
+                        <div className="companyReviews_btn-wrapper">
                             {!isEditing ? (
                                 <>
                                     <button
                                         onClick={() =>
                                             handleEditReview(review._id)
                                         }
-                                        className="action-btn edit-review"
+                                        className="companyReviews_action-btn companyReviews_edit-review"
                                     >
                                         Edit Review
                                     </button>
                                     <button
                                         onClick={() =>
                                             handleDeleteReview(review._id)
                                         }
-                                        className="action-btn delete-review"
+                                        className="companyReviews_action-btn companyReviews_delete-review"
                                     >
                                         Delete Review
                                     </button>
@@ -262,20 +261,20 @@ const CompanyReviews = ({review, setReviews}) => {
                                 <>
                                     <button
                                         onClick={() => handleSave(review._id)}
-                                        className="action-btn edit-review"
+                                        className="companyReviews_action-btn companyReviews_edit-review"
                                     >
                                         Save
                                     </button>
                                     <button
                                         onClick={() => handleCancel(review._id)}
-                                        className="action-btn delete-review"
+                                        className="companyReviews_action-btn companyReviews_delete-review"
                                     >
                                         Cancel
                                     </button>
                                 </>
                             )}
                         </div>
-                    </li>
+
             </ul>
         </div>
     )

diff --git a/src/components/CompanyReviews/companyReviews.css b/src/components/CompanyReviews/companyReviews.css
@@ -1,39 +1,53 @@
 /* Reviews */
-.review {
+.companyReviews_review {
     padding: 2rem;
-    background-color: #292929;
+    background-color: #a47551;
     border-radius: 4px;
     border: 1px solid #444;
 }
-.review h3 {
+.companyReviews_review h3 {
     margin-bottom: 1.5rem;
-    color: #e0e0e0;
+    color: white;
     font-size: 1.8rem;
 }
-.review-list {
+.companyReviews_review-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
-.review-list li {
+.companyReviews_review-list li {
     padding: 1rem;
-    background-color: #161616;
+    background-color: #523a28;
     border: 1px solid #333;
     border-radius: 4px;
     font-size: 1.6rem;
-    color: #aaa;
+    color: white;
     transition: background-color 0.3s;
     margin-bottom: 0.5rem;
 }
-.review-list li:hover {
+.companyReviews_review-list li:hover {
     background-color: #333;
 
 }
 /* Buttons */
-.action-btn {
+.companyReviews_edit-review {
+    border: none;
+    text-decoration: none;
+    padding: 1rem;
+    font-size: 1.6rem;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.2s;
+    font-family: inherit;
+    background-color: #1d1956;
+    color: white;
+    border-radius: 4px;
+}
+.companyReviews_delete-review {
     border: none;
     text-decoration: none;
     padding: 1rem;
@@ -43,17 +57,17 @@
     text-align: center;
     transition: background-color 0.2s;
     font-family: inherit;
-    background-color: #9e1313;
+    background-color: #610505;
     color: white;
     border-radius: 4px;
 }
 
-.action-btn:hover,
-.action-btn:active {
-    background-color: #282763;
+.companyReviews_action-btn:hover,
+.companyReviews_action-btn:active {
+    background-color: #38281b;
 }
 
-.btn-wrapper {
+.companyReviews_btn-wrapper {
     display: flex;
     gap: 2rem;
     margin-top: 1rem;

diff --git a/src/components/EditReviewBtn/editReviewBtn.css b/src/components/EditReviewBtn/editReviewBtn.css
@@ -11,6 +11,7 @@
     background-color: #413f9f;
     color: white;
     border-radius: 4px;
+    background-color:#896346
 }
 
 .edit-btn:hover,

diff --git 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 (
-        <section className="feed">
+        <section className="feed_feed">
             {reviews.map((review, index) => (
-                <div key={index} className="feed-item">
-                    <h3 className="company-name">{review.companyName}</h3>
-                    <p className="role">
+                <div key={index} className="feed_feed-item">
+                    <h3 className="feed_company-name">{review.companyName}</h3>
+                    <p className="feed_role">
                         <strong>Position:</strong> {review.position}
                     </p>
-                    <div className="ratings-grid">
+                    <div className="feed_ratings-grid">
                         {Object.entries(review.questions).map(
                             ([category, value]) => (
-                                <div key={category} className="rating-cell">
-                                    <span className="category-name">
+                                <div key={category} className="feed_rating-cell">
+                                    <span className="feed_category-name">
                                         {category
                                             .replace(/([A-Z])/g, ' $1')
                                             .toLowerCase()}
                                     </span>
-                                    <div className="stars">
+                                    <div className="feed_stars">
                                         {[1, 2, 3, 4, 5].map((star) => (
                                             <img
                                                 key={star}
@@ -183,7 +183,7 @@ export default function Feed() {
                                                         : '/img/star-white-transp.png'
                                                 }
                                                 alt={`${star <= value ? 'Filled' : 'Empty'} Star`}
-                                                className="star-img"
+                                                className="feed_star-img"
                                             />
                                         ))}
                                     </div>
@@ -192,7 +192,7 @@ export default function Feed() {
                         )}
                     </div>
                     {review.comment && (
-                        <p className="comment">
+                        <p className="feed_comment">
                             <strong>Comment:</strong> {review.comment}
                         </p>
                     )}