diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass b/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass index b14c7e4f3..adb1503d8 100644 --- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass +++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass @@ -67,7 +67,6 @@ height: 100% display: flex flex-direction: column - margin-right: 10px width: 100% border-radius: 4px @@ -82,17 +81,18 @@ margin-top: 10px margin-right: 10px -.protocolsFilterList, .servicesFilter +.card background: white padding: 10px border-radius: 4px user-select: none + box-shadow: 0px 1px 5px #979797 -.servicesFilter - margin-top: 10px +.servicesFilterWrapper + margin-top: 20px + margin-bottom: 3px height: 100% overflow: hidden - border-radius: 4px - & .servicesFilterList - height: calc(100% - 30px - 52px) +.servicesFilterList + height: calc(100% - 30px - 52px) diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx b/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx index 2a7e99459..4d267bd1e 100644 --- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx +++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx @@ -158,6 +158,7 @@ export const ServiceMapModal: React.FC = ({ isOpen, onClos if (checkedProtocols.length === 0) { setCheckedProtocols(getProtocolsForFilter.map(x => x.key)) } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [getProtocolsForFilter]) useEffect(() => { @@ -217,13 +218,13 @@ export const ServiceMapModal: React.FC = ({ isOpen, onClos
-
+
-
-
+
+
diff --git a/ui-common/src/components/UI/SelectList.tsx b/ui-common/src/components/UI/SelectList.tsx index 8e7e03004..0c431b284 100644 --- a/ui-common/src/components/UI/SelectList.tsx +++ b/ui-common/src/components/UI/SelectList.tsx @@ -85,7 +85,7 @@ const SelectList: React.FC = ({ items, tableName, checkedValues = [], mul const tableBody = filteredValues.length === 0 ? - + diff --git a/ui-common/src/components/UI/style/SelectList.module.sass b/ui-common/src/components/UI/style/SelectList.module.sass index 0ce2d1fe9..94d14891f 100644 --- a/ui-common/src/components/UI/style/SelectList.module.sass +++ b/ui-common/src/components/UI/style/SelectList.module.sass @@ -1,44 +1,70 @@ @import '../../../variables.module' @import '../../../components' - .selectListTable - overflow: auto - height: 100% user-select: none // when resizble moved we get unwanted beheviour + height: 100% table width: 100% - margin-top: 20px border-collapse: collapse + table-layout: fixed + height: 100% + display: flex + flex-flow: column + height: 100% - th - color: $blue-gray - text-align: left - padding: 10px - position: sticky - top: 0 - background: $main-background-color - font-size: 12px + thead + display: table + table-layout: fixed + flex: 0 0 auto + width: calc(100% - 0.9em) - tr - border-bottom-width: 1px - border-bottom-color: $data-background-color - border-bottom-style: solid - width: 100% + tbody + display: block + overflow: auto + width: 100% + height: 100% + flex: 1 1 auto - td - color: $light-gray - padding: 10px - font-size: 11px - font-weight: 600 - padding-top: 5px - padding-bottom: 5px + tbody tr:hover + background: $header-background-color + + th + color: $blue-gray + text-align: left + padding: 10px + background: $main-background-color + font-size: 12px + + tr + border-bottom-width: 1px + border-bottom-color: $data-background-color + border-bottom-style: solid + width: 100% + display: block + position: relative + display: table + table-layout: fixed + + td + color: $light-gray + padding: 10px + font-size: 11px + font-weight: 600 + padding-top: 5px + padding-bottom: 5px .nowrap white-space: nowrap .totalSelected - font-size: 12px - color: $light-blue-color - font-weight: 700 + font-size: 12px + color: $light-blue-color + font-weight: 700 + +.displayBlock + display: block + +.filterInput + margin-bottom: 20px