task/WG-394: Global Antd styling

react/src/common_components/Button/Button.module.css

@@ -0,0 +1,3 @@
+.root {
+  min-width: 100px;
+}

react/src/common_components/Button/Button.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button, ButtonProps, ConfigProvider, ThemeConfig } from 'antd';
+import styles from './Button.module.css';
+
+const secondaryTheme: ThemeConfig = {
+  components: {
+    Button: {
+      defaultActiveBg: '#f4f4f4',
+      defaultActiveColor: '#222',
+      defaultActiveBorderColor: '#026',
+      defaultBg: '#f4f4f4',
+      defaultBorderColor: '#222222',
+      defaultColor: '#222222',
+      defaultHoverBg: '#aac7ff',
+    },
+  },
+};
+
+export const SecondaryButton: React.FC<ButtonProps> = (props) => {
+  return (
+    <ConfigProvider theme={secondaryTheme}>
+      <Button className={styles.root} {...props} />
+    </ConfigProvider>
+  );
+};
+
+const primaryButtonTheme: ThemeConfig = {
+  components: {
+    Button: {
+      defaultActiveBg: '#74B566',
+      defaultActiveColor: '#fff',
+      defaultActiveBorderColor: '#74B566',
+      defaultBg: '#74B566',
+      defaultBorderColor: '#74B566',
+      defaultColor: '#fff',
+      defaultHoverBg: '#74b566d9',
+      defaultHoverBorderColor: '#74b566d9',
+      defaultHoverColor: '#fff',
+    },
+  },
+};
+
+export const PrimaryButton: React.FC<ButtonProps> = (props) => {
+  return (
+    <ConfigProvider theme={primaryButtonTheme}>
+      <Button className={styles.root} {...props} />
+    </ConfigProvider>
+  );
+};

react/src/common_components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

react/src/common_components/Icon/Icon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Icon.module.css';
+
+const Icon: React.FC<{ className: string; label: string }> = ({
+  className,
+  label,
+}) => {
+  return <i className={className} role="img" aria-label={label} />;
+};
+
+export default Icon;

react/src/common_components/Icon/index.ts

@@ -0,0 +1 @@
+export { default as Icon } from './Icon';

react/src/common_components/Spinner/Spinner.module.css

@@ -0,0 +1,5 @@
+.spinner {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}

react/src/common_components/Spinner/Spinner.tsx

@@ -0,0 +1,7 @@
+import { Spin } from 'antd';
+import React from 'react';
+import styles from './Spinner.module.css';
+
+const Spinner: React.FC = () => <Spin className={styles.spinner} />;
+
+export default Spinner;

react/src/common_components/Spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner';

react/src/common_components/index.ts

@@ -0,0 +1,3 @@
+export { PrimaryButton, SecondaryButton } from './Button';
+export { Icon } from './Icon';
+export { Spinner } from './Spinner';

react/src/index.tsx

@@ -6,12 +6,39 @@ import './index.css';
 import store from './redux/store';
 import { Provider } from 'react-redux';
 import { queryClient } from './queryClient';
+import { ConfigProvider, ThemeConfig } from 'antd';
+
+const themeConfig: ThemeConfig = {
+  token: {
+    borderRadius: 0,
+    colorPrimary: '#337ab7',
+    colorError: '#d9534f',
+    colorPrimaryTextHover: 'black',
+    colorBorderSecondary: '#b7b7b7',
+  },
+  components: {
+    Table: {
+      cellPaddingBlock: 8,
+      headerBg: 'transparent',
+      headerColor: '#333333',
+      headerSplitColor: 'transparent',
+      rowHoverBg: 'rgb(230, 246, 255)',
+      borderColor: 'rgb(215, 215, 215)',
+      colorText: 'rgb(112, 112, 112)',
+    },
+    Layout: {
+      bodyBg: 'transparent',
+    },
+  },
+};
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
-        <App />
+        <ConfigProvider theme={themeConfig}>
+          <App />
+        </ConfigProvider>
       </QueryClientProvider>
     </Provider>
   </React.StrictMode>