Update Action Item Page according to Figma Style Guide

PalisadoesFoundation · Jan 21, 2025 · 7f816bc · 7f816bc
1 parent f7d28d5
commit 7f816bc
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -38,7 +38,7 @@ import '../src/assets/css/scrollStyles.css';
 const theme = createTheme({
   palette: {
     primary: {
-      main: '#31bb6b',
+      main: '#1778F2',
     },
   },
 });
@@ -139,7 +139,10 @@ const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
 const fallbackLoader = <div className="loader"></div>;
 
 const container = document.getElementById('root');
-const root = createRoot(container!); // Note the use of '!' is to assert the container is not null
+if (!container) {
+  throw new Error('Root container missing in the DOM');
+}
+const root = createRoot(container);
 
 root.render(
   <Suspense fallback={fallbackLoader}>

diff --git a/src/screens/OrganizationActionItems/ItemDeleteModal.tsx b/src/screens/OrganizationActionItems/ItemDeleteModal.tsx
@@ -62,7 +62,7 @@ const ItemDeleteModal: React.FC<InterfaceItemDeleteModalProps> = ({
           <Button
             variant="danger"
             onClick={hide}
-            className={styles.modalCloseBtn}
+            className={styles.closeButton}
             data-testid="modalCloseBtn"
           >
             {' '}

diff --git a/src/screens/OrganizationActionItems/ItemViewModal.tsx b/src/screens/OrganizationActionItems/ItemViewModal.tsx
@@ -57,7 +57,7 @@ const ItemViewModal: FC<InterfaceViewModalProps> = ({ isOpen, hide, item }) => {
         <Button
           variant="danger"
           onClick={hide}
-          className={styles.modalCloseBtn}
+          className={styles.closeButton}
           data-testid="modalCloseBtn"
         >
           <i className="fa fa-times"></i>

diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
@@ -468,20 +468,20 @@ function organizationActionItems(): JSX.Element {
         }}
         sx={{
           borderRadius: '20px',
-          backgroundColor: 'EAEBEF)',
+          backgroundColor: 'FFFFFF)',
           '& .MuiDataGrid-row': {
-            backgroundColor: '#eff1f7',
+            backgroundColor: '#FFFFFF',
             '&:focus-within': {
               // outline: '2px solid #000',
               outlineOffset: '-2px',
             },
           },
           '& .MuiDataGrid-row:hover': {
-            backgroundColor: '#EAEBEF',
+            backgroundColor: '#FFFFFF',
             boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
           },
           '& .MuiDataGrid-row.Mui-hovered': {
-            backgroundColor: '#EAEBEF',
+            backgroundColor: '#FFFFFF',
             boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
           },
           '& .MuiDataGrid-cell:focus': {

diff --git a/src/style/app.module.css b/src/style/app.module.css
@@ -162,6 +162,7 @@
   --dark-blue: #1778f2;
   --remove-button-color: #c8102e;
   --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --drop-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 
   /* breakpoints */
   --breakpoint-mobile: 576px;
@@ -333,6 +334,12 @@
   text-decoration: underline;
 }
 
+.closeButton {
+  color: var(--remove-button-color);
+  border: none;
+  background-color: var(--white-color);
+}
+
 .dropdown {
   background-color: var(--bs-white) !important;
   min-width: 150px;
@@ -353,7 +360,7 @@
     :disabled,
     :checked
   ) {
-  box-shadow: 2.5px 2.5px 2.5px var(--dropdown-shadow);
+  box-shadow: var(--drop-shadow);
   border: 1px solid var(--brown-color) !important;
   color: var(--dropdown-color) !important;
 }
@@ -477,7 +484,7 @@
 .createButton {
   background-color: var(--grey-bg-color) !important;
   color: var(--black-color) !important;
-  /* margin-top: 10px; */
+  margin-top: 10px;
   /* margin-left: 5px; */
   border: 1px solid var(--brown-color);
 }
@@ -486,6 +493,7 @@
   background-color: var(--grey-bg-color) !important;
   color: var(--black-color) !important;
   border: 1px solid var(--brown-color) !important;
+  box-shadow: var(--drop-shadow);
 }
 
 .visuallyHidden {
@@ -503,13 +511,12 @@
   margin-top: 10px;
   margin-bottom: 10px;
   background-color: var(--bs-white);
-  box-shadow: 0 1px 1px var(--input-shadow-color);
 }
 
 .inputField:focus {
   border: 0.1px solid var(--input-field-border) !important;
   background-color: var(--input-field-bg) !important;
-  box-shadow: 4px 4px 8px var(--input-field-shadow);
+  box-shadow: var(--drop-shadow);
   outline: none;
   transition: box-shadow 0.2s ease;
 }