From 5a1582eb7b3e0569c7e5b475f30eb162299b12ef Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan.stardust@gmail.com>
Date: Fri, 30 Dec 2022 16:27:10 +0530
Subject: [PATCH] chore: Update upgrade button intercom message + Fix text
 color on error pages when background is dark (#18975)

This PR
- updates the upgrade button intercom message.
- Fixes text color on error pages when background is dark

## Type of change
- Bug fix


## How Has This Been Tested?
- Not needed.

## Checklist:
### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---
 app/client/src/ce/constants/messages.ts              |  2 ++
 .../AdminSettings/config/branding/UpgradeBanner.tsx  |  4 ++--
 app/client/src/pages/common/ErrorPages/Page.tsx      | 12 +++++++++++-
 .../widgets/VideoWidget/component/PopoverVideo.tsx   |  2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index f58c699b9d..967f7f9590 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -1190,6 +1190,8 @@ export const ADMIN_BRANDING_COLOR_TOOLTIP_FONT = () =>
   `Used as text color for the buttons.`;
 export const ADMIN_BRANDING_COLOR_TOOLTIP_DISABLED = () =>
   `Used as background color for disabled buttons.`;
+export const ADMIN_BRANDING_UPGRADE_INTERCOM_MESSAGE = () =>
+  `I would like to enable Custom Branding for my workspace and am interested in Appsmith Business.`;
 
 // Guided tour
 // -- STEPS ---
diff --git a/app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx b/app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx
index 295be6c9e8..f418537d96 100644
--- a/app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx
+++ b/app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx
@@ -4,6 +4,7 @@ import { Button } from "design-system";
 import {
   ADMIN_BRANDING_SETTINGS_SUBTITLE,
   ADMIN_BRANDING_SETTINGS_TITLE,
+  ADMIN_BRANDING_UPGRADE_INTERCOM_MESSAGE,
   createMessage,
 } from "@appsmith/constants/messages";
 import useOnUpgrade from "utils/hooks/useOnUpgrade";
@@ -15,8 +16,7 @@ import {
 const UpgradeBanner = () => {
   const { onUpgrade } = useOnUpgrade({
     logEventName: "BRANDING_UPGRADE_CLICK",
-    intercomMessage:
-      "Hello, I would like to upgrade my appsmith instance to use the custom branding feature",
+    intercomMessage: createMessage(ADMIN_BRANDING_UPGRADE_INTERCOM_MESSAGE),
   });
 
   return (
diff --git a/app/client/src/pages/common/ErrorPages/Page.tsx b/app/client/src/pages/common/ErrorPages/Page.tsx
index ab46b405a5..d78856cdad 100644
--- a/app/client/src/pages/common/ErrorPages/Page.tsx
+++ b/app/client/src/pages/common/ErrorPages/Page.tsx
@@ -1,4 +1,7 @@
 import React from "react";
+import { useSelector } from "react-redux";
+import { getTenantConfig } from "@appsmith/selectors/tenantSelectors";
+import { getComplementaryGrayscaleColor } from "widgets/WidgetUtils";
 
 type PageProps = {
   children?: React.ReactNode;
@@ -11,9 +14,16 @@ type PageProps = {
 
 function Page(props: PageProps) {
   const { cta, description, errorCode, title } = props;
+  const tenantConfig = useSelector(getTenantConfig);
+  const backgroundColor = tenantConfig.brandColors.background;
+  const textColor = getComplementaryGrayscaleColor(backgroundColor);
 
   return (
-    <div className="absolute inset-0 flex flex-col items-center justify-center space-y-6 bg-[color:var(--ads-color-background-secondary)]">
+    <div
+      className={`absolute inset-0 flex flex-col items-center justify-center space-y-6 bg-[color:var(--ads-color-background-secondary)] ${
+        textColor === "white" ? "text-white" : ""
+      }`}
+    >
       {errorCode && (
         <div className="-mt-8 flex items-center font-bold text-3xl justify-center w-28 bg-white border aspect-square text-[color:var(--ads-color-brand)]">
           {errorCode}
diff --git a/app/client/src/widgets/VideoWidget/component/PopoverVideo.tsx b/app/client/src/widgets/VideoWidget/component/PopoverVideo.tsx
index 888ab847ee..0952002fd4 100644
--- a/app/client/src/widgets/VideoWidget/component/PopoverVideo.tsx
+++ b/app/client/src/widgets/VideoWidget/component/PopoverVideo.tsx
@@ -20,7 +20,7 @@ const PlayIcon = styled(ControlIcons.PLAY_VIDEO as AnyStyledComponent)`
   }
 `;
 
-const PlayerWrapper = styled.div`	import React, { Ref } from "react";
+const PlayerWrapper = styled.div`
   width: 600px;
   height: 400px;
 `;