Fix types and small isssues

src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx

@@ -23,14 +23,13 @@ interface CategoryDetailsFormProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-export const CategoryDetailsForm = ({
+export const CategoryDetailsForm: React.FC<CategoryDetailsFormProps> = ({
   category,
-  classes,
   disabled,
   data,
   onChange,
   errors
-}: CategoryDetailsFormProps) => {
+}) => {
   const intl = useIntl();
 
   return (
@@ -39,34 +38,32 @@ export const CategoryDetailsForm = ({
         title={intl.formatMessage(commonMessages.generalInformations)}
       />
       <CardContent>
-        <>
+        <div>
-          <div>
+          <TextField
-            <TextField
-              label={intl.formatMessage({
-                defaultMessage: "Category Name"
-              })}
-              name="name"
-              disabled={disabled}
-              value={data && data.name}
-              onChange={onChange}
-              error={!!errors.name}
-              helperText={errors.name}
-              fullWidth
-            />
-          </div>
-          <FormSpacer />
-          <RichTextEditor
-            disabled={disabled}
-            error={!!errors.descriptionJson}
-            helperText={errors.descriptionJson}
             label={intl.formatMessage({
-              defaultMessage: "Category Description"
+              defaultMessage: "Category Name"
             })}
-            initial={maybe(() => JSON.parse(category.descriptionJson))}
+            name="name"
-            name="description"
+            disabled={disabled}
+            value={data && data.name}
             onChange={onChange}
+            error={!!errors.name}
+            helperText={errors.name}
+            fullWidth
           />
-        </>
+        </div>
+        <FormSpacer />
+        <RichTextEditor
+          disabled={disabled}
+          error={!!errors.descriptionJson}
+          helperText={errors.descriptionJson}
+          label={intl.formatMessage({
+            defaultMessage: "Category Description"
+          })}
+          initial={maybe(() => JSON.parse(category.descriptionJson))}
+          name="description"
+          onChange={onChange}
+        />
       </CardContent>
     </Card>
   );

src/collections/components/CollectionDetails/CollectionDetails.tsx

@@ -24,14 +24,13 @@ export interface CollectionDetailsProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const CollectionDetails = ({
+const CollectionDetails: React.FC<CollectionDetailsProps> = ({
-  classes,
   collection,
   disabled,
   data,
   onChange,
   errors
-}: CollectionDetailsProps) => {
+}) => {
   const intl = useIntl();
 
   return (

src/components/VisibilityCard/VisibilityCard.tsx

@@ -25,12 +25,6 @@ const styles = (theme: Theme) =>
       },
       marginTop: theme.spacing.unit * 3
     },
-    expandedSwitchContainer: {
-      "& > div": {
-        padding: 0
-      },
-      marginBottom: 0
-    },
     setPublicationDate: {
       color: theme.palette.primary.main,
       cursor: "pointer",
@@ -126,21 +120,13 @@ export const VisibilityCard = withStyles(styles, {
           })}
         />
         <CardContent>
-          <div
+          <RadioGroupField
-            className={
+            choices={visiblilityPickerChoices}
-              isPublished
+            disabled={disabled}
-                ? classes.expandedSwitchContainer
+            name={"isPublished" as keyof FormData}
-                : classes.switchContainer
+            value={isPublishedRadio}
-            }
+            onChange={onChange}
-          >
+          />
-            <RadioGroupField
-              choices={visiblilityPickerChoices}
-              disabled={disabled}
-              name={"isPublished" as keyof FormData}
-              value={isPublishedRadio}
-              onChange={onChange}
-            />
-          </div>
           {isPublishedRadio === "false" && (
             <>
               {!isPublicationDate && (
@@ -149,8 +135,7 @@ export const VisibilityCard = withStyles(styles, {
                   onClick={() => setPublicationDate(!isPublicationDate)}
                 >
                   {intl.formatMessage({
-                    defaultMessage: "Set publication date",
+                    defaultMessage: "Set publication date"
-                    description: "set publication date"
                   })}
                 </Typography>
               )}

src/products/components/ProductDetailsForm/ProductDetailsForm.tsx

@@ -1,11 +1,5 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import { RawDraftContentState } from "draft-js";
 import React from "react";
@@ -16,15 +10,6 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import RichTextEditor from "@saleor/components/RichTextEditor";
 import { commonMessages } from "@saleor/intl";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      display: "grid",
-      gridColumnGap: theme.spacing.unit * 2 + "px",
-      gridTemplateColumns: `1fr`
-    }
-  });
-
 interface ProductDetailsFormProps {
   data: {
     description: RawDraftContentState;
@@ -39,14 +24,13 @@ interface ProductDetailsFormProps {
   onChange(event: any);
 }
 
-export const ProductDetailsForm = ({
+export const ProductDetailsForm: React.FC<ProductDetailsFormProps> = ({
-  classes,
   data,
   disabled,
   errors,
   initialDescription,
   onChange
-}: ProductDetailsFormProps) => {
+}) => {
   const intl = useIntl();
 
   return (