Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance wallet button layout for better responsiveness and alignment. #1799

Merged
merged 6 commits into from
Mar 11, 2025
Merged

Enhance wallet button layout for better responsiveness and alignment. #1799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
23672cb
Enhance wallet button layout for better responsiveness and alignment.
jasneetsingh6114 Feb 22, 2025
591c531
updated
jasneetsingh6114 Feb 22, 2025
64166d2
updated
jasneetsingh6114 Feb 24, 2025
4b63076
Add responsive styles for wallet components and integrate CSS
jasneetsingh6114 Mar 1, 2025
825a2e2
Refactor wallet component styles for improved responsiveness and alig…
jasneetsingh6114 Mar 4, 2025
897933e
Used default MUI Breakpoints and adjusted spacing between the wallet …
jasneetsingh6114 Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions src/Components/WalletProvider/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
.wallet-adapter-dropdown {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--env-var-spacing-1);
}

.wallet-adapter-button {
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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jasneetsingh6114 seems like the two buttons are too far away from each other.

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: 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)
var(--env-var-spacing-1-minus) !important;

}
}

@media (max-width: 900px) {
.wallet-adapter-modal-wrapper {
flex-direction: column !important;
}

.wallet-adapter-modal-divider {
margin: var(--spacing-sm) 0 !important;
}
}
1 change: 1 addition & 0 deletions src/Components/WalletProvider/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
3 changes: 2 additions & 1 deletion src/Pages/Settings/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -383,6 +383,7 @@ const Settings = () => {
</ConfigBox>
)}


<ConfigBox>
<Box>
<Typography component="h1">About</Typography>
Expand Down