fix dialogs not having styles at all

2 files changed, 15 insertions, 3 deletions

diff --git a/src/components/mobile_drawer.style.js b/src/components/mobile_drawer.style.js
index 671105c8..398bc186 100644
--- a/src/components/mobile_drawer.style.js
+++ b/src/components/mobile_drawer.style.js
@@ -1,7 +1,6 @@
 export default {
   name: 'MobileDrawer',
   selector: '.mobile-drawer',
-  lazy: true,
   validInnerComponents: [
     'Text',
     'Link',
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d875f0f0..ad296ec4 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -26,7 +26,7 @@ export const applyTheme = async (input) => {
   const styleSheet = styleEl.sheet
 
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
-    // Hack to support multiple selectors on same component
+    // Hacks to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
       const newRule = [
@@ -57,7 +57,20 @@ export const applyTheme = async (input) => {
     const chunk = chunks[counter]
     Promise.all(chunk.map(x => x())).then(result => {
       getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
-        styleSheet.insertRule(rule, 'index-max')
+        if (rule.match(/\.modal-view/)) {
+          const parts = rule.split(/[{}]/g)
+          const newRule = [
+            parts[0],
+            ', ',
+            parts[0].replace(/\.modal-view/, '#modal'),
+            ' {',
+            parts[1],
+            '}'
+          ].join('')
+          styleSheet.insertRule(newRule, 'index-max')
+        } else {
+          styleSheet.insertRule(rule, 'index-max')
+        }
       })
       // const t1 = performance.now()
       // console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')