Cosmetics

src/components/gpx-record/GpxRecord.tsx

@@ -50,7 +50,13 @@ const GpxRecord: Component<{}> = (props) => {
       <div class={style.control}>
         <IconButton onClick={handleClickOpen}>
           <FiberManualRecordIcon
-            color={state() === 'recording' ? 'error' : 'inherit'}
+            color={
+              state() === 'recording'
+                ? 'error'
+                : state() === 'paused'
+                ? 'primary'
+                : 'inherit'
+            }
           />
         </IconButton>
       </div>
@@ -58,6 +64,8 @@ const GpxRecord: Component<{}> = (props) => {
         <Box
           sx={{
             width: '100%',
+            paddingTop: '10px',
+            paddingBottom: '10px',
           }}
         >
           <GpxChooser
@@ -68,13 +76,15 @@ const GpxRecord: Component<{}> = (props) => {
           <Typography sx={{ paddingTop: '20px' }} variant='h6'>
             {t(`gpx_${state()}`)}
           </Typography>
-        </Box>
-        <DialogActions>
           <Show when={state() === 'stopped'}>
             <Button
               color='primary'
               variant='contained'
               onClick={startRecordingHandler}
+              sx={{
+                width: '100%',
+                margin: '10px',
+              }}
             >
               {t('gpxStartRecording')}
             </Button>
@@ -84,6 +94,10 @@ const GpxRecord: Component<{}> = (props) => {
               color='primary'
               variant='contained'
               onClick={pauseRecordingHandler}
+              sx={{
+                width: '100%',
+                margin: '10px',
+              }}
             >
               {t('gpxPauseRecording')}
             </Button>
@@ -91,6 +105,10 @@ const GpxRecord: Component<{}> = (props) => {
               color='warning'
               variant='contained'
               onClick={stopRecordingHandler}
+              sx={{
+                width: '100%',
+                margin: '10px',
+              }}
             >
               {t('gpxStopRecording')}
             </Button>
@@ -100,6 +118,10 @@ const GpxRecord: Component<{}> = (props) => {
               color='primary'
               variant='contained'
               onClick={resumeRecordingHandler}
+              sx={{
+                width: '100%',
+                margin: '10px',
+              }}
             >
               {t('gpxResumeRecording')}
             </Button>
@@ -107,11 +129,15 @@ const GpxRecord: Component<{}> = (props) => {
               color='warning'
               variant='contained'
               onClick={stopRecordingHandler}
+              sx={{
+                width: '100%',
+                margin: '10px',
+              }}
             >
               {t('gpxStopRecording')}
             </Button>
           </Show>
-        </DialogActions>
+        </Box>
       </Dialog>
     </>
   );