Siva - Fix Dates and Online Filters” Misalignment by pavanputti · Pull Request #4388 · OneCommunityGlobal/HighestGoodNetworkApp

pavanputti · 2025-11-14T06:17:55Z

Description

Related PRS (if any):

This frontend PR is related to the development backend PR. To test this frontend PR, you need to checkout the development backend PR.
…

Main changes explained:

Delete file A for removing unused components …
Update file B for including new pattern …
Create file C for introducing new components …
…

How to test:

Check out branch: siva/fix-filter-alignment-figma-match-clean
Run npm install (if needed)
Start the development server
Navigate to: /communityportal/
Open the Search Filters panel on the left sidebar
Verify:

"Dates" label is properly aligned
"Tomorrow" and "This Weekend" radio buttons are aligned with consistent indentation
"Online" label is properly aligned
"Online Only" checkbox is aligned with consistent indentation
All filter elements match the Figma design spacing and alignment

Screenshots or videos of changes:

netlify · 2025-11-14T06:18:02Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`c82b93d`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69daf329908d0a00089aa7b4
😎 Deploy Preview	https://deploy-preview-4388--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

…atch Figma design

- Added CSS variables for font sizes and line heights - Standardized typography across filter labels and options - Improved visual hierarchy with consistent font sizing - Enhanced spacing alignment with refined margin-top values - Applied consistent letter-spacing and line-height for better readability

- Updated date input to use CSS module class for consistent styling - Added hover states for all interactive filter elements - Enhanced visual feedback with accent-color for radio/checkbox inputs - Added box-sizing border-box for consistent sizing - Improved label hover states for better user experience - Ensured all filter inputs have consistent styling and behavior

- Replaced form labels with divs for section headers (Dates, Online) - Improved vertical alignment of radio buttons and checkboxes with labels - Added white-space: nowrap to prevent text wrapping - Enhanced alignment consistency with vertical-align: middle - Fixed checkbox label structure for proper semantic HTML - Refined spacing variables for precise Figma matching

sonarqubecloud · 2025-11-16T06:29:01Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

…esolve conflicts in CPDashboard

HemanthNidamanuru

Hi,

I tested this PR locally. The radio buttons and checkbox should be on the left side of the labels, and the “Online Only” text is not aligned in the same row as the checkbox. Could you please check this?

Anusha-Gali

Hi Siva,

I have reviewed your PR locally and mentioned by the other reviewer "Online Only" is not aligned as per requirement, else the application UI is as per requirement.

…r-alignment-figma-match-clean

…ix-filter-alignment-figma-match-clean" This reverts commit d4ab1d7, reversing changes made to fd567a4.

rohanrastogi311

Hi Siva,

Well done with this implementation.

- Move Dates/Online section headers to divs; align radio/checkbox with labels - Give radio and checkbox explicit size (18px) and gap to prevent overlap - Override Bootstrap form-check positioning so flex layout controls spacing - Online Only uses FormGroup+Label for consistent alignment with date options

Resolved conflicts: - CPDashboard.jsx: removed duplicate Show Past Events block (keep header button only) - CPDashboard.module.css: kept filter alignment/overlap fix, merged development styles, removed duplicate selectors - ActivityComments.jsx: use feedbackSearchInput class for feedback search input

- Override display: inline for filter option labels so they stay beside control - Add flex-wrap: nowrap to checkboxGroup to prevent wrapping

Vishnu10-hub

Hi Siva,

Checked the PR locally, everything looks correct and well-implemented.

…r-alignment-figma-match-clean # Conflicts: # package.json # public/index.css # src/actions/bmdashboard/equipmentActions.js # src/components/ApplicantVolunteerRatio/ApplicantVolunteerRatio.jsx # src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.jsx # src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.module.css # src/components/BMDashboard/Tools/SimpleToolChart.jsx # src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.jsx # src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.module.css # src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx # src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css # src/components/Collaboration/Collaboration.jsx # src/components/Collaboration/Collaboration.module.css # src/components/Collaboration/JobFormbuilder.jsx # src/components/Collaboration/QuestionSetManager.jsx # src/components/CommunityPortal/Activities/ActivityList.jsx # src/components/CommunityPortal/Activities/ActivityList.module.css # src/components/CommunityPortal/Activities/activityId/ResourcesUsage.jsx # src/components/CommunityPortal/CPDashboard.module.css # src/components/CommunityPortal/EventPersonalization/EventStats.jsx # src/components/CommunityPortal/EventPersonalization/EventStats.module.css # src/components/HGNHelpSkillsDashboard/CommunityMembersPage.jsx # src/components/HGNHelpSkillsDashboard/TeamCard/TeamCard.jsx # src/components/HGNHelpSkillsDashboard/TeamCard/TeamCard.module.css # src/components/HGNHelpSkillsDashboard/TeamCard/TeamMemberRow.jsx # src/components/HGNSkillsDashboard/SkillsProfilePage/components/ProfileDetails.jsx # src/components/HGNSkillsDashboard/SkillsProfilePage/styles/Skills.module.css # src/components/LBDashboard/Messaging/LBMessaging.module.css # src/components/PRGradingScreen/PRGradingScreen.jsx # src/components/PRGradingScreen/PRGradingScreen.module.css # src/components/Projects/WBS/SingleTask/SingleTask.jsx # src/components/TeamMemberTasks/TeamMemberTask.jsx # src/components/TeamMemberTasks/style.module.css # src/components/UserProfile/TeamsAndProjects/AddProjectPopup.jsx # src/components/UserProfile/TeamsAndProjects/AddTeamPopup.jsx # src/components/WeeklySummariesReport/WeeklySummariesReport.jsx # src/components/WeeklySummariesReport/WeeklySummariesReport.module.css # src/routes.jsx # src/utils/URL.js # yarn.lock

