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

Various styling fixes

Browse Source
This commit is contained in:
Chi Kei Chan 2017-10-12 18:46:09 -04:00
parent 7ec77e0b45
commit 57179d2b05
16 changed files with 170 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/app/app.js
View File

@ -27,6 +27,7 @@ const Import = require('./accounts/import')
const InfoScreen = require('./info') const InfoScreen = require('./info')
const Loading = require('./components/loading') const Loading = require('./components/loading')
const NetworkIndicator = require('./components/network') const NetworkIndicator = require('./components/network')
const Identicon = require('./components/identicon')
const BuyView = require('./components/buy-button-subview') const BuyView = require('./components/buy-button-subview')
const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
@ -60,6 +61,7 @@ function mapStateToProps (state) {
noActiveNotices: state.metamask.noActiveNotices, noActiveNotices: state.metamask.noActiveNotices,
isInitialized: state.metamask.isInitialized, isInitialized: state.metamask.isInitialized,
isUnlocked: state.metamask.isUnlocked, isUnlocked: state.metamask.isUnlocked,
selectedAddress: state.metamask.selectedAddress,
currentView: state.appState.currentView, currentView: state.appState.currentView,
activeAddress: state.appState.activeAddress, activeAddress: state.appState.activeAddress,
transForward: state.appState.transForward, transForward: state.appState.transForward,
@ -198,7 +200,7 @@ App.prototype.renderAppBar = function () {
if (window.METAMASK_UI_TYPE === 'notification') { if (window.METAMASK_UI_TYPE === 'notification') {
return null return null
} }
console.log(this.props)
return ( return (
h('.full-width', { h('.full-width', {
@ -230,6 +232,7 @@ App.prototype.renderAppBar = function () {
]), ]),
h('div.header__right-actions', [
h('div.network-component-wrapper', { h('div.network-component-wrapper', {
style: {}, style: {},
}, [ }, [
@ -249,6 +252,12 @@ App.prototype.renderAppBar = function () {
}), }),
]), ]),
h(Identicon, {
address: this.props.selectedAddress,
diameter: 32,
}),
]),
]), ]),
]), ]),

2
ui/app/components/dropdowns/network-dropdown.js
View File

