From b2be51cc86ee07182f11f381915490384cc92dba Mon Sep 17 00:00:00 2001
From: Sergej Sakac <73715684+Szegoo@users.noreply.github.com>
Date: Mon, 29 Apr 2024 09:56:21 +0200
Subject: [PATCH] Move network selection (#90)

---
 .../{NetworkSelect => Selectors/NetworkSelector}/index.tsx | 7 +++++--
 src/components/Header/index.module.scss                    | 6 +++++-
 src/components/Header/index.tsx                            | 4 ++++
 src/components/Sidebar/index.module.scss                   | 5 -----
 src/components/Sidebar/index.tsx                           | 4 ----
 5 files changed, 14 insertions(+), 12 deletions(-)
 rename src/components/Elements/{NetworkSelect => Selectors/NetworkSelector}/index.tsx (90%)

diff --git a/src/components/Elements/NetworkSelect/index.tsx b/src/components/Elements/Selectors/NetworkSelector/index.tsx
similarity index 90%
rename from src/components/Elements/NetworkSelect/index.tsx
rename to src/components/Elements/Selectors/NetworkSelector/index.tsx
index e5907c82..10754192 100644
--- a/src/components/Elements/NetworkSelect/index.tsx
+++ b/src/components/Elements/Selectors/NetworkSelector/index.tsx
@@ -6,6 +6,7 @@ import {
   Select,
   Typography,
 } from '@mui/material';
+import { useTheme } from '@mui/material';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
@@ -29,6 +30,8 @@ const RelaySelect = () => {
     );
   };
 
+  const theme = useTheme();
+
   const menuItems = [
     {
       value: NetworkType.ROCOCO,
@@ -43,8 +46,8 @@ const RelaySelect = () => {
   ];
 
   return network !== NetworkType.NONE ? (
-    <FormControl sx={{ m: 2, minWidth: 150 }} fullWidth>
-      <InputLabel>Network</InputLabel>
+    <FormControl size='small'>
+      <InputLabel sx={{ color: theme.palette.grey[800] }}>Network</InputLabel>
       <Select
         id='network-select'
         value={network}
diff --git a/src/components/Header/index.module.scss b/src/components/Header/index.module.scss
index 620a6f8c..2c0a2385 100644
--- a/src/components/Header/index.module.scss
+++ b/src/components/Header/index.module.scss
@@ -7,8 +7,12 @@
   margin-right: 3rem;
 }
 
+.menu>* {
+  margin: 0.5rem 1rem;
+}
+
 .connectWallet {
-  background:linear-gradient(180deg, #E84D68 0%, #AD2B49 100%);
+  background: linear-gradient(180deg, #E84D68 0%, #AD2B49 100%);
   border-radius: 100px;
   font-weight: 500;
   text-transform: none;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 36920fe1..80de7989 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -13,6 +13,7 @@ import { KeyringState, useAccounts } from '@/contexts/account';
 
 import styles from './index.module.scss';
 import { ProgressButton } from '../Elements';
+import NetworkSelector from '../Elements/Selectors/NetworkSelector';
 
 export const Header = () => {
   const theme = useTheme();
@@ -41,6 +42,9 @@ export const Header = () => {
         }}
       >
         <Box className={styles.menu}>
+          <div>
+            <NetworkSelector />
+          </div>
           {activeAccount ? (
             <List component='div' className={styles.listWrapper}>
               {!accountsOpen && (
diff --git a/src/components/Sidebar/index.module.scss b/src/components/Sidebar/index.module.scss
index b333bc77..83f81786 100644
--- a/src/components/Sidebar/index.module.scss
+++ b/src/components/Sidebar/index.module.scss
@@ -36,11 +36,6 @@
   gap: 0.5rem;
 }
 
-.networkSelector {
-  display: flex;
-  padding: .5rem;
-}
-
 .menuIcon {
   width: 1.5rem;
 }
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 786567ae..c8a84ec3 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -15,7 +15,6 @@ import { RenewIcon } from '@/icons';
 
 import styles from './index.module.scss';
 import { StatusIndicator } from '../Elements';
-import NetworkSelect from '../Elements/NetworkSelect';
 
 interface MenuItemProps {
   label: string;
@@ -178,9 +177,6 @@ export const Sidebar = () => {
           <StatusIndicator state={coretimeApiState} label='Coretime chain' />
         </div>
       </Box>
-      <div className={styles.networkSelector}>
-        <NetworkSelect />
-      </div>
     </div>
   );
 };