refactor: [M3-6306] - MUI v5 Migration SRC > Components > CopyableTex…

…tField (#9018)

* refactor: [M3-6306] - SRC > Components > CopyableTextField

* PR feedback

* resolve specificity

* Update styling

* refactor styles using styled

* Update CHANGELOG.md

CHANGELOG.md

@@ -7,15 +7,18 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ## [Unreleased]
 
 ### Added:
+
 - Metadata
 - Add No Results section for Marketplace Search #8999
 - Add Private IP checkbox when cloning a Linode #9039
 - Accessible graph tabled data for `LineGraph` component #5915
 
 ### Changed:
+
 - `<RegionSelect />` can now dynamically get country flag and group all countries #8996
 
 ### Fixed:
+
 - Typesafety of the `<Select />` component #8986
 - Clear the Kubernetes Delete Dialog when it is re-opened #9000
 - @linode/validation version badge Label in `README.md` #9011
@@ -25,6 +28,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Inability to edit and save Linode Configurations #9053
 
 ### Tech Stories:
+
 - MUIv5 Migration - Components > CircleProgress #9028
 - MUIv5 Migration - Components > StatusIcon #9014
 - MUIv5 Migration - Components > TagsInput, TagsPanel #8995
@@ -39,32 +43,38 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - MUIv5 Migration - `SRC > Components > CopyTooltip` #9040
 - MUIv5 Migration - `SRC > Components > CopyTooltip` #9040
 - MUIv5 Migration - `SRC > Components > CheckoutBar` #9051
+- MUIv5 Migration - `SRC > Components > CopyableTextField` #9018
 - Add basic Adobe Analytics tracking #8989
 
 ## [2023-04-18] - v1.91.1
 
 ### Fixed:
+
 - Add Premium plans to LKE #9021
 
 ## [2023-04-17] - v1.91.0
 
 ### Added:
+
 - Cross Data Center Clone warning #8937
 - `Plan` column header to plan select table #8943
 
 ### Changed:
+
 - Use Akamai logo for TPA provider screen #8982
 - Use Akamai logo for the favicon #8988
 - Only fetch grants when the user is restricted #8941
 - Improve the StackScript user defined fields (UDF) forms #8973
 
 ### Fixed:
+
 - Styling of Linode Details Add Configurations modal header #8981
 - Alignment issues with Kubernetes Node Pool table and buttons #8967
 - Domain Records not updating when navigating #8957
 - Notification menu displaying empty menu on secondary status click #8902
 
 ### Tech Story:
+
 - React Query for NodeBalancers #8964
 - React Query for Profile - Trusted Devices #8942
 - React Query for OAuth Apps #8938

packages/manager/src/components/CopyableTextField/CopyableTextField.tsx

@@ -1,59 +1,58 @@
 import * as React from 'react';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import TextField, { Props as TextFieldProps } from 'src/components/TextField';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  removeDisabledStyles: {
-    '& .MuiInput-input': {
-      borderColor: theme.name === 'light' ? '#ccc' : '#222',
-      color:
-        theme.name === 'light'
-          ? `${theme.palette.text.primary} !important`
-          : '#fff !important',
-      opacity: 1,
-      '-webkit-text-fill-color': 'unset !important',
-    },
-    '& .MuiInput-root': {
-      borderColor: theme.name === 'light' ? '#ccc' : '#222',
-      opacity: 1,
-    },
-  },
-  copyIcon: {
-    marginRight: theme.spacing(0.5),
-    '& svg': {
-      height: 14,
-      top: 1,
-    },
-  },
-}));
-
-type Props = TextFieldProps & {
+type CopyableTextFieldProps = TextFieldProps & {
   className?: string;
   hideIcon?: boolean;
 };
 
-type CombinedProps = Props;
-
-export const CopyableTextField: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
+export const CopyableTextField = (props: CopyableTextFieldProps) => {
   const { value, className, hideIcon, ...restProps } = props;
 
   return (
-    <TextField
+    <StyledTextField
       value={value}
       {...restProps}
-      className={`${className} ${'copy'} ${classes.removeDisabledStyles}`}
+      className={`${className} copy removeDisabledStyles`}
       disabled
       InputProps={{
         endAdornment: hideIcon ? undefined : (
-          <CopyTooltip text={`${value}`} className={classes.copyIcon} />
+          <CopyTooltip text={`${value}`} className="copyIcon" />
         ),
       }}
       data-qa-copy-tooltip
     />
   );
 };
 
-export default CopyableTextField;
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  '.removeDisabledStyles': {
+    '& .MuiInput-input': {
+      borderColor: theme.name === 'light' ? '#ccc' : '#222',
+      color:
+        theme.name === 'light'
+          ? `${theme.palette.text.primary} !important`
+          : '#fff !important',
+      opacity: theme.name === 'dark' ? 0.5 : 0.8,
+      '-webkit-text-fill-color': 'unset !important',
+    },
+    '&& .MuiInput-root': {
+      borderColor: theme.name === 'light' ? '#ccc' : '#222',
+      opacity: 1,
+    },
+  },
+  '.copyIcon': {
+    marginRight: theme.spacing(0.5),
+    '& svg': {
+      height: 14,
+      top: 1,
+      color: '#3683dc',
+    },
+  },
+  '&.copy > div': {
+    backgroundColor: theme.name === 'dark' ? '#2f3236' : '#f4f4f4',
+    opacity: 1,
+  },
+}));

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/CreateTransferSuccessDialog.tsx

@@ -4,7 +4,7 @@ import { DateTime } from 'luxon';
 import { update } from 'ramda';
 import * as React from 'react';
 import Button from 'src/components/Button';
-import CopyableTextField from 'src/components/CopyableTextField';
+import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import ToolTip from 'src/components/core/Tooltip';

packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/QRCodeForm.tsx

@@ -1,7 +1,7 @@
 import QRCode from 'qrcode.react';
 import { compose } from 'ramda';
 import * as React from 'react';
-import CopyableTextField from 'src/components/CopyableTextField';
+import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField';
 import { createStyles, withStyles, WithStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';

packages/manager/src/features/Profile/Referrals/Referrals.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Step1 from 'src/assets/referrals/step-1.svg';
 import Step2 from 'src/assets/referrals/step-2.svg';
 import Step3 from 'src/assets/referrals/step-3.svg';
-import CopyableTextField from 'src/components/CopyableTextField';
+import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField';
 import CircularProgress from 'src/components/core/CircularProgress';
 import Paper from 'src/components/core/Paper';
 import { makeStyles } from '@mui/styles';

packages/manager/src/features/Volumes/VolumeDrawer/ResizeVolumesInstruction.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import CopyableTextField from 'src/components/CopyableTextField';
+import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField';
 import { createStyles, withStyles, WithStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';

packages/manager/src/features/Volumes/VolumeDrawer/VolumeConfigForm.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import CopyableTextField from 'src/components/CopyableTextField';
+import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField';
 import { createStyles, withStyles, WithStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';