Skip to content

Roshini Seelamsetty : Fix fixing the Teams UI#5174

Open
roshini1212 wants to merge 1 commit intodevelopmentfrom
Roshini_Fixing_The_Teams_UI
Open

Roshini Seelamsetty : Fix fixing the Teams UI#5174
roshini1212 wants to merge 1 commit intodevelopmentfrom
Roshini_Fixing_The_Teams_UI

Conversation

@roshini1212
Copy link
Copy Markdown

Description

Screenshot 2026-04-18 at 22 12 31 Screenshot 2026-04-18 at 22 13 33

Related PRS (if any):

Related to PRs #2416, #2838, #2736

Main changes explained:

  • Updated TeamsOverview.jsx to accept darkMode prop and apply conditional styling
  • Updated TeamsOverview.module.css to add responsive media queries and dark mode styles for the top 3 stat cards
  • Updated TeamTableHeader.module.css to add responsive font sizing for the Team Names column
  • Updated Teams.jsx to pass darkMode prop to TeamOverview component

How to test:

  1. Check into branch Roshini_Fixing_The_Teams_UI

  2. Run npm install to install dependencies, then run the app locally (npm start)

  3. Clear site data/cache

  4. Log as admin/owner user

  5. Go to admin/owner profile → Other Links → Teams

  6. Verify responsive behavior:

    • At 768px and below: text in top 3 cards should be reduced in size and cards stack vertically
    • At 575px and below: Team Names column font size should be reduced
    • Toggle dark mode: overview cards should display with dark theme colors

Screenshots or videos of changes:

Screen.Recording.2026-04-18.at.21.58.40.mov
Screen.Recording.2026-04-18.at.22.01.04.mov

- Reduce text size in top 3 stat cards at 768px and below to prevent overflow
- Reduce Team Names column font size at 575px and below
- Implement dark mode for the Teams page

Related PRs: #2416, #2838, #2736
@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 21, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 7738113
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e6da976b4e9e0007ae5d3d
😎 Deploy Preview https://deploy-preview-5174--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.

@sonarqubecloud
Copy link
Copy Markdown

@roshini1212 roshini1212 changed the title (PRIORITY HIGH) Jae: Fix fixing the Teams UI Roshini Seelamsetty : Fix fixing the Teams UI Apr 24, 2026
@one-community one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Apr 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants