From d7faf11e27d81fbb0d23dbcc528dc0532ee4da2c Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Sat, 20 Jan 2024 21:20:36 -0500 Subject: [PATCH] - Restore the color diffs between dev and prod - Clean up Craco config - Updated SplitFactoryProvider Signed-off-by: Dave Richer --- client/craco.config.js | 25 +----------- client/src/App/App.container.jsx | 67 +++++++++++++++++--------------- client/src/App/App.styles.scss | 4 -- client/src/App/themeProvider.js | 46 ++++++++++++++++++++++ 4 files changed, 84 insertions(+), 58 deletions(-) create mode 100644 client/src/App/themeProvider.js diff --git a/client/craco.config.js b/client/craco.config.js index 26baf618b..f7164acd5 100644 --- a/client/craco.config.js +++ b/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: { - ...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 }", - }, + modifyVars: {...v4Token}, javascriptEnabled: true, }, }, diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx index 31d86fd5f..2b756f2a9 100644 --- a/client/src/App/App.container.jsx +++ b/client/src/App/App.container.jsx @@ -1,45 +1,50 @@ -import { ApolloProvider } from "@apollo/client"; -import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react"; -import { ConfigProvider } from "antd"; +import {ApolloProvider} from "@apollo/client"; +import {SplitFactoryProvider, SplitSdk,} from '@splitsoftware/splitio-react'; +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({ - core: { - authorizationKey: process.env.REACT_APP_SPLIT_API, - key: "anon", - }, -}); +const config = { + core: { + authorizationKey: process.env.REACT_APP_SPLIT_API, + key: "anon", + }, +}; +export const factory = SplitSdk(config); + export default function AppContainer() { - const { t } = useTranslation(); + const {t} = useTranslation(); - return ( - - - - - - - - - ); + return ( + + + + + + + + + ); } diff --git a/client/src/App/App.styles.scss b/client/src/App/App.styles.scss index 63358885a..8eab784c9 100644 --- a/client/src/App/App.styles.scss +++ b/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; diff --git a/client/src/App/themeProvider.js b/client/src/App/themeProvider.js new file mode 100644 index 000000000..9bf301d61 --- /dev/null +++ b/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); \ No newline at end of file