feat: Expandable table more subtle popup

eea · May 8, 2023 · 0740a85 · 0740a85
1 parent 9df1cb9
commit 0740a85
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 50 deletions.
diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
@@ -189,7 +190,7 @@ const PopupRow = ({
       onOpen={() => handleExpand()}
       open={expand}
       trigger={
-        <div className="popup-trigger-container">
+        <div className="popup-trigger-container" tabIndex={0}>
           <ValidImage imageUrl={rowData[tableData.image_url]} />
           <p className="popup-trigger-title">
             {rowData &&

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less
@@ -54,10 +54,6 @@
     }
   }
 
-  // .ui.table thead {
-  //   background: #72b38e;
-  // }#3D5265
-
   .ui.table tr td {
     &:first-child {
       border-left: none;
@@ -67,10 +63,8 @@
 
   table {
     overflow: hidden;
-    // border: 1px solid #e8e8e8 !important;
     background: #fff !important;
     border-collapse: separate !important;
-    // border-radius: 12px !important;
 
     thead > tr > th::after {
       display: none;
@@ -95,16 +89,7 @@
       }
     }
 
-    //th,
-    // td {
-    //   border-bottom: 1px solid #e8e8e8 !important;
-    // }
-
     tbody {
-      // td {
-      //   height: 46px;
-      // }
-
       tr:last-child {
         td {
           border-bottom: none !important;
@@ -128,16 +113,13 @@
       max-width: 100% !important;
       height: 3.75rem;
       padding: 0.1rem;
-      border: 1px solid transparent;
       cursor: pointer;
       object-fit: contain;
     }
   }
 }
 
 .readmore-container {
-  font-size: 15px;
-
   .readmore-text {
     display: inline;
     margin: 5px 0;
@@ -162,20 +144,6 @@
   }
 }
 
-// .expandable-modal {
-//   .close {
-//     top: 1.0535rem !important;
-//     right: 1rem !important;
-//     font-size: 1.6em !important;
-//     font-weight: bold;
-//     opacity: 1 !important;
-//   }
-
-//   .close:hover {
-//     color: #ca4300 !important;
-//   }
-// }
-
 .popup-header {
   font-size: 1.5rem !important;
 }
@@ -230,16 +198,6 @@
   margin: 10px 0;
 }
 
-// .popup-table {
-//   thead th {
-//     background-color: #a7c942 !important;
-//   }
-
-//   tr:nth-child(odd) td {
-//     background-color: #eaf2d3;
-//   }
-// }
-
 .map-container .ol-map {
   height: 400px;
   min-height: 400px;
@@ -258,18 +216,18 @@
 
 .popup-trigger-container:hover {
   .popup-trigger-title {
-    color: grey !important;
-    font-weight: 500;
+    text-decoration: underline;
   }
 
   .expand-row-img {
-    border: 1px solid grey;
-    border-radius: 5px;
+    transition: transform 0.2s;
+    transform: scale(1.1);
   }
 
-  // .expand-row-icon {
-  //   fill: #ca4300 !important;
-  // }
+  .expand-row-icon {
+    transition: transform 0.2s;
+    transform: scale(1.1);
+  }
 }
 
 .info-container {