[dagster-io/ui] Fix Dialog header/footer alignment (#7975)

### Summary & Motivation

Horizontal spacing on DialogHeader and DialogFooter are not aligned with DialogBody. This has been driving me a little crazy.

Also use `KeylineGray` for border colors, as we do elsewhere in Dagit.

<img width="527" alt="Screen Shot 2022-05-19 at 1 11 40 PM" src="https://user-images.githubusercontent.com/2823852/169371398-10f4fc68-8872-40f2-8843-c40312f4aaa2.png">

<img width="532" alt="Screen Shot 2022-05-19 at 1 11 55 PM" src="https://user-images.githubusercontent.com/2823852/169371403-250eced9-be3a-4fa7-bb1e-6067eaa3a1a5.png">

### How I Tested These Changes

Storybook examples

js_modules/dagit/packages/ui/src/components/Dialog.tsx

@@ -42,8 +42,8 @@ export const DialogHeader: React.FC<HeaderProps> = (props) => {
   return (
     <Box
       background={Colors.White}
-      padding={{vertical: 16, horizontal: 24}}
-      border={{side: 'bottom', width: 1, color: Colors.Gray200}}
+      padding={{vertical: 16, horizontal: 20}}
+      border={{side: 'bottom', width: 1, color: Colors.KeylineGray}}
     >
       <Group direction="row" spacing={8} alignItems="center">
         {icon ? <Icon name={icon} color={Colors.Gray800} /> : null}
@@ -69,7 +69,7 @@ interface DialogFooterProps {
 export const DialogFooter: React.FC<DialogFooterProps> = ({children, left, topBorder}) => {
   return (
     <Box
-      padding={{bottom: 16, top: topBorder ? 16 : 8, horizontal: 24}}
+      padding={{bottom: 16, top: topBorder ? 16 : 8, horizontal: 20}}
       border={topBorder ? {side: 'top', width: 1, color: Colors.KeylineGray} : null}
       background={Colors.White}
       flex={{direction: 'row', alignItems: 'center', justifyContent: 'space-between'}}