From 31a2651a5d19d0946e5d4c2a1566b2877b8d0e6b Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Fri, 1 Nov 2024 12:04:25 -0700
Subject: [PATCH] Center icon with text

---
 .../teleport/src/services/audit/makeEvent.tsx | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/web/packages/teleport/src/services/audit/makeEvent.tsx b/web/packages/teleport/src/services/audit/makeEvent.tsx
index dca08c0892c16..9ffff5445a743 100644
--- a/web/packages/teleport/src/services/audit/makeEvent.tsx
+++ b/web/packages/teleport/src/services/audit/makeEvent.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styled from 'styled-components';
+import Box from 'design/Box';
 import { formatDistanceStrict } from 'date-fns';
 import { pluralize } from 'shared/utils/text';
 import * as Icons from 'design/Icon';
@@ -727,9 +729,9 @@ export const formatters: Formatters = {
     desc: 'Local Login',
     format: ({ user }) => `Local user [${user}] successfully logged in`,
     render: ({ user }) => (
-      <>
+      <Box>
         Local user <User user={user} /> successfully logged in
-      </>
+      </Box>
     ),
   },
   [eventCodes.USER_LOCAL_LOGINFAILURE]: {
@@ -792,9 +794,9 @@ export const formatters: Formatters = {
     render: ({ user }) => {
       if (user) {
         return (
-          <>
+          <Box>
             <User user={user} /> requested an MFA authentication challenge
-          </>
+          </Box>
         );
       } else {
         return <>Passwordless user requested an MFA authentication challenge</>;
@@ -806,10 +808,9 @@ export const formatters: Formatters = {
     desc: 'MFA Authentication Success',
     format: ({ user }) => `User [${user}] completed MFA authentication`,
     render: ({ user }) => (
-      <>
-        <Icons.User {...iconProps} size="small" />
-        <b>{user}</b> completed MFA authentication
-      </>
+      <Box>
+        <User user={user} /> completed MFA authentication
+      </Box>
     ),
   },
   [eventCodes.VALIDATE_MFA_AUTH_RESPONSEFAILURE]: {
@@ -1467,10 +1468,9 @@ export const formatters: Formatters = {
     render: ({ cert_type, identity: { user } }) => {
       if (cert_type === 'user') {
         return (
-          <>
-            User certificate issued for
-            <User user={user} />
-          </>
+          <Box>
+            User certificate issued for <User user={user} />
+          </Box>
         );
       }
       return (
@@ -2017,20 +2017,21 @@ export const formatters: Formatters = {
   },
 };
 
-const iconProps = {
-  m: 1,
-  verticalAlign: 'middle',
-};
-
 function User({ user }) {
   return (
-    <>
-      <Icons.User {...iconProps} size="small" />
+    <InlineFlex>
+      <Icons.User size="small" />
       <b>{user}</b>
-    </>
+    </InlineFlex>
   );
 }
 
+const InlineFlex = styled.div`
+  display: inline-flex;
+  vertical-align: top;
+  gap: ${p => p.theme.space[1]}px;
+`;
+
 const unknownFormatter = {
   desc: 'Unknown',
   format: () => 'Unknown',