Fix padding, alignment of actionable-message; add left aligned story

ui/app/pages/token/actionable-message/actionable-message.js

@@ -13,24 +13,26 @@ export default function ActionableMessage ({
       <div className="actionable-message__message">
         {message}
       </div>
-      <div className="actionable-message__actions">
-        {primaryAction && (
-          <div
-            className={classnames('actionable-message__action', 'actionable-message__action--primary')}
-            onClick={primaryAction.onClick}
-          >
-            {primaryAction.label}
-          </div>
-        )}
-        {secondaryAction && (
-          <div
-            className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
-            onClick={secondaryAction.onClick}
-          >
-            {secondaryAction.label}
-          </div>
-        )}
-      </div>
+      {(primaryAction || secondaryAction) && (
+        <div className="actionable-message__actions">
+          {primaryAction && (
+            <div
+              className={classnames('actionable-message__action', 'actionable-message__action--primary')}
+              onClick={primaryAction.onClick}
+            >
+              {primaryAction.label}
+            </div>
+          )}
+          {secondaryAction && (
+            <div
+              className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
+              onClick={secondaryAction.onClick}
+            >
+              {secondaryAction.label}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }

ui/app/pages/token/actionable-message/actionable-message.stories.js

@@ -43,3 +43,16 @@ export const TwoActions = () => (
     />
   </div>
 )
+
+export const LeftAligned = () => (
+  <div style={{ height: '200px', width: '300px' }}>
+    <ActionableMessage
+      message={text('Message', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')}
+      primaryAction={{
+        label: text('LeftAligned Label', 'Dismiss'),
+        onClick: action('LeftAligned Click 1'),
+      }}
+      className="actionable-message--left-aligned"
+    />
+  </div>
+)

ui/app/pages/token/actionable-message/index.scss

@@ -2,7 +2,7 @@
   background: $Blue-000;
   border: 1px solid $Blue-200;
   border-radius: 8px;
-  padding: 8px 28px 8px 28px;
+  padding: 16px;
   margin-top: 18px;
   display: flex;
   flex-flow: column;
@@ -12,6 +12,7 @@
 
   &__message {
     color: $Blue-600;
+    text-align: center;
   }
 
   &__actions {
@@ -42,4 +43,13 @@
       text-decoration: underline;
     }
   }
+
+  &--left-aligned {
+    .actionable-message__message,
+    .actionable-message__actions {
+      justify-content: flex-start;
+      text-align: left;
+      width: 100%;
+    }
+  }
 }