feat(Error, Header): created Error, Buttons, and Header components to…

… be used in the Modal

app/components/modals/Buttons.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import Button from '../chrome/Button'
+
+interface ButtonsProps {
+  cancelText: string
+  submitText: string
+  disabled: boolean
+  loading: boolean
+  onCancel: () => void
+  onSubmit: () => void
+}
+
+const Buttons: React.FunctionComponent<ButtonsProps> = ({ cancelText, submitText, disabled, loading, onCancel, onSubmit }) =>
+  <div className='buttons'>
+    {cancelText && onCancel ? <Button text={cancelText} onClick={onCancel} color='muted' /> : <div></div>}
+    <Button color='primary' text={submitText} onClick={onSubmit} loading={loading} disabled={disabled} />
+  </div>
+
+export default Buttons

app/components/modals/Error.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+interface ErrorProps {
+  text: string
+}
+const Error: React.FunctionComponent<ErrorProps> = ({ text }) =>
+  <div className='error'>{text}</div>
+
+export default Error

app/components/modals/Header.tsx

@@ -68,7 +68,7 @@ const DialogHeader: React.FunctionComponent<IDialogHeaderProps> = ({ onDismissed
         className="close"
         onClick={onCloseButtonClick}
         aria-label="close"
-        role="button" >x</a>
+        role="button" ><span className='icon'>close</span></a>
     )
   }
 

app/scss/_dialog.scss

@@ -19,8 +19,76 @@ dialog {
   max-width: 600px;
 
   &::backgrop {
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0, 0, 0, 0.7);
     opacity: 1;
     z-index: $zindex-modal;
   }
-}
+
+  .dialog-header {
+    height: 50px;
+    border-bottom: solid 1px $border-color;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: $spacer;
+
+    h1 {
+      font-weight: $font-weight-bold;
+      font-size: $font-size-lg;
+      margin: 0;
+      padding: 0;
+      margin-right: $spacer;
+    }
+
+    .close {
+      flex-shrink: 0;
+
+      border: 0;
+      height: 16px;
+      width: 16px;
+
+      // Set the left margin to auto so that flexbox positions the button
+      // on the right hand side of the dialog and add a -10px right hand
+      // side margin to put the button where it should be (we use a double
+      // margin for the header itself).
+      margin: $spacer * -3 $spacer * -1 0 auto;
+      padding: 0;
+      background: transparent;
+
+      color: $primary-muted;
+      cursor: pointer;
+
+      // Let the button deal with all mouse events.
+      // Without this the octicon resets the cursor when
+      // hovering over the <path>.
+      .octicon {
+        pointer-events: none;
+      }
+
+      &:hover {
+        color: $text;
+      }
+
+      &:focus {
+        outline: 0;
+      }
+    }
+  }
+
+  form {
+    padding: $spacer
+  }
+
+  .error {
+    color: $error;
+    margin: 0 1rem 1rem 0;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}