refactor(management-tabs): move styles into module

src/pages/ValidatorManagement/ManagementTabs.tsx

@@ -74,29 +74,14 @@ const ManagementTabs = () => {
   }
 
   return (
-    <div
+    <div className={styles['tabs-container']}>
-      style={{
-        width: '100%',
-        border: '1px solid #E7EAEE',
-        borderTopLeftRadius: '16px',
-        borderTopRightRadius: '16px',
-        paddingBottom: '12px',
-      }}
-    >
       <Tabs
         defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}
         onValueChange={changeCurrentTabHandler}
       >
         <div className={styles['tabs-settings-container']}>
           <div
-            className="transparent-scrollbar"
+            className={`${styles['tabs-list-container']} transparent-scrollbar`}
-            style={{
-              cursor: 'pointer',
-              display: 'flex',
-              width: '100%',
-              overflowX: 'auto',
-              whiteSpace: 'nowrap',
-            }}
           >
             <Tabs.List size={32} variant="grey">
               {VALIDATOR_TABS_MANAGEMENT.map(tab => (
@@ -107,15 +92,7 @@ const ManagementTabs = () => {
             </Tabs.List>
           </div>
           <div
-            className="transparent-scrollbar"
+            className={`${styles['search-filter-container']} transparent-scrollbar`}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'start',
-              gap: '8px',
-              overflowX: 'auto',
-              width: '100%',
-            }}
           >
             <SearchManagement
               searchValue={searchValue}

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;