ui: extract antd's theme to its own file

Signed-off-by: Miguel Garcia Garcia <[email protected]>
cernanalysispreservation · Aug 24, 2023 · 3bfaa89 · 3bfaa89
1 parent c43679d
commit 3bfaa89
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 17 deletions.
diff --git a/ui/cap-react/src/antd/Root.js b/ui/cap-react/src/antd/Root.js
@@ -4,8 +4,7 @@ import { Provider } from "react-redux";
 import App from "../antd/App";
 import { ConfigProvider } from "antd";
 import { MatomoProvider, createInstance } from "@datapunt/matomo-tracker-react";
-
-const PRIMARY_COLOR = "#006996";
+import { theme } from "./utils/theme";
 
 export const matomoInstance =
   process.env.PIWIK_URL && process.env.PIWIK_SITEID
@@ -20,18 +19,7 @@ const Root = ({ store, history }) => {
     <Provider store={store}>
       <MatomoProvider value={matomoInstance}>
         <ConnectedRouter history={history}>
-          <ConfigProvider
-            theme={{
-              token: {
-                colorPrimary: PRIMARY_COLOR,
-                colorLink: PRIMARY_COLOR,
-                colorLinkHover: "#1a7fa3",
-                borderRadius: 2,
-                colorBgLayout: "#f0f2f5",
-                fontFamily: "Titillium Web",
-              },
-            }}
-          >
+          <ConfigProvider theme={theme}>
             <App />
           </ConfigProvider>
         </ConnectedRouter>

diff --git a/ui/cap-react/src/antd/admin/components/AdminPanel.js b/ui/cap-react/src/antd/admin/components/AdminPanel.js
@@ -60,7 +60,7 @@ const AdminPanel = ({ location, match, schema, schemaInit, getSchema }) => {
               setTourDone(true)
             }
             styles={{
-              options: { primaryColor: "#006996" },
+              options: { primaryColor: PRIMARY_COLOR },
               spotlight: { borderRadius: 0 },
             }}
           />

diff --git a/ui/cap-react/src/antd/admin/formComponents/HoverBox.js b/ui/cap-react/src/antd/admin/formComponents/HoverBox.js
@@ -1,6 +1,7 @@
 import { useDrop } from "react-dnd";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { PRIMARY_COLOR } from "../../utils/theme";
 
 function getStyle(isOverCurrent) {
   const style = {
@@ -10,7 +11,7 @@ function getStyle(isOverCurrent) {
 
   return isOverCurrent
     ? {
-        outline: "1px solid #006996",
+        outline: `1px solid ${PRIMARY_COLOR}`,
         outlineOffset: "-1px",
         ...style,
       }

diff --git a/ui/cap-react/src/antd/utils/theme.js b/ui/cap-react/src/antd/utils/theme.js
@@ -0,0 +1,12 @@
+export const PRIMARY_COLOR = "#006996";
+
+export const theme = {
+  token: {
+    colorPrimary: PRIMARY_COLOR,
+    colorLink: PRIMARY_COLOR,
+    colorLinkHover: "#1a7fa3",
+    borderRadius: 2,
+    colorBgLayout: "#f0f2f5",
+    fontFamily: "Titillium Web",
+  },
+};
diff --git a/ui/cap-react/src/antd/welcome/Intro/Intro.js b/ui/cap-react/src/antd/welcome/Intro/Intro.js
@@ -5,6 +5,7 @@ import {
   TeamOutlined,
   ReloadOutlined,
 } from "@ant-design/icons";
+import { PRIMARY_COLOR } from "../../utils/theme";
 
 const Intro = () => {
   const { useBreakpoint } = Grid;
@@ -45,7 +46,7 @@ const Intro = () => {
               >
                 CERN
                 <br />
-                <span style={{ color: "#006996", fontWeight: "lighter" }}>
+                <span style={{ color: PRIMARY_COLOR, fontWeight: "lighter" }}>
                   Analysis Preservation
                 </span>
               </Typography.Title>