From c984ba64081e5cdd0a7da321747ac74a659a9783 Mon Sep 17 00:00:00 2001
From: Nico <ubncr@student.kit.edu>
Date: Tue, 5 Dec 2023 15:37:39 +0100
Subject: [PATCH] Adjust control buttons alignment

---
 src/pages/OverviewPanel.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/pages/OverviewPanel.tsx b/src/pages/OverviewPanel.tsx
index da76f10..f2f2355 100644
--- 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 />