Merge pull request #235 from oasisprotocol/ml/wrap/unify-connect-wallet-page

wrap: Unify connect wallet page

Author: lubej

.changelog/235.trivial.md

@@ -0,0 +1 @@
+wrap: Unify connect wallet page

ui/src/wrap/components/Layout/index.module.css

@@ -62,8 +62,8 @@
 
 @media screen and (min-width: 1000px) {
   .main {
-    max-width: 620px;
-    padding: 4.625rem 0 0;
+    max-width: 670px;
+    padding: 1.5rem 0 0;
   }
 
   .footer {

wrap/src/pages/ConnectWallet/index.module.css

@@ -1,3 +1,18 @@
+.connectWallet {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: flex-start;
+  width: 100%;
+
+  button {
+    &&& {
+      padding: 0 32px;
+      border-radius: 999px;
+    }
+  }
+}
+
 .subHeader {
   margin-bottom: 34dvh;
 }

wrap/src/pages/ConnectWallet/index.tsx

@@ -2,10 +2,13 @@ import { FC } from 'react'
 import classes from './index.module.css'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { withConnectedWallet } from '../../hoc/withConnectedWallet'
+import { WrapLogoIcon } from '@oasisprotocol/rose-app-ui'
 
 const ConnectWalletCmp: FC = () => {
   return (
-    <div>
+    <div className={classes.connectWallet}>
+      <WrapLogoIcon />
+
       <p className={classes.subHeader}>
         Quickly wrap your ROSE into wROSE and vice versa with the (un)wrap ROSE tool.
         <br />