Small UI Improvements (#17)

* fix(UI): fix UI elements

* fix(ui): remove white color on icon, and change webapp button to outlined

* Update ui/src/components/Header/Controller.tsx

Co-authored-by: Luca Pivetta <36865043+Pive01@users.noreply.github.com>

Author: lucbpz

ui/src/components/Configs/ConfirmableButton.tsx

@@ -66,14 +66,14 @@ export const ConfirmableButton = ({
         )}
         <DialogActions>
           <Button
-            color="secondary"
+            variant="outlined"
             onClick={() => setShowConfirmDialog(false)}
           >
             {cancelText || 'Cancel'}
           </Button>
           <Button
             autoFocus
-            color="primary"
+            color="error"
             variant="contained"
             onClick={(event: MouseEvent<HTMLButtonElement>) => {
               if (rest.onClick) rest.onClick(event as any); // eslint-disable-line

ui/src/components/Configs/StartConfigs.tsx

@@ -45,7 +45,8 @@ export const StartConfigs = (): ReactElement => {
           <ConfirmableButton
             component="IconButton"
             disabled={params.row.id === DEFAULT_CONFIGURATION_ID}
-            title={`Remove ${params.row.name} configuration?`}
+            title={`Delete ${params.row.name} configuration?`}
+            okText="Delete"
             onClick={() => deleteConfig(params.row.id)}
             text="Selected configuration will be permanently deleted"
           >

ui/src/components/Header/Controller.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useEffect, useState } from 'react';
-import { Chip, Button, ButtonGroup, Select, MenuItem, FormControl } from '@mui/material';
+import { Chip, Button, ButtonGroup, Select, MenuItem, FormControl, Box } from '@mui/material';
 import { PlayArrow, Stop } from '@mui/icons-material';
 import { v4 as uuid } from 'uuid';
 import { createStyles, makeStyles } from '@mui/styles';
@@ -48,17 +48,17 @@ export const Controller = (): ReactElement => {
   };
 
   return (
-    <>
+    <Box display="flex" gap={1} alignItems="center">
       <ButtonGroup variant="outlined">
         {isRunning ?
           <Button
             variant="contained"
             onClick={stop}
-            endIcon={<Stop />}>
+            startIcon={<Stop />}>
             Stop
           </Button>
           :
-          <>
+          <Box display="flex" alignItems="center">
             <FormControl sx={{ m: 1, minWidth: 120, border: 'none' }} size="small">
               <Select
                 className={classes.selectForm}
@@ -72,22 +72,23 @@ export const Controller = (): ReactElement => {
                 }
               </Select>
             </FormControl>
-            <Button
-              variant="contained"
-              onClick={start}
-              endIcon={<PlayArrow />}>
-              Start
-            </Button>
-          </>
+            <Box>
+              <Button
+                variant="contained"
+                onClick={start}
+                startIcon={<PlayArrow />}>
+                Start
+              </Button>
+            </Box>
+          </Box>
         }
       </ButtonGroup>
       <Chip
-        style={{ borderRadius: 20 }}
         label={isRunning ? 'Running' : 'Stopped'}
-        color={isRunning ? 'success' : 'error'}
-
+        color={isRunning ? 'success' : 'warning'}
+sx={{ p: 2, borderRadius: 10 }}
       />
       <LongMenu />
-    </>
+    </Box>
   );
 };

ui/src/components/Header/Header.tsx

@@ -10,20 +10,23 @@ export const Header = (): ReactElement => {
   return (
     <AppBar position="relative" elevation={0}>
       <Toolbar>
-        <Box display='flex' flexGrow={1}>
-          <Typography variant='h3' sx={{ my: 2, mr: 3 }}>
+        <Box display="flex" flexGrow={1} alignItems="center" flexWrap="wrap">
+          <Typography variant="h3" color={(theme) => theme.palette.text.primary} sx={{ my: 2, mr: 3 }}>
             LocalStack
           </Typography>
-          <Button
-            color="inherit"
-            onClick={() => ddClient.host.openExternal('https://app.localstack.cloud')}
-            endIcon={<OpenInNew />}
-          >
-            Web App
-          </Button>
+          <Box>
+            <Button
+              variant="outlined"
+              onClick={() =>
+                ddClient.host.openExternal('https://app.localstack.cloud')
+              }
+              endIcon={<OpenInNew />}
+            >
+              Web App
+            </Button>
+          </Box>
         </Box>
         <Controller />
-
       </Toolbar>
     </AppBar>
   );

ui/src/components/Header/Menu.tsx

@@ -35,7 +35,7 @@ export const LongMenu = () => {
         aria-haspopup="true"
         onClick={handleClick}
       >
-        <MoreVert htmlColor='#FFFFFF' />
+        <MoreVert />
       </IconButton>
       <Menu
         id="long-menu"