From d9081f2cafebe5a4f7b9059c54d6d1a41a1d7bd8 Mon Sep 17 00:00:00 2001 From: Kyle Baran Date: Wed, 5 Jun 2024 21:46:50 -0700 Subject: [PATCH] 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 s hoisted into the via . 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. --- .../common/components/Menu/index.module.scss | 26 +++++++++---------- .../src/components/Editor2Container.tsx | 9 ++++++- packages/ui/.storybook/preview.tsx | 9 ++++++- packages/ui/src/fonts/font.css | 1 - 4 files changed, 29 insertions(+), 16 deletions(-) delete mode 100644 packages/ui/src/fonts/font.css diff --git a/packages/client-core/src/common/components/Menu/index.module.scss b/packages/client-core/src/common/components/Menu/index.module.scss index fce6dc1067..d5aa3fa097 100755 --- 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 index cb2b8eafec..15fe182449 100644 --- 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 (
+ + +
import('@etherealengine/client/src/engine')) @@ -44,6 +44,13 @@ export const decorators = [ + + + diff --git a/packages/ui/src/fonts/font.css b/packages/ui/src/fonts/font.css deleted file mode 100644 index bdc9442616..0000000000 --- a/packages/ui/src/fonts/font.css +++ /dev/null @@ -1 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap') \ No newline at end of file