restructure layout

src/components/Elements/StatusIndicator/index.module.scss

@@ -1,7 +1,9 @@
 .container {
   display: flex;
-  gap: 1rem;
+  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  flex-grow: 1;
+  padding: 0.5rem 0.75rem;
+  width: 100%;
+  border: 2px solid #efefef;
+  border-radius: 1rem;
 }

src/components/Elements/StatusIndicator/index.tsx

@@ -15,15 +15,21 @@ export const StatusIndicator = ({ state, label }: StatusIndicatorProps) => {
   return (
     <div className={styles.container}>
       <Typography
-        variant='subtitle2'
-        sx={{ color: theme.palette.text.secondary }}
+        sx={{
+          color: theme.palette.text.primary,
+          fontSize: '0.8rem',
+          flexGrow: 1,
+        }}
       >
         {label}
       </Typography>
       {state === ApiState.CONNECTING || state === ApiState.CONNECT_INIT ? (
-        <CircularProgress size='1rem' />
+        <CircularProgress size='0.5rem' />
       ) : (
-        <CircleIcon color={state === ApiState.READY ? 'success' : 'error'} />
+        <CircleIcon
+          sx={{ width: '0.5rem', height: '0.5rem' }}
+          color={state === ApiState.READY ? 'success' : 'error'}
+        />
       )}
     </div>
   );

src/components/Header/index.module.scss

@@ -1,35 +1,23 @@
-.header {
-  display: flex;
-}
-
-.logo {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  width: 150px;
-  height: 70px;
-}
-
-.logo>img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
 .menu {
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  height: 5rem;
   flex-grow: 1;
-  margin-right: 32 px;
+  margin-right: 3rem;
 }
 
 .connectWallet {
-  color: #181336;
+  background:linear-gradient(180deg, #E84D68 0%, #AD2B49 100%);
   border-radius: 100px;
   font-weight: 500;
+  text-transform: none;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8rem;
+}
+
+.connectWallet:hover {
+  opacity: 0.8;
 }
 
 .listWrapper {

src/components/Header/index.tsx

@@ -1,23 +1,24 @@
 import { ExpandMore } from '@mui/icons-material';
 import {
+  Box,
   Button,
   Collapse,
   Divider,
-  Link,
   List,
   ListItemButton,
+  useTheme,
 } from '@mui/material';
 import { useInkathon } from '@scio-labs/use-inkathon';
-import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
 
-import Logo from '@/assets/logo.png';
 import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 
 import styles from './index.module.scss';
 import { WalletModal } from '../Modals/WalletConnect';
 
 export const Header = () => {
+  const theme = useTheme();
+
   const { activeAccount, disconnect, accounts, setActiveAccount } =
     useInkathon();
   const [accountsOpen, openAccounts] = useState(false);
@@ -38,10 +39,14 @@ export const Header = () => {
 
   return (
     <>
-      <div className={styles.header}>
-        <Link href='/' className={styles.logo}>
-          <Image src={Logo} alt='logo' />
-        </Link>
+      <Box
+        sx={{
+          display: 'flex',
+          background: theme.palette.background.paper,
+          borderLeft: `1px solid ${theme.palette.divider}`,
+          borderBottom: `1px solid ${theme.palette.divider}`,
+        }}
+      >
         <div className={styles.menu}>
           {activeAccount ? (
             <List component='div' className={styles.listWrapper}>
@@ -80,15 +85,15 @@ export const Header = () => {
             </List>
           ) : (
             <Button
-              variant='outlined'
+              variant='contained'
               className={styles.connectWallet}
               onClick={() => openWalletModal(true)}
             >
               Connect Wallet
             </Button>
           )}
         </div>
-      </div>
+      </Box>
       <WalletModal
         open={walletModalOpen}
         onClose={() => openWalletModal(false)}

src/components/Layout/index.module.scss

@@ -1,19 +1,15 @@
 .layout {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   width: 100%;
   min-height: 100vh;
   max-height: 100vh;
-  padding: 2rem 3rem;
 }
 
 .content {
   display: flex;
   flex-grow: 1;
-}
-
-.sidebar {
-  width: 12rem;
+  flex-direction: column;
 }
 
 .main {

src/components/Layout/index.tsx

@@ -2,7 +2,6 @@ import { Divider, Paper, useTheme } from '@mui/material';
 import React, { ReactElement } from 'react';
 
 import styles from './index.module.scss';
-import { Banner } from '../Elements';
 import { Header } from '../Header';
 import { Sidebar } from '../Sidebar';
 
@@ -14,15 +13,9 @@ export const Layout = ({ children }: Props) => {
   const theme = useTheme();
   return (
     <div className={styles.layout}>
-      <Header />
-      <Banner
-        content='The UI is still under active development and is released only for testing purposes!'
-        severity='error'
-      />
+      <Sidebar />
       <div className={styles.content}>
-        <div className={styles.sidebar}>
-          <Sidebar />
-        </div>
+        <Header />
         <Paper
           color='secondary'
           sx={{
@@ -38,7 +31,7 @@ export const Layout = ({ children }: Props) => {
           <Divider
             sx={{ borderWidth: '1px', borderColor: theme.palette.grey[100] }}
           />
-          <div className={styles.main}>{children}</div>
+          <main className={styles.main}>{children}</main>
         </Paper>
       </div>
     </div>

src/components/Sidebar/index.module.scss

@@ -1,46 +1,53 @@
 .sidebar {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
+  width: 15rem;
+  background-color: white;
 }
 
-.menu-container {
+.logoContainer {
   display: flex;
-  flex-direction: column;
-  font-size: 16px;
-  gap: 2rem;
-  padding-left: 2rem;
-  padding-top: 1rem;
+  align-items: center;
+  height: 5rem;
+  padding: 1rem 0;
 }
 
-.menuItem {
-  display: flex;
-  gap: 10px;
-  cursor: pointer;
-  padding: 0;
-  margin: 0.75rem 0;
-  text-transform: capitalize;
-  font-weight: 700;
+.logo {
+  width: 10rem;
+  height: 3rem;
 }
 
-.active {
-  text-decoration: underline;
+.logo > img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
-.menuItem:hover {
-  opacity: 0.8;
+
+.menuContainer {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 .statusContainer {
-  position: fixed;
-  bottom: 2rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.menuItem.disabled {
-  color: #ccc;
-  cursor: not-allowed;
+.menuIcon {
+  width: 1.5rem;
+}
+
+.menuItem {
+  line-height: 1;
+  flex-grow: 1;
+}
+
+.active {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 100%;
+  background-color: black;
 }