TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MetaMorph - Spacing and Typeface on Extension Main view (#6584)

Browse Source 
* wip

* Style Update: Mobile App Header

* wip

* Style Update: mobile menu-bar

* Style Update: Primary and Secondary balance on mobile main view

* Style Update: Spacing for transaction-list and transaction-list-item

* Address PR Comments

* Fix full-width view

* line-height fixes
feature/default_network_editable
Chi Kei Chan 6 years ago committed by GitHub
parent 71390db4a3
commit 9a1a207ffa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 142 additions and 171 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      app/images/icons/3dots.svg
  2. 3
      app/images/icons/caret-down.svg
  3. 7
      app/images/icons/hamburger.svg
  4. 157
      app/images/logo/metamask-fox.svg
  5. 2
      ui/app/components/app/account-menu/index.scss
  6. 2
      ui/app/components/app/app-header/app-header.component.js
  7. 5
      ui/app/components/app/app-header/index.scss
  8. 19
      ui/app/components/app/menu-bar/index.scss
  9. 4
      ui/app/components/app/menu-bar/menu-bar.component.js
  10. 12
      ui/app/components/app/network.js
  11. 11
      ui/app/components/app/selected-account/index.scss
  12. 19
      ui/app/components/app/transaction-list-item/index.scss
  13. 2
      ui/app/components/app/transaction-list-item/transaction-list-item.component.js
  14. 7
      ui/app/components/app/transaction-list/index.scss
  15. 5
      ui/app/components/app/transaction-status/index.scss
  16. 14
      ui/app/components/app/transaction-view-balance/index.scss
  17. 1
      ui/app/components/ui/currency-display/index.scss
  18. 20
      ui/app/css/itcss/components/network.scss
  19. 18
      ui/app/css/itcss/settings/variables.scss

5
app/images/icons/3dots.svg
Unescape View File

@ -0,0 +1,5 @@
<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 0 2 0C0.89543 0 0 0.89543 0 2C0 3.10457 0.89543 4 2 4Z" fill="#6A737D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 4C11.1046 4 12 3.10457 12 2C12 0.89543 11.1046 0 10 0C8.89543 0 8 0.89543 8 2C8 3.10457 8.89543 4 10 4Z" fill="#6A737D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 4C19.1046 4 20 3.10457 20 2C20 0.89543 19.1046 0 18 0C16.8954 0 16 0.89543 16 2C16 3.10457 16.8954 4 18 4Z" fill="#6A737D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 629 B

3
app/images/icons/caret-down.svg
Unescape View File

@ -0,0 +1,3 @@
<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5.57143 5.57143L10.1407 1.0022" stroke="#545556"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 168 B

7
app/images/icons/hamburger.svg
Unescape View File

@ -0,0 +1,7 @@
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="hamburger">
<rect id="Rectangle 3" width="20" height="3" rx="1.5" fill="#6A737D"/>
<rect id="Rectangle 3_2" y="6" width="20" height="3" rx="1.5" fill="#6A737D"/>
<rect id="Rectangle 3_3" y="12" width="20" height="3" rx="1.5" fill="#6A737D"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 373 B

157
app/images/logo/metamask-fox.svg
Unescape View File

@ -1,128 +1,31 @@
<?xml version="1.0" encoding="utf-8"?> <svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <path d="M32.9582 1L19.8241 10.7183L22.2665 4.99099L32.9582 1Z" fill="#E17726" stroke="#E17726" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events" <path d="M2.66296 1L15.6801 10.809L13.3547 4.99098L2.66296 1Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
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" <path d="M28.2295 23.5335L24.7348 28.8721L32.2177 30.9324L34.3613 23.6501L28.2295 23.5335Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve"> <path d="M1.27281 23.6501L3.40336 30.9324L10.8733 28.8721L7.39164 23.5335L1.27281 23.6501Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<style type="text/css"> <path d="M10.4706 14.5149L8.392 17.6507L15.797 17.9876L15.5501 10.0186L10.4706 14.5149Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st0{fill:#161616;stroke:#161616;} <path d="M25.1505 14.5149L19.993 9.92786L19.8242 17.9876L27.2291 17.6507L25.1505 14.5149Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;} <path d="M10.8733 28.8721L15.3552 26.7082L11.4969 23.702L10.8733 28.8721Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st2{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;} <path d="M20.2659 26.7082L24.7348 28.8721L24.1243 23.702L20.2659 26.7082Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st3{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;} <path d="M24.7348 28.8721L20.2658 26.7082L20.6296 29.6107L20.5906 30.8417L24.7348 28.8721Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st4{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;} <path d="M10.8732 28.8721L15.0304 30.8417L15.0044 29.6107L15.3552 26.7082L10.8732 28.8721Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st5{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;} <path d="M15.1084 21.7842L11.3929 20.6958L14.0172 19.4907L15.1084 21.7842Z" fill="#233447" stroke="#233447" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st6{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;} <path d="M20.5126 21.7842L21.6039 19.4907L24.2411 20.6958L20.5126 21.7842Z" fill="#233447" stroke="#233447" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st7{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;} <path d="M10.8733 28.8721L11.5228 23.5335L7.39163 23.6502L10.8733 28.8721Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st8{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;} <path d="M24.0982 23.5335L24.7348 28.8721L28.2294 23.6502L24.0982 23.5335Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st9{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;} <path d="M27.2291 17.6507L19.8241 17.9876L20.5126 21.7842L21.6039 19.4907L24.2411 20.6958L27.2291 17.6507Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
.st10{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;} <path d="M11.3929 20.6958L14.0171 19.4907L15.1084 21.7842L15.7969 17.9876L8.39195 17.6507L11.3929 20.6958Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
</style> <path d="M8.392 17.6507L11.4969 23.702L11.393 20.6958L8.392 17.6507Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<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 <path d="M24.2412 20.6958L24.1243 23.702L27.2292 17.6507L24.2412 20.6958Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
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 <path d="M15.797 17.9876L15.1084 21.7843L15.9788 26.2676L16.1737 20.3589L15.797 17.9876Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
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 "/> <path d="M19.8242 17.9876L19.4604 20.346L19.6423 26.2676L20.5127 21.7843L19.8242 17.9876Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<g> <path d="M20.5127 21.7842L19.6423 26.2676L20.2659 26.7082L24.1243 23.702L24.2412 20.6958L20.5127 21.7842Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<polygon class="st1" points="105.3,253 48.6,268.6 32.5,213.3 "/> <path d="M11.3929 20.6958L11.4969 23.702L15.3552 26.7082L15.9788 26.2676L15.1084 21.7842L11.3929 20.6958Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<polygon class="st1" points="283.3,213.3 267.1,268.6 210.4,253 "/> <path d="M20.5906 30.8417L20.6296 29.6107L20.2918 29.3256H15.3292L15.0044 29.6107L15.0304 30.8417L10.8732 28.8721L12.3283 30.0642L15.2772 32.0986H20.3308L23.2928 30.0642L24.7348 28.8721L20.5906 30.8417Z" fill="#C0AC9D" stroke="#C0AC9D" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<polygon class="st2" points="265.8,159.1 213.5,143.8 231.8,139 "/> <path d="M20.2659 26.7082L19.6423 26.2676H15.9788L15.3552 26.7082L15.0044 29.6107L15.3292 29.3256H20.2918L20.6296 29.6107L20.2659 26.7082Z" fill="#161616" stroke="#161616" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<polygon class="st2" points="49.9,159.1 84,139 102.2,143.8 "/> <path d="M33.5168 11.3532L34.6211 5.98873L32.9582 1L20.2659 10.3944L25.1505 14.5149L32.0488 16.5234L33.5688 14.7482L32.9062 14.2687L33.9585 13.3099L33.1531 12.6879L34.2054 11.8845L33.5168 11.3532Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<polygon class="st2" points="43.4,142 41.5,129.9 84,139 "/> <path d="M1 5.98873L2.11724 11.3532L1.40273 11.8845L2.468 12.6879L1.66255 13.3099L2.71483 14.2687L2.05228 14.7482L3.57225 16.5234L10.4706 14.5149L15.3552 10.3944L2.66287 1L1 5.98873Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<polygon class="st2" points="272.3,142 231.8,139 274.2,129.9 "/> <path d="M32.0489 16.5234L25.1506 14.5149L27.2292 17.6507L24.1243 23.702L28.2295 23.6501H34.3613L32.0489 16.5234Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<polygon class="st2" points="272.3,142 265.8,159.1 231.8,139 "/> <path d="M10.4705 14.5149L3.57222 16.5234L1.27278 23.6501H7.39161L11.4968 23.702L8.39193 17.6507L10.4705 14.5149Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<polygon class="st2" points="43.4,142 84,139 49.9,159.1 "/> <path d="M19.8241 17.9876L20.2658 10.3944L22.2665 4.991H13.3546L15.3552 10.3944L15.7969 17.9876L15.9658 20.3718L15.9788 26.2676H19.6423L19.6553 20.3718L19.8241 17.9876Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
<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> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

