Fix issues

src/attributes/components/AttributeProperties/AttributeProperties.tsx

@@ -144,7 +144,7 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
                 description="add attribute as column in product list table"
               />
               <Typography variant="caption">
-                <FormattedMessage defaultMessage="If enable this attribute can be used as a column in product table." />
+                <FormattedMessage defaultMessage="If enabled this attribute can be used as a column in product table." />
               </Typography>
             </>
           }

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -150,6 +150,7 @@ const CollectionCreatePage: React.StatelessComponent<
                       errors={formErrors}
                       disabled={disabled}
                       onChange={change}
+                      translate="collection"
                     />
                   </CardContent>
                 </Card>

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -125,6 +125,7 @@ const CollectionDetailsPage: React.StatelessComponent<
                   errors={formErrors}
                   disabled={disabled}
                   onChange={change}
+                  translate="collection"
                 >
                   <ControlledCheckbox
                     name={"isFeatured" as keyof CollectionDetailsPageFormData}

src/components/AppHeader/AppHeader.tsx

@@ -18,6 +18,9 @@ export interface AppHeaderProps {
 
 const styles = (theme: Theme) =>
   createStyles({
+    backArrow: {
+      fontSize: 30
+    },
     menuButton: {
       flex: "0 0 auto",
       marginLeft: theme.spacing.unit * -2,
@@ -25,9 +28,6 @@ const styles = (theme: Theme) =>
       marginTop: -theme.spacing.unit * 2
     },
     root: {
-      "& svg": {
-        fontSize: 30
-      },
       "&:hover": {
         color: theme.typography.body2.color
       },
@@ -60,7 +60,7 @@ const AppHeader = withStyles(styles, { name: "AppHeader" })(
         anchor ? (
           <Portal container={anchor.current}>
             <div className={classes.root} onClick={onBack}>
-              <ArrowBackIcon />
+              <ArrowBackIcon className={classes.backArrow} />
               {children ? (
                 <Typography className={classes.title}>{children}</Typography>
               ) : (

src/components/TablePagination/TablePaginationActions.tsx

@@ -45,12 +45,10 @@ const styles = (theme: Theme) =>
           backgroundColor: fade(theme.palette.primary.main, 0.2)
         },
         backgroundColor: "transparent"
-      }
       },
-    root: {
-      "& button": {
       padding: 6
     },
+    root: {
       color: theme.palette.text.secondary,
       flexShrink: 0,
       margin: `0 ${theme.spacing.unit * 2.5}px`

src/components/VisibilityCard/VisibilityCard.tsx

@@ -43,6 +43,7 @@ interface VisibilityCardProps extends WithStyles<typeof styles> {
   errors: { [key: string]: string };
   disabled?: boolean;
   onChange(event: any);
+  translate: string;
 }
 
 export const VisibilityCard = withStyles(styles, {
@@ -54,7 +55,8 @@ export const VisibilityCard = withStyles(styles, {
     data: { isPublished, publicationDate },
     errors,
     disabled,
-    onChange
+    onChange,
+    translate
   }: VisibilityCardProps) => {
     const intl = useIntl();
     const [isPublicationDate, setPublicationDate] = React.useState(
@@ -75,7 +77,8 @@ export const VisibilityCard = withStyles(styles, {
               defaultMessage: "since {date}"
             },
             {
-              date: localizeDate(publicationDate)
+              date: localizeDate(publicationDate),
+              description: translate
             }
           )
         : null
@@ -89,7 +92,8 @@ export const VisibilityCard = withStyles(styles, {
               defaultMessage: "will be visible from {date}"
             },
             {
-              date: localizeDate(publicationDate)
+              date: localizeDate(publicationDate),
+              description: translate
             }
           )
         : null

src/discounts/components/SaleInfo/SaleInfo.tsx

@@ -23,25 +23,12 @@ export interface SaleInfoProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const styles = (theme: Theme) =>
+const SaleInfo: React.FC<SaleInfoProps> = ({
-  createStyles({
-    root: {
-      display: "grid",
-      gridColumnGap: theme.spacing.unit * 2 + "px",
-      gridTemplateColumns: "1fr"
-    }
-  });
-
-const SaleInfo = withStyles(styles, {
-  name: "SaleInfo"
-})(
-  ({
-    classes,
   data,
   disabled,
   errors,
   onChange
-  }: SaleInfoProps & WithStyles<typeof styles>) => {
+}) => {
   const intl = useIntl();
 
   return (
@@ -49,7 +36,7 @@ const SaleInfo = withStyles(styles, {
       <CardTitle
         title={intl.formatMessage(commonMessages.generalInformations)}
       />
-        <CardContent className={classes.root}>
+      <CardContent>
         <TextField
           disabled={disabled}
           error={!!errors.name}
@@ -66,7 +53,6 @@ const SaleInfo = withStyles(styles, {
       </CardContent>
     </Card>
   );
-  }
+};
-);
 SaleInfo.displayName = "SaleInfo";
 export default SaleInfo;

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -124,6 +124,7 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
                 disabled={disabled}
                 errors={formErrors}
                 onChange={change}
+                translate="product"
               />
             </div>
           </Grid>

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -281,6 +281,7 @@ export const ProductCreatePage: React.StatelessComponent<
                   errors={errors}
                   disabled={disabled}
                   onChange={change}
+                  translate="page"
                 />
               </div>
             </Grid>

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -291,6 +291,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     errors={errors}
                     disabled={disabled}
                     onChange={change}
+                    translate="product"
                   />
                 </div>
               </Grid>