Move network selection (#90)

RegionX-Labs · Apr 29, 2024 · b2be51c · b2be51c
1 parent be18bee
commit b2be51c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git a/...mponents/Elements/NetworkSelect/index.tsx → ...ments/Selectors/NetworkSelector/index.tsx b/...mponents/Elements/NetworkSelect/index.tsx → ...ments/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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 };