mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 11:46:13 +02:00
13be683701
* Add networks tab to settings, with header. * Adds network list to settings network tab. * Adds form to settings networks tab and connects it to network list. * Network tab: form adding and editing working * Settings network form properly handles input errors * Add translations for settings network form * Clean up styles of settings network tab. * Add popup-view styles and behaviour to settings network tab. * Fix save button on settings network form * Adds 'Add Network' button and addMode to settings networks tab * Lint fix for settings networks tab addition * Fix navigation in settings networks tab. * Editing an rpcurl in networks tab does not create new network, just changes rpc of old * Fix layout of settings tabs other than network * Networks dropdown 'Custom Rpc' item links to networks tab in settings. * Update settings sidebar networks subheader. * Make networks tab buttons width consistent with input widths in extension view. * Fix settings screen subheader height in popup view * Fix height of add networks button in popup view * Add optional label to chainId and symbol form labels in networks setting tab * Style fixes for networks tab headers * Add ability to customize block explorer used by custom rpc * Stylistic improvements+fixes to custom rpc form. * Hide cancel button. * Highlight and show network form of provider by default. * Standardize network subheader name to 'Networks' * Update e2e tests for new settings network form * Update unit tests for new rpcPrefs prop * Extract blockexplorer url construction into method. * Fix broken styles on non-network tabs in popup mode * Fix block explorer url links for cases when provider in state has not been updated. * Fix vertical spacing of network form * Don't allow click of save button on network form if nothing has changed * Ensure add network button is shown in popup view * Lint fix for networks tab * Fix block explorer url preference setting. * Fix e2e tests for custom blockexplorer in account details modal changes. * Update integration test states to include frequentRpcList property * Fix some capitalizations in en/messages.json * Remove some console.logs added during custom rpc form work * Fix external account link text and url for modal and dropdown. * Documentation, url validation, proptype required additions and lint fixes on network tab and form.
200 lines
3.7 KiB
SCSS
200 lines
3.7 KiB
SCSS
.networks-tab {
|
|
&__content {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
height: 100%;
|
|
max-width: 739px;
|
|
justify-content: space-between;
|
|
|
|
@media screen and (max-width: 575px) {
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
padding: 12px 24px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@media screen and (max-width: 575px) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&__back-button {
|
|
display: none;
|
|
|
|
@media screen and (max-width: 575px) {
|
|
display: block;
|
|
background-image: url('/images/caret-left-black.svg');
|
|
width: 18px;
|
|
height: 18px;
|
|
opacity: .5;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
margin-right: 16px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
&__network-form {
|
|
flex: 0.5 0 auto;
|
|
max-width: 343px;
|
|
max-height: 465px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.page-container__footer {
|
|
border-top: none;
|
|
|
|
@media screen and (max-width: 575px) {
|
|
width: 93%;
|
|
}
|
|
|
|
header {
|
|
padding: 10px 0px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
display: flex;
|
|
flex: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
&__network-form-row {
|
|
@media screen and (max-width: 575px) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 93%;
|
|
}
|
|
}
|
|
|
|
&__network-form-label {
|
|
font-family: Roboto;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #000000;
|
|
}
|
|
|
|
&__networks-list {
|
|
flex: 0.5 0 auto;
|
|
max-width: 343px;
|
|
|
|
@media screen and (max-width: 575px) {
|
|
max-width: 100vw;
|
|
width: 100vw;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
&__add-network-button-wrapper {
|
|
display: none;
|
|
|
|
@media screen and (max-width: 575px) {
|
|
display: flex;
|
|
padding-top: 19px;
|
|
padding-bottom: 23px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-top: 1px solid #D8D8D8;
|
|
|
|
.button {
|
|
width: 178px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__add-network-header-button-wrapper {
|
|
padding-top: 15px;
|
|
padding-bottom: 21px;
|
|
justify-content: center;
|
|
|
|
.button {
|
|
width: 178px;
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__networks-list--selection {
|
|
@media screen and (max-width: 575px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__networks-list-item {
|
|
display: flex;
|
|
padding: 13px 0px 13px 17px;
|
|
position: relative;
|
|
|
|
.menu-icon-circle {
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
padding: 20px 23px 21px 17px;
|
|
border-bottom: 1px solid #D8D8D8;
|
|
}
|
|
}
|
|
|
|
&__networks-list-item:last-of-type {
|
|
@media screen and (max-width: 575px) {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
&__networks-list-name {
|
|
margin-left: 11px;
|
|
font-family: Roboto;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
line-height: 23px;
|
|
color: #6A737D;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&__networks-list-arrow {
|
|
display: none;
|
|
|
|
@media screen and (max-width: 575px) {
|
|
display: block;
|
|
background-image: url('/images/caret-right.svg');
|
|
width: 24px;
|
|
height: 24px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
&__networks-list-name--selected {
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
} |