From 03420ba34f706afd7bf9e46aedb7186ca1c21c74 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Apr 2024 22:36:05 +0300
Subject: [PATCH] feat(management-header): remove useWidth and move style to
 css module

---
 .../ValidatorManagement/ManagementHeader.tsx  | 24 ++------------
 .../ValidatorManagement.tsx                   |  2 +-
 .../validatorManagement.module.css            | 33 +++++++++++++++----
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/pages/ValidatorManagement/ManagementHeader.tsx b/src/pages/ValidatorManagement/ManagementHeader.tsx
index deb50705..16d25dbd 100644
--- a/src/pages/ValidatorManagement/ManagementHeader.tsx
+++ b/src/pages/ValidatorManagement/ManagementHeader.tsx
@@ -1,30 +1,12 @@
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import SyncStatusCard from '../../components/General/SyncStatusCard'
-import { useWindowSize } from '../../hooks/useWindowSize'
+import styles from './validatorManagement.module.css'
 
 const ManagementHeader = () => {
-  const windowSize = useWindowSize()
-
   return (
-    <div
-      style={{
-        width: '100%',
-        justifyContent: 'space-between',
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '8px',
-      }}
-    >
+    <div className={styles['header-container']}>
       <NimbusLogo subtitle="Validator Management" />
-      <div
-        style={{
-          display: 'flex',
-          gap: '8px',
-          flexWrap: 'wrap',
-          minWidth: windowSize.width < 790 ? '100%' : '',
-          flexDirection: windowSize.width < 550 ? 'column' : 'row',
-        }}
-      >
+      <div className={styles['sync-status-cards-container']}>
         <SyncStatusCard
           synced={123.524}
           total={172.503}
diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx
index c5ce35fe..6c29c950 100644
--- a/src/pages/ValidatorManagement/ValidatorManagement.tsx
+++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx
@@ -5,8 +5,8 @@ import ManagementTabs from './ManagementTabs'
 import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
 import ManagementHeader from './ManagementHeader'
 import ManagementCard from './ManagementCard'
-import styles from './validatorManagement.module.css'
 import SidebarsWrapper from '../../components/PageWrappers/SidebarsWrapper'
+import styles from './validatorManagement.module.css'
 
 const ValidatorManagement = () => {
   return (
diff --git a/src/pages/ValidatorManagement/validatorManagement.module.css b/src/pages/ValidatorManagement/validatorManagement.module.css
index d5d59bd7..8558a7bd 100644
--- a/src/pages/ValidatorManagement/validatorManagement.module.css
+++ b/src/pages/ValidatorManagement/validatorManagement.module.css
@@ -1,9 +1,3 @@
-@media (max-width: 590px) {
-  .sync-status-card-container-second {
-    display: none;
-  }
-}
-
 .tabs-container {
   width: 100%;
   border: 1px solid #e7eaee;
@@ -37,6 +31,33 @@
   gap: 8px;
 }
 
+.header-container {
+  width: 100%;
+  justify-content: space-between;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.sync-status-cards-container {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+@media (max-width: 790px) {
+  .sync-status-cards-container {
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 550px) {
+  .sync-status-cards-container {
+    flex-direction: column;
+  }
+}
+
 @media (max-width: 600px) {
   .tabs-settings-container {
     flex-direction: column;