From 08e90a5fcbb2bae54461d543cac5bd88d5de294d Mon Sep 17 00:00:00 2001 From: Ankit varsheny Date: Sun, 10 Nov 2024 19:02:13 +0530 Subject: [PATCH 1/3] changed color schema for the tag and action item screen --- .../OrganizationActionItems/ItemModal.tsx | 6 +- .../ItemUpdateStatusModal.tsx | 6 +- .../OrganizationActionItems.module.css | 291 ----------------- .../OrganizationActionItems.tsx | 61 ++-- src/screens/OrganizationPeople/AddMember.tsx | 3 +- .../OrganizationPeople/OrganizationPeople.tsx | 2 +- .../OrganizationTags.module.css | 150 --------- .../OrganizationTags/OrganizationTags.tsx | 71 +++-- src/style/app.module.css | 294 +++++++++++++++++- 9 files changed, 374 insertions(+), 510 deletions(-) delete mode 100644 src/screens/OrganizationActionItems/OrganizationActionItems.module.css delete mode 100644 src/screens/OrganizationTags/OrganizationTags.module.css diff --git a/src/screens/OrganizationActionItems/ItemModal.tsx b/src/screens/OrganizationActionItems/ItemModal.tsx index a66052d25a..b7555af121 100644 --- a/src/screens/OrganizationActionItems/ItemModal.tsx +++ b/src/screens/OrganizationActionItems/ItemModal.tsx @@ -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'; @@ -379,7 +379,7 @@ const ItemModal: FC = ({ diff --git a/src/screens/OrganizationPeople/OrganizationPeople.tsx b/src/screens/OrganizationPeople/OrganizationPeople.tsx index 849135f120..36efdba63c 100644 --- a/src/screens/OrganizationPeople/OrganizationPeople.tsx +++ b/src/screens/OrganizationPeople/OrganizationPeople.tsx @@ -296,7 +296,7 @@ function organizationPeople(): JSX.Element { /> +
+ +
{orgUserTagsLoading || createUserTagLoading ? ( ) : (
-
-
- -
- -
- {'Tags'} -
-
-
), }} - sx={dataGridStyle} + sx={{ + borderRadius: '20px', + backgroundColor: 'var(--tablerow-bg-color)', + '& .MuiDataGrid-row': { + backgroundColor: 'var(--tablerow-bg-color', + '&: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', + }, + }} getRowClassName={() => `${styles.rowBackground}`} autoHeight rowHeight={65} @@ -427,11 +438,11 @@ function OrganizationTags(): JSX.Element { centered > - {t('tagDetails')} + {t('tagDetails')}
@@ -456,6 +467,7 @@ function OrganizationTags(): JSX.Element { variant="secondary" onClick={(): void => hideCreateTagModal()} data-testid="closeCreateTagModal" + className={styles.closeButton} > {tCommon('cancel')} @@ -463,6 +475,7 @@ function OrganizationTags(): JSX.Element { type="submit" value="invite" data-testid="createTagSubmitBtn" + className={styles.addButton} > {tCommon('create')} diff --git a/src/style/app.module.css b/src/style/app.module.css index 3196965193..19b9ea183d 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -1,6 +1,8 @@ :root { --dropdown-border-color: #555555; --dropdown-text-color: #555555; + --dropdown-hover-color: #eff1f7; + --grey-bg-color: #eaebef; --subtle-blue-grey: #7c9beb; --subtle-blue-grey-hover: #5f7e91; --modal-width: 670px; @@ -18,14 +20,31 @@ --table-head-color: white; --table-header-color: var(--bs-greyish-black, black); --table-head-radius: 20px; + --table-bg-color: #eaebef; + --tablerow-bg-color: #eff1f7; --row-background: var(--bs-white, white); --font-size-header: 16px; } +.noOutline input { + outline: none; +} + +.noOutline:is(:hover, :focus, :active, :focus-visible, .show) { + outline: none !important; +} + .closeButton { color: var(--delete-button-color); margin-right: 5px; background-color: var(--delete-button-bg); + border: white; +} + +.closeButton:hover { + color: var(--delete-button-bg) !important; + background-color: var(--delete-button-color) !important; + border: white; } .modalContent { @@ -68,7 +87,7 @@ .dropdownItem:hover, .dropdownItem:focus, .dropdownItem:active { - background-color: white !important; + background-color: var(--dropdown-hover-color) !important; color: var(--dropdown-text-color) !important; outline: none !important; box-shadow: none !important; @@ -76,6 +95,7 @@ .input { flex: 1; + position: relative; } @@ -117,6 +137,26 @@ gap: 8px; } +.actionItemDeleteButton { + background-color: var(--delete-button-bg); + color: var(--delete-button-color); + border: none; +} + +.createButton { + background-color: var(--grey-bg-color) !important; + color: black !important; + margin-top: 10px; + margin-left: 5px; + border: 1px solid var(--dropdown-border-color); +} + +.createButton:hover { + background-color: var(--grey-bg-color) !important; + color: black !important; + border: 1px solid var(--dropdown-border-color) !important; +} + .visuallyHidden { position: absolute; width: 1px; @@ -150,7 +190,26 @@ margin-bottom: 10px; background-color: var(--search-button-bg); border-color: var(--search-button-border); + position: absolute; + z-index: 10; + bottom: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; } + +.addButton { + margin-bottom: 10px; + background-color: var(--search-button-bg); + border-color: white; +} + +.addButton:hover { + background-color: #286fe0; + border-color: var(--search-button-border); +} + .yesButton { background-color: var(--search-button-bg); border-color: var(--search-button-border); @@ -160,9 +219,23 @@ color: var(--dropdown-text-color); } +.infoButton { + background-color: var(--search-button-bg); + border-color: var(--search-button-border); + color: var(--dropdown-text-color); + margin-right: 0.5rem; + border-radius: 0.25rem; +} + +.infoButton:hover { + background-color: #286fe0; + border-color: var(--search-button-border); +} + .TableImage { object-fit: cover; - margin-top: 15px !important; + /* margin-top: px !important; */ + margin-right: 5px; width: var(--table-image-size) !important; height: var(--table-image-size) !important; border-radius: 100% !important; @@ -193,6 +266,223 @@ font-size: var(--font-size-header); } +.orgUserTagsScrollableDiv { + scrollbar-width: auto; + scrollbar-color: var(--bs-gray-400) var(--bs-white); + + max-height: calc(100vh - 18rem); + overflow: auto; + position: sticky; +} + +.errorContainer { + min-height: 100vh; +} + +.errorMessage { + margin-top: 25%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.errorIcon { + transform: scale(1.5); + color: var(--bs-danger); + margin-bottom: 1rem; +} + +.subTagsLink { + color: var(--subtle-blue-grey); + font-weight: 500; + cursor: pointer; +} + +.subTagsLink i { + visibility: hidden; +} + +.subTagsLink:hover { + color: var(--subtle-blue-grey-hover); + font-weight: 600; + text-decoration: underline; +} + +.subTagsLink:hover i { + visibility: visible; +} + +.tagsBreadCrumbs { + color: var(--bs-gray); + cursor: pointer; +} + +.orgUserTagsScrollableDiv { + scrollbar-width: auto; + scrollbar-color: var(--bs-gray-400) var(--bs-white); + + max-height: calc(100vh - 18rem); + overflow: auto; + position: sticky; +} + +/* .checkboxButton{ + background-color: transparent; +} + +.checkboxButton:checked{ + background-color: var(--subtle-blue-grey); + color:white +} */ + +input[type='checkbox']:checked + label { + background-color: var(--subtle-blue-grey) !important; +} + +input[type='radio']:checked + label:hover { + color: black !important; +} + +.actionItemsContainer { + height: 90vh; +} + +.actionItemModal { + max-width: 80vw; + margin-top: 2vh; + margin-left: 13vw; +} + +.datediv { + display: flex; + flex-direction: row; +} + +.datebox { + width: 90%; + border-radius: 7px; + outline: none; + box-shadow: none; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 5px; + padding-left: 5px; + margin-right: 5px; + margin-left: 5px; +} + +hr { + border: none; + height: 1px; + background-color: var(--bs-gray-500); + margin: 1rem; +} + +.iconContainer { + display: flex; + justify-content: flex-end; +} +.icon { + margin: 1px; +} + +.message { + margin-top: 25%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.preview { + display: flex; + flex-direction: row; + font-weight: 900; + font-size: 16px; + color: rgb(80, 80, 80); +} + +.rankings { + aspect-ratio: 1; + border-radius: 50%; + width: 50px; +} + +.toggleGroup { + width: 50%; + min-width: 20rem; + margin: 0.5rem 0rem; +} + +.toggleBtn { + padding: 0rem; + height: 2rem; + display: flex; + justify-content: center; + align-items: center; +} + +.toggleBtn:hover { + color: var(--bs-primary) !important; +} + +@media (max-width: 520px) { + .btnsContainer { + margin-bottom: 0; + } + + .btnsContainer .btnsBlock { + display: block; + margin-top: 1rem; + margin-right: 0; + } + + .btnsContainer .btnsBlock div { + flex: 1; + } + + .btnsContainer .btnsBlock div[title='Sort organizations'] { + margin-right: 0.5rem; + } + + .btnsContainer .btnsBlock button { + margin-bottom: 1rem; + margin-right: 0; + width: 100%; + } +} + +@media (max-width: 1120px) { + .contract { + padding-left: calc(250px + 2rem + 1.5rem); + } + + .listBox .itemCard { + width: 100%; + } +} + +@media (max-width: 1020px) { + .btnsContainer { + flex-direction: column; + margin: 1.5rem 0; + } + + .btnsContainer .btnsBlock { + margin: 1.5rem 0 0 0; + justify-content: space-between; + } + + .btnsContainer .btnsBlock button { + margin: 0; + } + + .btnsContainer .btnsBlock div button { + margin-right: 1.5rem; + } +} + @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); From ee2d0324e28a208f247dfe01e300e64f45aea48a Mon Sep 17 00:00:00 2001 From: Ankit varsheny Date: Sun, 10 Nov 2024 20:26:23 +0530 Subject: [PATCH 2/3] subtag screen color schema changes --- .../OrganizationActionItems.module.css | 291 ++++++++++++++++++ .../OrganizationTags/OrganizationTags.tsx | 16 +- src/screens/SubTags/SubTags.tsx | 115 ++++--- src/style/app.module.css | 3 +- src/utils/organizationTagsUtils.ts | 2 +- 5 files changed, 372 insertions(+), 55 deletions(-) create mode 100644 src/screens/OrganizationActionItems/OrganizationActionItems.module.css diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css new file mode 100644 index 0000000000..ac86e19f3f --- /dev/null +++ b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css @@ -0,0 +1,291 @@ +actionItemsContainer { + height: 90vh; +} + +.actionItemModal { + max-width: 80vw; + margin-top: 2vh; + margin-left: 13vw; +} + +.datediv { + display: flex; + flex-direction: row; +} + +.datebox { + width: 90%; + border-radius: 7px; + outline: none; + box-shadow: none; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 5px; + padding-left: 5px; + margin-right: 5px; + margin-left: 5px; +} + +.dropdownToggle { + margin-bottom: 0; + display: flex; +} + +.dropdownModalToggle { + width: 50%; +} + +.errorIcon { + transform: scale(1.5); + color: var(--bs-danger); + margin-bottom: 1rem; +} + +.greenregbtn { + margin: 1rem 0 0; + margin-top: 15px; + border: 1px solid var(--bs-gray-300); + box-shadow: 0 2px 2px var(--bs-gray-300); + padding: 10px 10px; + border-radius: 5px; + background-color: var(--bs-primary); + width: 100%; + font-size: 16px; + color: var(--bs-white); + outline: none; + font-weight: 600; + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; + width: 100%; +} + +hr { + border: none; + height: 1px; + background-color: var(--bs-gray-500); + margin: 1rem; +} + +.iconContainer { + display: flex; + justify-content: flex-end; +} +.icon { + margin: 1px; +} + +.message { + margin-top: 25%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.preview { + display: flex; + flex-direction: row; + font-weight: 900; + font-size: 16px; + color: rgb(80, 80, 80); +} + +.removeFilterIcon { + cursor: pointer; +} + +.searchForm { + display: inline; +} + +.view { + margin-left: 2%; + font-weight: 600; + font-size: 16px; + color: var(--bs-gray-600); +} + +/* header (search, filter, dropdown) */ +.btnsContainer { + display: flex; + margin: 0.5rem 0 1.5rem 0; +} + +.btnsContainer .input { + flex: 1; + min-width: 18rem; + position: relative; +} + +.btnsContainer input { + outline: 1px solid var(--bs-gray-400); +} + +.btnsContainer .input button { + width: 52px; +} + +.noOutline input { + outline: none; +} + +.noOutline input:disabled { + -webkit-text-fill-color: black !important; +} + +.noOutline textarea:disabled { + -webkit-text-fill-color: black !important; +} + +.inputField { + margin-top: 10px; + margin-bottom: 10px; + background-color: white; + box-shadow: 0 1px 1px #31bb6b; +} + +.inputField > button { + padding-top: 10px; + padding-bottom: 10px; +} + +.dropdown { + background-color: white; + border: 1px solid #31bb6b; + position: relative; + display: inline-block; + color: #31bb6b; +} + +/* Action Items Data Grid */ +.rowBackground { + background-color: var(--bs-white); + max-height: 120px; +} + +.tableHeader { + background-color: var(--bs-primary); + color: var(--bs-white); + font-size: 1rem; +} + +.chipIcon { + height: 0.9rem !important; +} + +.chip { + height: 1.5rem !important; +} + +.active { + background-color: #31bb6a50 !important; +} + +.pending { + background-color: #ffd76950 !important; + color: #bb952bd0 !important; + border-color: #bb952bd0 !important; +} + +/* Modals */ +.itemModal { + max-width: 80vw; + margin-top: 2vh; + margin-left: 13vw; +} + +.titlemodal { + color: #707070; + font-weight: 600; + font-size: 32px; + width: 65%; + margin-bottom: 0px; +} + +.modalCloseBtn { + width: 40px; + height: 40px; + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; +} + +.imageContainer { + display: flex; + align-items: center; + justify-content: center; + margin-right: 0.5rem; +} + +.TableImage { + object-fit: cover; + width: 25px !important; + height: 25px !important; + border-radius: 100% !important; +} + +.avatarContainer { + width: 28px; + height: 26px; +} + +/* Toggle Btn */ +.toggleGroup { + width: 50%; + min-width: 20rem; + margin: 0.5rem 0rem; +} + +.toggleBtn { + padding: 0rem; + height: 2rem; + display: flex; + justify-content: center; + align-items: center; +} + +.toggleBtn:hover { + color: #31bb6b !important; +} + +input[type='radio']:checked + label { + background-color: #31bb6a50 !important; +} + +input[type='radio']:checked + label:hover { + color: black !important; +} /* Toggle Btn */ +.toggleGroup { + width: 50%; + min-width: 20rem; + margin: 0.5rem 0rem; +} + +.toggleBtn { + padding: 0rem; + height: 2rem; + display: flex; + justify-content: center; + align-items: center; +} + +.toggleBtn:hover { + color: #31bb6b !important; +} + +input[type='radio']:checked + label { + background-color: #31bb6a50 !important; +} + +input[type='radio']:checked + label:hover { + color: black !important; +} + +.rankings { + aspect-ratio: 1; + border-radius: 50%; + width: 50px; +} diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx index 18664dfd53..55134b75ac 100644 --- a/src/screens/OrganizationTags/OrganizationTags.tsx +++ b/src/screens/OrganizationTags/OrganizationTags.tsx @@ -12,6 +12,7 @@ import Modal from 'react-bootstrap/Modal'; import Row from 'react-bootstrap/Row'; import { useTranslation } from 'react-i18next'; import { toast } from 'react-toastify'; +import IconComponent from 'components/IconComponent/IconComponent'; import type { InterfaceQueryOrganizationUserTags, InterfaceTagData, @@ -284,6 +285,7 @@ function OrganizationTags(): JSX.Element { variant="outline-primary" onClick={() => redirectToManageTag(params.row._id)} data-testid="manageTagBtn" + className={styles.addButton} > {t('manageTag')} @@ -358,6 +360,16 @@ function OrganizationTags(): JSX.Element { ) : (
+
+
+ +
+ +
+ {'Tags'} +
+
+
- -
-
-
- + +
+
+
setTagSearchName(e.target.value.trim())} data-testid="searchByName" autoComplete="off" /> -
-
- -
+ + + + + {tagSortOrder === 'DESCENDING' + ? tCommon('Latest') + : tCommon('Oldest')} + + + setTagSortOrder('DESCENDING')} + > + {tCommon('Latest')} + + setTagSortOrder('ASCENDING')} + > + {tCommon('Oldest')} + + + + + + - diff --git a/src/style/app.module.css b/src/style/app.module.css index 19b9ea183d..45449b7bf1 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -202,7 +202,8 @@ .addButton { margin-bottom: 10px; background-color: var(--search-button-bg); - border-color: white; + border-color: var(--grey-bg-color); + color: #555555; } .addButton:hover { diff --git a/src/utils/organizationTagsUtils.ts b/src/utils/organizationTagsUtils.ts index 99faca3bf2..56654a3abb 100644 --- a/src/utils/organizationTagsUtils.ts +++ b/src/utils/organizationTagsUtils.ts @@ -30,7 +30,7 @@ export const dataGridStyle = { }, '& .MuiDataGrid-topContainer': { position: 'fixed', - top: 259, + top: 290, zIndex: 1, }, '& .MuiDataGrid-virtualScrollerContent': { From ddd9958d7aa9ead3bcd3b47ffd0dfd943fde11f5 Mon Sep 17 00:00:00 2001 From: Ankit varsheny Date: Wed, 13 Nov 2024 12:32:44 +0530 Subject: [PATCH 3/3] changes --- src/screens/ManageTag/ManageTag.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx index e8eb9bb8df..428dad7981 100644 --- a/src/screens/ManageTag/ManageTag.tsx +++ b/src/screens/ManageTag/ManageTag.tsx @@ -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'; @@ -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, @@ -356,11 +356,10 @@ function ManageTag(): JSX.Element {
- setAssignedMemberSearchInput(e.target.value.trim()) @@ -368,6 +367,13 @@ function ManageTag(): JSX.Element { data-testid="searchByName" autoComplete="off" /> +
{assignedMemberSortOrder === 'DESCENDING' @@ -402,7 +409,7 @@ function ManageTag(): JSX.Element {