Adjust control buttons alignment

mu-zero-HYPERLOOP · Dec 5, 2023 · c984ba6 · c984ba6
1 parent 31665c2
commit c984ba6
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/src/pages/OverviewPanel.tsx b/src/pages/OverviewPanel.tsx
@@ -1,34 +1,37 @@
 import {invoke} from '@tauri-apps/api';
-import {Container, Button, Stack} from '@mui/material';
+import {Container, Button, Stack, Box} from '@mui/material';
 import {useEffect} from "react";
 import ControlGrid from '../components/ControlGrid';
 import { EstablishConnection } from '../components/EstablishConnection';
 
-function ControllButtons() {
+function ControlButtons() {
     return (
         <>        
             <Stack
                 direction="row"
                 justifyContent="start"
                 alignItems="center"
-                spacing={5} >
-                {/*Add icons*/}
+                spacing={5}
+            >
+                {/* Buttons */}
                 <Button variant="contained" size="large"
-                        style={{maxWidth: '150px', maxHeight: '45px', minWidth: '150px', minHeight: '45px'}} color="error"
+                        style={{ maxWidth: '150px', maxHeight: '45px', minWidth: '150px', minHeight: '45px' }} color="error"
                         onClick={() => {
                             invoke('emergency');
                         }}>Emergency</Button>
                 <Button variant="contained" size="large"
-                        style={{maxWidth: '150px', maxHeight: '45px', minWidth: '150px', minHeight: '45px'}} color="success"
+                        style={{ maxWidth: '150px', maxHeight: '45px', minWidth: '150px', minHeight: '45px' }} color="success"
                         onClick={() => {
                             invoke('launch_pod');
                         }}>Launch</Button>
                 <Button variant="contained" size="large"
-                        style={{maxWidth: '150px', maxHeight: '45px', minWidth: '150px', minHeight: '45px', marginRight: "20%"}}
+                        style={{ maxWidth: '150px', maxHeight: '45px', minWidth: '150px', minHeight: '45px' }}
                         onClick={() => {
                             invoke('land_pod');
                         }}>Land</Button>
-
+
+                <Box sx={{ flexGrow: 1 }}></Box>
+
                 <EstablishConnection />
             </Stack>
         </>
@@ -55,7 +58,7 @@ function OverviewPanel() {
     return (
         <div>
             <Container maxWidth="lg" sx={{mt: 1, mb: 1}}>
-                <ControllButtons/>
+                <ControlButtons/>
             </Container>
             <Container maxWidth="lg" sx={{mt: 1, mb: 1}}>
                 <ControlGrid />