Merge branch 'master' into add/readonly-mode

CHANGELOG.md

@@ -42,5 +42,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix empty attribute values - #218 by @dominik-zeglen
 - Add language switch - #213 by @dominik-zeglen
 - Fix copy - #223, #224 by @dominik-zeglen
+- Fix ui improvements - #226 by @benekex2
 - Fix attribute errors - #216 by @dominik-zeglen
+- Fix column picker - #228 by @dominik-zeglen
 - Add readonly mode - #229 by @dominik-zeglen

src/attributes/components/AttributeProperties/AttributeProperties.tsx

@@ -74,7 +74,7 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
         <ControlledCheckbox
           name={"filterableInStorefront" as keyof FormData}
           label={intl.formatMessage({
-            defaultMessage: "Use in faceted navigation",
+            defaultMessage: "Use in Faceted Navigation",
             description: "attribute is filterable in storefront"
           })}
           checked={data.filterableInStorefront}

src/components/AppLayout/AppLayout.tsx

@@ -42,15 +42,25 @@ import ThemeSwitch from "./ThemeSwitch";
 const styles = (theme: Theme) =>
   createStyles({
     appAction: {
+      [theme.breakpoints.down("sm")]: {
+        left: 0,
+        width: "100%"
+      },
       bottom: 0,
       gridColumn: 2,
+      height: 70,
       position: "sticky",
       zIndex: 10
     },
     appLoader: {
       height: appLoaderHeight,
+      marginBottom: theme.spacing.unit * 2,
       zIndex: 1201
     },
+    appLoaderPlaceholder: {
+      height: appLoaderHeight,
+      marginBottom: theme.spacing.unit * 2
+    },
     arrow: {
       marginLeft: theme.spacing.unit * 2,
       transition: theme.transitions.duration.standard + "ms"
@@ -75,11 +85,7 @@ const styles = (theme: Theme) =>
     header: {
       display: "flex",
       height: 40,
-      marginBottom: theme.spacing.unit * 3,
+      marginBottom: theme.spacing.unit * 3
-      marginTop: theme.spacing.unit * 2
-    },
-    hide: {
-      opacity: 0
     },
     isMenuSmall: {
       "& path": {
@@ -256,6 +262,11 @@ const styles = (theme: Theme) =>
       [theme.breakpoints.up("sm")]: {
         paddingBottom: theme.spacing.unit * 3
       }
+    },
+    viewContainer: {
+      minHeight: `calc(100vh - ${theme.spacing.unit * 2 +
+        appLoaderHeight +
+        70}px)`
     }
   });
 
@@ -316,12 +327,6 @@ const AppLayout = withStyles(styles, {
           {({ isProgress }) => (
             <AppHeaderContext.Provider value={appHeaderAnchor}>
               <AppActionContext.Provider value={appActionAnchor}>
-                <LinearProgress
-                  className={classNames(classes.appLoader, {
-                    [classes.hide]: !isProgress
-                  })}
-                  color="primary"
-                />
                 <div className={classes.root}>
                   <div className={classes.sideBar}>
                     <ResponsiveDrawer
@@ -370,6 +375,15 @@ const AppLayout = withStyles(styles, {
                       [classes.contentToggle]: isMenuSmall
                     })}
                   >
+                    {isProgress ? (
+                      <LinearProgress
+                        className={classes.appLoader}
+                        color="primary"
+                      />
+                    ) : (
+                      <div className={classes.appLoaderPlaceholder} />
+                    )}
+                    <div className={classes.viewContainer}>
                       <div>
                         <Container>
                           <div className={classes.header}>
@@ -400,7 +414,10 @@ const AppLayout = withStyles(styles, {
                                 <Chip
                                   avatar={
                                     user.avatar && (
-                                    <Avatar alt="user" src={user.avatar.url} />
+                                      <Avatar
+                                        alt="user"
+                                        src={user.avatar.url}
+                                      />
                                     )
                                   }
                                   className={classes.userChip}
@@ -436,7 +453,9 @@ const AppLayout = withStyles(styles, {
                                     >
                                       <Paper>
                                         <ClickAwayListener
-                                        onClickAway={() => setMenuState(false)}
+                                          onClickAway={() =>
+                                            setMenuState(false)
+                                          }
                                           mouseEvent="onClick"
                                         >
                                           <Menu>
@@ -470,6 +489,7 @@ const AppLayout = withStyles(styles, {
                         </Container>
                       </div>
                       <main className={classes.view}>{children}</main>
+                    </div>
                     <div className={classes.appAction} ref={appActionAnchor} />
                   </div>
                 </div>

src/components/Checkbox/Checkbox.tsx

@@ -83,7 +83,7 @@ const styles = (theme: Theme) =>
       display: "flex",
       height: 30,
       justifyContent: "center",
-      margin: 9,
+      margin: "5px 9px",
       width: 30
     }
   });

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -87,7 +87,8 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
   const anchor = React.useRef<HTMLDivElement>();
   const scrollPosition = useElementScroll(anchor);
 
-  const dropShadow = anchor.current
+  const dropShadow =
+    anchor.current && scrollPosition
       ? scrollPosition.y + anchor.current.clientHeight <
         anchor.current.scrollHeight
       : false;

src/components/ControlledSwitch.tsx

@@ -6,7 +6,7 @@ import React from "react";
 const styles = (theme: Theme) =>
   createStyles({
     label: {
-      marginLeft: theme.spacing.unit * 2
+      marginLeft: theme.spacing.unit * 3.5
     },
     labelText: {
       fontSize: 14

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -93,7 +93,6 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
               inputValue,
               selectedItem,
               toggleMenu,
-              openMenu,
               closeMenu,
               highlightedIndex,
               reset
@@ -127,13 +126,13 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                       }),
                       endAdornment: (
                         <div>
-                          <ArrowDropdownIcon onClick={toggleMenu} />
+                          <ArrowDropdownIcon />
                         </div>
                       ),
                       error,
                       id: undefined,
                       onBlur: closeMenu,
-                      onFocus: openMenu
+                      onClick: toggleMenu
                     }}
                     error={error}
                     disabled={disabled}

src/components/Timeline/Timeline.tsx

@@ -71,6 +71,7 @@ interface TimelineProps extends WithStyles<typeof styles> {
 
 interface TimelineAddNoteProps extends WithStyles<typeof styles> {
   message: string;
+  reset: () => void;
   onChange(event: React.ChangeEvent<any>);
   onSubmit(event: React.FormEvent<any>);
 }
@@ -82,9 +83,14 @@ export const Timeline = withStyles(styles, { name: "Timeline" })(
 );
 
 export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
-  ({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => {
+  ({ classes, message, onChange, onSubmit, reset }: TimelineAddNoteProps) => {
     const intl = useIntl();
 
+    const submit = e => {
+      reset();
+      onSubmit(e);
+    };
+
     return (
       <div className={classes.noteRoot}>
         <CardContent className={classes.noteTitle}>
@@ -106,7 +112,7 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
             multiline
             InputProps={{
               endAdornment: (
-                <Button color="primary" onClick={onSubmit}>
+                <Button color="primary" onClick={e => submit(e)}>
                   <FormattedMessage
                     defaultMessage="Send"
                     description="add order note, button"

src/components/Timeline/TimelineNote.tsx

@@ -14,7 +14,6 @@ import CRC from "crc-32";
 import React from "react";
 
 import { DateTime } from "../Date";
-import Hr from "../Hr";
 
 const palette = [
   colors.amber,
@@ -49,20 +48,22 @@ const styles = (theme: Theme) =>
     },
     cardContent: {
       "&:last-child": {
-        paddingBottom: 16
+        padding: 16
-      }
       },
-    content: {
+      boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
-      marginTop: theme.spacing.unit * 2
     },
     root: {
       position: "relative"
     },
     title: {
+      "& p": {
+        fontSize: "14px"
+      },
       alignItems: "center",
       display: "flex",
       justifyContent: "space-between",
-      marginBottom: theme.spacing.unit
+      marginBottom: theme.spacing.unit,
+      paddingLeft: theme.spacing.unit * 3
     }
   });
 
@@ -83,17 +84,15 @@ export const TimelineNote = withStyles(styles, { name: "TimelineNote" })(
       >
         <PersonIcon />
       </Avatar>
-      <Card className={classes.card}>
-        <CardContent className={classes.cardContent}>
       <div className={classes.title}>
         <Typography>{user.email}</Typography>
         <Typography>
           <DateTime date={date} />
         </Typography>
       </div>
-          <Hr />
+      <Card className={classes.card}>
+        <CardContent className={classes.cardContent}>
           <Typography
-            className={classes.content}
             dangerouslySetInnerHTML={{
               __html: message.replace("\n", "<br />")
             }}

src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx

@@ -28,7 +28,6 @@ const styles = (theme: Theme) =>
       marginBottom: theme.spacing.unit * 3
     },
     cardSubtitle: {
-      color: theme.palette.primary.main,
       fontSize: 12,
       height: "20px",
       lineHeight: 0.9

src/orders/components/OrderHistory/OrderHistory.tsx

@@ -207,9 +207,10 @@ const OrderHistory = withStyles(styles, { name: "OrderHistory" })(
         {history ? (
           <Timeline>
             <Form initial={{ message: "" }} onSubmit={onNoteAdd} resetOnSubmit>
-              {({ change, data, submit }) => (
+              {({ change, data, reset, submit }) => (
                 <TimelineAddNote
                   message={data.message}
+                  reset={reset}
                   onChange={change}
                   onSubmit={submit}
                 />

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -6727,12 +6727,6 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
           />
         </svg>
       </div>
-      <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
-      >
-        <div
-          class="MuiCardContent-root-id TimelineNote-cardContent-id"
-        >
       <div
         class="TimelineNote-title-id"
       >
@@ -6753,11 +6747,14 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
           </time>
         </p>
       </div>
-          <hr
+      <div
-            class="Hr-root-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
-          />
+      >
+        <div
+          class="MuiCardContent-root-id TimelineNote-cardContent-id"
+        >
           <p
-            class="MuiTypography-root-id MuiTypography-body2-id TimelineNote-content-id"
+            class="MuiTypography-root-id MuiTypography-body2-id"
           >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
           </p>
@@ -6787,12 +6784,6 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
           />
         </svg>
       </div>
-      <div
-        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
-      >
-        <div
-          class="MuiCardContent-root-id TimelineNote-cardContent-id"
-        >
       <div
         class="TimelineNote-title-id"
       >
@@ -6813,11 +6804,14 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
           </time>
         </p>
       </div>
-          <hr
+      <div
-            class="Hr-root-id"
+        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
-          />
+      >
+        <div
+          class="MuiCardContent-root-id TimelineNote-cardContent-id"
+        >
           <p
-            class="MuiTypography-root-id MuiTypography-body2-id TimelineNote-content-id"
+            class="MuiTypography-root-id MuiTypography-body2-id"
           >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
           </p>
@@ -8378,7 +8372,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -9023,7 +9017,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -9673,7 +9667,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -10263,7 +10257,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -10915,7 +10909,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -11488,7 +11482,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div

src/theme.ts

@@ -60,7 +60,7 @@ export default (colors: IThemeColors): Theme =>
         },
         flat: {
           "& span": {
-            color: colors.font.gray
+            color: colors.font.default
           }
         },
         flatPrimary: {
@@ -100,6 +100,9 @@ export default (colors: IThemeColors): Theme =>
       },
       MuiDialogContent: {
         root: {
+          "& label": {
+            overflowX: "hidden"
+          },
           padding: "5px 24px 24px"
         }
       },