@ -102,7 +102,7 @@ NetworkDropdown.prototype.render = function () {
key: 'main', key: 'main',
closeMenu: () => this.props.hideNetworkDropdown(), closeMenu: () => this.props.hideNetworkDropdown(),
onClick: () => props.setProviderType('mainnet'), onClick: () => props.setProviderType('mainnet'),
style: dropdownMenuItemStyle, style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
}, },
[ [
providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),

11
ui/app/components/network.js
View File

@ -1,5 +1,6 @@
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const classnames = require('classnames');
const inherits = require('util').inherits const inherits = require('util').inherits
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
@ -61,7 +62,13 @@ Network.prototype.render = function () {
} }
return ( return (
h('.network-component.pointer', { h('div.network-component.pointer', {
className: classnames('network-component pointer', {
'ethereum-network': providerName === 'mainnet',
'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
'kovan-test-network': providerName === 'kovan',
'rinkeby-test-network': providerName === 'rinkeby',
}),
title: hoverText, title: hoverText,
onClick: (event) => this.props.onClick(event), onClick: (event) => this.props.onClick(event),
}, [ }, [
@ -71,7 +78,7 @@ Network.prototype.render = function () {
return h('.network-indicator', [ return h('.network-indicator', [
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2' nonSelectBackgroundColor: '#15afb2',
}), }),
h('.network-name', { h('.network-name', {
style: { style: {

4
ui/app/css/itcss/components/account-dropdown.scss
View File

@ -1,5 +1,5 @@
.account-dropdown-name { .account-dropdown-name {
font-family: 'DIN OT'; font-family: Roboto;
} }
.account-dropdown-balance { .account-dropdown-balance {
@ -9,7 +9,7 @@
.account-dropdown-edit-button { .account-dropdown-edit-button {
color: $dusty-gray; color: $dusty-gray;
font-family: "DIN OT"; font-family: Roboto;
&:hover { &:hover {
color: $white; color: $white;

4
ui/app/css/itcss/components/buttons.scss
View File

@ -52,7 +52,7 @@ button.primary {
box-shadow: 0 3px 6px rgba(247, 134, 28, .36); box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
color: $white; color: $white;
font-size: 1.1em; font-size: 1.1em;
font-family: 'Montserrat Regular'; font-family: Roboto;
text-transform: uppercase; text-transform: uppercase;
} }
@ -62,7 +62,7 @@ button.primary {
box-shadow: 0 3px 6px rgba(247, 134, 28, .36); box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
color: #585d67; // TODO: make reusable light button color color: #585d67; // TODO: make reusable light button color
font-size: 1.1em; font-size: 1.1em;
font-family: 'Montserrat Regular'; font-family: Roboto;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;

2
ui/app/css/itcss/components/confirm.scss
View File

@ -12,7 +12,7 @@
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
top: -26px; // top: -26px;
} }
} }

26
ui/app/css/itcss/components/header.scss
View File

@ -8,15 +8,24 @@
flex-flow: column nowrap; flex-flow: column nowrap;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
padding: 0 12px; padding: 12px;
width: 100%; width: 100%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
z-index: $mobile-header-z-index; z-index: $mobile-header-z-index;
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
height: 14.4vh; height: 75px;
max-height: 97px; justify-content: center;
&::after {
content: '';
position: absolute;
width: 100%;
height: 32px;
background: $gallery;
bottom: -32px;
}
} }
} }
@ -45,13 +54,13 @@
} }
.app-header h1 { .app-header h1 {
font-family: 'Montserrat Regular'; font-family: Roboto;
text-transform: uppercase; text-transform: uppercase;
font-weight: 400;
color: #22232c; // $shark color: #22232c; // $shark
} }
h2.page-subtitle { h2.page-subtitle {
font-family: 'Montserrat Regular';
text-transform: uppercase; text-transform: uppercase;
color: #aeaeae; color: #aeaeae;
font-size: 1em; font-size: 1em;
@ -62,6 +71,7 @@ h2.page-subtitle {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-right: 20px;
} }
.left-menu-wrapper { .left-menu-wrapper {
@ -69,3 +79,9 @@ h2.page-subtitle {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.header__right-actions {
display: flex;
flex-flow: row nowrap;
align-items: center;
}

30
ui/app/css/itcss/components/modal.scss
View File

@ -8,7 +8,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
font-family: 'DIN OT'; font-family: Roboto;
padding: 0 16px; padding: 0 16px;
} }
@ -20,7 +20,7 @@
.qr-ellip-address, .ellip-address { .qr-ellip-address, .ellip-address {
width: 247px; width: 247px;
border: none; border: none;
font-family: 'Montserrat Light'; font-family: Roboto;
font-size: 14px; font-size: 14px;
} }
@ -192,7 +192,7 @@
padding: 5px 0 31px 0; padding: 5px 0 31px 0;
border: 1px solid $silver; border: 1px solid $silver;
border-radius: 4px; border-radius: 4px;
font-family: 'Montserrat UltraLight'; font-family: Roboto;
button { button {
cursor: pointer; cursor: pointer;
@ -208,7 +208,7 @@
&__text { &__text {
margin-top: 2px; margin-top: 2px;
font-family: 'DIN OT'; font-family: Roboto;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
} }
@ -252,7 +252,7 @@
justify-content: center; justify-content: center;
border: 1px solid $alto; border: 1px solid $alto;
padding: 5px 10px; padding: 5px 10px;
font-family: 'Montserrat Light'; font-family: Roboto;
margin-top: 7px; margin-top: 7px;
width: 286px; width: 286px;
} }
@ -269,7 +269,7 @@
padding: 10px 22px; padding: 10px 22px;
height: 44px; height: 44px;
width: 235px; width: 235px;
font-family: 'Montserrat Light'; font-family: Roboto;
} }
} }
@ -320,7 +320,7 @@
.private-key-password::-webkit-input-placeholder { .private-key-password::-webkit-input-placeholder {
color: $dusty-gray; color: $dusty-gray;
font-family: 'Montserrat UltraLight'; font-family: Roboto;
} }
.private-key-password-warning { .private-key-password-warning {
@ -333,7 +333,7 @@
width: 292px; width: 292px;
padding: 9px 15px; padding: 9px 15px;
margin-top: 18px; margin-top: 18px;
font-family: 'Montserrat Regular'; font-family: Roboto;
} }
.export-private-key-buttons { .export-private-key-buttons {
@ -362,7 +362,7 @@
.private-key-password-display-textarea { .private-key-password-display-textarea {
color: $crimson; color: $crimson;
font-family: "DIN OT"; font-family: Roboto;
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
border: none; border: none;
@ -384,7 +384,7 @@
position: relative; position: relative;
border: 1px solid $alto; border: 1px solid $alto;
box-shadow: 0 0 2px 2px $alto; box-shadow: 0 0 2px 2px $alto;
font-family: 'Montserrat Light'; font-family: Roboto;
} }
.new-account-modal-header { .new-account-modal-header {
@ -439,7 +439,7 @@
width: 100%; width: 100%;
font-size: 1em; font-size: 1em;
color: $dusty-gray; color: $dusty-gray;
font-family: Montserrat Light; font-family: Roboto;
font-size: 17px; font-size: 17px;
margin: 0 60px; margin: 0 60px;
} }
@ -506,7 +506,7 @@
&__symbol { &__symbol {
color: $tundora; color: $tundora;
font-family: 'DIN OT'; font-family: Roboto;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
@ -517,7 +517,7 @@
height: 30px; height: 30px;
width: 271.28px; width: 271.28px;
color: $tundora; color: $tundora;
font-family: 'DIN OT'; font-family: Roboto;
font-size: 22px; font-size: 22px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
@ -528,7 +528,7 @@
height: 41px; height: 41px;
width: 318px; width: 318px;
color: $scorpion; color: $scorpion;
font-family: 'DIN OT'; font-family: Roboto;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
@ -547,7 +547,7 @@
border: 1px solid $scorpion; border: 1px solid $scorpion;
border-radius: 2px; border-radius: 2px;
color: $tundora; color: $tundora;
font-family: 'DIN OT'; font-family: Roboto;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;

77
ui/app/css/itcss/components/network.scss
View File

@ -1,14 +1,65 @@
.network-component.pointer {
border: 1px solid $shark;
border-radius: 82px;
padding: 6px;
&.ethereum-network {
border-color: rgb(3, 135, 137);
.menu-icon-circle div {
background-color: rgba(3, 135, 137, .7) !important;
}
}
&.ropsten-test-network {
border-color: rgb(233, 21, 80);
.menu-icon-circle div {
background-color: rgba(233, 21, 80, .7) !important;
}
}
&.kovan-test-network {
border-color: rgb(105, 4, 150);
.menu-icon-circle div {
background-color: rgba(105, 4, 150, .7) !important;
}
}
&.rinkeby-test-network {
border-color: rgb(235, 179, 63);
.menu-icon-circle div {
background-color: rgba(235, 179, 63, .7) !important;
}
}
}
.dropdown-menu-item {
.menu-icon-circle,
.menu-icon-circle--active {
margin: 0 16px;
}
}
.network-indicator { .network-indicator {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: .6em; font-size: .6em;
.fa-caret-down {
line-height: 15px;
font-size: 12px;
padding: 0 4px;
}
} }
.network-name { .network-name {
line-height: 12px; line-height: 15px;
padding: 0 4px; padding: 0 4px;
font-family: 'DIN OT'; font-family: Roboto;
font-size: 10px; font-size: 12px;
flex: 1 0 auto; flex: 1 0 auto;
} }
@ -46,29 +97,27 @@
margin: 0; margin: 0;
} }
.menu-icon-circle, .menu-icon-circle--active { .menu-icon-circle,
height: 23px; .menu-icon-circle--active {
width: 23px;
margin: 9px;
background: none; background: none;
border-radius: 22px; border-radius: 22px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid transparent; border: 1px solid transparent;
background: none; margin: 0 4px;
} }
.menu-icon-circle--active { .menu-icon-circle--active {
border: 1px solid white; border: 1px solid $white;
background: rgba(100, 100, 100, 0.4); background: rgba(100, 100, 100, .4);
} }
.menu-icon-circle div, .menu-icon-circle--active div { .menu-icon-circle div,
.menu-icon-circle--active div {
height: 17px; height: 17px;
width: 17px; width: 17px;
border-radius: 17px; border-radius: 17px;
opacity: 0.7;
} }
.menu-icon-circle--active div { .menu-icon-circle--active div {
@ -93,7 +142,7 @@
height: 25px; height: 25px;
width: 75px; width: 75px;
color: $white; color: $white;
font-family: 'DIN OT'; font-family: Roboto;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
@ -103,7 +152,7 @@
height: 36px; height: 36px;
width: 265px; width: 265px;
color: $dusty-gray; color: $dusty-gray;
font-family: 'DIN OT'; font-family: Roboto;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
} }

20
ui/app/css/itcss/components/newui-sections.scss
View File

@ -8,9 +8,9 @@ $wallet-view-bg: $wild-sand;
// Main container // Main container
.main-container { .main-container {
position: absolute; // position: absolute;
z-index: $main-container-z-index; z-index: $main-container-z-index;
font-family: "DIN OT Light"; font-family: Roboto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand;
background: rgb(250, 250, 250); background: rgb(250, 250, 250);
z-index: $sidebar-z-index; z-index: $sidebar-z-index;
position: fixed; position: fixed;
top: 41px; // top: 41px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -86,7 +86,9 @@ $wallet-view-bg: $wild-sand;
.sidebar-overlay { .sidebar-overlay {
z-index: $sidebar-overlay-z-index; z-index: $sidebar-overlay-z-index;
position: fixed; position: fixed;
top: 41px; // top: 41px;
height: 100%;
width: 100%;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -107,7 +109,7 @@ $wallet-view-bg: $wild-sand;
} }
.main-container { .main-container {
margin-top: 6.9vh; // margin-top: 6.9vh;
width: 85%; width: 85%;
height: 90vh; height: 90vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
@ -116,7 +118,7 @@ $wallet-view-bg: $wild-sand;
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
.main-container { .main-container {
margin-top: 6.9vh; // margin-top: 6.9vh;
width: 80%; width: 80%;
height: 82vh; height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
@ -125,7 +127,7 @@ $wallet-view-bg: $wild-sand;
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
.main-container { .main-container {
margin-top: 6.9vh; // margin-top: 6.9vh;
width: 65%; width: 65%;
height: 82vh; height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
@ -142,8 +144,8 @@ $wallet-view-bg: $wild-sand;
} }
.main-container { .main-container {
margin-top: 41px; // margin-top: 41px;
height: calc(100% - 41px); height: 100%;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
background-color: $white; background-color: $white;

10
ui/app/css/itcss/components/sections.scss
View File

@ -295,7 +295,7 @@ textarea.twelve-word-phrase {
/* Info screen */ /* Info screen */
.info-gray { .info-gray {
font-family: 'Montserrat Regular'; font-family: Roboto;
text-transform: uppercase; text-transform: uppercase;
color: $silver-chalice; color: $silver-chalice;
} }
@ -305,7 +305,7 @@ textarea.twelve-word-phrase {
} }
.info { .info {
font-family: 'Montserrat Regular', Arial; font-family: Roboto, Arial;
padding-bottom: 10px; padding-bottom: 10px;
display: inline-block; display: inline-block;
padding-left: 5px; padding-left: 5px;
@ -354,7 +354,7 @@ textarea.twelve-word-phrase {
} }
.buy-inputs { .buy-inputs {
font-family: 'Montserrat Light'; font-family: Roboto;
font-size: 13px; font-size: 13px;
height: 20px; height: 20px;
background: transparent; background: transparent;
@ -398,7 +398,7 @@ textarea.twelve-word-phrase {
} }
.ex-coins { .ex-coins {
font-family: 'Montserrat Regular'; font-family: Roboto;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
font-size: 33px; font-size: 33px;
@ -409,7 +409,7 @@ textarea.twelve-word-phrase {
} }
.marketinfo { .marketinfo {
font-family: 'Montserrat light'; font-family: Roboto;
color: $silver-chalice; color: $silver-chalice;
font-size: 15px; font-size: 15px;
line-height: 17px; line-height: 17px;

14
ui/app/css/itcss/components/send.scss
View File

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
z-index: 25; z-index: 25;
font-family: 'DIN OT'; font-family: Roboto;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
width: 100%; width: 100%;
@ -19,7 +19,7 @@
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
padding: 46px 40.5px 26px; padding: 46px 40.5px 26px;
position: relative; position: relative;
top: -26px; // top: -26px;
align-items: center; align-items: center;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -77,7 +77,7 @@
margin: 4px 0 20px; margin: 4px 0 20px;
font-size: 16px; font-size: 16px;
line-height: 22.4px; line-height: 22.4px;
font-family: "DIN OT"; font-family: Roboto;
} }
.send-screen-gas-input { .send-screen-gas-input {
@ -316,7 +316,7 @@
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
z-index: 25; z-index: 25;
font-family: "Montserrat Light"; font-family: Roboto;
&__content { &__content {
width: 498px; width: 498px;
@ -325,7 +325,7 @@
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
padding: 46px 40.5px 26px; padding: 46px 40.5px 26px;
position: relative; position: relative;
top: -26px; // top: -26px;
align-items: center; align-items: center;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -404,20 +404,18 @@
width: 380px; width: 380px;
border-radius: 8px; border-radius: 8px;
background-color: $white; background-color: $white;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
z-index: 25; z-index: 25;
align-items: center; align-items: center;
font-family: Roboto; font-family: Roboto;
position: relative; position: relative;
top: -26px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
top: 0; top: 0;
width: 100%;
box-shadow: none; box-shadow: none;
} }
} }

2
ui/app/css/itcss/components/token-list.scss
View File

@ -91,7 +91,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
&__option { &__option {
color: $white; color: $white;
font-family: "DIN OT"; font-family: Roboto;
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
text-align: center; text-align: center;

2
ui/app/css/itcss/components/transaction-list.scss
View File

@ -132,7 +132,7 @@
.tx-list-date { .tx-list-date {
color: $dusty-gray; color: $dusty-gray;
font-size: 12px; font-size: 12px;
font-family: "Montserrat UltraLight"; font-family: Roboto;
} }
.tx-list-identicon-wrapper { .tx-list-identicon-wrapper {

2
ui/app/css/itcss/generic/index.scss
View File

@ -10,7 +10,7 @@
html, html,
body { body {
font-family: 'Montserrat Regular', Arial; font-family: Roboto, Arial;
color: #4d4d4d; color: #4d4d4d;
font-weight: 300; font-weight: 300;
line-height: 1.4em; line-height: 1.4em;

4
ui/app/css/itcss/settings/variables.scss
View File

@ -71,3 +71,7 @@ $sidebar-overlay-z-index: 25;
$break-small: 575px; $break-small: 575px;
$break-midpoint: 780px; $break-midpoint: 780px;
$break-large: 576px; $break-large: 576px;
$primary-font-type: Roboto;