fixed:#2510 Refactor CSS files in src/screens/ManageTag (#2769)

* issue-2510-fixed * changed in css * changed acc to coderabbin
PalisadoesFoundation · Dec 24, 2024 · a374f1d · a374f1d
1 parent 7025360
commit a374f1d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 58 deletions.
diff --git 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 <div>{params.row.id}</div>;
@@ -304,7 +304,7 @@ function ManageTag(): JSX.Element {
       flex: 2,
       minWidth: 100,
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div data-testid="memberName">
@@ -321,7 +321,7 @@ function ManageTag(): JSX.Element {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div>
@@ -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
@@ -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,17 +554,20 @@ 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;
   color: #31bb6b;
   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,17 +992,23 @@ 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;
   overflow-y: auto;
   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;
 }