fix: use same color palette for tailwind and mui

src/App.tsx

@@ -13,7 +13,6 @@ import { envGlobalVar, initializeApolloClient, initializeTranslations } from '~/
 import { initializeYup } from '~/formValidation/initializeYup'
 import { useShortcuts } from '~/hooks/ui/useShortcuts'
 import { theme } from '~/styles'
-import { inputGlobalStyles } from '~/styles/globalStyle'
 
 import { AppEnvEnum } from './core/constants/globalTypes'
 
@@ -54,7 +53,6 @@ const App = () => {
       <ApolloProvider client={client}>
         <StyledEngineProvider injectFirst>
           <ThemeProvider theme={theme}>
-            {inputGlobalStyles}
             <ErrorBoundary>
               <RouteWrapper />
             </ErrorBoundary>

src/main.css

@@ -1,3 +1,36 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Custom styles */
+
+html,
+body,
+#root {
+  @apply m-0 h-full w-full overflow-auto p-0;
+}
+
+body {
+  @apply relative font-sans text-base text-grey-600 subpixel-antialiased;
+}
+
+a {
+  @apply text-blue no-underline visited:text-purple hover:underline focus:ring;
+}
+
+b {
+  @apply text-base font-medium -tracking-[0.01em];
+}
+
+ul {
+  @apply m-0 list-disc pl-6;
+}
+
+span.line-break-anywhere {
+  @apply break-all;
+}
+
+/* TODO: Might be able to delete after migration */
+button {
+  @apply h-10 cursor-pointer rounded-xl border-0 px-3 py-[6px] font-sans outline-none active:outline-none;
+}

src/styles/colorsPalette.ts

@@ -1,110 +1,55 @@
+import { colors } from '../../tailwind.config'
+
 /**
  * In primary, secondary, info, success, warning and error color set
  * Colors '600 === main' and '800 === dark' as well
  * MUI needs to know the main and dark
  * But to avoid any confusion we also kept 600 & 800 as it is used in Figma
  */
-
-const grey300 = '#D9DEE7'
-const grey500 = '#8C95A6'
-const grey600 = '#66758F'
-const grey700 = '#19212E'
-const white = '#fff'
-
 export const palette = {
   common: {
     black: '#000',
-    white,
+    white: '#fff',
   },
   primary: {
-    100: '#DEECFF',
-    200: '#B3D4FF',
-    300: '#4C9AFF',
-    400: '#2684FF',
-    500: '#267DFF',
-    600: '#006CFA',
-    main: '#006CFA',
-    700: '#005FDB',
-    800: '#0050B8',
-    dark: '#0050B8',
+    ...colors.blue,
+    main: colors.blue[600],
+    dark: colors.blue[800],
   },
   secondary: {
-    100: '#FFF7E6',
-    200: '#FFF0B3',
-    300: '#FFE380',
-    400: '#FFC400',
-    500: '#FFAB00',
-    600: '#FF7E1D',
-    main: '#FF7E1D',
-    700: '#F06700',
-    800: '#CC5800',
-    dark: '#CC5800',
+    ...colors.yellow,
+    main: colors.yellow[600],
+    dark: colors.yellow[800],
   },
   info: {
-    100: '#EAE6FF',
-    200: '#C9C1F5',
-    300: '#AEA2F1',
-    400: '#8272DF',
-    500: '#5D48D5',
-    600: '#422CC1',
-    main: '#422CC1',
-    700: '#332296',
-    800: '#2A1C7D',
-    dark: '#2A1C7D',
+    ...colors.purple,
+    main: colors.purple[600],
+    dark: colors.purple[800],
   },
   success: {
-    100: '#E3FCF4',
-    200: '#ABF5DC',
-    300: '#79F2CA',
-    400: '#65DCB4',
-    500: '#36B389',
-    600: '#008559',
-    main: '#008559',
-    700: '#006644',
-    800: '#005236',
-    dark: '#005236',
+    ...colors.green,
+    main: colors.green[600],
+    dark: colors.green[800],
   },
   warning: {
-    100: '#FFF7E6',
-    200: '#FFF0B3',
-    300: '#FFE380',
-    400: '#FFC400',
-    500: '#FFAB00',
-    600: '#FF7E1D',
-    main: '#FF7E1D',
-    700: '#F06700',
-    800: '#CC5800',
-    dark: '#CC5800',
+    ...colors.yellow,
+    main: colors.yellow[600],
+    dark: colors.yellow[800],
   },
   error: {
-    100: '#FFEBE6',
-    200: '#FFBDAD',
-    300: '#FF8F73',
-    400: '#FF7C5C',
-    500: '#F6491E',
-    600: '#DC3309',
-    main: '#DC3309',
-    700: '#BA2B08',
-    800: '#9D2507',
-    dark: '#9D2507',
-  },
-  grey: {
-    100: '#F3F4F6',
-    200: '#E7EAEE',
-    300: grey300,
-    400: '#C3C9D5',
-    500: grey500,
-    600: grey600,
-    700: grey700,
+    ...colors.red,
+    main: colors.red[600],
+    dark: colors.red[800],
   },
+  grey: colors.grey,
   background: {
-    default: white,
-    paper: white,
+    default: '#fff',
+    paper: '#fff',
   },
   text: {
-    primary: grey600,
-    secondary: grey700,
-    disabled: grey500,
+    primary: colors.grey[600],
+    secondary: colors.grey[700],
+    disabled: colors.grey[500],
   },
-  divider: grey300,
+  divider: colors.grey[300],
 }