2
ui/app/components/app/account-menu/index.scss
Unescape View File

@ -21,7 +21,7 @@
} }
&__icon { &__icon {
margin-left: 20px; margin-left: 1rem;
cursor: pointer; cursor: pointer;
&--disabled { &--disabled {

2
ui/app/components/app/app-header/app-header.component.js
Unescape View File

@ -101,8 +101,6 @@ export default class AppHeader extends PureComponent {
<img <img
className="app-header__metafox-logo app-header__metafox-logo--icon" className="app-header__metafox-logo app-header__metafox-logo--icon"
src="/images/logo/metamask-fox.svg" src="/images/logo/metamask-fox.svg"
height={42}
width={42}
/> />
</div> </div>
<div className="app-header__account-menu-container"> <div className="app-header__account-menu-container">

5
ui/app/components/app/app-header/index.scss
Unescape View File

@ -1,6 +1,6 @@
.app-header { .app-header {
align-items: center; align-items: center;
background: $gallery; background: $Grey-000;
position: relative; position: relative;
z-index: $header-z-index; z-index: $header-z-index;
display: flex; display: flex;
@ -9,7 +9,7 @@
flex: 0 0 auto; flex: 0 0 auto;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
padding: 12px; padding: 1rem;
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;
} }
@ -34,6 +34,7 @@
cursor: pointer; cursor: pointer;
&--icon { &--icon {
height: 32px;
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
display: none; display: none;
} }

19
ui/app/components/app/menu-bar/index.scss
Unescape View File

@ -5,19 +5,28 @@
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
margin-bottom: 16px; margin-bottom: 16px;
padding: 5px; padding: 0 22px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $Grey-100;
&__sidebar-button { &__sidebar-button {
font-size: 1.25rem; width: 20px;
height: 20px;
background-image: url(/images/icons/hamburger.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
cursor: pointer; cursor: pointer;
padding: 10px;
} }
&__open-in-browser { &__open-in-browser {
width: 20px;
height: 20px;
background-image: url(/images/icons/3dots.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px;
} }
} }

4
ui/app/components/app/menu-bar/menu-bar.component.js
Unescape View File

@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent {
position="bottom" position="bottom"
> >
<div <div
className="fa fa-bars menu-bar__sidebar-button" className="menu-bar__sidebar-button"
onClick={() => { onClick={() => {
this.context.metricsEvent({ this.context.metricsEvent({
eventOpts: { eventOpts: {
@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent {
position="bottom" position="bottom"
> >
<div <div
className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser" className="menu-bar__open-in-browser"
onClick={() => { onClick={() => {
this.context.metricsEvent({ this.context.metricsEvent({
eventOpts: { eventOpts: {

12
ui/app/components/app/network.js
Unescape View File

@ -82,7 +82,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('mainnet')), h('.network-name', context.t('mainnet')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('.network-indicator__down-arrow'),
]) ])
case 'ropsten-test-network': case 'ropsten-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -92,7 +92,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('ropsten')), h('.network-name', context.t('ropsten')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('.network-indicator__down-arrow'),
]) ])
case 'kovan-test-network': case 'kovan-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -102,7 +102,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('kovan')), h('.network-name', context.t('kovan')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('.network-indicator__down-arrow'),
]) ])
case 'rinkeby-test-network': case 'rinkeby-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -112,7 +112,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('rinkeby')), h('.network-name', context.t('rinkeby')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('.network-indicator__down-arrow'),
]) ])
case 'goerli-test-network': case 'goerli-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -122,7 +122,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading', loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('goerli')), h('.network-name', context.t('goerli')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('.network-indicator__down-arrow'),
]) ])
default: default:
return h('.network-indicator', [ return h('.network-indicator', [
@ -142,7 +142,7 @@ Network.prototype.render = function () {
}), }),
h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')), h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('.network-indicator__down-arrow'),
]) ])
} }
})(), })(),

