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 00000000..b17b3ff3 Binary files /dev/null and b/common/assets/fonts/social-media.eot differ diff --git a/common/assets/fonts/social-media.svg b/common/assets/fonts/social-media.svg new file mode 100644 index 00000000..a903a42f --- /dev/null +++ b/common/assets/fonts/social-media.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + diff --git a/common/assets/fonts/social-media.ttf b/common/assets/fonts/social-media.ttf new file mode 100644 index 00000000..ea56ac6c Binary files /dev/null and b/common/assets/fonts/social-media.ttf differ diff --git a/common/assets/fonts/social-media.woff b/common/assets/fonts/social-media.woff new file mode 100644 index 00000000..d4d0e518 Binary files /dev/null and b/common/assets/fonts/social-media.woff differ diff --git a/common/assets/fonts/social-media.woff2 b/common/assets/fonts/social-media.woff2 new file mode 100644 index 00000000..f2acafc8 Binary files /dev/null and b/common/assets/fonts/social-media.woff2 differ 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";