From 8d91979e266c3fbaa0f2451d14f9e216eb4dd23c Mon Sep 17 00:00:00 2001 From: James Prado Date: Tue, 28 Nov 2017 00:43:30 -0500 Subject: [PATCH] Refactor & Update Footer to Match V3 (#455) --- README.md | 31 ++- common/assets/fonts/social-media.eot | Bin 0 -> 3228 bytes common/assets/fonts/social-media.svg | 36 +++ common/assets/fonts/social-media.ttf | Bin 0 -> 3044 bytes common/assets/fonts/social-media.woff | Bin 0 -> 1980 bytes common/assets/fonts/social-media.woff2 | Bin 0 -> 1536 bytes common/assets/styles/etherwallet-fonts.less | 8 +- common/components/Footer/index.scss | 76 ++++++- common/components/Footer/index.tsx | 239 ++++++++++---------- common/config/data.ts | 4 + common/sass/fonts.scss | 1 + common/sass/fonts/social-media.scss | 54 +++++ common/sass/styles.scss | 1 + 13 files changed, 313 insertions(+), 137 deletions(-) create mode 100644 common/assets/fonts/social-media.eot create mode 100644 common/assets/fonts/social-media.svg create mode 100644 common/assets/fonts/social-media.ttf create mode 100644 common/assets/fonts/social-media.woff create mode 100644 common/assets/fonts/social-media.woff2 create mode 100644 common/sass/fonts.scss create mode 100644 common/sass/fonts/social-media.scss diff --git a/README.md b/README.md index d0fe51a7..90841522 100644 --- a/README.md +++ b/README.md @@ -334,7 +334,36 @@ When working on a module that has styling in Less, try to do the following: * Convert as many `
` tags or ` `s to margins * Ensure that there has been little to no deviation from screenshot - +#### Adding Icon-fonts +1. Download chosen icon-font +1. Declare css font-family: + ``` + @font-face { + font-family: 'social-media'; + src: url('../assets/fonts/social-media.eot'); + src: url('../assets/fonts/social-media.eot') format('embedded-opentype'), + url('../assets/fonts/social-media.woff2') format('woff2'), + url('../assets/fonts/social-media.woff') format('woff'), + url('../assets/fonts/social-media.ttf') format('truetype'), + url('../assets/fonts/social-media.svg') format('svg'); + font-weight: normal; + font-style: normal; + } + ``` +1. Create classes for each icon using their unicode character + ``` + .sm-logo-facebook:before { + content: '\ea02'; + } + ``` + * [How to get unicode icon values?](https://stackoverflow.com/questions/27247145/get-the-unicode-icon-value-from-a-custom-font) +1. Write some markup: + ``` + + + Hello World + + ``` ## Thanks & Support diff --git a/common/assets/fonts/social-media.eot b/common/assets/fonts/social-media.eot new file mode 100644 index 0000000000000000000000000000000000000000..b17b3ff35519fd5501b0fe673fb6d8e4ab94f83f GIT binary patch literal 3228 zcmd^B&2JmW6@PDbcV?HnONtb^R4hxPNNI^!7G?3%AF&+Bt=)rx8j0<+LD8C$s1Jt{ zRf%@v_+s=_ATD5_mlkL*J=C{cdg-AkdMI)&+JjM`Iph$a1?%RPQ(>sT+1=Vo5%(YH zkhAmN?|tmddv9jv=N{2#E)kO;-2_=iL;!irn!0v9=3hP|80;tSxKCc9|Dh)6kOs6) zJJh8g}7We*^yr{H^uf?*51Q&p*fNOkjWB>fhh|xcsC-WIQ9X zO545ehWCpT;OSHJ_BH?^Sc3j7`rP*J@O>qY{sr65z?b@i^{(}ic@Oq~0iWCLzQ4~! zOrCf`%lEpwy+0La|3Ks*y5h?I;Ba_FR=5CoPv_@9sNhdXhAJI|7$MO^cyh7q@SFYWl zbiX^?qZ5S4L`}cuIL-Z?tuFk>mJFGeG7u&mA+68!DL;Wc9iBcF+0>|Vd(=;#>zT=P)TtJLd1jgEQoT4MVhpj!PjMywvV z85NbDJ@ApEtw$pAq1U8eAfRi)qa>w$M)`-}|GJ@m(e{%VpbAE)DBYtdB1$72eT^Z8 zy6eb|kQLo^Tt}!8-F2o$D(<>&M%tIIDvddD*S1ls({K1R-{aqlZ-~c0bSCk@Fh?|A zDa$F&2N$?iX*F8ScB5V_L|8*r3XOXEA~(Z-Jas(JxmPMp2IFqtwU^wvvp|?U2a?+h zldqlNijyiX+>QXa*YnkHc!uMrLvPZza6r*~Gc2pH+9~FPdb=6oEvg#If=aUr%d(IU ziiP~NsIQ2Nyu#IbkeB7K*;dVVOcrHj`OI>;3anlX8ldYPEvjlQt-_R>uxIAI`Ai{` zag}E*2su^=)AmG8$=vMgwby5JQY~0YIZFK~l}_Qm=1)!e!m>mv2vR~CQn@Y!KlF1l zCr&vjAHHnqurQjOa%9f8ebXL08Mtn6a!gw34V6;(50rM6TJU`#O~Y{vOP1mnAPjn6 zAQsOFXMd-hX1&q?ftA&;dX8(n#9_O!Jk2uorCiqkqY_reNg1{?9oVLrdd)jo zRFcQ149qPba8XzAoWwqe&Z4;1GnA((Y8^D5;OUMLjChKKo3T0zvrDfQzux6#1f{UC5 ze^%BT(=M!>)GvS#6G-V#DdD?;uMrw$zA8T%)(6xK7b>kw+)@=(P{efF)mC$fTa99; z@iIU2X(9Z}X%6M0k!$1(7Gw3WeCBv|F8XZTHrO`|UtC{XTQ!Zqz~8)PigDwHzEh0R z$9lt};fRZ#nij~Gm*57d@q{)(&m^>kThu~AOW^H}6ZG#A+QJp@X+lfj&k{OCx7bW*mqLE`aIn79?Jw^3Hg>vi^|tQzy9dXi z4hrNx`+Wpeuy{-CixLMjf80?m=4EBb-et%HfKN#HU ztq*J4!{Pqfm)lq2UwyrOmG)I!hWDZiahHY|H>iZW+ + + + + + + + + + + + + + + + + + diff --git a/common/assets/fonts/social-media.ttf b/common/assets/fonts/social-media.ttf new file mode 100644 index 0000000000000000000000000000000000000000..ea56ac6c1c6cfa03c7a49857a9a2a6836239e994 GIT binary patch literal 3044 zcmd^B&2JmW6@PDLXJ)@CQsh#REQuneUBr?oiJ!I{%YmHAJp`zc*hU)^ttp9;=uo68 z(P|uDjGhX_1p@Ta9(w7ax#f~e4@HnekZaK%i~zahP@o0t=9W_-sBe~wR4DAfptGEr zH^28WGw;2bAs_%a@B}!l-g^7)X5oW{_W|$8#?bfdQyGa_u*Hjw^1Tcn@=s!`NKR6t`r`Y+wN%wCw zE_C}lE%C8&O8Q^YICI!~?+EkIBmRWu_gaVTzvSmW2e4e4bL*&oGT4&Q&uGDSi2o~~ zwd>{U_WbPp40$q)vA8i~goHkFn)5$Rz4k3QBaLSp|N6C-(EUi4v;jH$c9$DyZmU6vCTw!WL{5ketv;I(_<3R zyVSOqsM5M{JJJ0yp;~;2dfGkV2JKnP7#bg1T6@T18+uQA0!Fe1S(Ko(%{czV_`fcc zzf_JAA5azyDWi0ay+~dfYVT`|e5kAT+>oN8tM==Vazs}hsi7KGoi{^mOJ|kFtWnjv zajC!`aS2cHGxmM$OI;lF!9hRh4qpO5-}#!hb%q zT-Q1+6sCf4C+nCi&ioZZ5L}Bm_ZO#LnZ%N1=NIqC0GZe8)iXSYGBn|J_#w0a7HVNp zg;6t~4JwUVNVBLYlsV<23X3wA4f46{46AIg>$rhYCCJKRSZkE0_7!g*< z2UVggP0fn5lomnAOqjC^?m{Y;N;%5qi%gE?Lf@RoD4CgiwfyQ_Myf@jl%>=!ZQrKf zwl_WPF(H^81U8dgD#szlFT9M*u*;V1ku6hN$aoEHOJ+RNGt99|f#U?1#-#9fm96O4 zSK64p=y^;U+_Jckh0z4$27NBb7iVxApjq@$?=&FC$|#JkVi{L3Y*g1~a25$~Hkx4+ z)@x1O+|Wp#w%cens`)_Wf?QTf73hdHH?UqS z@emCzl;!yIzGErDmGmdPzJ;F7`nk+%H?LN#07dcFBh+s;w{F_KlI(OAk_vor79zZIhW0sF_N_HVx%`O zi_r{LWvLhiRf=Jge9=G{^G(-CkC|B~H;Z#uvdVRQYa(sBTuf%B=PhGlu{>YMq`f~Y zCQ_EoO=~7F4L1FXdnvCZj!$!1TQTT$NUzRRI} zsa}gHP3cf*d;{q`1i5dALQ0{VkHaWy`QEta{WfC8l;F{Vk?|)Tx^hPXTI#FEkDrp0 zN$TlqDM?;WU4NW5owPTtkA?BwOT+2BX5lVn1sw`SwOM99n_(L)h510Huo$kON~n6I zij*0R8%RVMbsuhEFpHEaqrNeNq?2#ze&7_{64jr0;ng24si}pl?<}eHj6_3H5K$Bb zCB2}?=4iwWnRbYvtWBFt*fx*(j*T)cEQ3%dEvbJn=f>aiGFcqi4X=8Vc#Lu;?WUzo zX=9|N;HJaGoHT4Qkr8B1q}?%XLS&?#fS9xZTR){h?*_d_R3P=D_@q!@P_vjT)o);3 zl_-PaL9-FnYb#i<=9|_3#%IB2%)9AhD3^Jrn&HUCDq(T;Vsx&1$nSIXIQQ7??d?s2 z2b_M!n+6-_cl3XXG5A6sSSobI#jU0pMaxZaPSkip8${10w4i@ciwP|WZzQx$=w?DY zq0X$1+N%-@Gw&5Nc3GG0L@0|2^I<4;V zVSBgJdaJ$vu-iJm2wkM_wU19a{a#_Mym}G7)$X;ATZ8s)Vf#_x80;1Hj{Ap& zt$uIN?sofyqvQUA_RgSuFc=)IudM7PczLIP2q(~o9q7=#--Tt`ZyR>w(OX3A!$U$_ zaQsrKmucT4ZLQTI>pdvI8oe*8FST-uq2junsHq?fs8@nWVI(_#M}2qu=uv784nAG*F;K zg(h0yb^H7M<-OKUd%NF%*NI2R?cLqZU_|eC1_uwf-54MIyfYZIk4GxqPVZfcbkB}i QC*9UgqOIfqP%j4HKXvze*#H0l literal 0 HcmV?d00001 diff --git a/common/assets/fonts/social-media.woff b/common/assets/fonts/social-media.woff new file mode 100644 index 0000000000000000000000000000000000000000..d4d0e518360e7fb682727a1ce5a6278d98966036 GIT binary patch literal 1980 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 literal 0 HcmV?d00001 diff --git a/common/assets/styles/etherwallet-fonts.less b/common/assets/styles/etherwallet-fonts.less index 43481768..dae83ee5 100755 --- a/common/assets/styles/etherwallet-fonts.less +++ b/common/assets/styles/etherwallet-fonts.less @@ -1,7 +1,7 @@ @font-face { font-family: 'Lato'; src: url('../fonts/Lato-Light.woff') format('woff'), - url('../fonts/Lato-Light.ttf') format('truetype'); + url('../fonts/Lato-Light.ttf') format('truetype'); font-style: normal; font-weight: 300; } @@ -9,7 +9,7 @@ @font-face { font-family: 'Lato'; src: url('../fonts/Lato-Regular.woff') format('woff'), - url('../fonts/Lato-Regular.ttf') format('truetype'); + url('../fonts/Lato-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; } @@ -17,8 +17,8 @@ @font-face { font-family: 'Lato'; src: url('../fonts/Lato-Bold.woff') format('woff'), - url('../fonts/Lato-Bold.ttf') format('truetype'); + url('../fonts/Lato-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; -} +} \ No newline at end of file diff --git a/common/components/Footer/index.scss b/common/components/Footer/index.scss index 0f8bd4a7..866f031e 100644 --- a/common/components/Footer/index.scss +++ b/common/components/Footer/index.scss @@ -8,7 +8,7 @@ padding-bottom: $space-sm; display: flex; flex-direction: column; - justify-content: space-between; + justify-content: space-around; text-align: center; align-items: center; @@ -18,26 +18,74 @@ align-items: flex-start; } + & > div { + padding: 8px 16px; + } + + &-social-media-wrap { + margin-top: 32px; + & .Footer-social-media-link { + transition: opacity 0.3s; + color: white; + margin: 1rem; + margin-left: 0; + &:hover { + opacity: 0.8; + color: white; + } + &:focus { + opacity: 0.8; + color: white; + } + } + } + + &-affiliate-wrap { + & .Footer-affiliate-tag { + background-color: #0e97c0; + display: inline-block; + padding: 4px 12px; + border-radius: 30px; + margin: 0rem 0.5rem 0.5rem 0px; + transition: color 0.3s, background-color 0.3s; + &:hover { + background-color: white; + color: #0e97c0; + } + & a { + transition: color 0s; + color: inherit; + &:hover { + color: inherit; + } + } + } + } + &-column { padding: 1rem 2rem; } &-about { - max-width: 22rem; - &-logo { width: 100%; height: auto; max-width: 20rem; } + &-text { + max-width: 50ch; + } } + &-about, + &-links, &-info { - max-width: 34rem; - } - - &-links { - max-width: 28rem; + & > a { + display: block; + font-size: 0.9rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } } &-modal-button { @@ -58,10 +106,14 @@ margin: $space-xs 0 $space-sm; } - a { - color: #4ac8ed; + a, + .Footer-modal-button { + color: #7fe5ff; + font-weight: 400; + transition: color 0.3s; &:hover, &:focus { + opacity: 1; color: darken(#4ac8ed, 5%); } } @@ -81,7 +133,7 @@ ul { list-style: none; - padding-left: $space-sm; + padding-left: 0; margin: 0 0 $space-xs 0; } @@ -101,4 +153,4 @@ .Modal { color: #000; -} \ No newline at end of file +} diff --git a/common/components/Footer/index.tsx b/common/components/Footer/index.tsx index e8eb76c4..9ebd4c97 100644 --- a/common/components/Footer/index.tsx +++ b/common/components/Footer/index.tsx @@ -1,100 +1,105 @@ import logo from 'assets/images/logo-myetherwallet.svg'; -import { bityReferralURL, donationAddressMap } from 'config/data'; +import { + bityReferralURL, + ledgerReferralURL, + trezorReferralURL, + bitboxReferralURL, + donationAddressMap +} from 'config/data'; import React from 'react'; import translate from 'translations'; import './index.scss'; import PreFooter from './PreFooter'; import Modal, { IButton } from 'components/ui/Modal'; +import { NewTabLink } from 'components/ui'; -const LINKS_LEFT = [ +const AffiliateTag = ({ link, text }) => { + return ( +
  • + {text} +
    • + ); +}; + +const SocialMediaLink = ({ link, text }) => { + return ( + + + + ); +}; + +const SOCIAL_MEDIA: Link[] = [ { - text: 'Knowledge Base', - href: 'https://myetherwallet.groovehq.com/help_center' + link: 'https://myetherwallet.herokuapp.com/', + text: 'slack' }, + { - text: 'Helpers & ENS Debugging', - href: 'https://www.myetherwallet.com/helpers.html' + link: 'https://www.reddit.com/r/MyEtherWallet/', + text: 'reddit' }, + { - text: 'Sign Message', - href: 'https://www.myetherwallet.com/signmsg.html' + link: 'https://twitter.com/myetherwallet', + text: 'twitter' + }, + + { + link: 'https://www.facebook.com/MyEtherWallet', + text: 'facebook' + }, + + { + link: 'https://medium.com/@myetherwallet', + text: 'medium' + }, + + { + link: 'https://www.linkedin.com/company/myetherwallet/', + text: 'linkedin' + }, + + { + link: 'https://github.com/MyEtherWallet', + text: 'github' } ]; -const LINKS_SUPPORT = [ +const PRODUCT_INFO: Link[] = [ { - href: bityReferralURL, - text: 'Swap ETH/BTC/EUR/CHF via Bity.com' - }, - { - href: 'https://www.ledgerwallet.com/r/fa4b?path=/products/', - text: 'Buy a Ledger Nano S' - }, - { - href: 'https://trezor.io/?a=myetherwallet.com', - text: 'Buy a TREZOR' - }, - { - href: 'https://digitalbitbox.com/?ref=mew', - text: 'Buy a Digital Bitbox' - } -]; - -const LINKS_RIGHT = [ - { - href: 'https://www.MyEtherWallet.com', - text: 'MyEtherWallet.com' - }, - { - href: 'https://github.com/MyEtherWallet/MyEtherWallet', + link: 'https://github.com/MyEtherWallet/MyEtherWallet', text: 'Github: Current Site' }, { - href: 'https://github.com/MyEtherWallet', + link: 'https://github.com/MyEtherWallet', text: 'Github: MEW Org' }, { - href: 'https://github.com/MyEtherWallet/MyEtherWallet/releases/latest', + link: 'https://github.com/MyEtherWallet/MyEtherWallet/releases/latest', text: 'Github: Latest Release' }, + { - href: + link: 'https://chrome.google.com/webstore/detail/myetherwallet-cx/nlbmnnijcnlegkjjpcfjclmcfggfefdm?hl=en', - text: 'MyEtherWallet CX' + text: 'MyEtherWallet Extension' }, { - href: + link: 'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn', - text: 'Anti-Phishing CX' + text: 'Anti - Phishing Extension' } ]; -const LINKS_SOCIAL = [ - { - href: 'https://myetherwallet.herokuapp.com/', - text: 'Slack' - }, - { - href: 'https://www.reddit.com/r/MyEtherWallet/', - text: 'Reddit' - }, - { - href: 'https://twitter.com/myetherwallet', - text: 'Twitter' - }, - { - href: 'https://www.facebook.com/MyEtherWallet/', - text: 'Facebook' - }, - { - href: 'https://medium.com/@myetherwallet', - text: 'Medium' - } -]; +interface Link { + link: string; + text: string; +} interface Props { latestBlock: string; -}; +} interface State { isOpen: boolean; @@ -122,9 +127,9 @@ export default class Footer extends React.Component {
    diff --git a/common/config/data.ts b/common/config/data.ts index 0cb20c92..be69ac04 100644 --- a/common/config/data.ts +++ b/common/config/data.ts @@ -40,6 +40,10 @@ export const gasPriceDefaults = { }; export const bityReferralURL = 'https://bity.com/af/jshkb37v'; +export const ledgerReferralURL = + 'https://www.ledgerwallet.com/r/fa4b?path=/products/'; +export const trezorReferralURL = 'https://trezor.io/?a=myetherwallet.com'; +export const bitboxReferralURL = 'https://digitalbitbox.com/?ref=mew'; export interface BlockExplorerConfig { name: string; diff --git a/common/sass/fonts.scss b/common/sass/fonts.scss new file mode 100644 index 00000000..c99d6156 --- /dev/null +++ b/common/sass/fonts.scss @@ -0,0 +1 @@ +@import './fonts/social-media' \ No newline at end of file diff --git a/common/sass/fonts/social-media.scss b/common/sass/fonts/social-media.scss new file mode 100644 index 00000000..4b2dd126 --- /dev/null +++ b/common/sass/fonts/social-media.scss @@ -0,0 +1,54 @@ +@font-face { + font-family: 'social-media'; + src: url('../assets/fonts/social-media.eot'); + src: url('../assets/fonts/social-media.eot') format('embedded-opentype'), + url('../assets/fonts/social-media.woff2') format('woff2'), + url('../assets/fonts/social-media.woff') format('woff'), + url('../assets/fonts/social-media.ttf') format('truetype'), + url('../assets/fonts/social-media.svg') format('svg'); + font-weight: normal; + font-style: normal; +} +.sm-icon { + display: inline-block; + font: normal normal normal 32px/1 'social-media'; + text-transform: none; + /* Better Font Rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + &.sm-16px { + font-size: 16px; + } + &.sm-24px { + font-size: 24px; + } + &.sm-32px { + font-size: 32px; + } + &.sm-48px { + font-size: 48px; + } + // Refer to docs for updating icon-fonts + &.sm-logo-facebook:before { + content: '\ea02'; + } + &.sm-logo-reddit:before { + content: '\ea03'; + } + &.sm-logo-github:before { + content: '\ea04'; + } + &.sm-logo-twitter:before { + content: '\ea05'; + } + &.sm-logo-linkedin:before { + content: '\ea06'; + } + &.sm-logo-slack:before { + content: '\ea07'; + } + &.sm-logo-medium:before { + content: '\ea08'; + } +} diff --git a/common/sass/styles.scss b/common/sass/styles.scss index 68bbfff0..ab6955db 100644 --- a/common/sass/styles.scss +++ b/common/sass/styles.scss @@ -27,3 +27,4 @@ @import "./styles/overrides"; @import "./styles/scaffolding"; @import "./styles/tab"; +@import "./fonts";