[Session View] Font weight and session leader padding fix (#131132)

* font weight and session leader padding fix * addressing PR comment regarding highlight not centered Co-authored-by: Paulo Henrique <[email protected]>
elastic · Apr 28, 2022 · 32751cb · 32751cb
1 parent 7327155
commit 32751cb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx b/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx
@@ -104,7 +104,7 @@ export function ProcessTreeNode({
     [hasAlerts, alerts, investigatedAlertId]
   );
   const isSelected = selectedProcess?.id === process.id;
-  const styles = useStyles({ depth, hasAlerts, hasInvestigatedAlert, isSelected });
+  const styles = useStyles({ depth, hasAlerts, hasInvestigatedAlert, isSelected, isSessionLeader });
   const buttonStyles = useButtonStyles();
 
   const nodeRef = useVisible({

diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts
@@ -15,9 +15,16 @@ interface StylesDeps {
   hasAlerts: boolean;
   hasInvestigatedAlert: boolean;
   isSelected: boolean;
+  isSessionLeader: boolean;
 }
 
-export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }: StylesDeps) => {
+export const useStyles = ({
+  depth,
+  hasAlerts,
+  hasInvestigatedAlert,
+  isSelected,
+  isSessionLeader,
+}: StylesDeps) => {
   const { euiTheme, euiVars } = useEuiTheme();
 
   const cached = useMemo(() => {
@@ -82,6 +89,7 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }
       cursor: 'pointer',
       position: 'relative',
       padding: `${size.xs} 0px`,
+      marginBottom: isSessionLeader ? size.s : '0px',
       '&:hover:before': {
         backgroundColor: hoverColor,
         transform: `translateY(-${size.xs})`,
@@ -118,7 +126,7 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }
     const workingDir: CSSObject = {
       color: colors.successText,
       fontFamily: font.familyCode,
-      fontWeight: font.weight.medium,
+      fontWeight: font.weight.regular,
       paddingLeft: size.s,
       paddingRight: size.xxs,
     };
@@ -150,7 +158,7 @@ export const useStyles = ({ depth, hasAlerts, hasInvestigatedAlert, isSelected }
       alertDetails,
       icon,
     };
-  }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected, euiVars]);
+  }, [depth, euiTheme, hasAlerts, hasInvestigatedAlert, isSelected, euiVars, isSessionLeader]);
 
   return cached;
 };