Typography and spacing/layout improvements

Journaly · May 8, 2022 · 66232a3 · 66232a3
1 parent 2b90388
commit 66232a3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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)};