changes

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

@@ -4,12 +4,12 @@
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
-  padding: calc(0.8 * var(--spacing-unit)) var(--spacing-unit);
+  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
   box-sizing: border-box;
   border-radius: var(--round-corners);
   border-width: 1px;
   border-style: solid;
-  border-left-width: calc(0.8 * var(--spacing-unit));
+  border-left-width: calc(0.5 * var(--spacing-unit));
 }
 
 .colorGrey {
@@ -28,7 +28,3 @@
   display: flex;
   width: 100%;
 }
-
-.icon {
-  margin-right: calc(0.8 * var(--spacing-unit));
-}

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

@@ -15,17 +15,18 @@ export interface ValidationMessageProps {
    * If set renders a full width message
    */
   fullWidth?: boolean;
-  /*
-  * Name of the icon, if not provided it will default to warning icon
-  */
-  icon?: string;
 }
 
 const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
-  const { className, fullWidth, children, icon, ...rest } = props;
+  const { className, fullWidth, children, ...rest } = props;
 
   return (
-    <Message color="error" className={className} {...rest}>
+    <Message
+      color="error"
+      className={className}
+      fullWidth={fullWidth}
+      {...rest}
+    >
       <MessageIcon>warning</MessageIcon>
       {children}
     </Message>