m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix permission site origin overflow (#13868)

Browse Source 
* Fix permission site origin overflow

* Standardize connect flow a bit

* Another standardization change

* Fix another chip width issue

* Standardize snap install

* Fix lint

* Fix overflow after rebase
This commit is contained in:
Frederik Bolding 2022-03-10 18:03:32 +01:00 committed by GitHub
parent c439953d94
commit 0d961a655e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/permissions-connect-header/index.scss
View File

@ -1,7 +1,9 @@
.permissions-connect-header { .permissions-connect-header {
flex: 0; flex: 0;
width: 100%;
&__icon { &__icon {
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

2
ui/components/ui/account-list/index.scss
View File

@ -34,9 +34,9 @@
} }
&__wrapper { &__wrapper {
width: 92%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
width: 100%;
} }
&__list { &__list {

6
ui/components/ui/site-origin/index.scss
View File

@ -1,4 +1,10 @@
.site-origin { .site-origin {
max-width: 100%;
.chip {
max-width: 100%;
}
.chip__left-icon { .chip__left-icon {
padding: 4px 0 4px 8px; padding: 4px 0 4px 8px;
} }

46
ui/pages/permissions-connect/choose-account/choose-account.js
View File

@ -49,28 +49,30 @@ const ChooseAccount = ({
return ( return (
<> <>
<PermissionsConnectHeader <div className="permissions-connect-choose-account__content">
iconUrl={targetSubjectMetadata?.iconUrl} <PermissionsConnectHeader
iconName={targetSubjectMetadata?.name} iconUrl={targetSubjectMetadata?.iconUrl}
headerTitle={t('connectWithMetaMask')} iconName={targetSubjectMetadata?.name}
headerText={ headerTitle={t('connectWithMetaMask')}
accounts.length > 0 headerText={
? t('selectAccounts') accounts.length > 0
: t('connectAccountOrCreate') ? t('selectAccounts')
} : t('connectAccountOrCreate')
siteOrigin={targetSubjectMetadata?.origin} }
/> siteOrigin={targetSubjectMetadata?.origin}
<AccountList />
accounts={accounts} <AccountList
selectNewAccountViaModal={selectNewAccountViaModal} accounts={accounts}
addressLastConnectedMap={addressLastConnectedMap} selectNewAccountViaModal={selectNewAccountViaModal}
nativeCurrency={nativeCurrency} addressLastConnectedMap={addressLastConnectedMap}
selectedAccounts={selectedAccounts} nativeCurrency={nativeCurrency}
allAreSelected={allAreSelected} selectedAccounts={selectedAccounts}
deselectAll={deselectAll} allAreSelected={allAreSelected}
selectAll={selectAll} deselectAll={deselectAll}
handleAccountClick={handleAccountClick} selectAll={selectAll}
/> handleAccountClick={handleAccountClick}
/>
</div>
<div className="permissions-connect-choose-account__footer-container"> <div className="permissions-connect-choose-account__footer-container">
<PermissionsConnectFooter /> <PermissionsConnectFooter />
<div className="permissions-connect-choose-account__bottom-buttons"> <div className="permissions-connect-choose-account__bottom-buttons">

12
ui/pages/permissions-connect/choose-account/index.scss
View File

@ -7,6 +7,16 @@
color: var(--Red-400); color: var(--Red-400);
} }
&__content {
display: flex;
overflow-y: auto;
flex-direction: column;
width: 100%;
padding-left: 24px;
padding-right: 24px;
margin-top: 2px;
}
&__footer-container { &__footer-container {
width: 100%; width: 100%;
flex: 1; flex: 1;
@ -27,7 +37,7 @@
width: 100%; width: 100%;
padding-top: 16px; padding-top: 16px;
padding-bottom: 16px; padding-bottom: 16px;
margin-top: 8px; margin-top: 12px;
border-top: 1px solid #d6d9dc; border-top: 1px solid #d6d9dc;
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {

1
ui/pages/permissions-connect/flask/snap-install/index.scss
View File

@ -24,5 +24,6 @@
.page-container__footer { .page-container__footer {
width: 100%; width: 100%;
margin-top: 12px;
} }
} }