Merge branch 'test-beta' into master-beta

client/craco.config.js

@@ -10,6 +10,7 @@ const {defaultAlgorithm, defaultSeed} = theme;
 const mapToken = defaultAlgorithm(defaultSeed);
 const v4Token = convertLegacyToken(mapToken);
 
+// TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
 
 module.exports = {
     plugins: [
@@ -33,29 +34,7 @@ module.exports = {
             options: {
                 lessLoaderOptions: {
                     lessOptions: {
-                        modifyVars: {
+                        modifyVars: {...v4Token},
-                            ...v4Token,
-                            // TODO: This will no longer work in AntD 5.0
-                            ...(process.env.NODE_ENV === "development"
-                                ? {"colorPrimary": "#a51d1d"}
-                                : {
-                                    //"@primary-color": "#1DA57A"
-                                }),
-                            // "@primary-color": " #1890ff", // primary color for all components
-                            // "@link-color": "#1890ff", // link color
-                            // "@success-color": "#52c41a", // success state color
-                            // "@warning-color": "#faad14", // warning state color
-                            // "@error-color": "#f5222d", // error state color
-                            // "@font-size-base": "14px", // major text font size
-                            // " @heading-color": "rgba(0, 0, 0, 0.85)", // heading text color
-                            // "@text-color": "rgba(0, 0, 0, 0.65)", // major text color
-                            // "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // secondary text color
-                            // "@disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
-                            // "@border-radius-base": "2px", // major border radius
-                            // "@border-color-base": "#d9d9d9", // major border color
-                            // "@box-shadow-base":
-                            //   "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers }",
-                        },
                         javascriptEnabled: true,
                     },
                 },

client/src/App/App.container.jsx

@@ -1,45 +1,50 @@
-import { ApolloProvider } from "@apollo/client";
+import {ApolloProvider} from "@apollo/client";
-import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
+import {SplitFactoryProvider, SplitSdk,} from '@splitsoftware/splitio-react';
-import { ConfigProvider } from "antd";
+import {ConfigProvider} from "antd";
 import enLocale from "antd/es/locale/en_US";
 import dayjs from "../utils/day";
 import 'dayjs/locale/en';
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 
+import themeProvider from "./themeProvider";
+
 dayjs.locale("en");
 
-export const factory = SplitSdk({
+const config = {
-  core: {
+    core: {
-    authorizationKey: process.env.REACT_APP_SPLIT_API,
+        authorizationKey: process.env.REACT_APP_SPLIT_API,
-    key: "anon",
+        key: "anon",
-  },
+    },
-});
+};
+export const factory = SplitSdk(config);
+
 
 export default function AppContainer() {
-  const { t } = useTranslation();
+    const {t} = useTranslation();
 
-  return (
+    return (
-    <ApolloProvider client={client}>
+        <ApolloProvider client={client}>
-      <ConfigProvider
+            <ConfigProvider
-        //componentSize="small"
+                //componentSize="small"
-        input={{ autoComplete: "new-password" }}
+                input={{autoComplete: "new-password"}}
-        locale={enLocale}
+                locale={enLocale}
-        form={{
+                theme={themeProvider}
-          validateMessages: {
+                form={{
-            // eslint-disable-next-line no-template-curly-in-string
+                    validateMessages: {
-            required: t("general.validation.required", { label: "${label}" }),
+                        // eslint-disable-next-line no-template-curly-in-string
-          },
+                        required: t("general.validation.required", {label: "${label}"}),
-        }}
+                    },
-      >
+                }}
-        <GlobalLoadingBar />
+            >
-        <SplitFactory factory={factory}>
+                <GlobalLoadingBar/>
-          <App />
+                <SplitFactoryProvider factory={factory}>
-        </SplitFactory>
+                    <App/>
-      </ConfigProvider>
+                </SplitFactoryProvider>
-    </ApolloProvider>
+            </ConfigProvider>
-  );
+        </ApolloProvider>
+    );
 }

client/src/App/App.styles.scss

@@ -5,10 +5,6 @@
   border-bottom: 1px solid #74695c !important;
 }
 
-.ant-menu-dark .ant-menu-item:hover {
-  background-color: #1890ff !important;
-}
-
 .imex-table-header {
   display: flex;
   flex-wrap: wrap;

client/src/App/themeProvider.js

@@ -0,0 +1,46 @@
+import {defaultsDeep} from "lodash";
+
+/**
+ * Default theme
+ * @type {{components: {Menu: {itemDividerBorderColor: string}}}}
+ */
+const defaultTheme = {
+    components: {
+        Menu: {
+            darkItemHoverBg: '#1677ff',
+            itemHoverBg: '#1677ff',
+            horizontalItemHoverBg: '#1677ff',
+        }
+    },
+    token: {
+        colorPrimary: '#1677ff'
+    }
+};
+
+/**
+ * Development theme
+ * @type {{components: {Menu: {itemHoverBg: string, darkItemHoverBg: string, horizontalItemHoverBg: string}}, token: {colorPrimary: string}}}
+ */
+const devTheme = {
+    components: {
+        Menu: {
+            darkItemHoverBg: '#a51d1d',
+            itemHoverBg: '#a51d1d',
+            horizontalItemHoverBg: '#a51d1d',
+        }
+    },
+    token: {
+        colorPrimary: '#a51d1d'
+    }
+};
+
+/**
+ * Production theme
+ * @type {{components: {Menu: {itemHoverBg: string, darkItemHoverBg: string, horizontalItemHoverBg: string}}, token: {colorPrimary: string}}}
+ */
+const prodTheme = {};
+
+const theme = process.env.NODE_ENV === "development" ? devTheme
+    : prodTheme;
+
+export default defaultsDeep(theme, defaultTheme);