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

Denser tab buttons in settings #1905

Merged
merged 3 commits into from
Apr 26, 2024
Merged

Denser tab buttons in settings #1905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc406af
Denser tab buttons in settings
lukaw3d Apr 24, 2024
0142394
Make extension popup wider to fit all settings tabs on screen
lukaw3d Apr 24, 2024
28618de
Update jest snapshots
lukaw3d Apr 24, 2024
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
1 change: 1 addition & 0 deletions .changelog/1905.bugfix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Denser tab buttons in settings
2 changes: 1 addition & 1 deletion extension/src/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>ROSE Wallet Extension</title>
</head>
<body>
<div id="root" style="min-width: 360px; min-height: 600px"></div>
<div id="root" style="min-width: 375px; min-height: 600px"></div>
Copy link
Contributor

@buberdds buberdds Apr 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Aligning popup width to EN tab labels seems naive. Anyway, if we need more space can we go with current/old extension 450 instead? More langs will look Ok. Maybe we should use "Accounts" label too to save some space. It's quite clear that accounts listed under profile belong to user.

Copy link
Member Author

Choose a reason for hiding this comment

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

Preview of german:
Screenshot from 2024-04-25 17-33-27

Copy link
Member Author

Choose a reason for hiding this comment

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

I'd like a wider extension too, and we can update that very easily, but we'll probably want to support 375px iphones either way

<script type="module" src="./popup/popup.tsx"></script>
<!--
TODO: re-enable after supporting multiple extension popups with persistence
Expand Down
22 changes: 16 additions & 6 deletions ...app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,8 +167,8 @@ exports[`<AddContact /> should match snapshot 1`] = `
display: flex;
box-sizing: border-box;
max-width: 100%;
margin-left: 12px;
margin-right: 12px;
margin-left: 6px;
margin-right: 6px;
margin-top: 3px;
margin-bottom: 3px;
border-bottom: solid 2px #0500e2;
Expand Down Expand Up @@ -551,10 +551,20 @@ exports[`<AddContact /> should match snapshot 1`] = `
flex-grow: 1;
}

.c11 > [role='tablist'] > button {
padding-left: 0;
padding-right: 0;
}

.c11 > [role='tablist'] > button svg {
width: 14px;
margin-top: -5px;
}

.c16 {
white-space: nowrap;
margin-left: 12px;
margin-right: 12px;
margin-left: 6px;
margin-right: 6px;
margin-top: 3px;
margin-bottom: 3px;
}
Expand Down Expand Up @@ -755,8 +765,8 @@ exports[`<AddContact /> should match snapshot 1`] = `

@media only screen and (max-width:768px) {
.c15 {
margin-left: 6px;
margin-right: 6px;
margin-left: 3px;
margin-right: 3px;
}
}

Expand Down
14 changes: 14 additions & 0 deletions src/styles/theme/ThemeProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,9 @@ const grommetCustomTheme: ThemeType = {
color: 'brand',
},
},
margin: {
horizontal: 'xsmall',
},
},
tabs: {
header: {
Expand All @@ -242,6 +245,17 @@ const grommetCustomTheme: ThemeType = {
display: flex;
flex-direction: column;
flex-grow: 1;

// Arrows displayed when overflowing should be smaller on small screens
& > [role='tablist'] > button {
padding-left: 0;
padding-right: 0;

svg {
width: 14px;
margin-top: -5px;
}
}
`,
},
layer: {
Expand Down
Loading