Merge pull request #4542 from mirumee/fix/input-styles

Input UI changes
saleor · Jul 29, 2019 · 0a7abc7 · 0a7abc7
2 parents cf847a3 + 6c97f99
commit 0a7abc7
Show file tree

Hide file tree

Showing 11 changed files with 6,067 additions and 1,177 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Allow selecting the number of rows displayed in dashboard's list views - #4414 by @benekex2
 - Fix generating random avatars when updating staff accounts - #4521 by @maarcingebala
 - Changed license for artwork to CC-BY 4.0
+- Input UI changes - #4542 by @benekex2
 - Fix rendering user avatar when it's null #4546 by @maarcingebala
 - Do not lose focus while typing in product description field - #4549 by @dominik-zeglen
 

diff --git a/saleor/static/dashboard-next/components/Checkbox/Checkbox.tsx b/saleor/static/dashboard-next/components/Checkbox/Checkbox.tsx
@@ -45,7 +45,6 @@ const styles = (theme: Theme) =>
       },
       "&:before": {
         background: "rgba(0, 0, 0, 0)",
-        borderRadius: 2,
         content: '""',
         height: 8,
         left: 2,
@@ -56,7 +55,6 @@ const styles = (theme: Theme) =>
       },
       WebkitAppearance: "none",
       border: `1px solid ${theme.palette.grey[500]}`,
-      borderRadius: 4,
       boxSizing: "border-box",
       cursor: "pointer",
       height: 14,

