Skip to content

fix: (8)-refactored global style sheet #6376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Piyush-Goenka wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix: (8)-refactored global style sheet #6376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions src/screens/AdminPortal/OrganizationPeople/OrganizationPeople.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
.tableHeader {
background-color: var(--color-red-500);
font-weight: var(--font-weight-bold);
}

.eventsAttended,
.membername {
color: var(--color-blue-200);
}

.membername {
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-blue-200);
text-decoration: none;
}

.membername:hover {
color: var(--color-blue-500);
text-decoration: underline;
}
Comment on lines +6 to +21
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 13, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Remove redundant color declaration in .membername.

The color: var(--color-blue-200) property is declared twice: once in the combined selector (line 8) and again in the .membername individual selector (line 14). This duplication is unnecessary and mirrors the same issue in AddMember.module.css.

♻️ Proposed fix to eliminate redundancy 
 .eventsAttended,
 .membername {
   color: var(--color-blue-200);
 }

 .membername {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
-  color: var(--color-blue-200);
   text-decoration: none;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.eventsAttended,
.membername {
color: var(--color-blue-200);
}
.membername {
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-blue-200);
text-decoration: none;
}
.membername:hover {
color: var(--color-blue-500);
text-decoration: underline;
}
.eventsAttended,
.membername {
color: var(--color-blue-200);
}
.membername {
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
text-decoration: none;
}
.membername:hover {
color: var(--color-blue-500);
text-decoration: underline;
}
🤖 Prompt for AI Agents 
In @src/screens/AdminPortal/OrganizationPeople/OrganizationPeople.module.css
around lines 6 - 21, The CSS has a redundant color declaration for .membername
(also declared in the combined selector .eventsAttended, .membername); remove
the duplicate color: var(--color-blue-200) from the .membername rule and leave
the shared color in the combined selector, keeping the .membername block’s
font-size, font-weight and text-decoration rules and the .membername:hover rule
unchanged.


.subtleBlueGrey {
color: var(--color-blue-200);
}

.subtleBlueGrey:hover {
color: var(--color-blue-500);
}

.removeButton {
margin-bottom: var(--space-5);
background-color: var(--color-red-100);
color: var(--color-red-500);
margin-right: var(--space-5);
--bs-btn-border-color: var(--color-red-100);
}

.removeButton:is(:hover, :active, :focus) {
background-color: var(--color-red-500);
border-color: var(--color-red-500);
color: var(--color-white);
}

.calendar__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
width: 100%;
gap: var(--space-5);
}

@media (max-width: 768px) {
.calendar__header {
flex-wrap: wrap;
}
}

.flexCenter {
display: flex;
align-items: center;
justify-content: center;
}

.flexColumn {
flex-direction: column;
}

.fullWidthHeight {
width: 100%;
height: 100%;
}

.avatarImage {
object-fit: cover;
border-radius: var(--radius-full);
width: var(--avatar-size, var(--logo-xs));
height: var(--avatar-size, var(--logo-xs));
}

.avatarPlaceholder {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background-color: var(--color-gray-50);
}

.avatarPlaceholderSize {
width: var(--avatar-size, var(--logo-xs));
height: var(--avatar-size, var(--logo-xs));
}

.memberNameFontSize {
font-size: var(--font-size-md);
}
2 changes: 1 addition & 1 deletion src/screens/AdminPortal/OrganizationPeople/OrganizationPeople.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
import { Delete } from '@mui/icons-material';
import { PAGE_SIZE } from 'types/ReportingTable/utils';

