Skip to content
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

changed color schema for the tag and action item screen #2417

Merged
merged 3 commits into from
Nov 14, 2024
Merged

changed color schema for the tag and action item screen #2417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08e90a5
changed color schema for the tag and action item screen
AVtheking Nov 10, 2024
ee2d032
subtag screen color schema changes
AVtheking Nov 10, 2024
ddd9958
changes
AVtheking Nov 13, 2024
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
19 changes: 13 additions & 6 deletions src/screens/ManageTag/ManageTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { FormEvent } from 'react';
import React, { useEffect, useState } from 'react';
import { useMutation, useQuery } from '@apollo/client';
import { WarningAmberRounded } from '@mui/icons-material';
import { Search, WarningAmberRounded } from '@mui/icons-material';
import SortIcon from '@mui/icons-material/Sort';
import Loader from 'components/Loader/Loader';
import IconComponent from 'components/IconComponent/IconComponent';
Expand All @@ -13,7 +13,7 @@ import Row from 'react-bootstrap/Row';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import type { InterfaceQueryUserTagsAssignedMembers } from 'utils/interfaces';
import styles from './ManageTag.module.css';
import styles from '../../style/app.module.css';
import { DataGrid } from '@mui/x-data-grid';
import type {
InterfaceTagAssignedMembersQuery,
Expand Down Expand Up @@ -356,18 +356,24 @@ function ManageTag(): JSX.Element {
<div className={styles.mainpageright}>
<div className={styles.btnsContainer}>
<div className={styles.input}>
<i className="fa fa-search position-absolute text-body-tertiary end-0 top-50 translate-middle" />
<Form.Control
type="text"
id="userName"
className="bg-white"
className={`${styles.inputField} `}
placeholder={tCommon('searchByName')}
onChange={(e) =>
setAssignedMemberSearchInput(e.target.value.trim())
}
data-testid="searchByName"
autoComplete="off"
/>
<Button
tabIndex={-1}
className={styles.searchButton}
data-testid="searchBtn"
>
<Search />
</Button>
</div>
<div className={styles.btnsBlock}>
<Dropdown
Expand All @@ -378,6 +384,7 @@ function ManageTag(): JSX.Element {
<Dropdown.Toggle
variant="outline-success"
data-testid="sortPeople"
className={styles.dropdown}
>
<SortIcon className={'me-1'} />
{assignedMemberSortOrder === 'DESCENDING'
Expand All @@ -402,7 +409,7 @@ function ManageTag(): JSX.Element {
<Button
variant="success"
onClick={() => redirectToSubTags(currentTagId as string)}
className="mx-4"
className={`${styles.createButton} mb-2`}
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Enhance button accessibility with additional visual cues.

Relying solely on colors (success/danger) for button states may not be sufficient for color-blind users. Consider adding icons or patterns to complement the color indicators.

-<Button
-  variant="success"
-  className={`${styles.createButton} mb-2`}
->
+<Button
+  variant="success"
+  className={`${styles.createButton} mb-2 ${styles.accessibleButton}`}
+  aria-label="Create Sub Tags"
+>
+  <i className="fa fa-folder-plus me-2" aria-hidden="true" />
   {t('subTags')}
 </Button>

Similar changes should be applied to other action buttons to ensure consistent accessibility improvements.

Also applies to: 422-422

data-testid="subTagsBtn"
>
{t('subTags')}
Expand All @@ -412,7 +419,7 @@ function ManageTag(): JSX.Element {
variant="success"
onClick={showAddPeopleToTagModal}
data-testid="addPeopleToTagBtn"
className="ms-auto"
className={`${styles.createButton} mb-2 ms-3`}
>
<i className={'fa fa-plus me-2'} />
{t('addPeopleToTag')}
Expand Down
6 changes: 3 additions & 3 deletions src/screens/OrganizationActionItems/ItemModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
import { Modal, Form, Button } from 'react-bootstrap';
import type { ChangeEvent, FC } from 'react';
import styles from './OrganizationActionItems.module.css';
import styles from '../../style/app.module.css';
import { DatePicker } from '@mui/x-date-pickers';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
Expand Down Expand Up @@ -379,7 +379,7 @@ const ItemModal: FC<InterfaceItemModalProps> = ({
<Button
variant="danger"
onClick={hide}
className={styles.modalCloseBtn}
className={styles.closeButton}
data-testid="modalCloseBtn"
>
<i className="fa fa-times"></i>
Expand Down Expand Up @@ -634,7 +634,7 @@ const ItemModal: FC<InterfaceItemModalProps> = ({

<Button
type="submit"
className={styles.greenregbtn}
className={styles.addButton}
data-testid="submitBtn"
>
{editMode ? t('updateActionItem') : t('createActionItem')}
Expand Down
6 changes: 3 additions & 3 deletions src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { type FC, type FormEvent, useEffect, useState } from 'react';
import { Modal, Button, Form } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { FormControl, TextField } from '@mui/material';
import styles from './OrganizationActionItems.module.css';
import styles from '../../style/app.module.css';
import { useMutation } from '@apollo/client';
import { UPDATE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/ActionItemMutations';
import { toast } from 'react-toastify';
Expand Down Expand Up @@ -89,7 +89,7 @@ const ItemUpdateStatusModal: FC<InterfaceItemUpdateStatusModalProps> = ({
<Button
variant="danger"
onClick={hide}
className={styles.modalCloseBtn}
className={styles.closeButton}
data-testid="modalCloseBtn"
>
<i className="fa fa-times"></i>
Expand Down Expand Up @@ -123,7 +123,7 @@ const ItemUpdateStatusModal: FC<InterfaceItemUpdateStatusModalProps> = ({
) : (
<Button
type="submit"
className={styles.greenregbtn}
className={styles.addButton}
data-testid="createBtn"
>
{t('markCompletion')}
Expand Down
2 changes: 1 addition & 1 deletion src/screens/OrganizationActionItems/OrganizationActionItems.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.actionItemsContainer {
actionItemsContainer {
height: 90vh;
}

Expand Down
61 changes: 31 additions & 30 deletions src/screens/OrganizationActionItems/OrganizationActionItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import type {
InterfaceActionItemInfo,
InterfaceActionItemList,
} from 'utils/interfaces';
import styles from './OrganizationActionItems.module.css';
import styles from '../../style/app.module.css';
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

Migration to app.module.css needs attention - other components still using local styles

Several components are still importing the local OrganizationActionItems.module.css:

  • src/screens/Leaderboard/Leaderboard.tsx
  • src/screens/UserPortal/Volunteer/Actions/Actions.tsx
  • src/screens/OrganizationActionItems/ItemViewModal.tsx
  • src/screens/OrganizationActionItems/ItemDeleteModal.tsx

These components should also be updated to use the global app.module.css for consistent color scheme and accessibility improvements.

🔗 Analysis chain

LGTM! Verify style consistency across components.

Moving to a global style module aligns with the PR's goal of standardizing color schemes for better accessibility.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for consistent style module usage across components
# Look for any remaining local style modules that might need migration
rg -g '*.tsx' -g '*.jsx' "from.*OrganizationActionItems\.module\.css"

Length of output: 2034

Script:

#!/bin/bash
# Check for any remaining imports of OrganizationActionItems.module.css
rg "from.*OrganizationActionItems\.module\.css"

# Check current imports of app.module.css
rg "from.*app\.module\.css"

# Check the contents of app.module.css to verify if it contains the necessary styles
cat src/style/app.module.css

Length of output: 10671

import Loader from 'components/Loader/Loader';
import {
DataGrid,
Expand All @@ -46,27 +46,6 @@ enum ModalState {
STATUS = 'status',
}

const dataGridStyle = {
'&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
outline: 'none !important',
},
'&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
outline: 'none',
},
'& .MuiDataGrid-row:hover': {
backgroundColor: 'transparent',
},
'& .MuiDataGrid-row.Mui-hovered': {
backgroundColor: 'transparent',
},
'& .MuiDataGrid-root': {
borderRadius: '0.5rem',
},
'& .MuiDataGrid-main': {
borderRadius: '0.5rem',
},
};

/**
* Component for managing and displaying action items within an organization.
*
Expand Down Expand Up @@ -328,10 +307,10 @@ function organizationActionItems(): JSX.Element {
return (
<>
<Button
variant="success"
// variant="success"
size="sm"
style={{ minWidth: '32px' }}
className="me-2 rounded"
className={styles.infoButton}
data-testid={`viewItemBtn${params.row.id}`}
onClick={() => handleModalClick(params.row, ModalState.VIEW)}
>
Expand All @@ -340,7 +319,7 @@ function organizationActionItems(): JSX.Element {
<Button
variant="success"
size="sm"
className="me-2 rounded"
className={styles.infoButton}
data-testid={`editItemBtn${params.row.id}`}
onClick={() => handleModalClick(params.row, ModalState.SAME)}
>
Expand All @@ -349,7 +328,7 @@ function organizationActionItems(): JSX.Element {
<Button
size="sm"
variant="danger"
className="rounded"
className={styles.actionItemDeleteButton}
data-testid={`deleteItemBtn${params.row.id}`}
onClick={() => handleModalClick(params.row, ModalState.DELETE)}
>
Expand All @@ -374,6 +353,7 @@ function organizationActionItems(): JSX.Element {
<Form.Check
type="checkbox"
data-testid={`statusCheckbox${params.row.id}`}
className={styles.checkboxButton}
checked={params.row.isCompleted}
onChange={() => handleModalClick(params.row, ModalState.STATUS)}
/>
Expand Down Expand Up @@ -405,8 +385,7 @@ function organizationActionItems(): JSX.Element {
/>
<Button
tabIndex={-1}
className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
style={{ marginBottom: '10px' }}
className={styles.searchButton}
data-testid="searchBtn"
>
<Search />
Expand Down Expand Up @@ -500,7 +479,7 @@ function organizationActionItems(): JSX.Element {
<Button
variant="success"
onClick={() => handleModalClick(null, ModalState.SAME)}
style={{ marginTop: '11px' }}
className={styles.createButton}
data-testid="createActionItemBtn"
>
<i className={'fa fa-plus me-2'} />
Expand All @@ -523,7 +502,29 @@ function organizationActionItems(): JSX.Element {
</Stack>
),
}}
sx={dataGridStyle}
sx={{
borderRadius: '20px',
backgroundColor: 'EAEBEF)',
'& .MuiDataGrid-row': {
backgroundColor: '#eff1f7',
'&:focus-within': {
// outline: '2px solid #000',
outlineOffset: '-2px',
},
},
'& .MuiDataGrid-row:hover': {
backgroundColor: '#EAEBEF',
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
},
'& .MuiDataGrid-row.Mui-hovered': {
backgroundColor: '#EAEBEF',
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
},
'& .MuiDataGrid-cell:focus': {
// outline: '2px solid #000',
// outlineOffset: '-2px',
},
}}
Comment on lines +505 to +527
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider enhancing keyboard navigation accessibility.

While the styling changes improve visual hierarchy, there are some concerns:

  1. Focus outlines are commented out, which may impact keyboard navigation accessibility
  2. Color contrast between rows (#eff1f7) and hover state (#EAEBEF) might be subtle for some users

Consider these improvements:

 sx={{
   borderRadius: '20px',
   backgroundColor: 'EAEBEF)',
   '& .MuiDataGrid-row': {
     backgroundColor: '#eff1f7',
     '&:focus-within': {
-      // outline: '2px solid #000',
+      outline: '2px solid #1976d2',
       outlineOffset: '-2px',
     },
   },
   '& .MuiDataGrid-row:hover': {
     backgroundColor: '#EAEBEF',
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+    boxShadow: '0 0 0 2px #1976d2',
   },
   '& .MuiDataGrid-cell:focus': {
-    // outline: '2px solid #000',
-    // outlineOffset: '-2px',
+    outline: '2px solid #1976d2',
+    outlineOffset: '-2px',
   },
 }}
📝 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
sx={{
borderRadius: '20px',
backgroundColor: 'EAEBEF)',
'& .MuiDataGrid-row': {
backgroundColor: '#eff1f7',
'&:focus-within': {
// outline: '2px solid #000',
outlineOffset: '-2px',
},
},
'& .MuiDataGrid-row:hover': {
backgroundColor: '#EAEBEF',
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
},
'& .MuiDataGrid-row.Mui-hovered': {
backgroundColor: '#EAEBEF',
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
},
'& .MuiDataGrid-cell:focus': {
// outline: '2px solid #000',
// outlineOffset: '-2px',
},
}}
sx={{
borderRadius: '20px',
backgroundColor: 'EAEBEF)',
'& .MuiDataGrid-row': {
backgroundColor: '#eff1f7',
'&:focus-within': {
outline: '2px solid #1976d2',
outlineOffset: '-2px',
},
},
'& .MuiDataGrid-row:hover': {
backgroundColor: '#EAEBEF',
boxShadow: '0 0 0 2px #1976d2',
},
'& .MuiDataGrid-row.Mui-hovered': {
backgroundColor: '#EAEBEF',
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
},
'& .MuiDataGrid-cell:focus': {
outline: '2px solid #1976d2',
outlineOffset: '-2px',
},
}}

getRowClassName={() => `${styles.rowBackground}`}
autoHeight
rowHeight={65}
Expand Down
3 changes: 2 additions & 1 deletion src/screens/OrganizationPeople/AddMember.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,8 +417,9 @@ function AddMember(): JSX.Element {
createMember(userDetails.user._id);
}}
data-testid="addBtn"
className={styles.searchButton}
className={styles.addButton}
>
<i className={'fa fa-plus me-2'} />
Add
</Button>
</StyledTableCell>
Expand Down
2 changes: 1 addition & 1 deletion src/screens/OrganizationPeople/OrganizationPeople.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ function organizationPeople(): JSX.Element {
/>
<Button
type="submit"
className={`${styles.searchButton} position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
className={`${styles.searchButton} `}
data-testid={'searchbtn'}
>
<Search className={styles.searchIcon} />
Expand Down
Loading
Loading