address pr comments, restyle

Signed-off-by: Mason Fish <mason@looky.cloud>
brimdata · Apr 3, 2020 · 2d45667 · 2d45667
1 parent 72705bb
commit 2d45667
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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 = (
-        <div data-tip={tip} data-effect="solid" data-place="right">
+      if (includes(spaces, findingSpace)) return null
+
+      return (
+        <div
+          className="warning-body"
+          data-tip={tip}
+          data-effect="solid"
+          data-place="right"
+        >
           <Warning />
           <ReactTooltip />
         </div>
       )
-
-      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
@@ -43,15 +43,19 @@ export default React.memo<Props>(function FindingCard({finding}: Props) {
     const findingSpace = get(finding, ["search", "space"], "")
     const tip = `'${findingSpace}' space no longer exists`
 
-    const body = (
-      <div data-tip={tip} data-effect="solid" data-place="right">
+    if (includes(spaces, findingSpace)) return null
+
+    return (
+      <div
+        className="warning-body"
+        data-tip={tip}
+        data-effect="solid"
+        data-place="right"
+      >
         <Warning />
         <ReactTooltip />
       </div>
     )
-
-    if (!includes(spaces, findingSpace)) return body
-    return null
   }
 
   return (