chore: tweaks notices icon color, storybook and spacing

Author: Golodhros

frontend/amundsen_application/static/js/components/Alert/alert.story.tsx

@@ -10,26 +10,43 @@ import { NoticeSeverity } from 'config/config-types';
 import StorySection from '../StorySection';
 import Alert from '.';
 
+const ALERT_CONTAINER_WIDTH = 425;
+
 export const AlertStory = (): React.ReactNode => (
   <>
-    <StorySection title="Alert">
+    <StorySection title="Alert" width={ALERT_CONTAINER_WIDTH}>
       <Alert
         message="Alert text that can be short"
         onAction={() => {
           alert('action executed!');
         }}
       />
     </StorySection>
-    <StorySection title="Alert with long text">
-      <Alert message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum, quas voluptas, reprehenderit quam molestias cum quisquam!" />
+    <StorySection title="Alert with long text" width={ALERT_CONTAINER_WIDTH}>
+      <Alert message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum!" />
+    </StorySection>
+    <StorySection
+      title="Alert with medium long text and action"
+      width={ALERT_CONTAINER_WIDTH}
+    >
+      <Alert
+        actionText="Action Text"
+        onAction={() => {
+          alert('action executed!');
+        }}
+        message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis"
+      />
     </StorySection>
-    <StorySection title="Alert with long text and action">
+    <StorySection
+      title="Alert with long text and action"
+      width={ALERT_CONTAINER_WIDTH}
+    >
       <Alert
         actionText="Action Text"
         onAction={() => {
           alert('action executed!');
         }}
-        message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum, quas voluptas, reprehenderit quam molestias cum quisquam!"
+        message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum!"
       />
     </StorySection>
   </>

frontend/amundsen_application/static/js/components/Alert/index.tsx

@@ -14,7 +14,7 @@ import './styles.scss';
 
 const SEVERITY_TO_COLOR_MAP = {
   [NoticeSeverity.INFO]: '#3a97d3', // cyan50
-  [NoticeSeverity.WARNING]: '#ffb146', // $amber50
+  [NoticeSeverity.WARNING]: '#FF8D1F', // $amber70
   [NoticeSeverity.ALERT]: '#b8072c', // $red70
 };
 const SEVERITY_TO_SEVERITY_CLASS = {
@@ -26,6 +26,8 @@ const OPEN_PAYLOAD_CTA = 'See details';
 const PAYLOAD_MODAL_TITLE = 'Summary';
 const PAYLOAD_MODAL_CLOSE_BTN = 'Close';
 
+const DEFINITION_WIDTH = 150;
+
 export interface AlertProps {
   /** Message to show in the alert */
   message: string | React.ReactNode;
@@ -139,7 +141,10 @@ const Alert: React.FC<AlertProps> = ({
             <Modal.Title>{PAYLOAD_MODAL_TITLE}</Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <DefinitionList definitions={payloadDefinitions} termWidth={120} />
+            <DefinitionList
+              definitions={payloadDefinitions}
+              termWidth={DEFINITION_WIDTH}
+            />
           </Modal.Body>
           <Modal.Footer>
             <button

frontend/amundsen_application/static/js/components/Alert/styles.scss

@@ -12,7 +12,7 @@ $alert-alert-background: #ffe4dd;
 .alert {
   border-radius: $alert-border-radius;
   display: flex;
-  padding: $spacer-1 $spacer-1 * 1.5 $spacer-1 $spacer-2;
+  padding: $spacer-1 $spacer-1 $spacer-1 $spacer-2;
   justify-content: flex-start;
   box-shadow: $elevation-level2;
 
@@ -37,7 +37,7 @@ $alert-alert-background: #ffe4dd;
   .info-svg-icon {
     flex-shrink: 0;
     align-self: center;
-    margin-right: $spacer-1;
+    margin-right: $spacer-2;
   }
 
   .alert-action {

frontend/amundsen_application/static/js/components/StorySection/index.tsx

@@ -3,20 +3,24 @@
 
 import * as React from 'react';
 
+const DEFAULT_WIDTH = 600;
+
 export type BlockProps = {
   children: React.ReactNode;
   title: string;
   text?: string | React.ReactNode;
+  width?: number;
 };
 
 const StorySection: React.FC<BlockProps> = ({
   children,
   text,
   title,
+  width = DEFAULT_WIDTH,
 }: BlockProps) => (
   <div
     className="story-section"
-    style={{ padding: '2em 2em 1em', maxWidth: 600 }}
+    style={{ padding: '2em 2em 1em', maxWidth: width }}
   >
     <h1 className="text-headline-w1">{title}</h1>
     {text && <p className="text-body-w1">{text}</p>}