fix: [M3-7528] - Account Cancellation Survey Button Color Issues (linode#11412)

* fix : [M3-7528] - Account Cancellation Survey Button Color Issues

* Add changeset

Author: carrillo-erik

packages/manager/.changeset/pr-11412-fixed-1734107098320.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Account Cancellation Survey Button Color Issues ([#11412](https://github.com/linode/manager/pull/11412))

packages/manager/src/features/CancelLanding/CancelLanding.tsx

@@ -1,10 +1,12 @@
 import { Button, H1Header, Typography } from '@linode/ui';
+import { useTheme } from '@mui/material/styles';
 import { path } from 'ramda';
 import * as React from 'react';
 import { Redirect, useLocation } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
+import LightThemeAkamaiLogo from 'src/assets/logo/akamai-logo-color.svg';
+import DarkThemeAkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 
 import type { Theme } from '@mui/material/styles';
 
@@ -14,8 +16,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   root: {
     '& button': {
-      backgroundColor: theme.tokens.color.Green[70],
-      color: theme.tokens.color.Neutrals.White,
       marginTop: theme.spacing(8),
     },
     '& h1': {
@@ -39,20 +39,25 @@ const useStyles = makeStyles()((theme: Theme) => ({
 export const CancelLanding = React.memo(() => {
   const { classes } = useStyles();
   const location = useLocation();
+  const theme = useTheme();
 
-  const survey_link = path<string>(['state', 'survey_link'], location);
+  const surveyLink = path<string>(['state', 'survey_link'], location);
 
-  if (!survey_link) {
+  if (!surveyLink) {
     return <Redirect to="/" />;
   }
 
   const goToSurvey = () => {
-    window.location.assign(survey_link);
+    window.location.assign(surveyLink);
   };
 
   return (
     <div className={classes.root} data-testid="body">
-      <AkamaiLogo className={classes.logo} />
+      {theme.name === 'light' ? (
+        <LightThemeAkamaiLogo className={classes.logo} />
+      ) : (
+        <DarkThemeAkamaiLogo className={classes.logo} />
+      )}
       <H1Header title="It&rsquo;s been our pleasure to serve you." />
       <Typography>
         Your account is closed. We hope you&rsquo;ll consider us for your future
@@ -72,5 +77,3 @@ export const CancelLanding = React.memo(() => {
     </div>
   );
 });
-
-export default CancelLanding;

packages/manager/src/index.tsx

@@ -26,9 +26,13 @@ const store = storeFactory();
 setupInterceptors(store);
 
 const Lish = React.lazy(() => import('src/features/Lish'));
-const CancelLanding = React.lazy(
-  () => import('src/features/CancelLanding/CancelLanding')
+
+const CancelLanding = React.lazy(() =>
+  import('src/features/CancelLanding/CancelLanding').then((module) => ({
+    default: module.CancelLanding,
+  }))
 );
+
 const LoginAsCustomerCallback = React.lazy(
   () => import('src/layouts/LoginAsCustomerCallback')
 );