Changes added

src/core/client/ui/components/CallOut/CallOut.css

@@ -29,7 +29,6 @@
 }
 
 .fullWidth {
-  display: block;
+  display: flex;
   width: 100%;
-  box-sizing: border-box;
 }

src/core/client/ui/components/TextField/TextField.tsx

@@ -29,10 +29,22 @@ export interface TextFieldProps {
   * If set renders a full width button
   */
   fullWidth?: boolean;
+  /**
+   * Placeholder
+   */
+  placeholder?: string;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
-  const { className, classes, color, fullWidth, value, ...rest } = props;
+  const {
+    className,
+    classes,
+    color,
+    fullWidth,
+    value,
+    placeholder,
+    ...rest
+  } = props;
 
   const rootClassName = cn(
     classes.root,
@@ -44,12 +56,20 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
     className
   );
 
-  return <input className={rootClassName} value={value} {...rest} />;
+  return (
+    <input
+      className={rootClassName}
+      placeholder={placeholder}
+      value={value}
+      {...rest}
+    />
+  );
 };
 
 TextField.defaultProps = {
   color: "regular",
   fullWidth: false,
+  placeholder: "",
 };
 
 const enhanced = withStyles(styles)(TextField);

src/core/client/ui/components/ValidationMessage/ValidationMessage.css

@@ -4,7 +4,7 @@
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
-  padding: 7px 10px;
+  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit)
   box-sizing: border-box;
 }
 
@@ -19,17 +19,16 @@
   background-color: var(--palette-error-light);
   border-radius: 1px;
   border-color: var(--palette-error-darkest);
-  border-left-width: 8px;
+  border-left-width: calc(0.5 * var(--spacing-unit));
   border-left-style: solid;
   color: var(--palette-common-white);
 }
 
 .fullWidth {
-  display: block;
+  display: flex;
   width: 100%;
-  box-sizing: border-box;
 }
 
 .icon {
-  margin-right: 8px;
+  margin-right: calc(0.5 * var(--spacing-unit));
 }