use euiTheme tokens

ashokaditya · ashokaditya · commit 31cf7af4edb6 · 2021-05-31T14:20:24.000+02:00
review change
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/endpoint_details_tabs.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/endpoint_details_tabs.tsx
@@ -26,7 +26,7 @@ interface EndpointDetailsTabs {
 
 const StyledEuiTabbedContent = styled(EuiTabbedContent)`
   overflow: hidden;
-  padding-bottom: 48px;
+  padding-bottom: ${(props) => props.theme.eui.paddingSizes.xl};
 
   > [role='tabpanel'] {
     height: 100%;
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/log_entry.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/log_entry.tsx
@@ -10,9 +10,11 @@ import React, { memo } from 'react';
 import { EuiAvatar, EuiComment, EuiText } from '@elastic/eui';
 import { Immutable, EndpointAction } from '../../../../../../../common/endpoint/types';
 import { FormattedDateAndTime } from '../../../../../../common/components/endpoint/formatted_date_time';
+import { useEuiTheme } from '../../../../../../common/lib/theme/use_eui_theme';
 
 export const LogEntry = memo(
   ({ endpointAction }: { endpointAction: Immutable<EndpointAction> }) => {
+    const euiTheme = useEuiTheme();
     const isIsolated = endpointAction?.data.command === 'isolate';
 
     // do this better when we can distinguish between endpoint events vs user events
@@ -22,7 +24,7 @@ export const LogEntry = memo(
       <EuiAvatar
         name="Timeline Icon"
         size={endpointAction.user_id === 'sys' ? 's' : 'm'}
-        color="#f5f7fa"
+        color={euiTheme.euiColorLightestShade}
         iconColor="subdued"
         iconType={iconType}
       />
