fix: info popover css style progress

dhis2 · Nov 4, 2024 · fadf01d · fadf01d
1 parent 6e2ce41
commit fadf01d
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 46 deletions.
diff --git a/src/components/DataDimension/Info/InfoPopover.js b/src/components/DataDimension/Info/InfoPopover.js
@@ -37,6 +37,8 @@ export const InfoPopover = ({ reference, onClose, ...props }) => {
                 reference={reference}
                 onClickOutside={onClose}
                 maxWidth={480}
+                arrow={false}
+                elevation="rgba(0, 0, 0, 0.1) 0px 1px 5px, rgba(0, 0, 0, 0.07) 0px 3.6px 13px, rgba(0, 0, 0, 0.06) 0px 8.4px 23px, rgba(0, 0, 0, 0.05) 0px 23px 35px"
             >
                 <div className="popover">
                     {type === DIMENSION_TYPE_DATA_ELEMENT && (

diff --git a/src/components/DataDimension/Info/styles/InfoPopover.style.js b/src/components/DataDimension/Info/styles/InfoPopover.style.js
@@ -1,25 +1,40 @@
-//import { colors, spacers } from '@dhis2/ui'
+import { colors, spacers } from '@dhis2/ui'
 import css from 'styled-jsx/css'
 
 export default css`
     .popover {
         width: 480px;
         height: 360px;
+        border: 1px solid ${colors.grey400};
+        overflow-x: hidden;
+        overflow-y: auto;
     }
     .loader {
         height: 100%;
         width: 100%;
     }
     .data-table {
-        display: block;
-        overflow: scroll;
-        max-height: 360px;
-        font-size: 14px;
+        display: table;
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 13px;
+        margin: ${spacers.dp4} 0 0 0;
+        color: ${colors.grey900};
     }
     .data-table th {
         text-align: left;
+        font-weight: 500;
+        padding: 6px 0 0 12px;
+        width: 128px;
+        vertical-align: baseline;
+    }
+    .data-table td {
+        padding: 6px 4px 6px 8px;
     }
     .data-table .code {
         font-family: monospace;
     }
+    .data-table tr:hover {
+        background: ${colors.grey100};
+    }
 `
diff --git a/src/components/DataDimension/TransferOption.js b/src/components/DataDimension/TransferOption.js
@@ -44,7 +44,7 @@ export const TransferOption = ({
                 onDoubleClick({ label, value }, event)
             }}
         >
-            <div className="group">
+            <div className="labelGroup">
                 <span className="icon">{icon}</span>
                 <span className="label">{label}</span>
                 {onEditClick && (
@@ -60,7 +60,7 @@ export const TransferOption = ({
                     </span>
                 )}
             </div>
-            <div className={cx('group', 'nowrap')}>
+            <div className={cx('group', 'nowrap', 'typeGroup')}>
                 <span className="type">{dimensionType}</span>
                 <span
                     className="info"

diff --git a/src/components/DataDimension/styles/TransferOption.style.js b/src/components/DataDimension/styles/TransferOption.style.js
@@ -9,40 +9,15 @@ export default css`
         display: flex;
         justify-content: space-between;
         align-items: center;
-        //background: ${colors.grey200};
+        background: ${colors.white};
         font-size: 14px;
         line-height: 16px;
-        border-bottom: 1px solid ${colors.grey400};
-        padding: 6px ${spacers.dp4};
-        //margin: ${spacers.dp4} ${spacers.dp8} 0 ${spacers.dp8};
+        border-bottom: 1px solid ${colors.grey300};
         user-select: none;
     }
 
     .item:hover {
-        background: ${colors.grey300};
-    }
-
-    .selected {
-        background: ${theme.secondary100};
-        color: ${theme.secondary900};
-    }
-
-    .selected :global(.icon path) {
-        fill: ${theme.secondary700};
-    }
-
-    .selected:hover {
-        background: #c9edeb;
-    }
-
-    .highlighted,
-    .highlighted:hover {
-        background: ${theme.secondary800};
-        color: ${colors.white};
-    }
-
-    .highlighted :global(.icon path) {
-        fill: ${colors.white};
+        background: ${colors.grey100};
     }
 
     .disabled {
@@ -54,8 +29,16 @@ export default css`
         opacity: 0.3;
     }
 
-    .group {
+    .labelGroup {
         display: inline-flex;
+        margin: 6px 4px;
+    }
+
+    .typeGroup {
+        display: inline-flex;
+        margin: 0;
+        align-self: stretch;
+        align-items: center;
     }
 
     .nowrap {
@@ -76,11 +59,16 @@ export default css`
 
     .label {
         font-size: 14px;
+        color: ${colors.grey900};
     }
 
     .type {
-        font-size: 12px;
-        font-family: monospace;
+        font-size: 10px;
+        letter-spacing: -0.2px;
+        color: ${colors.grey600};
+        font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo,
+            Consolas, 'DejaVu Sans Mono', monospace;
+        font-weight: normal;
     }
 
     .edit,
@@ -89,22 +77,54 @@ export default css`
         margin-top: 1px;
         margin-left: ${spacers.dp8};
         cursor: pointer;
+        color: ${colors.grey600};
     }
 
     .info {
-        margin-left: ${spacers.dp4};
+        margin: 0 0 0 ${spacers.dp4};
+        height: 100%;
+        padding: 0 6px;
+        display: flex;
+        align-items: center;
+    }
+
+    .highlighted {
+        background: ${theme.secondary700};
+    }
+    .highlighted:hover {
+        background: ${theme.secondary800};
+    }
+
+    .highlighted .label {
+        color: ${colors.white};
+    }
+
+    .highlighted .type {
+        color: ${theme.secondary050};
+    }
+
+    .highlighted .info {
+        color: ${theme.secondary050};
+    }
+
+    .highlighted :global(.icon path) {
+        fill: ${colors.teal050};
+    }
+
+    .highlighted .type {
+        color: ${colors.teal050};
     }
 
     .edit:hover,
     .info:hover {
-        background-color: rgba(0, 0, 0, 0.12);
-        outline: 1px solid rgba(0, 0, 0, 0.12);
-        border-radius: 3px;
+        background-color: ${colors.grey200};
+        // outline: 1px solid rgba(0, 0, 0, 0.12);
+        border-radius: 0px;
     }
 
     .highlighted .edit:hover,
     .highlighted .info:hover {
-        background-color: rgba(255, 255, 255, 0.12);
-        outline: 1px solid rgba(255, 255, 255, 0.12);
+        background-color: ${theme.secondary900};
+        // outline: 1px solid rgba(255, 255, 255, 0.12);
     }
 `
diff --git a/src/modules/dimensionSelectorHelper.js b/src/modules/dimensionSelectorHelper.js
@@ -1,5 +1,5 @@
-export const TRANSFER_OPTIONS_WIDTH = '420px'
+export const TRANSFER_OPTIONS_WIDTH = '520px'
 
-export const TRANSFER_SELECTED_WIDTH = '298px'
+export const TRANSFER_SELECTED_WIDTH = '520px'
 
 export const TRANSFER_HEIGHT = '512px'