Improve overall UI/UX (#1554)

src/components/dialogs/dialog-backup-restore.js

@@ -40,12 +40,12 @@ const DialogBackupRestore = () => {
       maxWidth="sm"
     >
       <EnhancedDialogTitle onClose={onClose}>
-        Backup & Restore Apps & Spaces (BETA)
+        Backup & Restore Apps & Spaces (ALPHA)
       </EnhancedDialogTitle>
       <DialogContent>
         <Typography variant="body2" color="textSecondary" gutterBottom>
           Backup only includes the list of your apps and spaces (including custom app icons)
-          and does not include app data and preferences.
+          and does not include app/space data and preferences.
         </Typography>
         <List>
           <ListItem

src/components/dialogs/dialog-create-custom-app.js

@@ -70,6 +70,7 @@ const styles = (theme) => ({
     boxShadow: theme.shadows[1],
     // 96 * 22.375%
     borderRadius: 21,
+    backgroundColor: theme.palette.common.white,
   },
   dialogActions: {
     borderTop: `1px solid ${theme.palette.divider}`,
@@ -125,7 +126,7 @@ const DialogCreateCustomApp = (props) => {
       open={open}
     >
       <EnhancedDialogTitle onClose={onClose}>
-        Create Custom App & Space
+        {urlDisabled ? 'Create Custom Space' : 'Create Custom App'}
       </EnhancedDialogTitle>
       <DialogContent>
         <TextField
@@ -139,7 +140,7 @@ const DialogCreateCustomApp = (props) => {
           error={Boolean(nameError)}
           variant="outlined"
         />
-        <FormControl variant="outlined" fullWidth margin="normal">
+        {/* <FormControl variant="outlined" fullWidth margin="normal">
           <InputLabel id="input-type-label">Classification</InputLabel>
           <Select
             id="input-type"
@@ -160,7 +161,7 @@ const DialogCreateCustomApp = (props) => {
               What is the difference between apps and spaces?
             </Link>
           </FormHelperText>
-        </FormControl>
+        </FormControl> */}
         {!urlDisabled && (
           <TextField
             fullWidth

src/components/pages/home/defined-app-bar.js

@@ -5,25 +5,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from '@material-ui/core/Button';
-
-import {
-  WithSearch,
-} from '@elastic/react-search-ui';
-
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-
 import connectComponent from '../../../helpers/connect-component';
 
-import { changeRoute } from '../../../state/router/actions';
-
 import SearchBox from './search-box';
 
 import EnhancedAppBar from '../../shared/enhanced-app-bar';
 import CreateButton from '../../shared/create-button';
 
-import { ROUTE_CATEGORIES } from '../../../constants/routes';
-
 const styles = (theme) => ({
   backButton: {
     marginLeft: theme.spacing(1),
@@ -40,64 +28,24 @@ const styles = (theme) => ({
 
 const DefinedAppBar = ({
   classes,
-  onChangeRoute,
 }) => (
-  <WithSearch
-    mapContextToProps={({
-      filters,
-      clearFilters,
-    }) => ({
-      filters,
-      clearFilters,
-    })}
-  >
-    {({
-      filters,
-      clearFilters,
-    }) => {
-      const categoryFilter = filters.find((filter) => filter.field === 'category');
-
-      return (
-        <EnhancedAppBar
-          left={categoryFilter == null ? null : (
-            <Button
-              variant="text"
-              color="default"
-              size="small"
-              className={classes.backButton}
-              startIcon={<ArrowBackIosIcon fontSize="small" />}
-              onClick={() => {
-                clearFilters();
-                onChangeRoute(ROUTE_CATEGORIES);
-              }}
-            >
-              Back
-            </Button>
-          )}
-          center={(
-            <div className={classes.centerContainer}>
-              <SearchBox />
-              <CreateButton />
-            </div>
-          )}
-        />
-      );
-    }}
-  </WithSearch>
+  <EnhancedAppBar
+    center={(
+      <div className={classes.centerContainer}>
+        <SearchBox />
+        <CreateButton />
+      </div>
+    )}
+  />
 );
 
 DefinedAppBar.propTypes = {
   classes: PropTypes.object.isRequired,
-  onChangeRoute: PropTypes.func.isRequired,
-};
-
-const actionCreators = {
-  changeRoute,
 };
 
 export default connectComponent(
   DefinedAppBar,
   null,
-  actionCreators,
+  null,
   styles,
 );