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] 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>