Clean up StrongVerificationBadge CSS

Author: nabramow

app/web/components/StrongVerificationBadge.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from "i18n";
 import { GLOBAL } from "i18n/namespaces";
 import React from "react";
 
-const StyledSpan = styled("span")(({ theme }) => ({
-  display: "inline-block",
+const StyledSpan = styled("span")(() => ({
+  display: "inline-flex",
+  alignItems: "center",
   verticalAlign: "middle",
-  marginLeft: theme.spacing(0.5),
 }));
 
 export default function StrongVerificationBadge() {

app/web/components/UserSummary.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   ListItemAvatar,
   ListItemText,
   Skeleton,
@@ -17,6 +18,13 @@ import useIsScreenSizeOrSmaller from "utils/useIsScreenSizeOrSmaller";
 
 import StrongVerificationBadge from "./StrongVerificationBadge";
 
+// It could be BlockedUser.AsObject or LiteUser.AsObject and only LiteUser has hasStrongVerification
+function isLiteUser(
+  user: LiteUser.AsObject | BlockedUser.AsObject,
+): user is LiteUser.AsObject {
+  return "hasStrongVerification" in user;
+}
+
 const StyledWrapper = styled("div")({
   display: "flex",
   padding: 0,
@@ -125,16 +133,14 @@ export default function UserSummary({
             sx={{ maxWidth: 300 }}
           />
         ) : (
-          <>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
             {nameOnly
               ? nameValue
               : `${nameValue}${user && "age" in user ? `, ${user.age}` : ""}`}
-            {user &&
-            "hasStrongVerification" in user &&
-            user.hasStrongVerification ? (
+            {isLiteUser(user) && user.hasStrongVerification && (
               <StrongVerificationBadge />
-            ) : null}
-          </>
+            )}
+          </Box>
         )}
       </Typography>
     </Tooltip>

app/web/features/profile/view/UserOverview.tsx

@@ -126,11 +126,9 @@ export default function UserOverview({
       )}
 
       <StyledWrapper>
-        <StyledIntro variant="h1">
-          <span>
-            {user.name}
-            {user.hasStrongVerification && <StrongVerificationBadge />}
-          </span>
+        <StyledIntro variant="h1" gap={0.5}>
+          {user.name}
+          {user.hasStrongVerification && <StrongVerificationBadge />}
         </StyledIntro>
         <StyledLink
           href={routeToUser(user.username)}

app/web/features/search/SeachResultUserCard.tsx

@@ -292,9 +292,9 @@ const SearchResultUserCard = ({
                   }}
                 >
                   {user.name}
-                  {user.hasStrongVerification && <StrongVerificationBadge />}
                 </Typography>
               </ProfileLink>
+              {user.hasStrongVerification && <StrongVerificationBadge />}
             </FlexRow>
             {!isNativeEmbed && !isMobile && (
               <StyledLink