Resolved conflicts

Author: aryanrachala54

src/components/HGNHelpSkillsDashboard/CommunityMembersPage.jsx

@@ -1,37 +1,10 @@
 import React, { useState, useMemo } from 'react';
-import RankedUserList from './RankedUserList'; // wherever your RankedUserList is
+import RankedUserList from './RankedUserList';
 
 const availableSkills = ['React', 'Redux', 'HTML', 'CSS', 'MongoDB', 'Database', 'Agile'];
-const RANKED_USERS_ENDPOINT = 'http://localhost:4500/api/hgnform/ranked';
 
 function CommunityMembersPage() {
   const [selectedSkills, setSelectedSkills] = useState([]);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [sortOrder, setSortOrder] = useState('asc');
-  const [showFilters, setShowFilters] = useState(false);
-  const [rankedUsers, setRankedUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const fetchRankedUsers = async () => {
-      setLoading(true);
-      try {
-        const params = {
-          skills: (selectedSkills.length ? selectedSkills : availableSkills).join(','),
-        };
-        const response = await axios.get(RANKED_USERS_ENDPOINT, { params });
-        setRankedUsers(response.data);
-        setError(null);
-      } catch (err) {
-        setError('Unable to load community members right now. Please try again later.');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchRankedUsers();
-  }, [selectedSkills]);
 
   const handleCheckboxChange = skill => {
     setSelectedSkills(prev =>

src/components/HGNHelpSkillsDashboard/RankedUserList.jsx

@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
 import UserCard from './UserCard';
-import styles from './style/UserCard.module.css';
+import './style/UserCard.module.css';
 
 function RankedUserList({ selectedSkills = [] }) {
   const [rankedUsers, setRankedUsers] = useState([]);
@@ -57,15 +58,4 @@ function RankedUserList({ selectedSkills = [] }) {
   );
 }
 
-RankedUserList.propTypes = {
-  users: PropTypes.arrayOf(PropTypes.object).isRequired,
-  loading: PropTypes.bool.isRequired,
-  error: PropTypes.string,
-  emptyMessage: PropTypes.string.isRequired,
-};
-
-RankedUserList.defaultProps = {
-  error: null,
-};
-
 export default RankedUserList;

src/components/HGNHelpSkillsDashboard/UserCard.jsx

@@ -16,7 +16,7 @@ function UserCard({ user }) {
   };
 
   return (
-    <div className={`${styles.userCard} ${darkMode ? styles.darkMode : ''}`}>
+    <div className={`${styles.userCard} ${darkMode ? styles.dark : ''}`}>
       <img src={avatar} alt="Avatar" className={`${styles.avatar}`} />
       <div className={`${styles.info}`}>
         <div className={`${styles.userName}`} title={name}>

src/components/HGNHelpSkillsDashboard/style/UserCard.module.css

@@ -12,7 +12,6 @@
   flex-direction: column;
   align-items: center;
   gap: 16px;
-  margin: 0 auto;
 }
 
 .avatar {
@@ -39,9 +38,8 @@
 }
 
 .userName {
-  width: 100%;
-  font-size: 24px;
-  font-weight: 500;
+  font-size: 30px;
+  font-weight: 400;
   color: black;
   margin-bottom: 8px;
   white-space: nowrap;
@@ -51,11 +49,10 @@
 }
 
 .contactLine {
-  width: 100%;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: 16px;
   color: #616161;
   margin-bottom: 6px;
   justify-content: center;
@@ -67,10 +64,6 @@
   margin-top: 1px;
 }
 
-.contactLine span {
-  word-break: break-all;
-}
-
 .scoreSkillsWrapper {
   width: 100%;
   display: flex;
@@ -82,7 +75,7 @@
 .scoreLine {
   font-size: 22px;
   text-align: left;
-  padding: 0 16px;
+  margin-left: 4px;
 }
 
 .scoreLabel {
@@ -102,75 +95,41 @@
 .skillsSection {
   width: 100%;
   text-align: left;
-  padding: 0 16px 0 16px;
+  padding: 0 4px;
 }
 
 .skillsLabel {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 400;
   text-decoration: underline;
   margin-bottom: 4px;
 }
 
 .skillsText {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 400;
   color: #616161;
-  line-height: 21px;
+  line-height: 22px;
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
-.userCard.darkMode {
+.userCard.dark {
   background: #2f4157;
-  border-color: #444;
+  border-color: #333;
   box-shadow: none;
+  color: #ffffff;
 }
 
-.userCard.darkMode .contactLine {
-  color: #ccc;
-}
-
-.darkMode .skillsText {
-  color: #ffffff !important;
-}
-
-.darkMode .userName {
-  color: #ffffff !important;
-}
-
-.darkMode .scoreLine,
-.darkMode .scoreLabel,
-.darkMode .scoreValue,
-.darkMode .scoreMax {
-  color: #ffffff !important;
-}
-
-.containerGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 32px;
-  padding: 24px 0 32px;
-  justify-items: center;
-}
-
-.darkMode {
-  color: #111 !important;
-  -webkit-text-fill-color: #111 !important;
-}
-
-.darkMode .contactLine,
-.darkMode .skillsText {
-  color: #616161 !important;
-}
-
-.darkMode .userName {
-  color: black !important;
+.userCard.dark .userName,
+.userCard.dark .scoreLine,
+.userCard.dark .scoreLabel,
+.userCard.dark .scoreValue,
+.userCard.dark .scoreMax {
+  color: #ffffff;
 }
 
-.darkMode .scoreLine,
-.darkMode .scoreLabel,
-.darkMode .scoreValue,
-.darkMode .scoreMax {
-  color: #111 !important;
+.userCard.dark .contactLine,
+.userCard.dark .skillsText {
+  color: #bbbbbb;
 }