style: CR-requested adjustments

golemfoundation · Sep 3, 2024 · 998b38c · 998b38c
1 parent 447daec
commit 998b38c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/client/src/components/shared/Layout/LayoutConnectWallet/LayoutConnectWallet.scss b/client/src/components/shared/Layout/LayoutConnectWallet/LayoutConnectWallet.scss
@@ -55,6 +55,12 @@
   height: 9.6rem;
   padding: 0 !important;
   background: $color-octant-grey3 !important;
+
+  &:hover {
+    .walletOptionsIcons {
+      filter: none !important;
+    }
+  }
 }
 
 .walletOptionsButtonsOuter {

diff --git a/client/src/components/shared/Layout/LayoutConnectWallet/utils.ts b/client/src/components/shared/Layout/LayoutConnectWallet/utils.ts
@@ -1,14 +1,16 @@
 import { TFunction } from 'i18next';
 
+import { RAINBOW_KIT_PROVIDER } from 'constants/domElementsIds';
+
 export const setCustomStylesForRainbowKitModal = (t: TFunction): void => {
-  const modalRootWrapper = document.querySelector('[aria-labelledby="rk_connect_title"]');
+  const modalRootWrapper = document.querySelector(`[data-rk="${RAINBOW_KIT_PROVIDER}"]`);
 
   if (!modalRootWrapper) {
     return;
   }
 
   // RaibowKit connect modal.
-  const rainbowkitConnectModal = modalRootWrapper?.parentNode?.parentNode;
+  const rainbowkitConnectModal = modalRootWrapper?.parentNode;
 
   if (!rainbowkitConnectModal) {
     return;

diff --git a/client/src/constants/domElementsIds.ts b/client/src/constants/domElementsIds.ts
@@ -2,3 +2,4 @@ export const METRICS_EPOCH_ID = 'MetricsEpoch';
 export const METRICS_GENERAL_ID = 'MetricsGeneral';
 export const METRICS_PERSONAL_ID = 'MetricsPersonal';
 export const LAYOUT_BODY_ID = 'LayoutBody';
+export const RAINBOW_KIT_PROVIDER = 'RainbowKitProvider';
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -14,6 +14,7 @@ import env, { envViteKeys, envsAllowedToBeEmpty } from 'env';
 import clientReactQuery from './api/clients/client-react-query';
 import { wagmiConfig } from './api/clients/client-wagmi';
 import App from './App';
+import { RAINBOW_KIT_PROVIDER } from './constants/domElementsIds';
 
 import '@rainbow-me/rainbowkit/styles.css';
 
@@ -59,6 +60,7 @@ if (window.location.hash) {
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={clientReactQuery}>
         <RainbowKitProvider
+          id={RAINBOW_KIT_PROVIDER}
           modalSize="compact"
           theme={lightTheme({
             accentColor: '#2d9b87',

diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
@@ -163,7 +163,7 @@
         "connecting": "Connecting ...",
         "walletConnect": "WalletConnect",
         "ledgerConnect": "Ledger",
-        "walletSelectHeader":  "Choose a browser wallet"
+        "walletSelectHeader": "Choose a browser wallet"
       },
       "donationEstimateBox": {
         "donationEstimate": "Donation estimate",