feat: Make ConnectWalletPage responsive

emerald-dao · Aug 3, 2023 · 7aabaf0 · 7aabaf0
1 parent 519bd51
commit 7aabaf0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/lib/components/ConnectWalletPage/ConnectWalletPage.svelte b/src/lib/components/ConnectWalletPage/ConnectWalletPage.svelte
@@ -35,10 +35,14 @@
 
 <style lang="scss">
 	section {
-		display: grid;
-		grid-template-columns: 2fr 3fr;
 		flex: 1;
 		padding: 0;
+		display: flex;
+
+		@include mq(medium) {
+			display: grid;
+			grid-template-columns: 2fr 3fr;
+		}
 
 		& > div {
 			display: flex;
@@ -49,13 +53,26 @@
 
 			&:first-child {
 				background-color: var(--clr-background-secondary);
-				border-right: 0.5px solid var(--clr-border-primary);
-				align-items: flex-start;
 				padding: var(--space-20);
+				align-items: center;
+				text-align: center;
+				width: 100%;
+
+				@include mq(medium) {
+					text-align: left;
+					align-items: flex-start;
+					border-right: 0.5px solid var(--clr-border-primary);
+				}
 			}
 
 			&:last-child {
 				padding: var(--space-22);
+				display: none;
+
+				@include mq(medium) {
+					display: block;
+				}
+
 				& > p {
 					color: var(--clr-text-main);
 

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
 	import Currency from '$lib/components/Currency/Currency.svelte';
 	import ProgressBar from '$lib/components/ProgressBar/ProgressBar.svelte';
 	import UserProfileLabel from '$lib/components/UserProfileLabel/UserProfileLabel.svelte';
+	import ConnectWalletPage from '$lib/components/ConnectWalletPage/ConnectWalletPage.svelte';
 
 	let stepss = [
 		{
@@ -30,6 +31,7 @@
 	let file: File[];
 </script>
 
+<ConnectWalletPage />
 <section>
 	<ProgressBar
 		{value}