Refactor: dynamic wallet css overrides for non shadow dom

src/Entry.tsx

@@ -67,6 +67,13 @@ const Entry = ({ store }: Props) => {
             label: 'Recommended',
           },
         ],
+        // Since we can't use the shadow Dom override for css styling, since that breaks the skeleton loader
+        // we have to resort to this method to override the css, which is very verbose
+        cssOverrides: isDarkMode ? (
+          <link rel="stylesheet" href="/src/styles/dynamicOverridesDark.css" />
+        ) : (
+          <link rel="stylesheet" href="/src/styles/dynamicOverridesLight.css" />
+        ),
         overrides: {
           evmNetworks: (networks) => {
             // Only needed for embedded wallets

src/styles/dynamicOverridesDark.css

@@ -0,0 +1,3 @@
+.badge__container__primary {
+  background-color: var(--dynamic-badge-dot-background) !important;
+}

src/styles/dynamicOverridesLight.css

@@ -0,0 +1,4 @@
+.badge__container__primary {
+  /* stylelint-disable-next-line color-no-hex */
+  background-color: #eff8ff !important;
+}

src/styles/main.css

@@ -124,16 +124,3 @@ body.ReactModal__Body--open:not(.show-header-in-modal) .modal-blur-navigation {
   /* trezor wallet select modal */
   --onboard-account-select-modal-z-index: 10000 !important;
 }
-
-body .dynamic-modal .badge__container__primary {
-  /* stylelint-disable-next-line color-no-hex */
-  background-color: #eff8ff !important;
-}
-
-body[data-dynamic-theme='dark'] .dynamic-modal .badge__container__primary {
-  background-color: var(--dynamic-badge-dot-background) !important;
-}
-
-body .dynamic-modal .divider {
-  border-color: transparent !important;
-}