Redesign

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

@@ -1,20 +1,24 @@
 .card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   width: 100%;
   margin: auto;
   text-align: center;
   box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2);
 }
 
 .icon {
-  margin-top: .5em;
-  width: 72px;
+  width: 8rem;
+  padding: 1rem;
   height: auto;
   color: #757575;
 }
 
 .button {
-  margin-bottom: 20px;
-  margin: 1em auto;
-  font-size: 16px;
-  padding: 0.5em 1em;
+  padding: 0.5rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  margin: 1rem 0;
 }

src/components/Elements/FeatureCard/index.tsx

@@ -4,6 +4,7 @@ import {
   CardActions,
   CardContent,
   Typography,
+  useTheme,
 } from '@mui/material';
 import Image, { StaticImageData } from 'next/image';
 import { useRouter } from 'next/router';
@@ -27,13 +28,14 @@ export const FeatureCard = ({
   href,
 }: FeatureCardProps) => {
   const { push } = useRouter();
+  const theme = useTheme();
 
   return (
     <Card className={styles.card}>
       <CardContent>
         <Image className={styles.icon} src={image} alt='' />
       </CardContent>
-      <Typography variant='h5' component='h2' gutterBottom>
+      <Typography variant='h1' gutterBottom>
         {title}
       </Typography>
       <CardActions>
@@ -43,6 +45,10 @@ export const FeatureCard = ({
           variant='text'
           disabled={!enabled}
           className={styles.button}
+          sx={{
+            background: '#e8eff7',
+            color: theme.palette.text.secondary,
+          }}
         >
           {buttonText}
         </Button>

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

@@ -2,7 +2,7 @@
   display: flex;
   gap: 1.5rem;
   border-radius: 0.5rem;
-  max-width: 45rem;
+  max-width: 50rem;
   padding: 1.5rem 2rem;
 }
 

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,26 +1,22 @@
 .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 {
   display: flex;
   flex-direction: column;
-  padding-left: 4rem;
-  padding-right: 5rem;
-  padding-top: 2rem;
+  padding: 2rem 4rem;
   flex-grow: 1;
+  min-height: calc(100vh - 9rem);
+  max-height: calc(100vh - 9rem);
 }

src/components/Layout/index.tsx

@@ -1,8 +1,7 @@
-import { Divider, Paper, useTheme } from '@mui/material';
+import { Paper } 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';
 
@@ -11,33 +10,21 @@ interface Props {
 }
 
 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={{
             display: 'flex',
             flexGrow: 1,
-            margin: '1rem 0.5rem 0 2rem',
-            borderTopLeftRadius: '1rem',
-            borderBottomLeftRadius: '1rem',
-            paddingTop: '1rem',
-            paddingBottom: '2rem',
+            margin: '1rem 2rem',
+            borderRadius: '1rem',
+            py: '1rem',
           }}
         >
-          <Divider
-            sx={{ borderWidth: '1px', borderColor: theme.palette.grey[100] }}
-          />
           <div className={styles.main}>{children}</div>
         </Paper>
       </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;
 }