Fix scrollable area and sync modals height

oasisprotocol · Sep 8, 2023 · db21303 · db21303
1 parent 7918030
commit db21303
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 45 deletions.
diff --git a/src/app/components/Toolbar/Features/Contacts/AddContact.tsx b/src/app/components/Toolbar/Features/Contacts/AddContact.tsx
@@ -9,6 +9,7 @@ import { contactsActions } from 'app/state/contacts'
 import { Contact } from 'app/state/contacts/types'
 import { ResponsiveLayer } from '../../../ResponsiveLayer'
 import { ContactAccountForm } from './ContactAccountForm'
+import { layerOverlayMinHeight } from './layer'
 
 interface AddContactProps {
   setLayerVisibility: (isVisible: boolean) => void
@@ -34,10 +35,10 @@ export const AddContact = ({ setLayerVisibility }: AddContactProps) => {
         <Tabs alignControls="start">
           <Tab title={t('toolbar.contacts.addContact', 'Add Contact')}>
             <Box
-              gap="small"
-              pad={{ vertical: 'medium', right: 'small' }}
-              overflow={{ vertical: 'auto' }}
-              height="400px"
+              flex="grow"
+              justify="center"
+              height={{ min: layerOverlayMinHeight }}
+              pad={{ vertical: 'medium' }}
             >
               <ContactAccountForm setLayerVisibility={setLayerVisibility} submitHandler={submitHandler} />
             </Box>

diff --git a/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx b/src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx
@@ -10,6 +10,7 @@ import { Contact } from 'app/state/contacts/types'
 import { Account } from '../Account/Account'
 import { ResponsiveLayer } from '../../../ResponsiveLayer'
 import { ContactAccountForm } from './ContactAccountForm'
+import { layerOverlayMinHeight } from './layer'
 
 interface ContactAccountProps {
   contact: Contact
@@ -51,10 +52,10 @@ export const ContactAccount = ({ contact }: ContactAccountProps) => {
             <Tabs alignControls="start">
               <Tab title={t('toolbar.contacts.manage', 'Manage Contact')}>
                 <Box
-                  gap="small"
-                  pad={{ vertical: 'medium', right: 'small' }}
-                  overflow={{ vertical: 'auto' }}
-                  height="400px"
+                  flex="grow"
+                  justify="center"
+                  height={{ min: layerOverlayMinHeight }}
+                  pad={{ vertical: 'medium' }}
                 >
                   <ContactAccountForm
                     contact={contact}

diff --git a/src/app/components/Toolbar/Features/Contacts/DeleteContact.tsx b/src/app/components/Toolbar/Features/Contacts/DeleteContact.tsx
@@ -22,36 +22,25 @@ export const DeleteContact = ({ deleteHandler, setLayerVisibility }: DeleteConta
       animation="none"
       background="background-front"
       modal
-      position="top"
       margin={isMobile ? 'none' : 'xlarge'}
     >
-      <Box margin="medium" width={isMobile ? 'auto' : '700px'}>
-        <Box
-          gap="small"
-          pad={{ vertical: 'medium', right: 'small' }}
-          overflow={{ vertical: 'auto' }}
-          height="440px"
-        >
-          <Box flex="grow" justify="center">
-            <Text weight="bold" size="medium" alignSelf="center" margin={{ bottom: 'large' }}>
-              {t('toolbar.contacts.deleteTitle', 'Delete Contact')}
-            </Text>
-            <Text size="medium" alignSelf="center">
-              {t('toolbar.contacts.deleteDescription', 'Are you sure you want to delete this contact?')}
-            </Text>
-          </Box>
-          <Box direction="row" align="center" justify="between" pad={{ top: 'medium' }}>
-            <Button
-              label={t('toolbar.contacts.cancel', 'Cancel')}
-              onClick={() => setLayerVisibility(false)}
-            />
-            <Button
-              onClick={deleteHandler}
-              label={t('toolbar.contacts.deleteConfirmation', 'Yes, delete')}
-              color="status-error"
-              primary
-            />
-          </Box>
+      <Box margin="medium">
+        <Box flex="grow" justify="center">
+          <Text weight="bold" size="medium" alignSelf="center" margin={{ bottom: 'large' }}>
+            {t('toolbar.contacts.deleteTitle', 'Delete Contact')}
+          </Text>
+          <Text size="medium" alignSelf="center">
+            {t('toolbar.contacts.deleteDescription', 'Are you sure you want to delete this contact?')}
+          </Text>
+        </Box>
+        <Box direction="row" align="center" justify="between" pad={{ top: 'medium' }}>
+          <Button label={t('toolbar.contacts.cancel', 'Cancel')} onClick={() => setLayerVisibility(false)} />
+          <Button
+            onClick={deleteHandler}
+            label={t('toolbar.contacts.deleteConfirmation', 'Yes, delete')}
+            color="status-error"
+            primary
+          />
         </Box>
       </Box>
     </ResponsiveLayer>

diff --git a/src/app/components/Toolbar/Features/Contacts/index.tsx b/src/app/components/Toolbar/Features/Contacts/index.tsx
@@ -1,12 +1,14 @@
-import { useState } from 'react'
+import { useState, useContext } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Inbox } from 'grommet-icons/es6/icons/Inbox'
 import { selectContactsList } from 'app/state/contacts/selectors'
 import { ContactAccount } from './ContactAccount'
 import { AddContact } from './AddContact'
+import { layerScrollableAreaHeight } from './layer'
 
 const ContactsListEmptyState = () => {
   const { t } = useTranslation()
@@ -23,21 +25,22 @@ export const Contacts = () => {
   const { t } = useTranslation()
   const [layerVisibility, setLayerVisibility] = useState(false)
   const contacts = useSelector(selectContactsList)
+  const isMobile = useContext(ResponsiveContext) === 'small'
 
   return (
-    <Box
-      gap="small"
-      pad={{ vertical: 'medium', right: 'small' }}
-      overflow={{ vertical: 'auto' }}
-      height="400px"
-    >
+    <>
       {!contacts.length && (
         <Box justify="center" flex="grow">
           <ContactsListEmptyState />
         </Box>
       )}
       {!!contacts.length && (
-        <Box flex="grow" gap="small">
+        <Box
+          gap="small"
+          pad={{ vertical: 'medium', right: 'small' }}
+          overflow={{ vertical: 'auto' }}
+          height={isMobile ? 'auto' : layerScrollableAreaHeight}
+        >
           {contacts?.map(contact => <ContactAccount key={contact.address} contact={contact} />)}
         </Box>
       )}
@@ -49,6 +52,6 @@ export const Contacts = () => {
         />
       </Box>
       {layerVisibility && <AddContact setLayerVisibility={setLayerVisibility} />}
-    </Box>
+    </>
   )
 }
diff --git a/src/app/components/Toolbar/Features/Contacts/layer.ts b/src/app/components/Toolbar/Features/Contacts/layer.ts
@@ -0,0 +1,2 @@
+export const layerScrollableAreaHeight = '400px'
+export const layerOverlayMinHeight = '435px' // Keep child modals height in sync with parent modal