… mismatch

…narQube

sonarqubecloud · 2026-04-12T01:20:24Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

one-community · 2026-04-12T04:31:46Z

Thank you all, merging!

pavanputti added 2 commits November 14, 2025 01:06

Set up CSS structure for filter alignment to match Figma design

e5bd09d

Set up CSS structure for filter alignment to match Figma design

fe8b4dc

pavanputti added DO NOT MERGE Don't merge PR do not review Do not review or look at code without full context and removed DO NOT MERGE Don't merge PR labels Nov 14, 2025

pavanputti added 5 commits November 14, 2025 18:47

Align filter options with consistent indentation to match Figma design

903d2c6

Merge commit 2: Align filter options with consistent indentation to m…

3202d79

…atch Figma design

pavanputti added Medium Priority and removed do not review Do not review or look at code without full context labels Nov 22, 2025

pavanputti changed the title ~~Set up CSS structure for filter alignment to match Figma design~~ Siva - Fix Dates and Online Filters” Misalignment Feb 1, 2026

pavanputti force-pushed the siva/fix-filter-alignment-figma-match-clean branch 2 times, most recently from d3a0d4e to 67c2c99 Compare February 22, 2026 01:03

Merge development into siva/fix-filter-alignment-figma-match-clean, r…

fd567a4

…esolve conflicts in CPDashboard

pavanputti force-pushed the siva/fix-filter-alignment-figma-match-clean branch from 67c2c99 to fd567a4 Compare February 22, 2026 01:05

one-community added High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible and removed Medium Priority labels Mar 8, 2026

HemanthNidamanuru requested changes Mar 10, 2026

View reviewed changes

Anusha-Gali suggested changes Mar 11, 2026

View reviewed changes

pavanputti added 2 commits March 14, 2026 15:37

Merge remote-tracking branch 'origin/development' into siva/fix-filte…

d4ab1d7

…r-alignment-figma-match-clean

Revert "Merge remote-tracking branch 'origin/development' into siva/f…

6bc533f

…ix-filter-alignment-figma-match-clean" This reverts commit d4ab1d7, reversing changes made to fd567a4.

rohanrastogi311 previously approved these changes Mar 15, 2026

View reviewed changes

pavanputti dismissed rohanrastogi311’s stale review via 69a45a6 March 15, 2026 04:43

pavanputti added 2 commits March 14, 2026 21:45

Fix Online Only alignment: keep label on same row as checkbox

30f1fc2

- Override display: inline for filter option labels so they stay beside control - Add flex-wrap: nowrap to checkboxGroup to prevent wrapping

Vishnu10-hub approved these changes Mar 20, 2026

View reviewed changes

pavanputti added 4 commits April 11, 2026 18:31

chore: revert unintended files to match development

5a19cfd

fix(CPDashboard): resolve Dates and Online filter misaligned Figma UI…

fd0e17e

… mismatch

fix(CPDashboard): remove duplicate .dateFilter selector satisfying So…

c82b93d

…narQube

one-community merged commit c59adcb into development Apr 12, 2026
10 checks passed

one-community mentioned this pull request Apr 16, 2026

Frontend Release to Main [4.85] #5160

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Siva - Fix Dates and Online Filters” Misalignment#4388

Siva - Fix Dates and Online Filters” Misalignment#4388
one-community merged 17 commits intodevelopmentfrom
siva/fix-filter-alignment-figma-match-clean

pavanputti commented Nov 14, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 14, 2025 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Nov 16, 2025

Uh oh!

HemanthNidamanuru left a comment

Uh oh!

Anusha-Gali left a comment

Uh oh!

rohanrastogi311 left a comment •

edited

Loading

Uh oh!

Vishnu10-hub left a comment •

edited

Loading

Uh oh!

sonarqubecloud bot commented Apr 12, 2026

Uh oh!

one-community commented Apr 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

pavanputti commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Uh oh!

netlify bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

sonarqubecloud bot commented Nov 16, 2025

Quality Gate passed

Uh oh!

HemanthNidamanuru left a comment

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

rohanrastogi311 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Vishnu10-hub left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Apr 12, 2026

Quality Gate passed

Uh oh!

one-community commented Apr 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

pavanputti commented Nov 14, 2025 •

edited

Loading

netlify bot commented Nov 14, 2025 •

edited

Loading

rohanrastogi311 left a comment •

edited

Loading

Vishnu10-hub left a comment •

edited

Loading