feature/IO-1113-Online-Dark-Mode - Initial Commit

client/src/components/upsell/upsell.component.jsx

@@ -11,7 +11,7 @@ import {
 } from "@ant-design/icons";
 import { Button, Card, Result } from "antd";
 import i18n from "i18next";
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { store } from "../../redux/store.js";
@@ -21,7 +21,6 @@ import "./upsell.styles.scss";
 export default function UpsellComponent({ featureName, subFeatureName, upsell, disableMask }) {
   const { t } = useTranslation();
   const resultProps = upsell || upsellEnum[featureName][subFeatureName];
-
   const componentRef = useRef(null);
 
   useEffect(() => {
@@ -34,12 +33,10 @@ export default function UpsellComponent({ featureName, subFeatureName, upsell, d
       mask.style.left = 0;
       mask.style.width = "100%";
       mask.style.height = "100%";
-      mask.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+      mask.style.backgroundColor = "var(--mask-bg)";
       // mask.style.zIndex = 9999;
       parentElement.style.position = "relative";
-
       parentElement.prepend(mask);
-
       return () => {
         parentElement.removeChild(mask);
       };
@@ -47,18 +44,22 @@ export default function UpsellComponent({ featureName, subFeatureName, upsell, d
   }, [disableMask]);
 
   if (!resultProps) return <Result status="info" title={t("upsell.messages.generic")} />;
+
   return (
     <div ref={componentRef}>
       <Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
     </div>
   );
 }
+
 //Kept in the same function as the result props line must mirror and doesnt warrant a separate function.
 export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureName }) {
   const resultProps = upsell || upsellEnum[featureName][subFeatureName];
   return (
     <div className="mask-wrapper">
-      <div className="mask-content">{children}</div>
+      <div className="mask-content" style={{ backgroundColor: "var(--mask-bg)" }}>
+        {children}
+      </div>
       <div className="mask-overlay">
         <Card size="small">
           <Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
@@ -71,7 +72,6 @@ export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureNam
 //This is kept in this function as pulling it out into it's own util/enum prevents passing JSX as an `extra` prop
 export const upsellEnum = () => {
   const { currentUser, bodyshop } = store.getState().user;
-
   const [first_name, ...last_name] = currentUser?.displayName ? currentUser.displayName.split(" ") : [];
   const LearnMoreLink = encodeURI(
     InstanceRenderManager({
@@ -79,7 +79,6 @@ export const upsellEnum = () => {
       rome: `https://forms.zohopublic.com/rometech/form/ROLearnMore/formperma/0G29z8LgLlvKK8nno-b7s-GHgNXwIFlrMeE0mC394L4?first_name=${first_name || ""}&last_name=${last_name.join(" ") || ""}&shop_name=${bodyshop?.shopname || ""}&email=${currentUser?.email || ""}&shop_phone=${bodyshop?.phone || ""}`
     })
   );
-
   return {
     bills: {
       autoreconcile: {

client/src/components/upsell/upsell.styles.scss

@@ -1,6 +1,5 @@
 .mask-wrapper {
   position: relative;
-//Newly added
   display: flex;
   justify-content: center;
   align-items: center;
@@ -8,12 +7,8 @@
 }
 
 .mask-content {
-  // filter: blur(5px);
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--mask-content-bg);
   pointer-events: none;
-
-  //Newly added
-  //width: 100%;
 }
 
 .mask-overlay {
@@ -22,35 +17,8 @@
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
- // width: 100%
 }
 
 .mask-overlay .ant-card {
   max-width: 100%;
 }
-
-// .mask-wrapper {
-//   position: relative;
-//   display: inline-block;
-// }
-
-// .mask-content {
-//   filter: blur(5px);
-//   pointer-events: none;
-// }
-
-// .mask-overlay {
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-//   width: 100%;
-//   height: 100%;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   z-index: 10;
-// }
-
-// .mask-overlay .ant-card {
-//   max-width: 100%;
-// }