Skip to content

feat: updating popup width of extension from 357px to 400px #31443

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

Merged
merged 1 commit into from
Apr 1, 2025
+6 −6
Merged

feat: updating popup width of extension from 357px to 400px #31443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion app/popup-init.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
* page may be a further UX improvement.
*/
html {
width: 357px;
width: 400px;
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Mar 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Updating the inline CSS and ensuring there are no remaining instances of 357 that affect the width of the extension.

after.mov

height: 600px;
background: #f2f4f6;
}
Expand Down
4 changes: 2 additions & 2 deletions app/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<!doctype html>
<html style="width:357px; height:600px;" dir="ltr">
<html style="width:400px; height:600px;" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>MetaMask</title>
<link rel="preload" href="/_locales/en/messages.json" as="fetch" crossorigin="anonymous" />
<link rel="stylesheet" href="../ui/css/index.scss" />
</head>
<body style="width:357px; height:600px;">
<body style="width:400px; height:600px;">
Comment on lines +2 to +10
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Mar 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Updating other instances of 357px to 400px in the inline CSS

<div id="app-content">
<img class="loading-logo" src="./images/logo/metamask-fox.svg" alt="" loading="lazy" />
<img class="loading-spinner" src="./images/spinner.gif" alt="" loading="lazy" />
Expand Down
2 changes: 1 addition & 1 deletion ui/components/app/modals/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const MODALS = {
},
laptopModalStyle: {
width:
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '357px' : '449px',
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '400px' : '449px',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updating modal CSS in the deprecated Modal component

top: 'calc(33% + 45px)',
paddingLeft:
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '16px' : null,
Expand Down
2 changes: 1 addition & 1 deletion ui/components/ui/mascot/mascot.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const animationEventEmitter = new EventEmitter();

const containerStyle = {
height: '600px',
width: '357px',
width: '400px',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updating other instances of 357px that aren't part of the popup update. This one is in a Storybook story.

border: '1px solid black',
display: 'flex',
flexFlow: 'column',
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/unlock-page/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 357px;
width: 400px;
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Mar 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Updating the unlock page CSS, although this shouldn't be necessary if the page is coded correctly. This will be removed in a future refactor of the unlock page during the onboarding redesign.

padding: 30px;
font-weight: 400;

Expand Down
Loading