11
ui/app/components/app/selected-account/index.scss
Unescape View File

@ -7,15 +7,21 @@
&__name { &__name {
max-width: 200px; max-width: 200px;
font-size: 1rem;
font-weight: 500;
line-height: 19px;
color: $black;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
margin-bottom: 4px;
} }
&__address { &__address {
font-size: .75rem; font-size: .75rem;
color: $silver-chalice; line-height: .75rem;
color: #989a9b;
} }
&__clickable { &__clickable {
@ -23,7 +29,8 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px 15px; margin: 4px 0;
padding: 6px 15px;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;

19
ui/app/components/app/transaction-list-item/index.scss
Unescape View File

@ -1,7 +1,7 @@
.transaction-list-item { .transaction-list-item {
box-sizing: border-box; box-sizing: border-box;
min-height: 74px; min-height: 74px;
border-bottom: 1px solid $geyser; border-bottom: 1px solid $Grey-100;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -19,7 +19,7 @@
"identicon nonce status secondary-amount"; "identicon nonce status secondary-amount";
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding: 8px 20px 12px; padding: .5rem 1rem;
grid-template-columns: 45px 5fr 3fr; grid-template-columns: 45px 5fr 3fr;
grid-template-areas: grid-template-areas:
"nonce nonce nonce" "nonce nonce nonce"
@ -44,12 +44,13 @@
&__action { &__action {
text-transform: capitalize; text-transform: capitalize;
padding: 0 8px 2px 0; padding: 0 0 4px 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
grid-area: action; grid-area: action;
align-self: end; color: $Grey-800;
line-height: 20px;
} }
&__status { &__status {
@ -72,7 +73,8 @@
align-self: start; align-self: start;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding-bottom: 4px; padding-bottom: 8px;
line-height: 12px;
} }
} }
@ -88,19 +90,22 @@
grid-area: primary-amount; grid-area: primary-amount;
align-self: end; align-self: end;
justify-self: end; justify-self: end;
line-height: 20px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding-bottom: 2px; padding-bottom: 4px;
height: 100%;
color: $Grey-800;
} }
} }
&--secondary { &--secondary {
text-align: end; text-align: end;
font-size: .75rem; font-size: .75rem;
color: #5e6064;
grid-area: secondary-amount; grid-area: secondary-amount;
align-self: start; align-self: start;
justify-self: end; justify-self: end;
color: $Grey-500;
} }
} }

