From dea4e9a785b27cb13e23ec0aa6d442a15be41a8c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Apr 2024 21:33:33 +0300
Subject: [PATCH] fix(consensus-selection): replace useWidth with media query

---
 .../ConsensusClient/ConsensusSelection.tsx             |  4 +---
 .../ConsensusClient/consensusSelection.module.css      | 10 ++++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
index 3f6bf078..be06a0da 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx
@@ -5,11 +5,9 @@ import PairedDeviceCard from './PairedDeviceCard'
 import ConsensusClientCard from './ConsensusClientCard'
 import LinkWithArrow from '../../../../components/General/LinkWithArrow'
 import SyncStatusCard from '../../../../components/General/SyncStatusCard'
-import { useWindowSize } from '../../../../hooks/useWindowSize'
 import styles from './consensusSelection.module.css'
 
 const ConsensusSelection = () => {
-  const windowSize = useWindowSize()
   const selectedClient = 'Nimbus'
 
   const clients = [
@@ -53,7 +51,7 @@ const ConsensusSelection = () => {
       <Text size={27}>Install Consensus client</Text>
       <XStack space={'$8'} marginTop={'20px'} flexWrap="wrap">
         <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
-        <YStack width={windowSize.width < 780 ? '100%' : '70%'} space={'$4'}>
+        <YStack className={styles['card-description-texts']} space={'$4'}>
           <Text size={19}>The resource efficient Ethereum Clients.</Text>
           <Text size={15}>
             {selectedClient} is a client implementation for both execution and
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/consensusSelection.module.css b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/consensusSelection.module.css
index 5acd3f9e..46aa7017 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/consensusSelection.module.css
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/consensusSelection.module.css
@@ -18,8 +18,18 @@
   gap: 8px;
 }
 
+.card-description-texts {
+  width: 70%;
+}
+
 @media (max-width: 710px) {
   .header-cards-container {
     width: 100%;
   }
 }
+
+@media (max-width: 780px) {
+  .card-description-texts {
+    width: 100%;
+  }
+}