From 66232a39982ace1aaca83385a00d8defd3c32f0c Mon Sep 17 00:00:00 2001
From: Robin MacPherson <hello@robinmacpherson.co>
Date: Sun, 8 May 2022 09:24:08 -0700
Subject: [PATCH] Typography and spacing/layout improvements

---
 packages/web/components/Modal/ModalBody.tsx   | 5 ++++-
 packages/web/components/Modal/ModalHeader.tsx | 7 ++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/Modal/ModalBody.tsx b/packages/web/components/Modal/ModalBody.tsx
index 5951cb947..51365b0d8 100644
--- a/packages/web/components/Modal/ModalBody.tsx
+++ b/packages/web/components/Modal/ModalBody.tsx
@@ -44,7 +44,10 @@ const ModalBody: React.FC<Props> = (props) => {
 
         h1 {
           margin-bottom: 16px;
-          ${theme.typography.headingXL};
+          ${theme.typography.fontFamilySansSerif};
+          font-size: 24px;
+          text-align: center;
+          font-weight: 600;
         }
       `}</style>
     </div>
diff --git a/packages/web/components/Modal/ModalHeader.tsx b/packages/web/components/Modal/ModalHeader.tsx
index 715f374b3..b17d37d8f 100644
--- a/packages/web/components/Modal/ModalHeader.tsx
+++ b/packages/web/components/Modal/ModalHeader.tsx
@@ -24,12 +24,12 @@ const ModalHeader: React.FC<Props> = ({ onClose, title, showTitle }) => {
       <style jsx>{`
         .modal-header {
           position: relative;
-          padding: 14px 64px;
+          padding: ${showTitle ? '14px 64px' : '0'};
           border-bottom: ${showTitle ? '1px solid #d4d8db' : 0};
         }
         @media (min-width: ${modalConstants.modalBreakpoint}) {
           .modal-header {
-            padding: 22px 64px;
+            padding: ${showTitle ? '14px 64px' : '0'};
           }
         }
 
@@ -49,11 +49,12 @@ const ModalHeader: React.FC<Props> = ({ onClose, title, showTitle }) => {
         }
 
         h1 {
+          ${theme.typography.fontFamilySansSerif};
           margin: 0 auto;
           opacity: ${showTitle ? 1 : 0};
           font-size: 20px;
           line-height: 28px;
-          font-weight: 500;
+          font-weight: 600;
           text-align: center;
           transition: opacity 150ms ease-in, border 150ms ease-in;
           ${truncate(247)};