diff --git a/saleor/static/dashboard-next/components/RichTextEditor/RichTextEditor.tsx b/saleor/static/dashboard-next/components/RichTextEditor/RichTextEditor.tsx
@@ -47,44 +47,20 @@ export interface RichTextEditorProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    "@keyframes focus": {
-      from: {
-        transform: "scaleX(0) scaleY(1)"
-      },
-      to: {
-        transform: "scaleX(1) scaleY(1)"
-      }
-    },
-    "@keyframes hover": {
-      from: {
-        transform: "scaleX(1) scaleY(0)"
-      },
-      to: {
-        transform: "scaleX(1) scaleY(1)"
-      }
-    },
     error: {
       color: theme.palette.error.main
     },
     helperText: {
       marginTop: theme.spacing.unit * 0.75
     },
     input: {
-      "&:hover": {
-        borderBottomColor: theme.palette.primary.main
-      },
-      backgroundColor: theme.overrides.MuiFilledInput.root.backgroundColor,
-      borderBottom: `1px rgba(0, 0, 0, 0) solid`,
-      borderTopLeftRadius: 4,
-      borderTopRightRadius: 4,
-      padding: "27px 12px 10px",
-      position: "relative",
-      transition: theme.transitions.duration.shortest + "ms"
+      position: "relative"
     },
     label: {
       fontSize: theme.typography.caption.fontSize,
-      marginBottom: theme.spacing.unit * 2,
-      marginTop: -21
+      left: 12,
+      position: "absolute",
+      top: 9
     },
     linkIcon: {
       marginTop: 2
@@ -99,8 +75,6 @@ const styles = (theme: Theme) =>
             color: theme.palette.primary.light
           },
           "&:after": {
-            animationDuration: theme.transitions.duration.shortest + "ms",
-            animationFillMode: "both",
             background: theme.palette.getContrastText(
               theme.palette.background.default
             ),
@@ -122,16 +96,19 @@ const styles = (theme: Theme) =>
       "& .Draftail": {
         "&-Editor": {
           "&--focus": {
-            "& .DraftEditor": {
-              "&-editorContainer": {
-                "&:after": {
-                  animationName: "focus !important",
-                  background: theme.palette.primary.main,
-                  transform: "scaleX(0) scaleY(1)"
-                }
-              }
-            }
-          }
+            boxShadow: `inset 0px 0px 0px 2px ${theme.palette.primary.main}`
+          },
+          "&:hover": {
+            borderColor: theme.palette.primary.main
+          },
+          border: `1px ${
+            theme.overrides.MuiOutlinedInput.root.borderColor
+          } solid`,
+          borderTopLeftRadius: 4,
+          borderTopRightRadius: 4,
+          padding: "27px 12px 10px",
+          position: "relative",
+          transition: theme.transitions.duration.shortest + "ms"
         },
         "&-Toolbar": {
           "&Button": {
@@ -192,6 +169,7 @@ const styles = (theme: Theme) =>
           display: "inline-flex",
           flexWrap: "wrap",
           marginBottom: theme.spacing.unit,
+          marginTop: 10,
           [theme.breakpoints.down(460)]: {
             width: "min-content"
           }
@@ -207,24 +185,7 @@ const styles = (theme: Theme) =>
       "&$error": {
         "& .Draftail": {
           "&-Editor": {
-            "& .DraftEditor": {
-              "&-editorContainer": {
-                "&:after": {
-                  animationName: "none",
-                  background: theme.palette.error.main,
-                  transform: "scaleX(1) scaleY(1)"
-                }
-              }
-            },
-            "&--focus": {
-              "& .DraftEditor": {
-                "&-editorContainer": {
-                  "&:after": {
-                    animationName: "none !important"
-                  }
-                }
-              }
-            }
+            borderColor: theme.palette.error.main
           }
         }
       }

diff --git a/saleor/static/dashboard-next/components/SeoForm/SeoForm.tsx b/saleor/static/dashboard-next/components/SeoForm/SeoForm.tsx
@@ -43,6 +43,9 @@ const styles = (theme: Theme) =>
       flex: 1
     },
     labelContainer: {
+      "& span": {
+        paddingRight: 30
+      },
       display: "flex"
     },
     preview: {
@@ -128,7 +131,6 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
                 )}
                 value={title.slice(0, 69)}
                 disabled={loading || disabled}
-                InputLabelProps={{ shrink: true }}
                 placeholder={titlePlaceholder}
                 onChange={onChange}
                 fullWidth
@@ -158,7 +160,6 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
                 fullWidth
                 multiline
                 placeholder={descriptionPlaceholder}
-                InputLabelProps={{ shrink: true }}
                 rows={10}
               />
             </div>

diff --git a/saleor/static/dashboard-next/components/Theme/ThemeProvider.tsx b/saleor/static/dashboard-next/components/Theme/ThemeProvider.tsx
@@ -24,9 +24,11 @@ const dark: IThemeColors = {
     disabled: "rgba(32, 33, 36, 0.6)"
   },
   input: {
+    border: "#9d9d9d",
     default: "#25262A",
-    disabled: "#292A2D",
-    focused: "#25262A"
+    disabled: "none",
+    text: "#FCFCFC",
+    textHover: "#616161"
   },
   paperBorder: "#252728",
   primary: "#13BEBB",
@@ -50,9 +52,11 @@ const light: IThemeColors = {
     disabled: "rgba(216, 216, 216, 0.3)"
   },
   input: {
-    default: "#F1F6F6",
+    border: "#616161",
+    default: "#FFFFFF",
     disabled: "#EAEAEA",
-    focused: "#DCEBEB"
+    text: "#3D3D3D",
+    textHover: "#616161"
   },
   paperBorder: "#EAEAEA",
   primary: "#06847B",

diff --git a/...or/static/dashboard-next/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/...or/static/dashboard-next/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@@ -55,11 +55,11 @@ const CustomerDetailsPage: React.StatelessComponent<
   <Form
     errors={errors}
     initial={{
-      email: maybe(() => customer.email),
-      firstName: maybe(() => customer.firstName),
+      email: maybe(() => customer.email, ""),
+      firstName: maybe(() => customer.firstName, ""),
       isActive: maybe(() => customer.isActive, false),
-      lastName: maybe(() => customer.lastName),
-      note: maybe(() => customer.note)
+      lastName: maybe(() => customer.lastName, ""),
+      note: maybe(() => customer.note, "")
     }}
     onSubmit={onSubmit}
     confirmLeave

diff --git a/saleor/static/dashboard-next/discounts/components/SalePricing/SalePricing.tsx b/saleor/static/dashboard-next/discounts/components/SalePricing/SalePricing.tsx
@@ -96,6 +96,9 @@ const SalePricing = withStyles(styles, {
           label={i18n.t("Start Date")}
           value={data.startDate}
           type="date"
+          InputLabelProps={{
+            shrink: true
+          }}
           fullWidth
         />
         <TextField
@@ -107,6 +110,9 @@ const SalePricing = withStyles(styles, {
           label={i18n.t("End Date")}
           value={data.endDate}
           type="date"
+          InputLabelProps={{
+            shrink: true
+          }}
           fullWidth
         />
       </CardContent>

diff --git a/saleor/static/dashboard-next/discounts/components/VoucherDates/VoucherDates.tsx b/saleor/static/dashboard-next/discounts/components/VoucherDates/VoucherDates.tsx
@@ -38,6 +38,9 @@ const VoucherDates = ({
             label={i18n.t("Start Date")}
             value={data.startDate}
             type="date"
+            InputLabelProps={{
+              shrink: true
+            }}
             fullWidth
           />
           <TextField
@@ -49,6 +52,9 @@ const VoucherDates = ({
             label={i18n.t("Start Hour")}
             value={data.startTime}
             type="time"
+            InputLabelProps={{
+              shrink: true
+            }}
             fullWidth
           />
         </Grid>
@@ -69,6 +75,9 @@ const VoucherDates = ({
               label={i18n.t("End Date")}
               value={data.endDate}
               type="date"
+              InputLabelProps={{
+                shrink: true
+              }}
               fullWidth
             />
             <TextField
@@ -80,6 +89,9 @@ const VoucherDates = ({
               label={i18n.t("End Hour")}
               value={data.endTime}
               type="time"
+              InputLabelProps={{
+                shrink: true
+              }}
               fullWidth
             />
           </Grid>

diff --git a/saleor/static/dashboard-next/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/saleor/static/dashboard-next/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
@@ -58,8 +58,8 @@ const StaffDetailsPage: React.StatelessComponent<StaffDetailsPageProps> = ({
   onSubmit
 }: StaffDetailsPageProps) => {
   const initialForm: FormData = {
-    email: maybe(() => staffMember.email),
-    firstName: maybe(() => staffMember.firstName),
+    email: maybe(() => staffMember.email, ""),
+    firstName: maybe(() => staffMember.firstName, ""),
     hasFullAccess: maybe(
       () =>
         permissions.filter(
@@ -71,7 +71,7 @@ const StaffDetailsPage: React.StatelessComponent<StaffDetailsPageProps> = ({
       false
     ),
     isActive: maybe(() => staffMember.isActive, false),
-    lastName: maybe(() => staffMember.lastName),
+    lastName: maybe(() => staffMember.lastName, ""),
     permissions: maybe(() => staffMember.permissions, []).map(perm => perm.code)
   };
   return (