Merge pull request #4796 from OneCommunityGlobal/feature/skills-dashboard-theme-fixes

Namitha: Fix theme colors and responsive layout for HGN Skills Dashboard

Author: one-community

src/components/HGNSkillsDashboard/SkillsProfilePage/components/RadarChart.jsx

@@ -10,6 +10,7 @@ import {
   Legend,
 } from 'chart.js';
 import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import styles from '../styles/RadarChart.module.css';
 
 ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
@@ -224,24 +225,21 @@ function RadarChart({ profileData, compact = true }) {
     );
   }
 
+  const { general = {}, frontend = {}, backend = {} } = profileData?.skillInfo || {};
+
   const chartData = {
     labels: skillsData.map(skill => (compact ? skill.shortLabel || skill.label : skill.label)),
     datasets: [
       {
         label: 'Skills',
-        data: skillsData.map(skill => skill.score),
-        backgroundColor: compact ? 'rgba(133, 146, 226, 0.35)' : 'rgba(62, 160, 203, 0.2)',
-        borderColor: compact ? 'rgba(110, 125, 215, 0.9)' : 'rgba(62, 160, 203, 1)',
-        borderWidth: compact ? 2 : 3,
-        pointBackgroundColor: compact ? 'rgba(110, 125, 215, 0.95)' : 'rgba(62, 160, 203, 1)',
-        pointBorderColor: '#fff',
-        pointHoverBackgroundColor: '#fff',
-        pointHoverBorderColor: compact ? 'rgba(110,125,215,1)' : 'rgba(62,160,203,1)',
-        pointRadius: compact ? 4 : 6,
-        pointHoverRadius: compact ? 6 : 8,
-        pointBorderWidth: 1.5,
-        pointHoverBorderWidth: 2,
-        fill: true,
+        data: SKILL_MAPPINGS.map(skill => skill.value(general, frontend, backend) ?? 0),
+        backgroundColor: 'rgba(37, 99, 235, 0.16)',
+        borderColor: '#2563eb',
+        borderWidth: 2,
+        pointBackgroundColor: '#1d4ed8',
+        pointBorderColor: '#eff6ff',
+        pointHoverBackgroundColor: '#eff6ff',
+        pointHoverBorderColor: '#1d4ed8',
       },
     ],
   };
@@ -295,11 +293,7 @@ function RadarChart({ profileData, compact = true }) {
         suggestedMax: 10,
         ticks: {
           stepSize: 2,
-          display: compact ? false : true,
-          color: '#666',
-          font: {
-            size: 10,
-          },
+          display: false,
         },
       },
     },
@@ -338,6 +332,9 @@ function RadarChart({ profileData, compact = true }) {
           return tooltipItem.parsed.r > 0;
         },
       },
+      datalabels: {
+        display: false,
+      },
     },
     interaction: {
       intersect: false,
@@ -356,4 +353,15 @@ function RadarChart({ profileData, compact = true }) {
   );
 }
 
+RadarChart.propTypes = {
+  profileData: PropTypes.shape({
+    skillInfo: PropTypes.shape({
+      general: PropTypes.object,
+      frontend: PropTypes.object,
+      backend: PropTypes.object,
+    }),
+  }),
+  compact: PropTypes.bool,
+};
+
 export default RadarChart;

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/LeftSection.module.css

