style: minor UI fixes to permission recovery popup

buidl-labs · Dec 1, 2020 · c5997ac · c5997ac
1 parent 669e637
commit c5997ac
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/components/wallet-connect/RecoverAuthInfo.js b/components/wallet-connect/RecoverAuthInfo.js
@@ -1,14 +1,14 @@
 const RecoverAuthInfo = () => (
 	<div className="pb-12 flex flex-col text-center items-center">
 		<img src="/images/polkadot-wallet-connect.png" width="200px" />
-		<h3 className="mt-4 text-xl font-semibold px-20 text-gray-700">
+		<h3 className="mt-4 text-xl font-semibold px-20 text-gray-700 max-w-md">
 			Instructions for PolkadotJS permission recovery
 		</h3>
-		<span className="mt-4 px-4 text-xs text-gray-600">
+		<p className="mt-4 px-4 text-xs text-gray-600">
 			Currently the PolkadotJS extension doesn't have support for permission
-			management. As a workaround, please restart your browser after quitting it
-			and revisit this page to proceed with the authorization.
-		</span>
+			management.<br /><br /> As a workaround, please <span className="text-gray-700 font-medium">restart your browser</span>{" "}
+			after quitting it and revisit this page to proceed with the authorization.
+		</p>
 	</div>
 );
 

diff --git a/components/wallet-connect/RejectedPage.js b/components/wallet-connect/RejectedPage.js
@@ -17,12 +17,12 @@ const RejectedPage = ({ handleRecoveryAuth }) => (
 			Install extension
 		</a>
 		<span
-			className="mt-4 px-4 text-xs text-gray-500 underline cursor-pointer"
+			className="mt-2 px-4 text-xs text-gray-600 underline cursor-pointer"
 			onClick={handleRecoveryAuth}
 		>
 			Accidently rejected the permission request?
 		</span>
-		<span className="mt-4 text-sm text-gray-600">
+		<span className="mt-6 text-sm text-gray-600">
 			Using a different wallet?{" "}
 			<a
 				className="text-gray-700 font-semibold"

diff --git a/components/wallet-connect/index.js b/components/wallet-connect/index.js
@@ -130,7 +130,7 @@ const WalletConnectPopover = ({ styles, networkInfo, cookies }) => {
 			<ModalOverlay />
 			<ModalContent
 				rounded="lg"
-				maxWidth={state === WalletConnectStates.REJECTED ? "33rem" : "40rem"}
+				maxWidth={state === WalletConnectStates.REJECTED ? "lg" : "xl"}
 				{...styles}
 				py={4}
 			>