From 23672cbf34503427a96642a45685c9d307612024 Mon Sep 17 00:00:00 2001
From: Jasneet Singh <bhinderjasneetsingh@gmail.com>
Date: Sat, 22 Feb 2025 10:15:17 -0500
Subject: [PATCH 1/6] Enhance wallet button layout for better responsiveness
 and alignment.

---
 src/Pages/Settings/index.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Pages/Settings/index.jsx b/src/Pages/Settings/index.jsx
index 04b8658dc..a8fc3c3c0 100644
--- a/src/Pages/Settings/index.jsx
+++ b/src/Pages/Settings/index.jsx
@@ -375,9 +375,10 @@ const Settings = () => {
 							<Stack
 								direction="row"
 								spacing={2}
+								sx={{ flexWrap: "wrap", justifyContent: "center", gap: theme.spacing(2) }}
 							>
-								<WalletMultiButton />
-								<WalletDisconnectButton />
+								<WalletMultiButton sx={{ minWidth: "120px", maxWidth: "100%", whiteSpace: "nowrap" }} />
+								<WalletDisconnectButton sx={{ minWidth: "120px", maxWidth: "100%", whiteSpace: "nowrap" }} />
 							</Stack>
 						</Box>
 					</ConfigBox>

From 591c531192116d1e5e0b0ebfe76ad353e24f0262 Mon Sep 17 00:00:00 2001
From: Jasneet Singh <bhinderjasneetsingh@gmail.com>
Date: Sat, 22 Feb 2025 16:00:10 -0500
Subject: [PATCH 2/6] updated

---
 src/Pages/Settings/index.jsx | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/Pages/Settings/index.jsx b/src/Pages/Settings/index.jsx
index a8fc3c3c0..dbc59073d 100644
--- a/src/Pages/Settings/index.jsx
+++ b/src/Pages/Settings/index.jsx
@@ -371,15 +371,32 @@ const Settings = () => {
 								monitor to connect to multiple nodes globally.
 							</Typography>
 						</Box>
-						<Box>
-							<Stack
-								direction="row"
-								spacing={2}
-								sx={{ flexWrap: "wrap", justifyContent: "center", gap: theme.spacing(2) }}
-							>
-								<WalletMultiButton sx={{ minWidth: "120px", maxWidth: "100%", whiteSpace: "nowrap" }} />
-								<WalletDisconnectButton sx={{ minWidth: "120px", maxWidth: "100%", whiteSpace: "nowrap" }} />
-							</Stack>
+						<Box
+							sx={{
+								display: "flex",
+								flexWrap: "wrap",
+								justifyContent: "center",
+								gap: theme.spacing(2)
+							}}
+						>
+							<WalletMultiButton
+								sx={{
+									width: { xs: "100%", sm: "auto" }, 
+									minWidth: "fit-content", 
+									maxWidth: "100%", 
+									whiteSpace: "nowrap",
+									padding: theme.spacing(1, 3), 
+								}}
+							/>
+							<WalletDisconnectButton
+								sx={{
+									width: { xs: "100%", sm: "auto" },
+									minWidth: "fit-content",
+									maxWidth: "100%",
+									whiteSpace: "nowrap",
+									padding: theme.spacing(1, 3),
+								}}
+							/>
 						</Box>
 					</ConfigBox>
 				)}

From 64166d25394df499e46ff540deb55b8410a61f3c Mon Sep 17 00:00:00 2001
From: Jasneet Singh <bhinderjasneetsingh@gmail.com>
Date: Mon, 24 Feb 2025 18:51:33 -0500
Subject: [PATCH 3/6] updated

---
 src/Pages/Settings/index.jsx | 46 +++++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/Pages/Settings/index.jsx b/src/Pages/Settings/index.jsx
