From a374f1d6bafb2b575774884ebfd3dbc3ef11be58 Mon Sep 17 00:00:00 2001 From: Gurram Karthik <167804249+gurramkarthiknetha@users.noreply.github.com> Date: Tue, 24 Dec 2024 16:30:19 +0530 Subject: [PATCH] fixed:#2510 Refactor CSS files in src/screens/ManageTag (#2769) * issue-2510-fixed * changed in css * changed acc to coderabbin --- src/screens/ManageTag/ManageTag.tsx | 8 +-- src/style/app.module.css | 105 ++++++++++++++-------------- 2 files changed, 55 insertions(+), 58 deletions(-) diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx index 6afec3f130..7eb6a3221d 100644 --- a/src/screens/ManageTag/ManageTag.tsx +++ b/src/screens/ManageTag/ManageTag.tsx @@ -292,7 +292,7 @@ function ManageTag(): JSX.Element { minWidth: 100, align: 'center', headerAlign: 'center', - headerClassName: `${styles.tableHeader}`, + headerClassName: `${styles.tableHeaders}`, sortable: false, renderCell: (params: GridCellParams) => { return
{params.row.id}
; @@ -304,7 +304,7 @@ function ManageTag(): JSX.Element { flex: 2, minWidth: 100, sortable: false, - headerClassName: `${styles.tableHeader}`, + headerClassName: `${styles.tableHeaders}`, renderCell: (params: GridCellParams) => { return (
@@ -321,7 +321,7 @@ function ManageTag(): JSX.Element { minWidth: 100, headerAlign: 'center', sortable: false, - headerClassName: `${styles.tableHeader}`, + headerClassName: `${styles.tableHeaders}`, renderCell: (params: GridCellParams) => { return (
@@ -494,7 +494,7 @@ function ManageTag(): JSX.Element { ), }} sx={dataGridStyle} - getRowClassName={() => `${styles.rowBackground}`} + getRowClassName={() => `${styles.rowBackgrounds}`} autoHeight rowHeight={65} rows={userTagAssignedMembers?.map( diff --git a/src/style/app.module.css b/src/style/app.module.css index ae6daace2f..1903c7b323 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -12,10 +12,14 @@ --search-button-bg: #a8c7fa; --search-button-border: #555555; --table-image-size: 50px; + --bs-primary: #0056b3; + --bs-white: #fff; + --table-head-bg: var(--bs-primary, blue); --table-head-bg: var( --bs-primary, blue ); /* Assuming var(--bs-primary) is defined elsewhere */ + --table-head-color: white; --table-header-color: var(--bs-greyish-black, black); --table-head-radius: 20px; @@ -87,6 +91,7 @@ border-bottom: 3px solid #31bb6b; width: 15%; } + .searchtitle { color: #707070; font-weight: 600; @@ -101,6 +106,7 @@ display: flex; justify-content: space-between; } + .admindetails > p { margin-top: -12px; margin-right: 30px; @@ -113,10 +119,12 @@ margin-right: -15px; margin-bottom: 20px; } + .justifysp { display: flex; justify-content: space-between; } + @media screen and (max-width: 575.5px) { .justifysp { padding-left: 55px; @@ -204,13 +212,11 @@ .input { flex: 1; - position: relative; } .btnsContainer { display: flex; - /* Adjust spacing between items */ margin: 2.5rem 0; align-items: center; gap: 10px; @@ -221,21 +227,33 @@ width: max-content; } -.btnsContainer .btnsBlock button { +.btnsContainerBlockAndUnblock { + display: flex; + margin: 2.5rem 0 2.5rem 0; +} + +.btnsContainerBlockAndUnblock .btnsBlockBlockAndUnblock { + display: flex; +} + +.btnsContainerBlockAndUnblock .btnsBlockBlockAndUnblock button { margin-left: 1rem; display: flex; justify-content: center; align-items: center; } -.btnsContainer .input { +.btnsContainerBlockAndUnblock .inputContainerBlockAndUnblock { flex: 1; position: relative; - max-width: 60%; - justify-content: space-between; } -.btnsContainer input { +.btnsContainerBlockAndUnblock .inputBlockAndUnblock { + width: 70%; + position: relative; +} + +.btnsContainerBlockAndUnblock input { outline: 1px solid var(--bs-gray-400); } @@ -380,27 +398,10 @@ 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); @@ -412,12 +413,6 @@ } } -.subTagsLink { - color: var(--subtle-blue-grey); - font-weight: 500; - cursor: pointer; -} - .subTagsLink i { visibility: hidden; } @@ -437,7 +432,6 @@ .manageTagScrollableDiv { scrollbar-width: thin; scrollbar-color: var(--bs-gray-400) var(--bs-white); - max-height: calc(100vh - 18rem); overflow: auto; } @@ -504,6 +498,7 @@ hr { display: flex; justify-content: flex-end; } + .icon { margin: 1px; } @@ -544,10 +539,6 @@ hr { align-items: center; } -.toggleBtn:hover { - color: var(--bs-primary) !important; -} - .pageNotFound { position: relative; bottom: 20px; @@ -563,10 +554,12 @@ hr { margin-top: 50px; font-size: 40px; } + .pageNotFound .brand h3 { font-weight: 300; margin: 10px 0 0 0; } + .pageNotFound h1.head { font-size: 250px; font-weight: 900; @@ -574,6 +567,7 @@ hr { letter-spacing: 25px; margin: 10px 0 0 0; } + .pageNotFound h1.head span { position: relative; display: inline-block; @@ -590,6 +584,7 @@ hr { .pageNotFound h1.head span:before { left: -55%; } + .pageNotFound h1.head span:after { right: -55%; } @@ -839,6 +834,7 @@ hr { font-size: 1rem; color: black; } + .cardBody { min-height: 180px; } @@ -852,13 +848,6 @@ hr { height: 2.5rem; } -@media (max-width: 520px) { - .btn { - flex-direction: column; - justify-content: center; - } -} - @media (max-width: 1024px) { .pageNotFound h1.head { font-size: 200px; @@ -922,12 +911,15 @@ hr { right: -30%; } } - @media (max-width: 520px) { .btnsContainer { margin-bottom: 0; } + .btn { + flex-direction: column; + justify-content: center; + } .btnsContainer .btnsBlock { display: block; margin-top: 1rem; @@ -1000,6 +992,16 @@ hr { transform: rotate(360deg); } } +.btnsContainer .input { + flex: 1; + position: relative; + max-width: 60%; + justify-content: space-between; +} + +.btnsContainer input { + outline: 1px solid var(--bs-gray-400); +} .list_box { height: auto; @@ -1007,10 +1009,6 @@ hr { width: 100%; } -.inputFields { - box-shadow: 0 1px 1px #31bb6b; -} - .fundName { font-weight: 600; cursor: pointer; @@ -1052,6 +1050,12 @@ hr { font-size: 1rem; } +.rowBackgrounds { + background-color: var(--bs-white); + max-height: 120px; + overflow-y: auto; /* Handle content overflow */ +} + .subTagsLink { color: var(--bs-blue); font-weight: 500; @@ -1091,7 +1095,6 @@ hr { .subTagsScrollableDiv { scrollbar-width: auto; scrollbar-color: var(--bs-gray-400) var(--bs-white); - max-height: calc(100vh - 18rem); overflow: auto; } @@ -1209,12 +1212,6 @@ input[type='radio']:checked + label { color: #31bb6b; } -/* Action Items Data Grid */ -.rowBackgrounds { - background-color: var(--bs-white); - max-height: 120px; -} - .chipIcon { height: 0.9rem !important; }