import styles from 'style/app-fixed.module.css';
import styles from './OrganizationPeople.module.css';
import {
ORGANIZATIONS_MEMBER_CONNECTION_LIST,
USER_LIST_FOR_TABLE,
Expand Down
152 changes: 152 additions & 0 deletions src/screens/AdminPortal/OrganizationPeople/addMember/AddMember.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
.modalContent :global(.modal-dialog) {
width: var(--space-26);
max-width: var(--space-26);
}

.input {
flex: 1;
position: relative;
padding-right: var(--space-26);
padding-inline-end: var(--space-26);
width: var(--space-24);
}

.input:active {
box-shadow: var(--border-shadow-xs) var(--border-shadow-xs)
var(--border-shadow-xs) rgba(0, 0, 0, 0.3);

background-color: var(--color-blue-200);
border-color: var(--color-gray-200);
color: var(--color-gray-700);
}
Comment on lines +14 to +21
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 13, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Consider design tokens for hardcoded shadow colors.

The box-shadow declarations use hardcoded rgba() values (lines 16, 25, 130, 132) instead of design tokens. While this is acceptable for the current CSS migration phase, consider creating color tokens for shadow colors in a future refactor to fully align with the design token system.

Example locations:

  • Line 16: rgba(0, 0, 0, 0.3)
  • Line 25: rgba(0, 0, 0, 0.3)
  • Line 130: rgba(168, 199, 250, 1)
  • Line 132: rgba(60, 64, 67, 0.15)

Based on learnings, this is acceptable for CSS migration PRs focused on moving styles to colocated modules. Full token adoption can be completed in a subsequent phase.

Also applies to: 23-28, 124-134

🤖 Prompt for AI Agents 
In @src/screens/AdminPortal/OrganizationPeople/addMember/AddMember.module.css
around lines 14 - 21, The .input:active selector (and similar rules in this
module) uses hardcoded rgba() shadow colors (e.g., rgba(0,0,0,0.3),
rgba(168,199,250,1), rgba(60,64,67,0.15)); replace those literal colors with
design token variables (create tokens like --shadow-color-xs,
--shadow-color-blue, --shadow-color-muted or use existing token names) and
update the box-shadow declarations in the .input:active rule and the other
occurrences noted (around the other box-shadow rules in this file) to reference
those tokens so shadows are driven by design tokens for a future refactor.


.input:focus-within {
box-shadow: var(--border-shadow-xs) var(--border-shadow-xs)
var(--border-shadow-xs) rgba(0, 0, 0, 0.3);

border-color: var(--color-gray-200);
}

.tableHeadCell {
background-color: var(--color-gray-100);
color: var(--color-gray-700);
}

.tableBodyCell {
font-size: var(--font-size-sm);
}

.tableRow:last-child td,
.tableRow:last-child th {
border: 0;
}

.TableImage {
object-fit: cover;
margin-right: var(--space-2);
width: var(--space-10);
height: var(--space-10);
border-radius: var(--radius-full);
}

.eventsAttended,
.membername {
color: var(--color-blue-200);
}

.membername {
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-blue-200);
text-decoration: none;
}
Comment on lines +52 to +62
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 13, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Remove redundant color declaration in .membername.

The color: var(--color-blue-200) property is declared twice: once in the combined selector (line 54) and again in the .membername individual selector (line 60). This duplication is unnecessary.

♻️ Proposed fix to eliminate redundancy 
 .eventsAttended,
 .membername {
   color: var(--color-blue-200);
 }

 .membername {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
-  color: var(--color-blue-200);
   text-decoration: none;
 }
🤖 Prompt for AI Agents 
In @src/screens/AdminPortal/OrganizationPeople/addMember/AddMember.module.css
around lines 52 - 62, The CSS has a duplicated color declaration for .membername
(it's set in the combined selector .eventsAttended, .membername and again in
.membername); remove the redundant color: var(--color-blue-200) from the
.membername block so the color is only declared once in the combined selector,
leaving font-size/font-weight/text-decoration in .membername unchanged.


.membername:hover {
color: var(--color-blue-500);
text-decoration: underline;
}

.subtleBlueGrey {
color: var(--color-blue-200);
}

.subtleBlueGrey:hover {
color: var(--color-blue-500);
}

.addButton {
margin-bottom: var(--space-5);
color: var(--color-gray-700);
background-color: var(--color-blue-200);
border-color: var(--color-blue-200);
--bs-btn-focus-box-shadow: none;
}

.addButton:is(:hover, :active, :focus) {
background-color: var(--color-blue-500);
border-color: var(--color-gray-700);
}

.addButton:disabled {
margin-bottom: var(--space-5);
}

.headers {
border: none;
background-color: var(--color-white);
padding: var(--space-5);
color: var(--color-black);
}

.headers :global(.modal-title) {
color: var(--color-gray-700);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-xl);
}

.headers :global(button.close),
.headers :global(.btn-close) {
color: var(--color-red-500);
opacity: 1;
}

.borderNone {
border: none;
}

.colorPrimary {
background: var(--color-blue-200);
color: var(--color-gray-700);
--bs-btn-active-bg: var(--color-blue-200);
cursor: pointer;
}

.colorPrimary:hover,
.colorPrimary:focus,
.colorPrimary:active {
background-color: var(--color-blue-200);
box-shadow:
0 var(--shadow-offset-xs) var(--shadow-blur-sm) var(--shadow-spread-none)
rgba(168, 199, 250, 1),
0 var(--shadow-offset-md) var(--shadow-blur-lg) var(--shadow-spread-sm)
rgba(60, 64, 67, 0.15);
color: var(--color-gray-700);
}

.colorWhite {
color: var(--color-gray-700);
}

.removeButton {
margin-bottom: var(--space-5);
background-color: var(--color-red-100);
color: var(--color-red-500);
margin-right: var(--space-5);
--bs-btn-border-color: var(--color-red-100);
}

.removeButton:is(:hover, :active, :focus) {
background-color: var(--color-red-500);
border-color: var(--color-red-500);
color: var(--color-white);
}
2 changes: 1 addition & 1 deletion src/screens/AdminPortal/OrganizationPeople/addMember/AddMember.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ import { Link, useParams } from 'react-router';
import { NotificationToast } from 'components/NotificationToast/NotificationToast';
import { errorHandler } from 'utils/errorHandler';
import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
import styles from 'style/app-fixed.module.css';
import styles from './AddMember.module.css';
import Avatar from 'shared-components/Avatar/Avatar';
import { TablePagination } from '@mui/material';
import PageHeader from 'shared-components/Navbar/Navbar';
Expand Down
Loading
Loading