Removed font.css, replaced with meta tag imports in components (#10328)

Import of Google fonts in font.css was breaking first line of later .css file imports because of lack of semicolon at the end. But we should be importing fonts in components via <link>s hoisted into the <head> via <MetaTags>. This fixes IR-2428. When the user menu is rendered in a modal, e.g. at /studio,its inclusion in an MUI modal was adding some undesired styling, specifically a white background. Made the menu stylings all !important to override that behavior. This fixes IR-2452.
EtherealEngine · Jun 6, 2024 · d9081f2 · d9081f2
1 parent cec95a6
commit d9081f2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git a/packages/client-core/src/common/components/Menu/index.module.scss b/packages/client-core/src/common/components/Menu/index.module.scss
@@ -1,29 +1,29 @@
 .menu {
-  background: var(--popupBackground);
-  border-radius: 20px;
-  color: var(--textColor);
-  pointer-events: all;
+  background: var(--popupBackground) !important;
+  border-radius: 20px !important;
+  color: var(--textColor) !important;
+  pointer-events: all !important;
 
   :global {
     .MuiDialogContentText-root {
-      color: var(--textColor);
+      color: var(--textColor) !important;
     }
 
     .MuiDialogContent-root {
-      padding-bottom: 10px;
-      overflow-x: hidden;
-      pointer-events: all;
+      padding-bottom: 10px !important;
+      overflow-x: hidden !important;
+      pointer-events: all !important;
     }
   }
 }
 
 .dialogTitle {
-  display: flex;
-  align-items: center;
-  padding: 16px 12px;
+  display: flex !important;
+  align-items: center !important;
+  padding: 16px 12px !important;
 }
 
 .dialogActions {
-  gap: 16px;
-  padding: 8px 24px;
+  gap: 16px !important;
+  padding: 8px 24px !important;
 }
diff --git a/packages/editor/src/components/Editor2Container.tsx b/packages/editor/src/components/Editor2Container.tsx
@@ -23,6 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import MetaTags from '@etherealengine/client-core/src/common/components/MetaTags'
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
 import { useRemoveEngineCanvas } from '@etherealengine/client-core/src/hooks/useRemoveEngineCanvas'
 import { assetPath } from '@etherealengine/common/src/schema.type.module'
@@ -53,7 +54,6 @@ import { SaveSceneDialog } from './dialogs/SaveSceneDialog2'
 import { DndWrapper } from './dnd/DndWrapper'
 import DragLayer from './dnd/DragLayer'
 
-import '@etherealengine/ui/src/fonts/font.css'
 import 'rc-dock/dist/rc-dock.css'
 import './Editor2Container.css'
 
@@ -149,6 +149,13 @@ const EditorContainer = () => {
 
   return (
     <main className="pointer-events-auto">
+      <MetaTags>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
+          rel="stylesheet"
+          type="text/css"
+        />
+      </MetaTags>
       <div
         id="editor-container"
         className="flex flex-col bg-black"

diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
@@ -23,6 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import MetaTags from '@etherealengine/client-core/src/common/components/MetaTags'
 import { ThemeProvider } from '@etherealengine/client-core/src/common/services/ThemeService'
 import { Description, Primary, Stories, Subtitle, Title } from '@storybook/addon-docs'
 import { Preview } from '@storybook/react'
@@ -33,7 +34,6 @@ import { withRouter } from 'storybook-addon-react-router-v6'
 import '../../client/src/themes/base.css'
 import '../../client/src/themes/components.css'
 import '../../client/src/themes/utilities.css'
-import '../src/fonts/font.css'
 
 const Engine = lazy(() => import('@etherealengine/client/src/engine'))
 
@@ -44,6 +44,13 @@ export const decorators = [
       <Engine>
         <ThemeProvider>
           <DndProvider backend={HTML5Backend}>
+            <MetaTags>
+              <link
+                href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
+                rel="stylesheet"
+                type="text/css"
+              />
+            </MetaTags>
             <Story />
           </DndProvider>
         </ThemeProvider>

diff --git a/packages/ui/src/fonts/font.css b/packages/ui/src/fonts/font.css