diff --git a/README.md b/README.md index cd88b2e6..76f6ada6 100644 --- a/README.md +++ b/README.md @@ -46,3 +46,71 @@ You should already have docker and docker-compose setup for your platform as a p ```bash docker-compose up ``` + +## Style Guides and Philosophies + +The following are guides for developers to follow for writing compliant code. + +### Styling + +Legacy styles are housed under `common/assets/styles` and written with LESS. +However, going forward, each styled component should create a a `.scss` file of +the same name in the same folder, and import it like so: + +```js +import React from "react"; + +import "./MyComponent.scss"; + +export default class MyComponent extends React.component { + render() { + return ( +
+
Hello!
+
+ ); + } +} +``` + +These style modules adhere to [SuitCSS naming convention](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md): + +```scss +.MyComponent { + /* Styles */ + + &-child { + /* Styles */ + + &.is-hidden { + display: none; + } + } +} +``` + +All elements inside of a component should extend its parent class namespace, or +create a new namespace (Potentially breaking that out into its own component.) + +Variables and mixins can be imported from the files in `common/styles`: + +```scss +@import "sass/colors"; + +code { + color: $code-color; +} +``` + +#### Converting Styles + +When working on a module that has styling in Less, try to do the following: + +* Screenshot the component in question +* Create a new SCSS file in the same directory +* Remove styling from LESS file, convert it to the SCSS file (Mostly s/@/$) +* Convert class names to SuitCSS naming convention +* Convert any utility classes from `etherewallet-utilities.less` into mixins +* Convert as many element selectors to class name selectors as possible +* Convert as many `
` tags or ` `s to margins +* Ensure that there has been little to no deviation from screenshot diff --git a/common/assets/styles/etherwallet-custom.less b/common/assets/styles/etherwallet-custom.less index 71d266af..8236cbc8 100755 --- a/common/assets/styles/etherwallet-custom.less +++ b/common/assets/styles/etherwallet-custom.less @@ -7,60 +7,6 @@ textarea { resize: vertical; } -// footer -footer { - background-color: @ether-navy; - color: white; - margin-top: 100px; - padding-top: @space-xs; - padding-bottom: @space-sm; - img { - width: 100%; - height: auto; - max-width: 20rem; - } - p { - margin: @space-xs 0 @space-sm; - } - a { - color: #4ac8ed; - &:hover, - &:focus { - color: darken(#4ac8ed, 5%); - } - } - .modal, - .modal p { - color: @text-color; - } - h5 { - font-size: @font-size-bump; - margin: @font-size-small 0 0; - i { - margin-left: -1.5em; - margin-right: .25em; - } - } - ul { - list-style: none; - padding-left: @space-sm; - margin: 0 0 @space-xs 0; - } - li, p { - font-size: @font-size-small; - margin: @space-sm 0; - } - .footer-2, .footer-3 { - padding-left: 3rem; - } - @media screen and (max-width: @grid-float-breakpoint) { - .row { - margin-left: -.5rem; - margin-right: -.5rem; - } - } -} - // anouncement bars .announcement { padding: 3px 10px; @@ -91,7 +37,8 @@ footer { &:hover, &:focus { background-color: darken(@brand-danger, 5%); - a, a:hover { + a, + a:hover { text-decoration: none; } } @@ -102,7 +49,8 @@ footer { a:hover, a:focus { color: darken(white, 5%); - a, a:hover { + a, + a:hover { text-decoration: none; } } @@ -145,7 +93,8 @@ footer { background-size: cover; background-repeat: no-repeat; border-radius: 50%; - box-shadow: inset rgba(255, 255, 255, 0.5) 0 2px 2px, inset rgba(0, 0, 0, 0.6) 0 -1px 8px; + box-shadow: inset rgba(255, 255, 255, 0.5) 0 2px 2px, + inset rgba(0, 0, 0, 0.6) 0 -1px 8px; } .addressIdenticon.med { @@ -187,7 +136,11 @@ footer { } .account-help-icon { - h3, h4, h5, h6, img { + h3, + h4, + h5, + h6, + img { display: inline-block; } img:hover + .account-help-text { @@ -202,13 +155,13 @@ footer { .account-help-text { background: white; border-radius: @border-radius; - border: 1px solid #CDCDCD; + border: 1px solid #cdcdcd; box-shadow: 0 0 @space-sm rgba(100, 100, 100, .2); display: none; font-size: @font-size-xs; font-weight: 400; padding: @space-xs; - position: absolute;; + position: absolute; width: 18rem; z-index: 999; ul& { @@ -318,7 +271,8 @@ input[type="password"] + .eye { // collapsable containers .collapse-container { - h2, h4 { + h2, + h4 { cursor: pointer; } .collapse-button { @@ -395,7 +349,7 @@ h2 a.isActive { } label small { - color: @gray-light + color: @gray-light; } .write-address { @@ -507,7 +461,8 @@ label small { } @keyframes opacity { - from, to { + from, + to { opacity: 0; } 50% { diff --git a/common/assets/styles/etherwallet-master.less b/common/assets/styles/etherwallet-master.less index b8a93d8e..77b44520 100755 --- a/common/assets/styles/etherwallet-master.less +++ b/common/assets/styles/etherwallet-master.less @@ -48,6 +48,4 @@ @import "etherwallet-swap.less"; @import "etherwallet-ext-custom.less"; @import "etherwallet-utilities.less"; -@import "etherwallet-nav.less"; @import "etherwallet-print.less"; - diff --git a/common/assets/styles/etherwallet-nav.less b/common/assets/styles/etherwallet-nav.less deleted file mode 100755 index 70d78a47..00000000 --- a/common/assets/styles/etherwallet-nav.less +++ /dev/null @@ -1,189 +0,0 @@ -// Header -.header-branding { - color: white; - padding: 0; - @media screen and (max-width: 900px) { - text-align: center; - } - .container { - display: flex; - align-items: center; - @media screen and (max-width: 900px) { - flex-direction: column; - padding-left: @cont-padding; - padding-right: @cont-padding; - } - } - .brand { - @media screen and (min-width: 901px) { - flex-basis: 245px; - } - img { - max-width: 1000px; - padding: 5px 0; - min-width: 220px; - } - } - .tagline { - font-size: 18px; - font-weight: 200; - color: white; - flex: 1 auto; - text-align: right; - padding: 5px 0; - @media screen and (max-width: 900px) { - text-align: center; - } - > * { - display: inline; - vertical-align: middle; - } - } - a { - color: white; - cursor: pointer; - font-weight: 400; - transition: 250ms all ease; - } - a:hover, - a:active { - opacity: .8; - color: white; - text-decoration: none; - transition: 250ms all ease; - } - .dropdown { - padding: 0; - text-align: right; - white-space: nowrap; - .dropdown-menu { - right: -10px; - left: auto; - min-width: auto; - left: auto; - & > li > a { - font-size: 15px; - padding: 5px 30px 5px 15px; - position: relative; - } - } - } -} - -.dropdown-menu a.active { - text-decoration: none; - color: @brand-primary; - background-color: @gray-lightest; -} - -// Navigation -.nav-container { - position: relative; - overflow-y: hidden; - - .nav-scroll { - -ms-overflow-style: -ms-autohiding-scrollbar; - -webkit-overflow-scrolling: touch; - overflow-x: auto; - margin-bottom: -20px; - font-size: 0; - white-space: nowrap; - @media screen and (max-width: @screen-sm) { - margin: 0 -5% -20px; - } - .nav-inner { - border-bottom: 2px solid @gray-lighter; - display: inline-block; - font-size: 0; - margin-bottom: 20px; - min-width: 100%; - padding: 5px 0 0; - vertical-align: middle; - .nav-item { - display: inline-block; - font-size: 0; - &.NAV_Swap a:before { - content: ""; - display: inline-block; - margin-top: -.1rem; - width: 1.3rem; - height: 1.3rem; - background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20620.04%20631.27%22%3E%3Ctitle%3Eicon-swap%3C/title%3E%3Cpath%20d%3D%22M469.95%20289.68c-77%200-139.59-62.62-139.59-139.59S392.98%2010.5%20469.95%2010.5s139.59%2062.62%20139.59%20139.59-62.62%20139.59-139.59%20139.59z%22%20fill%3D%22%23ffe14d%22/%3E%3Cpath%20d%3D%22M469.95%2021a129.09%20129.09%200%201%201-129.09%20129.09A129.24%20129.24%200%200%201%20469.95%2021m0-21c-82.76%200-150.09%2067.33-150.09%20150.09s67.29%20150.09%20150.09%20150.09%20150.09-67.33%20150.09-150.09S552.71%200%20469.95%200z%22%20fill%3D%22%230f0f0f%22/%3E%3Cpath%20d%3D%22M599.04%20150.09A129.24%20129.24%200%200%200%20469.95%2021v258.18a129.24%20129.24%200%200%200%20129.09-129.09z%22%20fill%3D%22%23fc3%22/%3E%3Cpath%20d%3D%22M469.95%2044.94a105.12%20105.12%200%201%200%20105.12%20105.15A105.24%20105.24%200%200%200%20469.95%2044.94zm0%20179c-49.27%200-74.85-24.6-74.85-73.87s25.58-74.85%2074.85-74.85%2075.82%2025.58%2075.82%2074.85-26.55%2073.87-75.82%2073.87z%22%20fill%3D%22%23ff9f19%22/%3E%3Cpath%20d%3D%22M545.77%20150.09c0%2049.27-26.55%2074.85-75.82%2074.85v30.27a105.12%20105.12%200%201%200%200-210.24v30.27c49.27%200%2075.82%2025.58%2075.82%2074.85z%22%20fill%3D%22%23f28618%22/%3E%3Cpath%20fill%3D%22%230492be%22%20d%3D%22M100.66%20277.37H26.9V114.06h240.72V50.84l131.7%20100.1-131.7%20100.09v-63.22H100.66v89.56z%22/%3E%3Cpath%20fill%3D%22%23103957%22%20opacity%3D%22.2%22%20d%3D%22M63.78%20150.94h335.54l-131.7-100.1v63.22H26.9v163.31h36.88V150.94z%22/%3E%3Cpath%20d%3D%22M259.71%2034.94l152.67%20116-152.67%20116v-71.23H108.55v89.56H19V106.15h240.71zm126.55%20116L275.52%2066.77v55.17H34.8v147.53h57.95v-89.53h182.77v55.19z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M292.951%20119.43l9.638-12.482%2047.456%2036.642-9.638%2012.482z%22/%3E%3Cpath%20d%3D%22M150.09%20620.77c-77%200-139.59-62.62-139.59-139.59s62.65-139.59%20139.59-139.59%20139.59%2062.62%20139.59%20139.59-62.62%20139.59-139.59%20139.59z%22%20fill%3D%22%23ffe14d%22/%3E%3Cpath%20d%3D%22M150.09%20352.09A129.09%20129.09%200%201%201%2021%20481.18a129.24%20129.24%200%200%201%20129.09-129.09m0-21C67.33%20331.09%200%20398.42%200%20481.18s67.33%20150.09%20150.09%20150.09%20150.06-67.33%20150.06-150.09-67.3-150.09-150.06-150.09z%22%20fill%3D%22%230f0f0f%22/%3E%3Cpath%20d%3D%22M21%20481.18a129.24%20129.24%200%200%200%20129.09%20129.09V352.09A129.24%20129.24%200%200%200%2021%20481.18z%22%20fill%3D%22%23fc3%22/%3E%3Cpath%20d%3D%22M150.09%20586.3A105.12%20105.12%200%201%200%2044.97%20481.18%20105.24%20105.24%200%200%200%20150.09%20586.3zm0-179c49.27%200%2074.85%2024.6%2074.85%2073.87s-25.58%2074.85-74.85%2074.85-75.82-25.58-75.82-74.85%2026.55-73.86%2075.82-73.86z%22%20fill%3D%22%23ff9f19%22/%3E%3Cpath%20d%3D%22M74.26%20481.18c0-49.27%2026.55-74.85%2075.82-74.85v-30.27a105.12%20105.12%200%201%200%200%20210.24v-30.27c-49.26%200-75.82-25.58-75.82-74.85z%22%20fill%3D%22%23f28618%22/%3E%3Cpath%20fill%3D%22%230492be%22%20d%3D%22M519.39%20353.9h73.75v163.31H352.43v63.22L220.72%20480.34l131.71-100.1v63.22h166.96V353.9z%22/%3E%3Cpath%20fill%3D%22%23103957%22%20opacity%3D%22.2%22%20d%3D%22M556.26%20480.34H220.72l131.71%20100.09v-63.22h240.71V353.9h-36.88v126.44z%22/%3E%3Cpath%20d%3D%22M360.32%20596.36l-152.66-116%20152.66-116v71.25h151.16V346h89.56v179.11H360.32zm-126.55-116l110.74%2084.16v-55.21h240.73V361.8h-57.95v89.56H344.52v-55.19z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M268.572%20486.574l9.7-12.473%2047.419%2036.875-9.7%2012.473z%22/%3E%3C/svg%3E); - background-position: center; - background-repeat: no-repeat; - background-size: contain; - vertical-align: middle; - margin-right: @space-xs; - } - a { - color: darken(@link-color, 15%); - display: block; - font-size: 16px; - font-weight: 300; - padding: 10px; - white-space: nowrap; - position: relative; - min-height: 2.75rem; - } - a:after { - content: ""; - background: @brand-primary; - height: 2px; - width: 100%; - left: 0px; - position: absolute; - bottom: -1px; - transition: all 250ms ease 0s; - transform: scale(0); - } - &.active a, - a:hover, - a:focus { - color: @brand-primary; - text-decoration: none; - transition: all 250ms ease 0s; - &:after { - transform: scale(1); - transition: all 250ms ease 0s; - } - } - } - } - } - - .nav-arrow-right, - .nav-arrow-left { - background-color: white; - bottom: 12px; - color: #d6d6d6; - font-size: 33px; - line-height: 1.3; - min-width: 50px; - position: absolute; - top: 0; - vertical-align: middle; - width: 5%; - z-index: 999; - &:hover { - text-decoration: none; - } - } - .nav-arrow-right { - right: 3%; - background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 47%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - padding-right: 5px; - text-align: right; - @media screen and (max-width: @screen-sm) { - right: 0; - } - } - .nav-arrow-left { - left: 3%; - background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 47%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - padding-left: 5px; - text-align: left; - @media screen and (max-width: @screen-sm) { - left: 0; - } - } -} diff --git a/common/assets/styles/etherwallet-utilities.less b/common/assets/styles/etherwallet-utilities.less index 065d30c5..95760c12 100755 --- a/common/assets/styles/etherwallet-utilities.less +++ b/common/assets/styles/etherwallet-utilities.less @@ -20,11 +20,6 @@ background: @ether-navy; } -.bg-gradient { - background: @ether-navy; - background: linear-gradient(149deg, #132a45, #143a56, #21a4ce, #19b4ad); -} - .bg-gray-lighter { background-color: @gray-lighter; } diff --git a/common/components/Footer/index.jsx b/common/components/Footer/index.jsx index 2eb17c8e..e431210a 100644 --- a/common/components/Footer/index.jsx +++ b/common/components/Footer/index.jsx @@ -3,18 +3,21 @@ import translate, { getTranslators } from 'translations'; import { donationAddressMap } from 'config/data'; import logo from 'assets/images/logo-myetherwallet.svg'; +import './index.scss'; + export default class Footer extends Component { render() { const translators = getTranslators(); return ( -