src/styles/muiTheme.ts

@@ -1,4 +1,5 @@
 import { alpha, createTheme } from '@mui/material/styles'
+import type {} from '@mui/x-date-pickers/themeAugmentation'
 
 import { palette } from './colorsPalette'
 
@@ -43,14 +44,16 @@ export const theme = createTheme({
         disableRipple: true,
         disableTouchRipple: true,
       },
+    },
+    MuiPickersArrowSwitcher: {
       styleOverrides: {
-        root: {
-          /* reset default button shape in datepicker */
-          '&.MuiPickersArrowSwitcher-button': {
-            width: '40px',
-            height: '40px',
-            borderRadius: '8px',
-          },
+        spacer: {
+          width: '24px',
+        },
+        button: {
+          width: '40px',
+          height: '40px',
+          borderRadius: '8px',
         },
       },
     },

tailwind.config.ts

@@ -1,6 +1,6 @@
-type Colors = 'grey' | 'blue' | 'yellow' | 'purple' | 'green' | 'red'
+import plugin from 'tailwindcss/plugin'
 
-const colors: Record<Colors, Record<number, string>> = {
+export const colors = {
   grey: {
     100: '#F3F4F6',
     200: '#E7EAEE',
@@ -62,8 +62,7 @@ const colors: Record<Colors, Record<number, string>> = {
   },
 }
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+const config = {
   content: ['./src/**/*.{ts,tsx,html}'],
   theme: {
     colors: {
@@ -107,5 +106,36 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addUtilities, theme }) {
+      // Dividers
+      addUtilities({
+        '.shadow-t': {
+          boxShadow: `0px 1px 0px 0px ${theme('colors.grey.300')} inset`,
+        },
+
+        '.shadow-r': {
+          boxShadow: `-1px 0px 0px 0px ${theme('colors.grey.300')} inset`,
+        },
+
+        '.shadow-b': {
+          boxShadow: `0px -1px 0px 0px ${theme('colors.grey.300')} inset`,
+        },
+
+        '.shadow-l': {
+          boxShadow: `1px 0px 0px 0px ${theme('colors.grey.300')} inset`,
+        },
+      })
+      // Outline ring
+      addUtilities({
+        '.ring': {
+          outline: 'none',
+          boxShadow: `0px 0px 0px 4px ${theme('colors.blue.200')}`,
+          borderRadius: '4px',
+        },
+      })
+    }),
+  ],
 }
+
+export default config