fix: [M3-8929] - Unexpected gradient on Linode Detail with VPC interf…

…ace (#11289) * fix & cleanup * Added changeset: Unexpected gradient on Linode Detail with VPC interface * feedback @mjac0bs @hkhalil-akamai * fix import error
linode · Nov 19, 2024 · b9442d8 · b9442d8
1 parent 255e3ec
commit b9442d8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 25 deletions.
diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
@@ -1,4 +1,4 @@
-// This component was built asuming an unmodified MUI <Table />
+// This component was built assuming an unmodified MUI <Table />
 import { Box } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Table from '@mui/material/Table';
@@ -97,30 +97,29 @@ export const StyledIPv4Box = styled(Box, { label: 'StyledIPv4Box' })(
     '&:hover .copy-tooltip > svg, & .copy-tooltip:focus > svg': {
       opacity: 1,
     },
+    border: 0,
     display: 'flex',
+    marginLeft: theme.spacing(2),
     [theme.breakpoints.down('md')]: {
       margin: theme.spacing(0),
     },
-    marginLeft: theme.spacing(2),
-    border: 0,
   })
 );
 
 export const StyledIPv4Label = styled(Box, { label: 'StyledIPv4Label' })(
   ({ theme }) => ({
+    alignContent: 'center',
+    backgroundColor: theme.name === 'light' ? theme.color.grey10 : theme.bg.app,
     color: theme.textColors.textAccessTable,
     fontFamily: theme.font.bold,
-    backgroundColor: theme.name === 'light' ? theme.color.grey10 : theme.bg.app,
-    padding: '10px 24px 10px 10px',
-    alignContent: 'center',
+    padding: `${theme.spacing(1)} ${theme.spacing(3)} ${theme.spacing(
+      1
+    )} ${theme.spacing(1.5)}`,
   })
 );
 
 export const StyledIPv4Item = styled(Box, { label: 'StyledIPv4Item' })(
   ({ theme }) => ({
-    '& div': {
-      fontSize: 15,
-    },
     alignItems: 'center',
     backgroundColor: theme.tokens.interaction.Background.Secondary,
     display: 'flex',

diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx
@@ -5,6 +5,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { HashLink } from 'react-router-hash-link';
 
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import {
   DISK_ENCRYPTION_NODE_POOL_GUIDANCE_COPY as UNENCRYPTED_LKE_LINODE_GUIDANCE_COPY,
   UNENCRYPTED_STANDARD_LINODE_GUIDANCE_COPY,
@@ -22,16 +23,15 @@ import { EncryptedStatus } from '../Kubernetes/KubernetesClusterDetail/NodePools
 import {
   StyledBodyGrid,
   StyledColumnLabelGrid,
+  StyledCopyTooltip,
+  StyledIPv4Box,
+  StyledIPv4Item,
+  StyledIPv4Label,
   StyledLabelBox,
   StyledListItem,
-  StyledIPv4Label,
-  StyledIPv4Item,
   StyledSummaryGrid,
   StyledVPCBox,
-  StyledCopyTooltip,
-  StyledGradientDiv,
   sxLastListItem,
-  StyledIPv4Box,
 } from './LinodeEntityDetail.styles';
 import { ipv4TableID } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses';
 import { lishLink, sshLink } from './LinodesDetail/utilities';
@@ -45,7 +45,6 @@ import type {
 } from '@linode/api-v4/lib/linodes/types';
 import type { Subnet } from '@linode/api-v4/lib/vpcs';
 import type { TypographyProps } from 'src/components/Typography';
-import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 
 interface LinodeEntityDetailProps {
   id: number;
@@ -256,10 +255,10 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
               margin: 0,
               padding: '0 0 8px 0',
               [theme.breakpoints.down('md')]: {
+                alignItems: 'start',
                 display: 'flex',
                 flexDirection: 'column',
                 paddingLeft: '8px',
-                alignItems: 'start',
               },
             }}
             alignItems="center"
@@ -292,13 +291,13 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
                   VPC IPv4
                 </StyledIPv4Label>
                 <StyledIPv4Item component="span" data-testid="vpc-ipv4">
-                  <StyledGradientDiv>
-                    <CopyTooltip
-                      copyableText
-                      text={configInterfaceWithVPC.ipv4.vpc}
-                    />
-                  </StyledGradientDiv>
-                  <StyledCopyTooltip text={configInterfaceWithVPC.ipv4.vpc} />
+                  <CopyTooltip
+                    copyableText
+                    text={configInterfaceWithVPC.ipv4.vpc}
+                  />
+                  <Box sx={{ ml: 1, position: 'relative', top: 1 }}>
+                    <StyledCopyTooltip text={configInterfaceWithVPC.ipv4.vpc} />
+                  </Box>
                 </StyledIPv4Item>
               </StyledIPv4Box>
             )}

diff --git a/packages/manager/src/features/components/PlansPanel/APLNotice.tsx b/packages/manager/src/features/components/PlansPanel/APLNotice.tsx
@@ -1,7 +1,6 @@
+import { Notice } from '@linode/ui';
 import * as React from 'react';
 
-import { Notice } from 'src/components/Notice/Notice';
-
 import { APL_NOTICE_COPY } from './constants';
 
 interface Props {