fix: [M3-7024] - Fix Hively visual regression

packages/manager/.changeset/pr-9548-fixed-1692123558409.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Hively icons showing external link icons ([#9548](https://github.com/linode/manager/pull/9548))

packages/manager/src/components/Link.tsx

@@ -32,6 +32,11 @@ export interface LinkProps extends _LinkProps {
    * @default false
    */
   forceCopyColor?: boolean;
+  /**
+   * Optional prop to forcefully hide the external icon
+   * @default false
+   */
+  hideIcon?: boolean;
 }
 
 /**
@@ -64,6 +69,7 @@ export const Link = (props: LinkProps) => {
     forceCopyColor,
     onClick,
     to,
+    hideIcon,
   } = props;
   const { classes, cx } = useStyles();
   const sanitizedUrl = () => sanitizeUrl(to);
@@ -104,7 +110,7 @@ export const Link = (props: LinkProps) => {
       target="_blank"
     >
       {children}
-      {external && (
+      {external && !hideIcon && (
         <span
           className={cx(classes.iconContainer, {
             [classes.forceCopyColor]: forceCopyColor,

packages/manager/src/features/Support/Hively.tsx

@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import Stack from '@mui/material/Stack';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 
@@ -10,30 +9,6 @@ import { parseAPIDate } from 'src/utilities/date';
 
 import { OFFICIAL_USERNAMES } from './ticketUtils';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  hivelyContainer: {
-    alignItems: 'center',
-    borderTop: `1px solid ${theme.color.grey2}`,
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    margin: `${theme.spacing(3)} ${theme.spacing(1)} 0`,
-    paddingTop: theme.spacing(1),
-  },
-  hivelyImage: {
-    margin: 3,
-    width: '25px',
-  },
-  hivelyLink: {
-    color: theme.color.black,
-    marginRight: theme.spacing(2),
-    textDecoration: 'none',
-  },
-  hivelyLinkIcon: {
-    display: 'inline-block',
-    marginRight: theme.spacing(1),
-  },
-}));
-
 interface Props {
   linodeUsername: string;
   replyId: string;
@@ -65,63 +40,59 @@ export const shouldRenderHively = (
   }
 };
 
-export const Hively: React.FC<Props> = (props) => {
-  const classes = useStyles();
+export const Hively = (props: Props) => {
   const { linodeUsername, replyId, ticketId } = props;
   const href = `https://secure.teamhively.com/ratings/add/account/587/source/hs/ext/${linodeUsername}/ticket/${ticketId}-${replyId}/rating/`;
 
   return (
-    <div className={classes.hivelyContainer}>
+    <>
       <Divider />
-      <Typography component="span">
-        <Link className={classes.hivelyLink} external to={href + '3'}>
-          How did I do?
-        </Link>
-      </Typography>
-      <span>
+      <Stack alignItems="center" direction="row" pl={1} spacing={1.5}>
+        <Typography mr={3}>
+          <Link external to={href + '3'}>
+            How did I do?
+          </Link>
+        </Typography>
         <Link
           accessibleAriaLabel="Happy feedback"
-          className={classes.hivelyLinkIcon}
           external
+          hideIcon
           to={href + '3'}
         >
           <img
             src={
               'https://secure.teamhively.com/system/smileys/icons/000/000/541/px_25/icon_positive.png'
             }
             alt="Happy face emoji"
-            className={classes.hivelyImage}
           />
         </Link>
         <Link
           accessibleAriaLabel="Mediocre feedback"
-          className={classes.hivelyLinkIcon}
           external
+          hideIcon
           to={href + '2'}
         >
           <img
             src={
               'https://secure.teamhively.com/system/smileys/icons/000/000/542/px_25/icon_indifferent.png'
             }
             alt="Indifferent face emoji"
-            className={classes.hivelyImage}
           />
         </Link>
         <Link
           accessibleAriaLabel="Unhappy feedback"
-          className={classes.hivelyLinkIcon}
           external
+          hideIcon
           to={href + '1'}
         >
           <img
             src={
               'https://secure.teamhively.com/system/smileys/icons/000/000/543/px_25/icon_negative.png'
             }
             alt="Sad Face emoji"
-            className={classes.hivelyImage}
           />
         </Link>
-      </span>
-    </div>
+      </Stack>
+    </>
   );
 };