@@ -1,13 +1,12 @@
-.leftSection {
-  padding: 8px 8px 24px 8px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+.leftSection h1 {
+  margin: 5px 0;
+  color: #111827;
+}
+
+.leftSection h3 {
+  margin: 0;
+  font-size: 20px;
+  color: #1f2933;
 }
 
 .profilePic {
@@ -18,18 +17,7 @@
   margin-bottom: 15px;
 }
 
-.leftSection h1 {
-  margin: 5px 0;
-  color: #333;
-}
-
-.leftSection h3 {
-  margin: 0;
-  font-size: 20px;
-  color: #666;
-}
-
-@media (max-width: 768px) {
+@media (max-width: 1100px) {
   .leftSection {
     width: 100%;
     padding: 16px 0 12px;

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/ProfileDetails.module.css

@@ -27,7 +27,7 @@
   flex-wrap: wrap;
   gap: 15px;
   font-size: 16px;
-  color: #333;
+  color: #1f2933;
   margin-bottom: 10px;
 }
 
@@ -38,7 +38,7 @@
 
 .teamInfo strong,
 .contactsInfo strong {
-  color: #869aa3;
+  color: #0f2f4a;
 }
 
 .teamInfo .value,
@@ -47,7 +47,7 @@
 }
 
 .value {
-  color: #666;
+  color: #111827;
   display: inline-block;
   font-family: 'Arial', sans-serif;
 }

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/RadarChart.module.css

@@ -4,22 +4,27 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 20px;
-  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  border: 1px solid rgba(62, 160, 203, 0.1);
-  min-height: 500px;
-  position: relative;
+  padding: 10px 0;
+  margin: 0 auto;
+  max-width: 720px;
+  width: 100%;
 }
 
-.radarChart.compact {
-  padding: 0;
-  background: transparent;
-  box-shadow: none;
-  border: none;
-  min-height: auto;
-  align-items: stretch;
+.radarChart canvas {
+  width: 100% !important;
+  height: auto !important;
+  max-width: 720px;
+  max-height: 640px;
+}
+
+@media (max-width: 1100px) {
+  .radarChart {
+    padding: 12px 0;
+  }
+
+  .radarChart canvas {
+    max-height: 540px;
+  }
 }
 
 .chartTitle {
@@ -125,87 +130,17 @@
 /* Responsive breakpoints */
 @media (max-width: 768px) {
   .radarChart {
-    padding: 15px;
-    min-height: 450px;
+    padding: 10px 0;
   }
 
-  .chartTitle h4 {
-    font-size: 20px;
-  }
-
-  .chartTitle p {
-    font-size: 13px;
-  }
-
-  .chartContainer {
-    max-width: clamp(280px, 58vw, 500px);
-  }
-
-  .legendItem {
-    font-size: 13px;
+  .radarChart canvas {
+    max-height: 460px;
   }
 }
 
 @media (max-width: 480px) {
-  .radarChart {
-    padding: 10px;
-    min-height: 400px;
-  }
-
-  .chartTitle h4 {
-    font-size: 18px;
-  }
-
-  .chartTitle p {
-    font-size: 12px;
-  }
-
-  .chartContainer {
-    max-width: clamp(240px, 78vw, 420px);
-  }
-
-  .chartLegend {
-    flex-direction: column;
-    gap: 10px;
-    margin-top: 15px;
-  }
-
-  .legendItem {
-    font-size: 12px;
-  }
-
-  .legendColor {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-/* High DPI displays */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .chartContainer canvas {
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: crisp-edges;
-  }
-}
-
-/* Dark theme support (optional) */
-@media (prefers-color-scheme: dark) {
-  .radarChart {
-    background: linear-gradient(145deg, #2d3748 0%, #1a202c 100%);
-    border-color: rgba(62, 160, 203, 0.3);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  }
-
-  .chartTitle h4 {
-    color: #63b3ed;
-  }
-
-  .chartTitle p {
-    color: #a0aec0;
-  }
-
-  .legendItem {
-    color: #e2e8f0;
+  .radarChart canvas {
+    max-height: 380px;
   }
 }
 

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/RightSection.module.css

@@ -1,23 +1,15 @@
 .rightSection {
-  padding: 0 4px;
+  width: 78%;
+  padding: 0 20px;
   display: flex;
   flex-direction: column;
   min-width: 0; /* allow children to shrink */
 }
 
 .skillsAndChart {
   display: flex;
-  gap: 18px;
-  align-items: stretch;
-}
-
-.skillsAndChart > *:first-child { /* Skills buttons */
-  flex: 0 0 180px;
-}
-
-.skillsAndChart > *:last-child { /* Chart / content */
-  flex: 1 1 auto;
-  min-width: 0;
+  gap: 16px;
+  align-items: flex-start;
 }
 
 h3 {
@@ -26,10 +18,21 @@ h3 {
   margin-bottom: 10px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1100px) {
+  .rightSection {
+    width: 100%;
+    padding: 0 10px;
+  }
+
   .skillsAndChart {
     flex-direction: column;
-    gap: 24px;
+    align-items: stretch;
+  }
+}
+
+@media (max-width: 768px) {
+  .rightSection {
+    padding: 0 0 10px;
   }
   .skillsAndChart > *:first-child { flex: 0 0 auto; }
 }

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/Skills.module.css

@@ -33,7 +33,19 @@
   color: #168dc0;
 }
 
-@media (width <= 768px) {
+@media (max-width: 1100px) {
+  .skills {
+    width: 100%;
+    align-items: center;
+  }
+
+  .skills button {
+    width: 100%;
+    max-width: 460px;
+  }
+}
+
+@media (max-width: 768px) {
   .skills {
     width: 100%;
     flex-direction: column;