Fix positioning buttons at the bottom of modals

oasisprotocol · Dec 16, 2023 · 6e67efd · 6e67efd
1 parent e5d0f47
commit 6e67efd
Show file tree

Hide file tree

Showing 9 changed files with 350 additions and 282 deletions.
diff --git a/src/app/components/ResponsiveLayer/index.tsx b/src/app/components/ResponsiveLayer/index.tsx
@@ -38,7 +38,7 @@ export function ResponsiveLayer(props: LayerExtendedProps) {
     <Layer {...props} ref={layerRef} style={{ overflowY: 'auto', ...props.style }}>
       <Box
         // Prevents Grommet flex overlap issue in smaller viewport
-        flex={{ shrink: 0 }}
+        flex={{ shrink: 0, grow: 1 }}
         style={{
           minHeight: isMobile ? '100dvh' : 'auto',
         }}

diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
@@ -18,6 +18,7 @@ import { LayerContainer } from './../LayerContainer'
 import { DeleteAccount } from './DeleteAccount'
 import { PrivateKeyFormatter } from '../../../PrivateKeyFormatter'
 import { RevealOverlayButton } from '../../../RevealOverlayButton'
+import styled from 'styled-components'
 
 interface FormValue {
   name: string
@@ -33,6 +34,13 @@ interface ManageableAccountDetailsProps {
   wallet: Wallet
 }
 
+const StyledForm = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: space-between;
+` as typeof Form
+
 export const ManageableAccountDetails = ({
   animation,
   closeHandler,
@@ -55,139 +63,139 @@ export const ManageableAccountDetails = ({
       <LayerContainer animation={animation} hideLayer={closeHandler}>
         <Tabs>
           <Tab title={t('toolbar.settings.myAccountsTab', 'My Accounts')}>
-            <Box flex="grow" justify="between">
-              <Form<FormValue>
-                onSubmit={({ value }) => {
-                  if (!editAccount) {
-                    return
+            <StyledForm<FormValue>
+              onSubmit={({ value }) => {
+                if (!editAccount) {
+                  return
+                }
+                editAccount(value.name)
+                closeHandler()
+              }}
+              value={value}
+              onChange={nextValue => setValue(nextValue)}
+            >
+              <Box gap="medium">
+                <FormField
+                  disabled={!editAccount}
+                  info={
+                    !editAccount ? (
+                      <span>
+                        <Trans
+                          i18nKey="toolbar.settings.accountNamingNotAvailable"
+                          t={t}
+                          components={{
+                            OpenWalletButton: (
+                              <Button
+                                color="link"
+                                onClick={() => {
+                                  closeParentHandler ? closeParentHandler() : closeHandler()
+                                  navigate('/open-wallet')
+                                }}
+                              />
+                            ),
+                          }}
+                          defaults="To name your account create a profile while <OpenWalletButton>opening a wallet</OpenWalletButton>."
+                        />
+                      </span>
+                    ) : undefined
                   }
-                  editAccount(value.name)
-                  closeHandler()
-                }}
-                value={value}
-                onChange={nextValue => setValue(nextValue)}
-              >
-                <Box gap="medium">
-                  <FormField
+                  name="name"
+                  validate={(name: string) =>
+                    name.trim().length > 16
+                      ? {
+                          message: t('toolbar.settings.nameLengthError', 'No more than 16 characters'),
+                          status: 'error',
+                        }
+                      : undefined
+                  }
+                >
+                  <TextInput
                     disabled={!editAccount}
-                    info={
-                      !editAccount ? (
-                        <span>
-                          <Trans
-                            i18nKey="toolbar.settings.accountNamingNotAvailable"
-                            t={t}
-                            components={{
-                              OpenWalletButton: (
-                                <Button
-                                  color="link"
-                                  onClick={() => {
-                                    closeParentHandler ? closeParentHandler() : closeHandler()
-                                    navigate('/open-wallet')
-                                  }}
-                                />
-                              ),
-                            }}
-                            defaults="To name your account create a profile while <OpenWalletButton>opening a wallet</OpenWalletButton>."
-                          />
-                        </span>
-                      ) : undefined
-                    }
                     name="name"
-                    validate={(name: string) =>
-                      name.trim().length > 16
-                        ? {
-                            message: t('toolbar.settings.nameLengthError', 'No more than 16 characters'),
-                            status: 'error',
-                          }
-                        : undefined
-                    }
-                  >
-                    <TextInput
-                      disabled={!editAccount}
-                      name="name"
-                      placeholder={t('toolbar.settings.optionalName', 'Name (optional)')}
-                    />
-                  </FormField>
-                  <Box>
-                    <AddressBox address={wallet.address} border />
-                    <Text size="small" margin={'small'}>
-                      <DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
-                    </Text>
-                  </Box>
-                  <Box justify="between" direction="row" gap="medium">
+                    placeholder={t('toolbar.settings.optionalName', 'Name (optional)')}
+                  />
+                </FormField>
+                <Box>
+                  <AddressBox address={wallet.address} border />
+                  <Text size="small" margin={'small'}>
+                    <DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
+                  </Text>
+                </Box>
+                <Box justify="between" direction="row" gap="medium">
+                  <Button
+                    alignSelf="start"
+                    label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
+                    disabled={!wallet.privateKey}
+                    onClick={() => setLayerVisibility(true)}
+                  />
+
+                  {deleteAccount ? (
                     <Button
-                      alignSelf="start"
-                      label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
-                      disabled={!wallet.privateKey}
-                      onClick={() => setLayerVisibility(true)}
+                      plain
+                      color="status-error"
+                      label={t('toolbar.settings.delete.title', 'Delete Account')}
+                      onClick={() => setDeleteLayerVisibility(true)}
                     />
-
-                    {deleteAccount ? (
-                      <Button
-                        plain
-                        color="status-error"
-                        label={t('toolbar.settings.delete.title', 'Delete Account')}
-                        onClick={() => setDeleteLayerVisibility(true)}
-                      />
-                    ) : (
-                      <Tip
-                        content={t(
-                          'toolbar.settings.delete.tooltip',
-                          'You must have at least one account at all times.',
-                        )}
-                        dropProps={{ align: { bottom: 'top' } }}
-                      >
-                        <Box>
-                          <Button
-                            icon={<CircleInformation size="18px" color="status-error" />}
-                            disabled={true}
-                            plain
-                            color="status-error"
-                            label={t('toolbar.settings.delete.title', 'Delete Account')}
-                            onClick={() => setDeleteLayerVisibility(true)}
-                          />
-                        </Box>
-                      </Tip>
-                    )}
-                  </Box>
-                </Box>
-                <Box direction="row" justify="between" pad={{ top: 'large' }}>
-                  <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={closeHandler} />
-                  <Button primary label={t('toolbar.settings.save', 'Save')} type="submit" />
+                  ) : (
+                    <Tip
+                      content={t(
+                        'toolbar.settings.delete.tooltip',
+                        'You must have at least one account at all times.',
+                      )}
+                      dropProps={{ align: { bottom: 'top' } }}
+                    >
+                      <Box>
+                        <Button
+                          icon={<CircleInformation size="18px" color="status-error" />}
+                          disabled={true}
+                          plain
+                          color="status-error"
+                          label={t('toolbar.settings.delete.title', 'Delete Account')}
+                          onClick={() => setDeleteLayerVisibility(true)}
+                        />
+                      </Box>
+                    </Tip>
+                  )}
                 </Box>
-              </Form>
-            </Box>
+              </Box>
+              <Box direction="row" justify="between" pad={{ top: 'large' }}>
+                <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={closeHandler} />
+                <Button primary label={t('toolbar.settings.save', 'Save')} type="submit" />
+              </Box>
+            </StyledForm>
           </Tab>
         </Tabs>
       </LayerContainer>
       {layerVisibility && (
         <LayerContainer hideLayer={hideLayer}>
           <Tabs>
             <Tab title={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}>
-              <Box flex="grow" justify="between" gap="medium">
-                <Text>
-                  {t(
-                    'toolbar.settings.exportPrivateKey.hint1',
-                    'The private key consists of a string of characters. Anyone with access to your private key has direct access to the assets of that account.',
-                  )}
-                </Text>
-                <Text>
-                  {t(
-                    'toolbar.settings.exportPrivateKey.hint2',
-                    'Once the private key is lost, it cannot be retrieved. Please make sure to Backup the private key and keep it in a safe place.',
-                  )}
-                </Text>
-                <RevealOverlayButton
-                  label={t(
-                    'toolbar.settings.exportPrivateKey.confirm',
-                    'I understand, reveal my private key',
-                  )}
-                >
-                  <PrivateKeyFormatter privateKey={wallet.privateKey!} />
-                </RevealOverlayButton>
-              </Box>
-              <Box direction="row" justify="between" pad={{ top: 'large' }}>
-                <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={hideLayer} />
+              <Box flex="grow" justify="between">
+                <Box gap="medium">
+                  <Text>
+                    {t(
+                      'toolbar.settings.exportPrivateKey.hint1',
+                      'The private key consists of a string of characters. Anyone with access to your private key has direct access to the assets of that account.',
+                    )}
+                  </Text>
+                  <Text>
+                    {t(
+                      'toolbar.settings.exportPrivateKey.hint2',
+                      'Once the private key is lost, it cannot be retrieved. Please make sure to Backup the private key and keep it in a safe place.',
+                    )}
+                  </Text>
+                  <RevealOverlayButton
+                    label={t(
+                      'toolbar.settings.exportPrivateKey.confirm',
+                      'I understand, reveal my private key',
+                    )}
+                  >
+                    <PrivateKeyFormatter privateKey={wallet.privateKey!} />
+                  </RevealOverlayButton>
+                </Box>
+                <Box direction="row" justify="between" pad={{ top: 'large' }}>
+                  <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={hideLayer} />
+                </Box>
               </Box>
             </Tab>
           </Tabs>