index dbc59073d..b7104d71e 100644
--- a/src/Pages/Settings/index.jsx
+++ b/src/Pages/Settings/index.jsx
@@ -373,28 +373,46 @@ const Settings = () => {
 						</Box>
 						<Box
 							sx={{
-								display: "flex",
-								flexWrap: "wrap",
-								justifyContent: "center",
-								gap: theme.spacing(2)
+								display: 'flex',
+								flexWrap: 'wrap',
+								gap: theme.spacing(2),
+								mt: theme.spacing(4),
 							}}
 						>
 							<WalletMultiButton
 								sx={{
-									width: { xs: "100%", sm: "auto" }, 
-									minWidth: "fit-content", 
-									maxWidth: "100%", 
-									whiteSpace: "nowrap",
-									padding: theme.spacing(1, 3), 
+									minWidth: theme.spacing(32),
+									height: theme.spacing(10),
+									fontSize: theme.typography.body2.fontSize,
+									fontWeight: theme.typography.fontWeightMedium,
+									'&:not(:disabled)': {
+										backgroundColor: theme.palette.accent.main,
+										'&:hover': {
+											backgroundColor: theme.palette.accent.dark,
+										},
+									},
+									[theme.breakpoints.down('sm')]: {
+										minWidth: '100%',
+										fontSize: theme.typography.body2.fontSize,
+									},
 								}}
 							/>
 							<WalletDisconnectButton
 								sx={{
-									width: { xs: "100%", sm: "auto" },
-									minWidth: "fit-content",
-									maxWidth: "100%",
-									whiteSpace: "nowrap",
-									padding: theme.spacing(1, 3),
+									minWidth: theme.spacing(32),
+									height: theme.spacing(10),
+									fontSize: theme.typography.body2.fontSize,
+									fontWeight: theme.typography.fontWeightMedium,
+									'&:not(:disabled)': {
+										backgroundColor: theme.palette.error.main,
+										'&:hover': {
+											backgroundColor: theme.palette.error.dark,
+										},
+									},
+									[theme.breakpoints.down('sm')]: {
+										minWidth: '100%',
+										fontSize: theme.typography.body2.fontSize,
+									},
 								}}
 							/>
 						</Box>

From 4b63076acc08699267faad23ce149b38038e2c31 Mon Sep 17 00:00:00 2001
From: Jasneet Singh <bhinderjasneetsingh@gmail.com>
Date: Fri, 28 Feb 2025 21:13:03 -0500
Subject: [PATCH 4/6] Add responsive styles for wallet components and integrate
 CSS

---
 src/Components/WalletProvider/index.css | 41 +++++++++++++++++++
 src/Components/WalletProvider/index.jsx |  1 +
 src/Pages/Settings/index.jsx            | 53 +++++--------------------
 3 files changed, 51 insertions(+), 44 deletions(-)
 create mode 100644 src/Components/WalletProvider/index.css

diff --git a/src/Components/WalletProvider/index.css b/src/Components/WalletProvider/index.css
new file mode 100644
index 000000000..2ba40c8b3
--- /dev/null
+++ b/src/Components/WalletProvider/index.css
@@ -0,0 +1,41 @@
+.wallet-adapter-dropdown {
+  width: 100%;
+}
+
+.wallet-adapter-button {
+  width: 100%;
+  justify-content: center;
+  height: var(--button-height) !important;
+  font-size: var(--font-size-body) !important;
+  font-weight: var(--font-weight-medium) !important;
+  margin: var(--spacing-xs) 0;
+  white-space: nowrap;
+}
+
+.wallet-adapter-modal-title {
+  font-size: var(--font-size-h5) !important;
+}
+
+/* Separator styling */
+.wallet-adapter-modal-divider {
+  background-color: var(--border-color) !important;
+  margin: var(--spacing-md) 0 !important;
+}
+
+/* Responsive fixes */
+@media (max-width: 1093px) {
+  .wallet-adapter-button {
+    padding: var(--spacing-xs) var(--spacing-sm) !important;
+    font-size: calc(var(--font-size-body) * 0.9) !important;
+  }
+}
+
+@media (max-width: 910px) {
+  .wallet-adapter-modal-wrapper {
+    flex-direction: column !important;
+  }
+  
+  .wallet-adapter-modal-divider {
+    margin: var(--spacing-sm) 0 !important;
+  }
+}
\ No newline at end of file
diff --git a/src/Components/WalletProvider/index.jsx b/src/Components/WalletProvider/index.jsx
index a24124d93..9491c1d39 100644
--- a/src/Components/WalletProvider/index.jsx
+++ b/src/Components/WalletProvider/index.jsx
@@ -9,6 +9,7 @@ import {
 import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
 import { clusterApiUrl } from "@solana/web3.js";
 import PropTypes from "prop-types";
+import "./index.css"; 
 
 // Default styles that can be overridden by your app
 import "@solana/wallet-adapter-react-ui/styles.css";
diff --git a/src/Pages/Settings/index.jsx b/src/Pages/Settings/index.jsx
index b7104d71e..34a82204c 100644
--- a/src/Pages/Settings/index.jsx
+++ b/src/Pages/Settings/index.jsx
@@ -371,54 +371,19 @@ const Settings = () => {
 								monitor to connect to multiple nodes globally.
 							</Typography>
 						</Box>
-						<Box
-							sx={{
-								display: 'flex',
-								flexWrap: 'wrap',
-								gap: theme.spacing(2),
-								mt: theme.spacing(4),
-							}}
-						>
-							<WalletMultiButton
-								sx={{
-									minWidth: theme.spacing(32),
-									height: theme.spacing(10),
-									fontSize: theme.typography.body2.fontSize,
-									fontWeight: theme.typography.fontWeightMedium,
-									'&:not(:disabled)': {
-										backgroundColor: theme.palette.accent.main,
-										'&:hover': {
-											backgroundColor: theme.palette.accent.dark,
-										},
-									},
-									[theme.breakpoints.down('sm')]: {
-										minWidth: '100%',
-										fontSize: theme.typography.body2.fontSize,
-									},
-								}}
-							/>
-							<WalletDisconnectButton
-								sx={{
-									minWidth: theme.spacing(32),
-									height: theme.spacing(10),
-									fontSize: theme.typography.body2.fontSize,
-									fontWeight: theme.typography.fontWeightMedium,
-									'&:not(:disabled)': {
-										backgroundColor: theme.palette.error.main,
-										'&:hover': {
-											backgroundColor: theme.palette.error.dark,
-										},
-									},
-									[theme.breakpoints.down('sm')]: {
-										minWidth: '100%',
-										fontSize: theme.typography.body2.fontSize,
-									},
-								}}
-							/>
+						<Box>
+							<Stack
+								direction="row"
+								spacing={2}
+							>
+								<WalletMultiButton />
+								<WalletDisconnectButton />
+							</Stack>
 						</Box>
 					</ConfigBox>
 				)}
 
+
 				<ConfigBox>
 					<Box>
 						<Typography component="h1">About</Typography>

From 825a2e2bc46dbe72bd7d8ac1f9f06335e45df30e Mon Sep 17 00:00:00 2001
From: Jasneet Singh <bhinderjasneetsingh@gmail.com>
Date: Tue, 4 Mar 2025 08:36:50 -0500
Subject: [PATCH 5/6] Refactor wallet component styles for improved
 responsiveness and alignment

---
 src/Components/WalletProvider/index.css | 34 ++++++++++++++++---------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/Components/WalletProvider/index.css b/src/Components/WalletProvider/index.css
index 2ba40c8b3..784c75ace 100644
--- a/src/Components/WalletProvider/index.css
+++ b/src/Components/WalletProvider/index.css
@@ -1,15 +1,23 @@
 .wallet-adapter-dropdown {
-  width: 100%;
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap; 
+	justify-content: center; 
+	align-items: center; 
+	gap: var(--env-var-spacing-1); 
 }
 
 .wallet-adapter-button {
-  width: 100%;
-  justify-content: center;
-  height: var(--button-height) !important;
-  font-size: var(--font-size-body) !important;
-  font-weight: var(--font-weight-medium) !important;
-  margin: var(--spacing-xs) 0;
-  white-space: nowrap;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: auto;
+	height: var(--env-var-height-2) !important;
+	font-size: var(--env-var-font-size-medium-plus) !important;
+	font-weight: 500 !important;
+	margin: 0; 
+	padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium-plus) * 1.2) / 2) var(--env-var-spacing-1);
+	white-space: nowrap;
 }
 
 .wallet-adapter-modal-title {
@@ -24,10 +32,12 @@
 
 /* Responsive fixes */
 @media (max-width: 1093px) {
-  .wallet-adapter-button {
-    padding: var(--spacing-xs) var(--spacing-sm) !important;
-    font-size: calc(var(--font-size-body) * 0.9) !important;
-  }
+	.wallet-adapter-button {
+		font-size: var(--env-var-font-size-medium) !important;
+		padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium) * 1.2) / 2)
+			var(--env-var-spacing-1-minus) !important;
+		
+	}
 }
 
 @media (max-width: 910px) {

From 897933ee07eb63fa8e9205eeba13e87d7b4062f7 Mon Sep 17 00:00:00 2001
From: Jasneet Singh <bhinderjasneetsingh@gmail.com>
Date: Fri, 7 Mar 2025 10:08:55 -0500
Subject: [PATCH 6/6] Used default MUI Breakpoints and adjusted spacing between
 the wallet buttons

---
 src/Components/WalletProvider/index.css | 4 ++--
 src/Pages/Settings/index.jsx            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/WalletProvider/index.css b/src/Components/WalletProvider/index.css
index 784c75ace..15fb9d816 100644
--- a/src/Components/WalletProvider/index.css
+++ b/src/Components/WalletProvider/index.css
@@ -31,7 +31,7 @@
 }
 
 /* Responsive fixes */
-@media (max-width: 1093px) {
+@media (max-width: 1200px) { 
 	.wallet-adapter-button {
 		font-size: var(--env-var-font-size-medium) !important;
 		padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium) * 1.2) / 2)
@@ -40,7 +40,7 @@
 	}
 }
 
-@media (max-width: 910px) {
+@media (max-width: 900px) { 
   .wallet-adapter-modal-wrapper {
     flex-direction: column !important;
   }
diff --git a/src/Pages/Settings/index.jsx b/src/Pages/Settings/index.jsx
index 34a82204c..ab3799e76 100644
--- a/src/Pages/Settings/index.jsx
+++ b/src/Pages/Settings/index.jsx
@@ -371,7 +371,7 @@ const Settings = () => {
 								monitor to connect to multiple nodes globally.
 							</Typography>
 						</Box>
-						<Box>
+						<Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', gap: 2 }}>
 							<Stack
 								direction="row"
 								spacing={2}