Update main view styling

feature/default_network_editable
Alexander Tseung 7 years ago
parent 3b2a519d46
commit 208e94d3bf
  1. 128
      app/images/metamask-fox.svg
  2. 14
      ui/app/app.js
  3. 2
      ui/app/components/balance-component.js
  4. 2
      ui/app/components/token-cell.js
  5. 14
      ui/app/components/tx-view.js
  6. 8
      ui/app/css/itcss/components/header.scss
  7. 30
      ui/app/css/itcss/components/hero-balance.scss
  8. 29
      ui/app/css/itcss/components/newui-sections.scss
  9. 6
      ui/app/css/itcss/components/token-list.scss
  10. 6
      ui/app/css/itcss/components/transaction-list.scss
  11. 20
      ui/app/css/itcss/components/wallet-balance.scss
  12. 1
      ui/app/css/itcss/settings/variables.scss
  13. 23
      yarn.lock

@ -0,0 +1,128 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6"
style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#161616;stroke:#161616;}
.st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;}
.st2{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;}
.st3{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;}
.st4{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;}
.st5{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;}
.st6{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;}
.st7{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;}
.st8{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;}
.st9{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
.st10{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
</style>
<polygon class="st0" points="277.3,145.6 272.3,142 280.3,134.7 274.2,129.9 282.2,123.8 276.9,119.8 285.3,79 272.7,41.1
191.6,71.4 124.1,71.4 43,41.1 30.4,79 38.9,119.8 33.5,123.8 41.5,129.9 35.4,134.7 43.4,142 38.4,145.6 49.9,159.1 32.5,213.3
48.6,268.6 105.3,253 116.3,262 138.7,277.5 177,277.5 199.4,262 210.4,253 267.1,268.6 283.3,213.3 265.8,159.1 "/>
<g>
<polygon class="st1" points="105.3,253 48.6,268.6 32.5,213.3 "/>
<polygon class="st1" points="283.3,213.3 267.1,268.6 210.4,253 "/>
<polygon class="st2" points="265.8,159.1 213.5,143.8 231.8,139 "/>
<polygon class="st2" points="49.9,159.1 84,139 102.2,143.8 "/>
<polygon class="st2" points="43.4,142 41.5,129.9 84,139 "/>
<polygon class="st2" points="272.3,142 231.8,139 274.2,129.9 "/>
<polygon class="st2" points="272.3,142 265.8,159.1 231.8,139 "/>
<polygon class="st2" points="43.4,142 84,139 49.9,159.1 "/>
<polygon class="st2" points="231.8,139 276.9,119.8 274.2,129.9 "/>
<polygon class="st2" points="84,139 41.5,129.9 38.9,119.8 "/>
<polygon class="st3" points="124.1,71.4 191.6,71.4 176.5,112.5 "/>
<polygon class="st3" points="176.5,112.5 139.2,112.5 124.1,71.4 "/>
<polygon class="st2" points="276.9,119.8 231.8,139 231,87.4 "/>
<polygon class="st2" points="102.2,143.8 84,139 84.7,87.4 "/>
<polygon class="st2" points="84.7,87.4 84,139 38.9,119.8 "/>
<polygon class="st2" points="231,87.4 231.8,139 213.5,143.8 "/>
<polygon class="st1" points="139.2,112.5 43,41.1 124.1,71.4 "/>
<polygon class="st4" points="272.7,41.1 176.5,112.5 191.6,71.4 "/>
<polygon class="st1" points="210.4,253 236.9,213.3 283.3,213.3 "/>
<polygon class="st1" points="32.5,213.3 78.9,213.3 105.3,253 "/>
<polygon class="st3" points="229.3,167.7 283.3,213.3 236.9,213.3 "/>
<polygon class="st3" points="86.4,167.7 32.5,213.3 49.9,159.1 "/>
<polygon class="st3" points="78.9,213.3 32.5,213.3 86.4,167.7 "/>
<polygon class="st3" points="229.3,167.7 265.8,159.1 283.3,213.3 "/>
<polygon class="st2" points="84.7,87.4 139.2,112.5 102.2,143.8 "/>
<polygon class="st2" points="213.5,143.8 176.5,112.5 231,87.4 "/>
<polygon class="st2" points="265.8,159.1 272.3,142 277.3,145.6 "/>
<polygon class="st2" points="49.9,159.1 38.4,145.6 43.4,142 "/>
<polygon class="st2" points="272.3,142 274.2,129.9 280.3,134.7 "/>
<polygon class="st2" points="43.4,142 35.4,134.7 41.5,129.9 "/>
<polygon class="st2" points="33.5,123.8 38.9,119.8 41.5,129.9 "/>
<polygon class="st2" points="282.2,123.8 274.2,129.9 276.9,119.8 "/>
<polygon class="st3" points="49.9,159.1 102.2,143.8 86.4,167.7 "/>
<polygon class="st3" points="265.8,159.1 229.3,167.7 213.5,143.8 "/>
<polygon class="st2" points="38.9,119.8 30.4,79 84.7,87.4 "/>
<polygon class="st2" points="231,87.4 285.3,79 276.9,119.8 "/>
<polygon class="st1" points="102.2,143.8 139.2,112.5 142.6,170.2 "/>
<polygon class="st1" points="213.5,143.8 229.3,167.7 173.1,170.2 "/>
<polygon class="st1" points="173.1,170.2 176.5,112.5 213.5,143.8 "/>
<polygon class="st1" points="142.6,170.2 86.4,167.7 102.2,143.8 "/>
<polygon class="st2" points="272.7,41.1 285.3,79 231,87.4 "/>
<polygon class="st2" points="43,41.1 139.2,112.5 84.7,87.4 "/>
<polygon class="st2" points="231,87.4 176.5,112.5 272.7,41.1 "/>
<polygon class="st2" points="84.7,87.4 30.4,79 43,41.1 "/>
<polygon class="st5" points="105.3,253 78.9,213.3 110,213.7 "/>
<polygon class="st5" points="210.4,253 205.7,213.7 236.9,213.3 "/>
<polygon class="st3" points="173.1,170.2 142.6,170.2 139.2,112.5 "/>
<polygon class="st3" points="139.2,112.5 176.5,112.5 173.1,170.2 "/>
<polygon class="st6" points="116.3,262 105.3,253 136.8,267.9 "/>
<polygon class="st6" points="178.9,267.9 210.4,253 199.4,262 "/>
<polygon class="st7" points="136.6,258.6 136.8,267.9 105.3,253 "/>
<polygon class="st7" points="179.2,258.6 210.4,253 178.9,267.9 "/>
<polygon class="st3" points="86.4,167.7 110,213.7 78.9,213.3 "/>
<polygon class="st3" points="236.9,213.3 205.7,213.7 229.3,167.7 "/>
<polygon class="st8" points="86.4,167.7 109.2,190.8 110,213.7 "/>
<polygon class="st8" points="229.3,167.7 205.7,213.7 206.6,190.8 "/>
<polygon class="st7" points="105.3,253 139.2,236.5 136.6,258.6 "/>
<polygon class="st7" points="210.4,253 179.2,258.6 176.5,236.5 "/>
<polygon class="st1" points="139.2,236.5 105.3,253 110,213.7 "/>
<polygon class="st1" points="176.5,236.5 205.7,213.7 210.4,253 "/>
<polygon class="st5" points="173.1,170.2 229.3,167.7 206.6,190.8 "/>
<polygon class="st5" points="109.2,190.8 86.4,167.7 142.6,170.2 "/>
<polygon class="st5" points="142.6,170.2 129.1,181.7 109.2,190.8 "/>
<polygon class="st5" points="206.6,190.8 186.6,181.7 173.1,170.2 "/>
<polygon class="st3" points="205.7,213.7 178.3,199.1 206.6,190.8 "/>
<polygon class="st3" points="110,213.7 109.2,190.8 137.4,199.1 "/>
<polygon class="st9" points="137.4,199.1 109.2,190.8 129.1,181.7 "/>
<polygon class="st9" points="178.3,199.1 186.6,181.7 206.6,190.8 "/>
<polygon class="st5" points="186.6,181.7 178.3,199.1 173.1,170.2 "/>
<polygon class="st5" points="129.1,181.7 142.6,170.2 137.4,199.1 "/>
<polygon class="st6" points="199.4,262 177,277.5 178.9,267.9 "/>
<polygon class="st6" points="136.8,267.9 138.7,277.5 116.3,262 "/>
<polygon class="st4" points="178.3,199.1 171.8,188.4 173.1,170.2 "/>
<polygon class="st8" points="137.4,199.1 142.6,170.2 143.9,188.4 "/>
<polygon class="st3" points="173.1,170.2 171.8,188.4 143.9,188.4 "/>
<polygon class="st3" points="143.9,188.4 142.6,170.2 173.1,170.2 "/>
<polygon class="st3" points="178.3,199.1 205.7,213.7 176.5,236.5 "/>
<polygon class="st3" points="139.2,236.5 110,213.7 137.4,199.1 "/>
<polygon class="st3" points="137.4,199.1 144,233.2 139.2,236.5 "/>
<polygon class="st3" points="176.5,236.5 171.7,233.2 178.3,199.1 "/>
<polygon class="st8" points="171.8,188.4 178.3,199.1 171.7,233.2 "/>
<polygon class="st8" points="143.9,188.4 144,233.2 137.4,199.1 "/>
<polygon class="st3" points="143.9,188.4 171.8,188.4 171.7,233.2 "/>
<polygon class="st3" points="171.7,233.2 144,233.2 143.9,188.4 "/>
<polygon class="st6" points="179.2,258.6 178.9,267.9 177,277.5 "/>
<polygon class="st6" points="138.7,277.5 136.8,267.9 136.6,258.6 "/>
<polygon class="st6" points="136.6,258.6 139,256.4 138.7,277.5 "/>
<polygon class="st6" points="177,277.5 176.7,256.4 179.2,258.6 "/>
<polygon class="st6" points="138.7,277.5 139,256.4 176.7,256.4 "/>
<polygon class="st6" points="176.7,256.4 177,277.5 138.7,277.5 "/>
<polygon class="st10" points="176.5,236.5 179.2,258.6 176.7,256.4 "/>
<polygon class="st10" points="139,256.4 136.6,258.6 139.2,236.5 "/>
<polygon class="st10" points="139.2,236.5 140.7,241.2 139,256.4 "/>
<polygon class="st10" points="176.7,256.4 175,241.2 176.5,236.5 "/>
<polygon class="st10" points="143.7,237.7 140.7,241.2 139.2,236.5 "/>
<polygon class="st10" points="176.5,236.5 175,241.2 172,237.7 "/>
<polygon class="st10" points="172,237.7 171.7,233.2 176.5,236.5 "/>
<polygon class="st10" points="139.2,236.5 144,233.2 143.7,237.7 "/>
<polygon class="st10" points="171.7,233.2 172,237.7 143.7,237.7 "/>
<polygon class="st10" points="143.7,237.7 144,233.2 171.7,233.2 "/>
<polygon class="st10" points="140.7,241.2 175,241.2 176.7,256.4 "/>
<polygon class="st10" points="176.7,256.4 139,256.4 140.7,241.2 "/>
<polygon class="st10" points="140.7,241.2 143.7,237.7 172,237.7 "/>
<polygon class="st10" points="172,237.7 175,241.2 140.7,241.2 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.6 KiB

@ -253,19 +253,13 @@ App.prototype.renderAppBar = function () {
}, [
// mini logo
h('img.metafox-icon', {
height: 29,
width: 29,
src: '/images/icon-128.png',
height: 42,
width: 42,
src: '/images/metamask-fox.svg',
}),
// metamask name
h('h1', {
style: {
position: 'relative',
paddingLeft: '9px',
color: '#5B5D67',
},
}, 'MetaMask'),
h('h1', 'MetaMask'),
]),

@ -40,7 +40,7 @@ BalanceComponent.prototype.render = function () {
// style: {},
// }),
h(Identicon, {
diameter: 45,
diameter: 50,
address: token && token.address,
network,
}),

@ -106,7 +106,7 @@ TokenCell.prototype.render = function () {
h(Identicon, {
className: 'token-list-item__identicon',
diameter: 45,
diameter: 50,
address,
network,
}),

@ -68,18 +68,14 @@ TxView.prototype.renderButtons = function () {
return !selectedToken
? (
h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.btn-clear', {
style: {
textAlign: 'center',
},
h('button.hero-balance-button', {
onClick: () => showModal({
name: 'BUY',
}),
}, 'DEPOSIT'),
h('button.btn-clear', {
h('button.hero-balance-button', {
style: {
textAlign: 'center',
marginLeft: '0.8em',
},
onClick: showSendPage,
@ -88,11 +84,7 @@ TxView.prototype.renderButtons = function () {
)
: (
h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.btn-clear', {
style: {
textAlign: 'center',
marginLeft: '0.8em',
},
h('button.hero-balance-button', {
onClick: showSendTokenPage,
}, 'SEND'),
])

@ -53,7 +53,7 @@
}
@media screen and (min-width: 1281px) {
width: 65vw;
width: 62vw;
}
}
@ -61,8 +61,10 @@
font-family: Roboto;
text-transform: uppercase;
font-weight: 400;
color: #22232c; // $shark
line-height: 29px;
font-size: 1.1rem;
position: relative;
padding-left: 15px;
color: #5b5d67;
@media screen and (max-width: 575px) {
display: none;

@ -16,7 +16,7 @@
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 2.8em 2.37em .8em;
margin: 2.3em 2.37em .8em;
}
.balance-container {
@ -42,8 +42,9 @@
text-align: center;
.token-amount {
font-size: 175%;
margin-top: 12.5%;
font-size: 1.75rem;
margin-top: 1rem;
font-weight: 400;
}
.fiat-amount {
@ -54,12 +55,13 @@
}
@media screen and (min-width: $break-large) {
margin-left: 3%;
margin-left: .8em;
justify-content: flex-start;
align-items: flex-start;
.token-amount {
font-size: 135%;
font-size: 1.5rem;
font-weight: 400;
}
.fiat-amount {
@ -69,13 +71,6 @@
}
}
.balance-icon {
border-radius: 25px;
width: 45px;
height: 45px;
border: 1px solid $alto;
}
.hero-balance-buttons {
@media screen and (max-width: $break-small) {
@ -112,3 +107,14 @@
}
}
}
.hero-balance-button {
text-align: center;
padding: .9rem 1rem;
color: $white;
background: $curious-blue;
border-radius: 2px;
font-size: .85rem;
width: 6rem;
font-weight: 300;
}

@ -4,7 +4,7 @@
// Component Colors
$tx-view-bg: $white;
$wallet-view-bg: $wild-sand;
$wallet-view-bg: $alabaster;
// Main container
.main-container {
@ -47,7 +47,7 @@ $wallet-view-bg: $wild-sand;
.wallet-view {
display: flex;
flex-direction: column;
flex: 33.5 1 33.5%;
flex: 32 1 32%;
width: 0;
background: $wallet-view-bg;
z-index: 200;
@ -69,22 +69,21 @@ $wallet-view-bg: $wild-sand;
}
&__keyring-label {
height: 40px;
height: 50px;
color: $dusty-gray;
font-family: Roboto;
font-size: 10px;
line-height: 40px;
text-align: right;
padding: 0 20px;
padding: 17px 20px 0;
box-sizing: border-box;
}
&__details-button {
color: $curious-blue;
font-size: 10px;
line-height: 13px;
text-align: center;
border: 1px solid $curious-blue;
border-radius: 10.5px;
border-radius: 17px;
background-color: transparent;
margin: 0 auto;
padding: 4px 12px;
@ -121,12 +120,12 @@ $wallet-view-bg: $wild-sand;
&__add-token-button {
flex: 0 0 auto;
color: $dusty-gray;
color: $curious-blue;
font-size: 14px;
line-height: 19px;
text-align: center;
margin: 36px auto;
border: 1px solid $dusty-gray;
border: 1px solid $curious-blue;
border-radius: 2px;
font-weight: 300;
background: none;
@ -199,7 +198,7 @@ $wallet-view-bg: $wild-sand;
.main-container {
// margin-top: 6.9vh;
width: 85%;
width: 85vw;
height: 90vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@ -208,7 +207,7 @@ $wallet-view-bg: $wild-sand;
@media screen and (min-width: 769px) {
.main-container {
// margin-top: 6.9vh;
width: 80%;
width: 80vw;
height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@ -217,7 +216,7 @@ $wallet-view-bg: $wild-sand;
@media screen and (min-width: 1281px) {
.main-container {
// margin-top: 6.9vh;
width: 65%;
width: 62vw;
height: 82vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
}
@ -252,11 +251,11 @@ $wallet-view-bg: $wild-sand;
// wallet view
.account-name {
font-size: 24px;
font-weight: 300;
font-weight: 400;
line-height: 20px;
color: $scorpion;
color: $black;
margin-top: 8px;
margin-bottom: 24px;
margin-bottom: .9rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

@ -12,7 +12,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
position: relative;
&__token-balance {
font-size: 130%;
font-size: 1.5rem;
font-weight: 400;
@media #{$wallet-balance-breakpoint-range} {
font-size: 105%;
@ -34,7 +35,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
&--active {
background-color: rgba($wallet-balance-bg, 1);
background-color: $manatee;
color: $white;
}
&__identicon {

@ -32,13 +32,9 @@
}
@media screen and (min-width: $break-large) {
.tx-list-header-wrapper {
flex: 0 0 55px;
}
.tx-list-header {
font-size: 16px;
margin: 1.5em 2.37em;
margin: 1.1em 2.37em .8em;
}
.tx-list-container::-webkit-scrollbar {

@ -8,7 +8,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
background: rgba($wallet-balance-bg, 0);
&--active {
background: rgba($wallet-balance-bg, 1);
background: $manatee;
color: $white;
}
}
@ -41,7 +42,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
align-items: flex-start;
.token-amount {
font-size: 135%;
font-size: 1.5rem;
font-weight: 400;
}
.fiat-amount {
@ -61,11 +63,13 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
}
}
}
.balance-icon {
border-radius: 25px;
width: 45px;
height: 45px;
border: 1px solid $alto;
}
.balance-icon {
border-radius: 25px;
width: 50px;
height: 50px;
border: 1px solid $alto;
padding: 5px;
background: $white;
}

@ -42,6 +42,7 @@ $malibu-blue: #7ac9fd;
$athens-grey: #e9edf0;
$jaffa: #f28930;
$geyser: #d2d8dd;
$manatee: #93949d;
/*
Z-Indicies

@ -508,7 +508,7 @@ async-eventemitter@^0.2.2:
dependencies:
async "^2.4.0"
"async-eventemitter@github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c":
async-eventemitter@ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c:
version "0.2.3"
resolved "https://codeload.github.com/ahultgren/async-eventemitter/tar.gz/fa06e39e56786ba541c180061dbf2c0a5bbf951c"
dependencies:
@ -2210,10 +2210,6 @@ clone-stats@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
clone@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
clone@^1.0.0, clone@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
@ -11141,12 +11137,12 @@ vinyl-fs@^3.0.0:
vinyl "^2.0.0"
vinyl-sourcemap "^1.1.0"
vinyl-source-stream@^1.1.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vinyl-source-stream/-/vinyl-source-stream-1.1.2.tgz#62b53a135610a896e98ca96bee3a87f008a8e780"
vinyl-source-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/vinyl-source-stream/-/vinyl-source-stream-2.0.0.tgz#f38a5afb9dd1e93b65d550469ac6182ac4f54b8e"
dependencies:
through2 "^2.0.3"
vinyl "^0.4.3"
vinyl "^2.1.0"
vinyl-sourcemap@^1.1.0:
version "1.1.0"
@ -11166,13 +11162,6 @@ vinyl-sourcemaps-apply@^0.2.0:
dependencies:
source-map "^0.5.1"
vinyl@^0.4.3:
version "0.4.6"
resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.4.6.tgz#2f356c87a550a255461f36bbeb2a5ba8bf784847"
dependencies:
clone "^0.2.0"
clone-stats "^0.0.1"
vinyl@^0.5.0:
version "0.5.3"
resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.5.3.tgz#b0455b38fc5e0cf30d4325132e461970c2091cde"
@ -11189,7 +11178,7 @@ vinyl@^1.1.0, vinyl@^1.2.0:
clone-stats "^0.0.1"
replace-ext "0.0.1"
vinyl@^2.0.0:
vinyl@^2.0.0, vinyl@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
dependencies:

Loading…
Cancel
Save