fix: adjust re-link warning ui

src/components/popup-window/popup-window.tsx

@@ -4,9 +4,10 @@ import { Box } from '../box'
 export const PopupWindow = styled(Box, {
   padding: '18px 32px',
   position: 'relative',
-  height: 'calc(100% - 28px)',
+  height: '100%',
   boxSizing: 'border-box',
   display: 'flex',
+  justifyContent: 'space-between',
   flexDirection: 'column',
   variants: {
     content: {

src/components/warning/warning.tsx

@@ -1,12 +1,11 @@
 import WarningSvg from './warning.svg'
 import './warning.scss'
 
-export const Warning = (props: { header: string; subheader?: string }) => (
+export const Warning = (props: { header: string }) => (
   <div className="warning-box">
     <img src={WarningSvg} />
     <div>
       <div className="warning-box-header">{props.header}</div>
-      {props.subheader && <div>{props.subheader}</div>}
     </div>
   </div>
 )

src/pairing/components/connection-password.tsx

@@ -31,7 +31,7 @@ export const ConnectionPassword = ({
         using it with dApps in this web browser.
       </PairingHeader>
 
-      <Box mt="xl" mb="xl" p="none">
+      <Box mt="sm" mb="sm" p="none">
         <QrCode
           value={JSON.stringify({
             password: connectionPassword,
@@ -43,7 +43,7 @@ export const ConnectionPassword = ({
         />
       </Box>
 
-      <Box textAlign="center" mb="md">
+      <Box textAlign="center" mb="lg">
         {connectionsClient.hasNoConnections() ? (
           <LinkComponent
             style={{ fontSize: '16px', color: 'white', fontWeight: 'bold' }}

src/pairing/components/relink-warning.tsx

@@ -24,10 +24,7 @@ export const RelinkWarning = () => {
   }, [])
   return oldConnection ? (
     <>
-      <Warning
-        header="Your Connector has been updated"
-        subheader=" Please re-link your Radix Wallet"
-      ></Warning>
+      <Warning header="Please update your Radix Wallet to version 1.6 (or newer) and re-link"></Warning>
     </>
   ) : null
 }