M Olorunnisola: Move to styled components

elastic · Sep 10, 2020 · 18598d2 · 18598d2
1 parent 9d63c46
commit 18598d2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx
@@ -62,6 +62,11 @@ const StyledDescriptionText = styled.div<StyledDescriptionText>`
   width: fit-content;
 `;
 
+const StyledOuterGroup = styled.g`
+  fill: none;
+  pointer-events: visiblePainted;
+`;
+
 /**
  * An artifact that represents a process node and the things associated with it in the Resolver
  */
@@ -343,7 +348,7 @@ const UnstyledProcessEventDot = React.memo(
             pointerEvents: 'none',
           }}
         >
-          <g fill="none" style={{ pointerEvents: 'visiblePainted' }}>
+          <StyledOuterGroup>
             <use
               xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
               fill={backingFill} // Only visible on hover
@@ -375,7 +380,7 @@ const UnstyledProcessEventDot = React.memo(
                 ref={animationTarget}
               />
             </use>
-          </g>
+          </StyledOuterGroup>
         </svg>
         <StyledActionsContainer
           color={colorMap.full}

diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
@@ -43,6 +43,15 @@ interface ResolverSubmenuOption {
 
 export type ResolverSubmenuOptionList = ResolverSubmenuOption[] | string;
 
+const StyledActionButton = styled(EuiButton)`
+  &.euiButton--small {
+    height: fit-content;
+    line-height: 1;
+    padding: 0.25em;
+    font-size: 0.85rem;
+  }
+`;
+
 /**
  * This will be the "host button" that displays the "total number of related events" and opens
  * the sumbmenu (with counts by category) when clicked.
@@ -66,12 +75,11 @@ const SubButton = React.memo(
     const hasIcon = hasMenu ?? false;
     const iconType = menuIsOpen === true ? 'arrowUp' : 'arrowDown';
     return (
-      <EuiButton
+      <StyledActionButton
         onClick={action}
         iconType={hasIcon ? iconType : 'none'}
         fill={false}
         color={'primary'}
-        style={{ height: 'fit-content', lineHeight: 1, padding: '.25em', fontSize: '.85rem' }}
         size="s"
         iconSide="right"
         tabIndex={-1}
@@ -80,7 +88,7 @@ const SubButton = React.memo(
         id={nodeID}
       >
         {count ? <EuiI18nNumber value={count} /> : ''} {title}
-      </EuiButton>
+      </StyledActionButton>
     );
   }
 );