Skip to content

Veda UI alignment visibility responsiveness changes#4435

Merged
one-community merged 20 commits intodevelopmentfrom
veda-UI-alignment-visibility-responsiveness-changes
Dec 5, 2025
Merged

Veda UI alignment visibility responsiveness changes#4435
one-community merged 20 commits intodevelopmentfrom
veda-UI-alignment-visibility-responsiveness-changes

Conversation

@Charitha2009
Copy link
Copy Markdown
Contributor

Description

Screenshot 2025-11-21 at 8 49 28 PM

Related PRS (if any):

This frontend PR is related to the development backend PR.

Main changes explained:

  • Proper capitalization and horizontal centering of chart title and layout.
  • Adaptive text color for dark mode and consistent placement of status/validation messages.
  • Fully responsive chart layout and spacing across all screen sizes.

How to test:

  1. check into current branch
  2. do npm install and ... to run this PR locally
  3. Clear site data/cache
  4. log as admin user
  5. go to http://localhost:5173/applicants-chart

Screenshots or videos of changes:

Screenshot 2025-11-21 at 8 50 11 PM Screenshot 2025-11-21 at 8 52 11 PM Screenshot 2025-11-21 at 8 52 36 PM

Test added 5 commits November 19, 2025 20:37
…les for Applicants Chart

- Fix title capitalization and center alignment
- Improve dark mode visibility for loading and validation messages
- Move validation messages below chart
- Add responsive design with clamp() for fonts and spacing
- Fix NaN errors in chart rendering with data validation
- Remove border-radius in dark mode to prevent white edges
- Add dark mode hover styles for DatePicker and select dropdown
- Improve DatePicker calendar styling in dark mode
…port

- Fix light colored area below graph in dark mode by setting proper background colors
- Add CSS rules for recharts surface to match dark mode background (#1b2a41)
- Increase chart height from 60vh to calc(100vh - 150px) to fill more viewport
- Update minHeight from 350px to 600px for better visibility
- Ensure all chart containers have consistent dark mode background color
…ness-changes

- Resolved conflicts in AgeChart.jsx: kept validation logic and improved styling
- Resolved conflicts in index.jsx: kept enhanced version with DatePicker and error handling
- Resolved conflicts in WhatWeDo.jsx: kept eslint-disable comment for console statement
- Converted some CSS files to CSS modules (ToolStatusDonutChart, BlueSquareEmailManagement, ReviewsInsight)
- Note: Additional CSS files from development branch will need conversion in separate PR
- Update PRQualityGraph.jsx to use ReviewsInsight.module.css instead of deleted .css file
- Update ActionDoneGraph.jsx to use ReviewsInsight.module.css instead of deleted .css file
- Update ReviewsInsight.jsx to use CSS module class names throughout
- All components now properly reference the CSS module
@netlify
Copy link
Copy Markdown

netlify Bot commented Nov 22, 2025

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit c1c68ba
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6930d8ccfb9ad70008182917
😎 Deploy Preview https://deploy-preview-4435--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Contributor

@Prem203 Prem203 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed the PR with an admin account.

Graph is now centered and displayed correctly. It is centered in all screen sizes although the top headers are not fully visible in some screen sizes.
The chart still displays date validation message in red below the chart.
Changes are required to correctly match the requirements mentioned in the task description.

image image

@Charitha2009 Charitha2009 requested a review from Prem203 November 29, 2025 23:40
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Dec 4, 2025

@one-community
Copy link
Copy Markdown
Member

Thank you all, merging!

@one-community one-community merged commit a531713 into development Dec 5, 2025
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants