Place actions buttons at bottom (#381)

secretkeylabs · Jul 4, 2024 · 6723714 · 6723714
1 parent 61d0c34
commit 6723714
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/src/app/screens/connectionRequest/index.styles.tsx b/src/app/screens/connectionRequest/index.styles.tsx
@@ -5,6 +5,9 @@ import styled from 'styled-components';
 const ContainerInner = styled(animated.div)((props) => ({
   flexGrow: 1,
 
+  display: 'flex',
+  flexDirection: 'column',
+
   paddingBlockStart: '48px', // Value not available in theme.
   paddingLeft: props.theme.space.m,
   paddingRight: props.theme.space.m,
@@ -27,6 +30,10 @@ export function Container({ children }: { children: ReactNode }) {
   return <ContainerInner style={styles}>{children}</ContainerInner>;
 }
 
+export const ContentContainer = styled('div')({
+  flexGrow: 1,
+});
+
 export const PermissionDescriptionsContainer = styled('div')((props) => ({
   paddingBlockStart: props.theme.space.l,
 }));

diff --git a/src/app/screens/connectionRequest/index.tsx b/src/app/screens/connectionRequest/index.tsx
@@ -17,6 +17,7 @@ import { Host } from './host';
 import {
   AccountSwitcherContainer,
   Container,
+  ContentContainer,
   PermissionDescriptionsContainer,
 } from './index.styles';
 import * as Permissions from './permissions';
@@ -80,18 +81,20 @@ function ConnectionRequestInner({ data, context }: ConnectionRequestInnerProps)
 
   return (
     <Container>
-      <DappLogo />
-      <Title />
-      <Host url={context.origin} />
+      <ContentContainer>
+        <DappLogo />
+        <Title />
+        <Host url={context.origin} />
 
-      <AccountSwitcherContainer>
-        <SelectAccountPrompt />
-      </AccountSwitcherContainer>
+        <AccountSwitcherContainer>
+          <SelectAccountPrompt />
+        </AccountSwitcherContainer>
 
-      <PermissionDescriptionsContainer>
-        <Permissions.Title />
-        <Permissions.Description description={t('PERMISSION_WALLET_BALANCE')} />
-      </PermissionDescriptionsContainer>
+        <PermissionDescriptionsContainer>
+          <Permissions.Title />
+          <Permissions.Description description={t('PERMISSION_WALLET_BALANCE')} />
+        </PermissionDescriptionsContainer>
+      </ContentContainer>
 
       <StickyHorizontalSplitButtonContainer>
         <Button type="button" variant="secondary" onClick={handleCancel} title="Deny" />