Fix setting views various issues reported in #238

imports/client/ui/components/Sidebar/Sidebar.js

@@ -97,7 +97,6 @@ function Sidebar(props) {
     isMobile,
     isSidebarOpen,
     onDrawerClose,
-    isSettingsOpen,
     setIsSettingsOpen
   } = props;
 
@@ -131,7 +130,7 @@ function Sidebar(props) {
       <List disablePadding>
         {primaryRoutes.map((route) => (
           <NavLink
-            activeClassName={!isSettingsOpen ? activeClassName : null}
+            activeClassName={activeClassName}
             className={classes.link}
             to={route.href || route.path}
             key={route.path}
@@ -186,7 +185,6 @@ Sidebar.propTypes = {
     push: PropTypes.func.isRequired
   }),
   isMobile: PropTypes.bool,
-  isSettingsOpen: PropTypes.bool,
   isSidebarOpen: PropTypes.bool.isRequired,
   onDrawerClose: PropTypes.func.isRequired,
   setIsSettingsOpen: PropTypes.func.isRequired

imports/plugins/core/address/client/components/AddressValidationSettingsRegion.js

@@ -2,6 +2,7 @@ import React from "react";
 import i18next from "i18next";
 import { Blocks } from "@reactioncommerce/reaction-components";
 import {
+  Box,
   makeStyles,
   Typography
 } from "@material-ui/core";
@@ -24,7 +25,14 @@ export default function AddressValidationSettingsRegion(props) {
       <Typography variant="h2" className={classes.header}>
         {i18next.t("admin.settings.addressValidation.header")}
       </Typography>
-      <Blocks region="AddressValidationSettings" blockProps={props} />
+      <Blocks region="AddressValidationSettings" blockProps={props}>
+        { (blocks) =>
+          blocks.map((block, index) => (
+            <Box paddingBottom={2} key={index}>
+              {block}
+            </Box>
+          ))}
+      </Blocks>
     </>
   );
 }

imports/plugins/core/dashboard/client/components/SettingsList.js

@@ -7,17 +7,37 @@ import {
   ListItem
 } from "@material-ui/core";
 import clsx from "classnames";
-import { useHistory } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import useOperatorRoutes from "imports/client/ui/hooks/useOperatorRoutes";
 
+const activeClassName = "settings-active-item";
+
 const useStyles = makeStyles((theme) => ({
-  listItemContainer: {
-    "&:hover $listItemAction": {
-      display: "block"
+  listItemRoot: {
+    paddingLeft: theme.spacing(4),
+    paddingTop: "unset",
+    paddingBottom: "unset"
+  },
+  listItemTextRoot: {
+    "paddingTop": theme.spacing(1),
+    "paddingBottom": theme.spacing(1),
+    "paddingLeft": theme.spacing(1),
+    "&:hover": {
+      backgroundColor: theme.palette.colors.darkBlue100,
+      borderRadius: 3
     }
   },
-  listItem: {
-    paddingLeft: theme.spacing(4)
+  link: {
+    [`&.${activeClassName} span`]: {
+      color: theme.palette.colors.coolGrey500,
+      fontWeight: theme.typography.fontWeightSemiBold
+    }
+  },
+  linkBackground: {
+    [`&.${activeClassName} div`]: {
+      backgroundColor: theme.palette.colors.darkBlue100,
+      borderRadius: 3
+    }
   }
 }));
 
@@ -27,34 +47,37 @@ const useStyles = makeStyles((theme) => ({
  */
 export default function SettingsList() {
   const classes = useStyles();
-  const history = useHistory();
   const settingsRoutes = useOperatorRoutes({ groups: ["settings"] });
   let settingsList = [];
 
   if (Array.isArray(settingsRoutes)) {
     settingsList = settingsRoutes.map((setting) => (
-      <ListItem
-        key={`listItem-${setting.path}`}
-        component="nav"
-        ContainerProps={{
-          className: classes.listItemContainer
-        }}
-        ContainerComponent={({ children, ...props }) => (
-          <li {...props}>
-            {i18next.t(setting.sidebarI18nLabel) }
-            {children}
-          </li>
-        )}
-        className={clsx({
-          [classes.listItem]: true
-        })}
-        button
-        onClick={() => history.push(setting.path)}
+      <NavLink
+        activeClassName={activeClassName}
+        className={clsx({ [classes.link]: true, [classes.linkBackground]: true })}
+        to={setting.path}
+        key={setting.path}
       >
-        <ListItemText
-          primary={i18next.t(setting.sidebarI18nLabel)}
-        />
-      </ListItem>
+        <ListItem
+          component="nav"
+          ContainerProps={{
+            className: classes.listItemContainer
+          }}
+          button={false}
+          ContainerComponent={({ children, ...props }) => (
+            <li {...props}>
+              {i18next.t(setting.sidebarI18nLabel) }
+              {children}
+            </li>
+          )}
+          classes={{ root: classes.listItemRoot }}
+        >
+          <ListItemText
+            classes={{ root: classes.listItemTextRoot }}
+            primary={i18next.t(setting.sidebarI18nLabel)}
+          />
+        </ListItem>
+      </NavLink>
     ));
   }
 

imports/plugins/core/dashboard/client/components/ShopAddressForm.js

@@ -85,6 +85,7 @@ function ShopAddressForm({ isEditMode, isInitialView, setIsEditMode }) {
   const {
     getFirstErrorMessage,
     getInputProps,
+    isDirty,
     hasErrors,
     submitForm
   } = useReactoForm({
@@ -212,17 +213,17 @@ function ShopAddressForm({ isEditMode, isInitialView, setIsEditMode }) {
         </Grid>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleOnCloseDialog} color="secondary">
+        <Button color="primary" onClick={handleOnCloseDialog}>
             Cancel
         </Button>
         <Button
           color="primary"
-          disabled={isSubmitting}
+          disabled={isSubmitting || !isDirty}
           variant="contained"
           onClick={handleSubmit}
           type="submit"
         >
-          {isSubmitting ? i18next.t("admin.settings.saveProcessing") : i18next.t("app.save")}
+          {isSubmitting ? i18next.t("app.settings.saveProcessing") : i18next.t("app.saveChanges")}
         </Button>
       </DialogActions>
     </Dialog>

imports/plugins/core/dashboard/client/components/ShopAddressSettings.js

@@ -7,38 +7,29 @@ import {
   CardContent,
   CardHeader,
   CircularProgress,
-  makeStyles,
   Typography
 } from "@material-ui/core";
 import useShopSettings from "../hooks/useShopSettings";
 import ShopAddressForm from "./ShopAddressForm";
 
-const useStyles = makeStyles((theme) => ({
-  card: {
-    marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(3)
-  },
-  textField: {
-    minWidth: 350
-  },
-  saveButton: {
-    textAlign: "right"
-  }
-}));
-
 /**
  * Shop address settings form block component
  * @returns {Node} React node
  */
 function ShopAddressSettings() {
-  const classes = useStyles();
   const [isEditMode, setIsEditMode] = useState(false);
   const { loading, shop: { addressBook } } = useShopSettings();
   let readOnlyMode = false;
   let isInitialView = false;
   let address = null;
 
-  if (loading) return <CircularProgress variant="indeterminate" color="primary" />;
+  if (loading) {
+    return (
+      <Box textAlign="center">
+        <CircularProgress variant="indeterminate" color="primary" />
+      </Box>
+    );
+  }
 
   // If an address has been set, render in read only mode
   if (addressBook && addressBook[0]) {
@@ -58,7 +49,7 @@ function ShopAddressSettings() {
   };
 
   return (
-    <Card className={classes.card}>
+    <Card>
       <CardHeader title={i18next.t("admin.settings.address.label")} />
       <CardContent>
         {isInitialView &&