From 1ea4aff04e5ede69dbd41f345ef68b2414329335 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 9 Apr 2024 21:58:35 +0300
Subject: [PATCH] refactor(management-tabs): move styles into module

---
 .../ValidatorManagement/ManagementTabs.tsx    | 29 ++-----------------
 .../validatorManagement.module.css            | 25 ++++++++++++++++
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx
index 2cb7d095..6076cf99 100644
--- a/src/pages/ValidatorManagement/ManagementTabs.tsx
+++ b/src/pages/ValidatorManagement/ManagementTabs.tsx
@@ -74,29 +74,14 @@ const ManagementTabs = () => {
   }
 
   return (
-    <div
-      style={{
-        width: '100%',
-        border: '1px solid #E7EAEE',
-        borderTopLeftRadius: '16px',
-        borderTopRightRadius: '16px',
-        paddingBottom: '12px',
-      }}
-    >
+    <div className={styles['tabs-container']}>
       <Tabs
         defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}
         onValueChange={changeCurrentTabHandler}
       >
         <div className={styles['tabs-settings-container']}>
           <div
-            className="transparent-scrollbar"
-            style={{
-              cursor: 'pointer',
-              display: 'flex',
-              width: '100%',
-              overflowX: 'auto',
-              whiteSpace: 'nowrap',
-            }}
+            className={`${styles['tabs-list-container']} transparent-scrollbar`}
           >
             <Tabs.List size={32} variant="grey">
               {VALIDATOR_TABS_MANAGEMENT.map(tab => (
@@ -107,15 +92,7 @@ const ManagementTabs = () => {
             </Tabs.List>
           </div>
           <div
-            className="transparent-scrollbar"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'start',
-              gap: '8px',
-              overflowX: 'auto',
-              width: '100%',
-            }}
+            className={`${styles['search-filter-container']} transparent-scrollbar`}
           >
             <SearchManagement
               searchValue={searchValue}
diff --git a/src/pages/ValidatorManagement/validatorManagement.module.css b/src/pages/ValidatorManagement/validatorManagement.module.css
index c926cf47..f154c3c4 100644
--- a/src/pages/ValidatorManagement/validatorManagement.module.css
+++ b/src/pages/ValidatorManagement/validatorManagement.module.css
@@ -16,6 +16,14 @@
   }
 }
 
+.tabs-container {
+  width: 100%;
+  border: 1px solid #e7eaee;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  padding-bottom: 12px;
+}
+
 .tabs-settings-container {
   display: flex;
   gap: 16px;
@@ -28,6 +36,23 @@
   padding: 8px 16px;
 }
 
+.tabs-list-container {
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.search-filter-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 8px;
+  overflow: auto;
+}
+
 @media (max-width: 600px) {
   .cards {
     flex-direction: column;