2
ui/app/components/app/transaction-list-item/transaction-list-item.component.js
Unescape View File

@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent {
<Identicon <Identicon
className="transaction-list-item__identicon" className="transaction-list-item__identicon"
address={toAddress} address={toAddress}
diameter={34} diameter={36}
image={assetImages[toAddress]} image={assetImages[toAddress]}
/> />
<TransactionAction <TransactionAction

7
ui/app/components/app/transaction-list/index.scss
Unescape View File

@ -12,9 +12,10 @@
&__header { &__header {
flex: 0 0 auto; flex: 0 0 auto;
font-size: .875rem; font-size: 14px;
color: $dusty-gray; line-height: 20px;
border-bottom: 1px solid $geyser; color: $Grey-400;
border-bottom: 1px solid $Grey-100;
padding: 8px 0 8px 20px; padding: 8px 0 8px 20px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {

5
ui/app/components/app/transaction-status/index.scss
Unescape View File

@ -12,8 +12,9 @@
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
height: 16px; height: 16px;
width: 72px; min-width: 72px;
font-size: .5rem; font-size: 10px;
padding: 0 12px;
} }
&--confirmed { &--confirmed {

14
ui/app/components/app/transaction-view-balance/index.scss
Unescape View File

@ -33,11 +33,14 @@
&__primary-balance { &__primary-balance {
font-size: 1.5rem; font-size: 1.5rem;
color: $black;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
font-size: 1.75rem; font-size: 32px;
line-height: 45px;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
} }
@ -51,12 +54,15 @@
&__cached-secondary-balance { &__cached-secondary-balance {
color: rgba(220, 153, 18, 0.6901960784313725); color: rgba(220, 153, 18, 0.6901960784313725);
font-size: 1.15rem; font-size: 16px;
line-height: 23px;
} }
&__secondary-balance { &__secondary-balance {
font-size: 1.15rem; font-size: 16px;
color: #a0a0a0; line-height: 23px;
font-weight: 400;
color: $Grey-400;
} }
&__balance-container { &__balance-container {

1
ui/app/components/ui/currency-display/index.scss
Unescape View File

@ -6,6 +6,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&__suffix { &__suffix {

20
ui/app/css/itcss/components/network.scss
Unescape View File

@ -8,9 +8,9 @@
} }
.network-component.pointer { .network-component.pointer {
border: 2px solid $silver; border: 2px solid $Grey-200;
border-radius: 82px; border-radius: 82px;
padding: 7px 3px; padding: 6px 3px;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
@ -47,11 +47,15 @@
align-items: center; align-items: center;
font-size: .6em; font-size: .6em;
.fa-caret-down { &__down-arrow {
line-height: 15px; height: 8px;
font-size: 12px; width: 12px;
padding: 0 4px; display: block;
flex: 0 0 auto; background-image: url(/images/icons/caret-down.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin: 0 8px;
} }
.fa-question-circle { .fa-question-circle {
@ -65,12 +69,14 @@
padding: 0 4px; padding: 0 4px;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
line-height: 14px;
flex: 1 1 auto; flex: 1 1 auto;
color: $tundora; color: $tundora;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
height: 16px;
} }
.dropdown-menu-item .fa.delete { .dropdown-menu-item .fa.delete {

18
ui/app/css/itcss/settings/variables.scss
Unescape View File

@ -99,7 +99,11 @@ $Blue-500: #037DD6;
$Blue-600: #0260a4; $Blue-600: #0260a4;
$Grey-000: #f2f3f4; $Grey-000: #f2f3f4;
$Grey-100: #D6D9DC;
$Grey-200: #bbc0c5;
$Grey-400: #848c96;
$Grey-500: #6A737D; $Grey-500: #6A737D;
$Grey-800: #24272a;
$Red-000: #fcf2f3; $Red-000: #fcf2f3;
$Red-500: #D73A49; $Red-500: #D73A49;
@ -109,3 +113,17 @@ $Orange-000: #fef5ef;
$Orange-500: #F66A0A; $Orange-500: #F66A0A;
/*
Spacing Variables
*/
$no-spacing: 0px;
$xxs-spacing: 4px;
$xs-spacing: 8px;
$s-spacing: 16px;
$base-spacing: 24px;
$medium-spacing: 32px;
$large-spacing: 40px;
$xlarge-spacing: 48px;
$xxlarge-spacing: 64px;

Write Preview
Loading…
Cancel
Save