fixes:#2429 the search button is misplaced

PalisadoesFoundation · Nov 18, 2024 · 5a0f37d · 5a0f37d
1 parent 1fe19c1
commit 5a0f37d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 30 deletions.
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
@@ -13,6 +13,22 @@ actionItemsContainer {
   flex-direction: row;
 }
 
+.searchButton {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  right: 0;
+  bottom: 50px;
+}
+
+@media (max-width: 768px) {
+  .searchButton {
+    bottom: 10px;
+  }
+}
+
 .datebox {
   width: 90%;
   border-radius: 7px;

diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
@@ -19,7 +19,7 @@ import type {
   InterfaceActionItemInfo,
   InterfaceActionItemList,
 } from 'utils/interfaces';
-import styles from '../../style/app.module.css';
+import styles from './OrganizationActionItems.module.css';
 import Loader from 'components/Loader/Loader';
 import {
   DataGrid,
@@ -46,6 +46,27 @@ 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.
  *
@@ -307,10 +328,10 @@ function organizationActionItems(): JSX.Element {
         return (
           <>
             <Button
-              // variant="success"
+              variant="success"
               size="sm"
               style={{ minWidth: '32px' }}
-              className={styles.infoButton}
+              className="me-2 rounded"
               data-testid={`viewItemBtn${params.row.id}`}
               onClick={() => handleModalClick(params.row, ModalState.VIEW)}
             >
@@ -319,7 +340,7 @@ function organizationActionItems(): JSX.Element {
             <Button
               variant="success"
               size="sm"
-              className={styles.infoButton}
+              className="me-2 rounded"
               data-testid={`editItemBtn${params.row.id}`}
               onClick={() => handleModalClick(params.row, ModalState.SAME)}
             >
@@ -328,7 +349,7 @@ function organizationActionItems(): JSX.Element {
             <Button
               size="sm"
               variant="danger"
-              className={styles.actionItemDeleteButton}
+              className="rounded"
               data-testid={`deleteItemBtn${params.row.id}`}
               onClick={() => handleModalClick(params.row, ModalState.DELETE)}
             >
@@ -353,7 +374,6 @@ 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)}
             />
@@ -479,7 +499,7 @@ function organizationActionItems(): JSX.Element {
             <Button
               variant="success"
               onClick={() => handleModalClick(null, ModalState.SAME)}
-              className={styles.createButton}
+              style={{ marginTop: '11px' }}
               data-testid="createActionItemBtn"
             >
               <i className={'fa fa-plus me-2'} />
@@ -502,29 +522,7 @@ function organizationActionItems(): JSX.Element {
             </Stack>
           ),
         }}
-        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={dataGridStyle}
         getRowClassName={() => `${styles.rowBackground}`}
         autoHeight
         rowHeight={65}