Merge pull request #786 from Journaly/modal-improvements

📐 Modal Design Improvements ✐
Journaly · May 11, 2022 · 239128e · 239128e · vercel · May 11, 2022
2 parents eef6251 + ec23b1f
commit 239128e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/packages/web/components/Modal/ModalBody.tsx b/packages/web/components/Modal/ModalBody.tsx
@@ -38,13 +38,16 @@ const ModalBody: React.FC<Props> = (props) => {
         }
         @media (min-width: ${modalConstants.modalBreakpoint}) {
           #modal-body {
-            padding: 0 64px 64px;
+            padding: 0 40px 40px;
           }
         }
 
         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)};

diff --git a/packages/web/components/UserList/UserList.tsx b/packages/web/components/UserList/UserList.tsx
@@ -13,7 +13,7 @@ const UserList: React.FC<UserListProps> = ({ users, colorScheme = 'light-mode' }
   return (
     <div className="list-container">
       {users.map((user) => (
-        <Link href={`/user/${user.handle}`}>
+        <Link href={`/user/${user.handle}`} key={user.id}>
           <a className="user-container">
             <UserAvatar user={user} size={50} />
             <div className="name-handle-container">