feat(opentrons-ai-client): remove GlobalStyle with styled-components (#18901)

* feat(opentrons-ai-client): remove GlobalStyle with styled-components

Author: koji

components/src/styles/global.module.css

@@ -176,4 +176,7 @@
   --purple-35: var(--purple-35-touchscreen);
   --purple-30: var(--purple-30-touchscreen);
   --purple-20: var(--purple-20-touchscreen);
+
+  /* font-family */
+  --font-family-main: 'Public Sans';
 }

opentrons-ai-client/src/atoms/GlobalStyle/index.ts

@@ -0,0 +1,27 @@
+/* from createGlobalStyle */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family-main), 'DejaVu Sans', sans-serif;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  color: var(--black-90);
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  border: none;
+}
+
+button:focus,
+button:active {
+  outline: 0;
+}

opentrons-ai-client/src/global.css

@@ -4,7 +4,6 @@ import { I18nextProvider } from 'react-i18next'
 import { Auth0Provider } from '@auth0/auth0-react'
 
 import { App } from './App'
-import { GlobalStyle } from './atoms/GlobalStyle'
 import { i18n } from './i18n'
 import {
   AUTH0_DOMAIN,
@@ -14,6 +13,11 @@ import {
   STAGING_AUTH0_CLIENT_ID,
 } from './resources/constants'
 
+import '@fontsource/public-sans'
+import '@fontsource/public-sans/600.css'
+import '@fontsource/public-sans/700.css'
+import './global.css'
+
 const rootElement = document.getElementById('root')
 
 const getClientId = (): string => {
@@ -46,7 +50,6 @@ if (rootElement != null) {
           redirect_uri: window.location.origin,
         }}
       >
-        <GlobalStyle />
         <I18nextProvider i18n={i18n}>
           <App />
         </I18nextProvider>