fix: Make Modal and Dropdown styles more consistent

src/Dropdown/Dropdown.js

@@ -163,30 +163,30 @@ export default class Dropdown extends React.Component {
 const DropdownHeader = createComponent({
   name: 'DropdownHeader',
   style: css`
-    padding: 8px 12px;
-    font-size: 1rem;
-    border-bottom: 1px solid ${p => p.theme.colors.grayLight};
+    padding: 0 0 0.25rem;
+    margin-bottom: 0.5rem;
+    border-bottom: 2px solid ${p => p.theme.colors.grayLight};
   `,
 });
 
-Dropdown.Header = ({ title, children }) => (
-  <DropdownHeader>
-    {title && <Dropdown.Title>{title}</Dropdown.Title>}
-    {children}
-  </DropdownHeader>
-);
-
 Dropdown.Title = createComponent({
   name: 'DropdownTitle',
   tag: 'span',
   style: css`
     display: block;
-    font-weight: 500;
+    font-weight: bold;
     font-size: 1rem;
     margin: 0;
   `,
 });
 
+Dropdown.Header = ({ title, children }) => (
+  <DropdownHeader>
+    {title && <Dropdown.Title>{title}</Dropdown.Title>}
+    {children}
+  </DropdownHeader>
+);
+
 Dropdown.Body = createComponent({
   name: 'DropdownBody',
   as: Box,
@@ -241,6 +241,5 @@ Dropdown.Footer = createComponent({
     background: ${theme.colors.grayLightest};
     padding: 8px 12px;
     border-radius: 0 0 4px 4px;
-    border-top: 1px solid ${theme.colors.grayLight};
   `,
 });

src/Dropdown/Dropdown.mdx

@@ -4,7 +4,6 @@ name: Dropdown
 ---
 
 import { Playground, PropsTable } from 'docz';
-import { Fragment } from 'react';
 import Dropdown from './Dropdown';
 import Button from '../Button';
 
@@ -22,10 +21,10 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos
     trigger={<Button variant="success">Open Dropdown</Button>}
   >
     {({ close }) => (
-      <Fragment>
-        <Dropdown.Header title="Dropdown" />
-
+      <>
         <Dropdown.Body>
+          <Dropdown.Header title="Dropdown" />
+
           <Dropdown.SectionTitle>Section One</Dropdown.SectionTitle>
           <Dropdown.Item>Item One</Dropdown.Item>
           <Dropdown.Item>Item Two</Dropdown.Item>
@@ -36,7 +35,7 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos
         </Dropdown.Body>
 
         <Dropdown.Footer>Footer</Dropdown.Footer>
-      </Fragment>
+      </>
     )}
   </Dropdown>
 </Playground>

src/Modal/Modal.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { keyframes, css } from 'styled-components';
 import * as animations from 'react-animations';
 import Portal from '../Portal';
-import { createComponent } from '../utils';
+import { createComponent, themeGet } from '../utils';
 
 const getAnimation = name => keyframes`${animations[name]}`;
 
@@ -46,8 +46,7 @@ const ModalContent = createComponent({
     background: #ffffff;
     background-clip: padding-box;
     box-shadow: 0 8px 30px rgba(0, 29, 54, 0.1);
-    border-radius: 4px;
-    overflow: hidden;
+    border-radius: ${themeGet('radius')}px;
 
     ${opening &&
       css`
@@ -198,17 +197,28 @@ class Modal extends React.Component {
 
 const ModalHeader = createComponent({
   name: 'ModalHeader',
-  style: ({ theme }) => css`
+  style: css`
     font-size: 1.5rem;
-    border-bottom: 1px solid ${theme.colors.grayLight}
-    padding: 12px 16px;
+    padding: 1rem 1.25rem 0;
+    border-top-left-radius: ${themeGet('radius')}px;
+    border-top-right-radius: ${themeGet('radius')}px;
+  `,
+});
+
+const ModalHeaderInner = createComponent({
+  name: 'ModalHeaderInner',
+  style: ({ theme }) => css`
+    border-bottom: 2px solid ${theme.colors.grayLight};
+    padding-bottom: 0.25rem;
   `,
 });
 
 Modal.Header = ({ title, children }) => (
   <ModalHeader>
-    {title && <Modal.Title>{title}</Modal.Title>}
-    {children}
+    <ModalHeaderInner>
+      {title && <Modal.Title>{title}</Modal.Title>}
+      {children}
+    </ModalHeaderInner>
   </ModalHeader>
 );
 
@@ -224,16 +234,17 @@ Modal.Title = createComponent({
 Modal.Body = createComponent({
   name: 'ModalBody',
   style: css`
-    padding: 16px;
+    padding: 1.25rem;
   `,
 });
 
 Modal.Footer = createComponent({
   name: 'ModalFooter',
   style: ({ theme }) => css`
-    padding: 12px 16px;
+    padding: 1rem 1.25rem;
     background: ${theme.colors.grayLightest};
-    border-top: 1px solid ${theme.colors.grayLight};
+    border-bottom-left-radius: ${themeGet('radius')}px;
+    border-bottom-right-radius: ${themeGet('radius')}px;
   `,
 });
 

src/utils.js

@@ -1,6 +1,9 @@
 import { get, kebabCase } from 'lodash';
+import { themeGet as styledThemeGet } from 'styled-system';
 import styled from 'styled-components';
 
+export const themeGet = styledThemeGet;
+
 export const getFromTheme = (theme, lookup, fallback) => get(theme, lookup, fallback);
 
 export const getComponentVariant = (theme, key, variant) => {