UI update

frontend/src/basic/BookPage/index.tsx

@@ -3,16 +3,15 @@ import { useTranslation } from 'react-i18next';
 import { Button, Grid, ButtonGroup, Dialog, Box } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import DepthChart from '../../components/Charts/DepthChart';
-
 import { NoRobotDialog } from '../../components/Dialogs';
 import MakerForm from '../../components/MakerForm';
 import BookTable from '../../components/BookTable';
 
 // Icons
 import { BarChart, FormatListBulleted, Map } from '@mui/icons-material';
-import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
+import { AppContext, UseAppStoreType } from '../../contexts/AppContext';
 import MapChart from '../../components/Charts/MapChart';
-import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
+import { GarageContext, UseGarageStoreType } from '../../contexts/GarageContext';
 
 const BookPage = (): JSX.Element => {
   const { windowSize } = useContext<UseAppStoreType>(AppContext);
@@ -119,7 +118,7 @@ const BookPage = (): JSX.Element => {
             <Grid item>
               <BookTable
                 maxWidth={maxBookTableWidth} // EM units
-                maxHeight={windowSize.height * 0.825 - 5} // EM units
+                maxHeight={windowSize.height * 0.65} // Adjusted height to reduce rows
                 fullWidth={windowSize.width} // EM units
                 fullHeight={windowSize.height} // EM units
                 defaultFullscreen={false}
@@ -130,14 +129,14 @@ const BookPage = (): JSX.Element => {
               <Grid item>
                 <DepthChart
                   maxWidth={chartWidthEm} // EM units
-                  maxHeight={(windowSize.height * 0.825 - 5) / 2} // EM units
+                  maxHeight={(windowSize.height * 0.65) / 2} // Adjusted height
                   onOrderClicked={onOrderClicked}
                 />
               </Grid>
               <Grid item>
                 <MapChart
                   maxWidth={chartWidthEm} // EM units
-                  maxHeight={(windowSize.height * 0.825 - 5) / 2} // EM units
+                  maxHeight={(windowSize.height * 0.65) / 2} // Adjusted height
                   onOrderClicked={onOrderClicked}
                 />
               </Grid>
@@ -146,19 +145,19 @@ const BookPage = (): JSX.Element => {
         ) : view === 'depth' ? (
           <DepthChart
             maxWidth={windowSize.width * 0.8} // EM units
-            maxHeight={windowSize.height * 0.825 - 5} // EM units
+            maxHeight={windowSize.height * 0.65} // Adjusted height
             onOrderClicked={onOrderClicked}
           />
         ) : view === 'map' ? (
           <MapChart
             maxWidth={windowSize.width * 0.8} // EM units
-            maxHeight={windowSize.height * 0.825 - 5} // EM units
+            maxHeight={windowSize.height * 0.6} // Adjusted height
             onOrderClicked={onOrderClicked}
           />
         ) : (
           <BookTable
             maxWidth={windowSize.width * 0.97} // EM units
-            maxHeight={windowSize.height * 0.825 - 5} // EM units
+            maxHeight={windowSize.height * 0.624} // Adjusted height to reduce rows
             fullWidth={windowSize.width} // EM units
             fullHeight={windowSize.height} // EM units
             defaultFullscreen={false}

frontend/src/basic/Main.tsx

@@ -1,13 +1,9 @@
 import React, { useContext } from 'react';
-import { MemoryRouter, HashRouter, BrowserRouter } from 'react-router-dom';
-import { Box, Typography, styled } from '@mui/material';
-import { type UseAppStoreType, AppContext, closeAll } from '../contexts/AppContext';
-
-import { NavBar, MainDialogs } from './';
-import RobotAvatar from '../components/RobotAvatar';
+import { MemoryRouter, BrowserRouter, HashRouter } from 'react-router-dom';
+import { Box, styled } from '@mui/material';
+import { type UseAppStoreType, AppContext } from '../contexts/AppContext';
+import { TopNavBar, NavBar, MainDialogs } from './';
 import Notifications from '../components/Notifications';
-
-import { useTranslation } from 'react-i18next';
 import { GarageContext, type UseGarageStoreType } from '../contexts/GarageContext';
 import Routes from './Routes';
 
@@ -23,30 +19,13 @@ const getRouter = (): any => {
 };
 const Router = getRouter();
 
-const TestnetTypography = styled(Typography)({
-  height: 0,
-});
-
-interface MainBoxProps {
-  navbarHeight: number;
-}
-
-const MainBox = styled(Box)<MainBoxProps>((props) => ({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: `translate(-50%, -50%) translate(0,  -${props.navbarHeight / 2}em)`,
-}));
-
 const Main: React.FC = () => {
-  const { t } = useTranslation();
-  const { settings, page, setOpen, windowSize, navbarHeight } =
-    useContext<UseAppStoreType>(AppContext);
+  const { page, setOpen, windowSize } = useContext<UseAppStoreType>(AppContext);
   const { garage } = useContext<UseGarageStoreType>(GarageContext);
 
   return (
     <Router>
-      <RobotAvatar style={{ display: 'none' }} hashId={garage.getSlot()?.hashId} />
+      <TopNavBar />
       <Notifications
         page={page}
         openProfile={() => {
@@ -55,21 +34,26 @@ const Main: React.FC = () => {
         rewards={garage.getSlot()?.getRobot()?.earnedRewards}
         windowWidth={windowSize?.width}
       />
-      {settings.network === 'testnet' ? (
-        <TestnetTypography color='secondary' align='center'>
-          <i>{t('Using Testnet Bitcoin')}</i>
-        </TestnetTypography>
-      ) : (
-        <></>
-      )}
-
-      <MainBox navbarHeight={navbarHeight}>
+      <MainContent>
         <Routes />
-      </MainBox>
+      </MainContent>
       <NavBar />
       <MainDialogs />
     </Router>
   );
 };
 
+// Styled components
+const MainContent = styled(Box)(({ theme }) => ({
+  marginTop: '100px',
+  marginBottom: '80px',
+  padding: theme.spacing(2),
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  height: 'calc(100vh - 180px)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default Main;