feat(protocol-designer): add public sans to protocol-designer

protocol-designer/package.json

@@ -19,6 +19,7 @@
   "homepage": "https://github.com/Opentrons/opentrons",
   "license": "Apache-2.0",
   "dependencies": {
+    "@fontsource/public-sans": "5.0.3",
     "@hot-loader/react-dom": "17.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vituum/vite-plugin-postcss": "1.1.0",

protocol-designer/src/atoms/GlobalStyle/index.ts

@@ -0,0 +1,14 @@
+import { createGlobalStyle } from 'styled-components'
+import '@fontsource/public-sans'
+import '@fontsource/public-sans/600.css'
+import '@fontsource/public-sans/700.css'
+
+export const GlobalStyle = createGlobalStyle<{ enableRedesign?: boolean }>`
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: ${props =>
+      props.enableRedesign ?? false ? 'Public Sans' : 'Open Sans'}, sans-serif;
+  }
+`

protocol-designer/src/index.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Provider } from 'react-redux'
+import { Provider, useSelector } from 'react-redux'
 import { I18nextProvider } from 'react-i18next'
 
 import { configureStore } from './configureStore'
 import { initialize } from './initialize'
 import { initializeMixpanel } from './analytics/mixpanel'
+import { getEnableRedesign } from './feature-flags/selectors'
 import { i18n } from './localization'
 import { App } from './App'
+import { GlobalStyle } from './atoms/GlobalStyle'
 
 // initialize Redux
 const store = configureStore()
@@ -20,13 +22,22 @@ const container = document.getElementById('root')
 if (container == null) throw new Error('Failed to find the root element')
 const root = ReactDOM.createRoot(container)
 
-const render = (Component: any): void => {
-  root.render(
-    <Provider store={store}>
+const RootComponent = (): JSX.Element => {
+  const enableRedesign = useSelector(getEnableRedesign)
+  console.log('enableRedesign', enableRedesign)
+
+  return (
+    <>
+      <GlobalStyle enableRedesign={enableRedesign} />
       <I18nextProvider i18n={i18n}>
-        <Component />
+        <App />
       </I18nextProvider>
-    </Provider>
+    </>
   )
 }
-render(App)
+
+root.render(
+  <Provider store={store}>
+    <RootComponent />
+  </Provider>
+)