diff --git a/src/css/_filter-tree.scss b/src/css/_filter-tree.scss index 0ce66f6ad9..e183b2c926 100644 --- a/src/css/_filter-tree.scss +++ b/src/css/_filter-tree.scss @@ -4,21 +4,25 @@ $filter-tree-line-color: $gray-5; height: 100%; color: $white-1; - svg { - fill: $yellow; - height: 16px; - width: 16px; - margin-right: 12px; + .warning-body { + display: flex; + align-items: center; + svg { + fill: $yellow; + height: 11px; + width: 11px; + margin-right: 12px; + margin-bottom: 3px; + } } - .filter-tree-parent { display: flex; flex-direction: row; + padding: 3px 0; } .remove-button { position: absolute; - top: 5px; right: 12px; opacity: 0; } diff --git a/src/css/_finding-card.scss b/src/css/_finding-card.scss index 19e4c1679d..3a1798d753 100644 --- a/src/css/_finding-card.scss +++ b/src/css/_finding-card.scss @@ -46,7 +46,7 @@ } .remove-button { - top: $space-xs; + top: $space-xxs; right: 6px; } } @@ -58,6 +58,7 @@ transition: background 150ms; display: flex; flex-direction: row; + align-items: center; .program { display: flex; @@ -93,10 +94,16 @@ } } - svg { - fill: $yellow; - height: 16px; - width: 16px; - margin-right: 12px; + .warning-body { + display: flex; + align-items: center; + + svg { + fill: $yellow; + height: 11px; + width: 11px; + margin-right: 12px; + margin-bottom: 3px; + } } } diff --git a/src/js/components/FilterTree.js b/src/js/components/FilterTree.js index d7c9c73d43..7ee0270e23 100644 --- a/src/js/components/FilterTree.js +++ b/src/js/components/FilterTree.js @@ -58,16 +58,19 @@ export default function FilterTree() { function renderWarning() { const findingSpace = get(node, ["data", "finding", "search", "space"], "") const tip = `'${findingSpace}' space no longer exists` - - const body = ( -
+ if (includes(spaces, findingSpace)) return null + + return ( +
) - - if (!includes(spaces, findingSpace)) return body - return null } return ( diff --git a/src/js/components/Investigation/FindingCard.js b/src/js/components/Investigation/FindingCard.js index f89f0dcea5..615d92a2a2 100644 --- a/src/js/components/Investigation/FindingCard.js +++ b/src/js/components/Investigation/FindingCard.js @@ -43,15 +43,19 @@ export default React.memo(function FindingCard({finding}: Props) { const findingSpace = get(finding, ["search", "space"], "") const tip = `'${findingSpace}' space no longer exists` - const body = ( -
+ if (includes(spaces, findingSpace)) return null + + return ( +
) - - if (!includes(spaces, findingSpace)) return body - return null } return (