close icon on expandable modal

eea · May 2, 2022 · 2249430 · 2249430
1 parent 74b1241
commit 2249430
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx
@@ -18,7 +18,7 @@ import {
 
 const defaultSchema = {
   title: '',
-  description: '', //
+  description: '',
   tableColumns: [],
   url: '',
   logo: '',
@@ -177,6 +177,8 @@ const PopupRow = ({
   };
   return (
     <Modal
+      className="expandable-modal"
+      closeIcon
       onClose={() => handleClose()}
       onOpen={() => handleExpand()}
       open={expand}

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less
@@ -17,7 +17,6 @@
     background: none;
     cursor: pointer;
     font-weight: 400;
-    // width: fit-content;
 
     > * {
       font-size: 1rem;
@@ -87,10 +86,9 @@
       max-width: 100% !important;
       height: 60px;
       padding: 5px;
+      border: 1px solid transparent;
       cursor: pointer;
       object-fit: contain;
-
-      border: 1px solid transparent;
     }
   }
 }
@@ -118,6 +116,21 @@
   }
 }
 
+.expandable-modal {
+  .close {
+    top: 1.0535rem !important;
+    right: 1rem !important;
+    color: #494e13 !important;
+    font-size: 1.6em !important;
+    font-weight: bold;
+    opacity: 1 !important;
+  }
+
+  .close:hover {
+    color: #ca4300 !important;
+  }
+}
+
 .popup-header {
   font-size: 1.5rem !important;
 }
@@ -167,8 +180,8 @@
 }
 
 .popup-trigger-title {
-  font-weight: 500;
   margin: 0 0 0 15px !important;
+  font-weight: 500;
 }
 
 .popup-trigger-container:hover {
@@ -178,8 +191,8 @@
   }
 
   .expand-row-img {
-    border-radius: 5px;
     border: 1px solid #ca4300;
+    border-radius: 5px;
   }
 
   .expand-row-icon {