diff --git a/package.json b/package.json index c581e86..1a62f75 100644 --- a/package.json +++ b/package.json @@ -43,8 +43,8 @@ "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build -o origin", - "build-css": "node-sass-chokidar src/index/index.scss -o src/index", - "watch-css": "npm run build-css && node-sass-chokidar src/index/index.scss -o src/index --watch --recursive", + "build-css": "node-sass-chokidar src/assets/stylesheets/index.scss -o src/assets/stylesheets", + "watch-css": "npm run build-css && node-sass-chokidar src/assets/stylesheets/index.scss -o src/assets/stylesheets --watch --recursive", "start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build-js": "react-scripts build", diff --git a/public/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png index 8b711bd..c4dcac9 100755 Binary files a/public/favicons/android-chrome-192x192.png and b/public/favicons/android-chrome-192x192.png differ diff --git a/public/favicons/android-chrome-256x256.png b/public/favicons/android-chrome-256x256.png index db55442..abe5852 100755 Binary files a/public/favicons/android-chrome-256x256.png and b/public/favicons/android-chrome-256x256.png differ diff --git a/public/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png index f7241e1..c0441f1 100755 Binary files a/public/favicons/apple-touch-icon.png and b/public/favicons/apple-touch-icon.png differ diff --git a/public/favicons/browserconfig.xml b/public/favicons/browserconfig.xml index b3930d0..e00168b 100755 --- a/public/favicons/browserconfig.xml +++ b/public/favicons/browserconfig.xml @@ -3,7 +3,7 @@ - #da532c + #5c3698 diff --git a/public/favicons/fav_2.png b/public/favicons/fav_2.png index 0b6f085..1a59d71 100755 Binary files a/public/favicons/fav_2.png and b/public/favicons/fav_2.png differ diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png index 953762b..63d3aef 100755 Binary files a/public/favicons/favicon-16x16.png and b/public/favicons/favicon-16x16.png differ diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png old mode 100755 new mode 100644 index c3cc54c..74626e4 Binary files a/public/favicons/favicon-32x32.png and b/public/favicons/favicon-32x32.png differ diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico old mode 100755 new mode 100644 index bf246e0..e5a1198 Binary files a/public/favicons/favicon.ico and b/public/favicons/favicon.ico differ diff --git a/public/favicons/mstile-150x150.png b/public/favicons/mstile-150x150.png index 25fabf9..a6c4de4 100755 Binary files a/public/favicons/mstile-150x150.png and b/public/favicons/mstile-150x150.png differ diff --git a/public/index.html b/public/index.html index 6f71c0c..3be959d 100644 --- a/public/index.html +++ b/public/index.html @@ -5,30 +5,14 @@ - - POA Network Ceremony DApp - -
- \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index c5c6e8a..0000000 --- a/src/App.css +++ /dev/null @@ -1,28 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-title { - font-size: 1.5em; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} diff --git a/src/App.js b/src/App.js index e560dc1..404f4f5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,17 @@ -import React, { Component } from 'react' -import getWeb3 from './getWeb3' -import KeysManager from './keysManager' -import Keys from './Keys' -import swal from 'sweetalert' -import './index/index.css' -import addressGenerator from './addressGenerator' -import JSzip from 'jszip' +import './assets/stylesheets/index.css' import FileSaver from 'file-saver' -import { constants } from './constants' -import networkAddresses from './addresses' -import Header from './Header' -import Footer from './Footer' -import Loading from './Loading' +import Footer from './components/Footer' +import Header from './components/Header' +import JSzip from 'jszip' +import Keys from './components/Keys' +import KeysManager from './utils/keysManager' +import Loading from './components/Loading' +import React, { Component } from 'react' +import addressGenerator from './utils/addressGenerator' +import getWeb3 from './utils/getWeb3' +import networkAddresses from './utils/addresses' +import swal from 'sweetalert' +import { constants } from './utils/constants' function generateElement(msg) { let errorNode = document.createElement('div') diff --git a/src/assets/stylesheets/GUIDELINES.md b/src/assets/stylesheets/GUIDELINES.md new file mode 100644 index 0000000..2581f43 --- /dev/null +++ b/src/assets/stylesheets/GUIDELINES.md @@ -0,0 +1,43 @@ +#ECSS (Enduring CSS) will be used + +http://ecss.io/ + +##ECSS naming convention + +.namespace-ModuleOrComponent_ChildNode-variant {} + +- namespace: This is a required part of every selector. The micro-namespace should be all lowercase/train-case. It is typically an abbreviation to denote context or originating logic. + +- ModuleOrComponent: This is a upper camel case/pascal case. It should always be preceded by a hyphen character (-). + +- ChildNode: This is an optional section of the selector. It should be upper camel case/pascal case and preceded by an underscore (_). + +- variant: This is a further optional section of the selector. It should be written all lowercase/train-case. + +For example: + +.hm-Item_Header {} +.hm-Item_Header-bg1 {} /* Image background 1 */ + +##ECSS component states + +.is-Suspended {} +.is-Live {} +.is-Selected {} +.is-Busy {} + +etc. + +#CSS Overrides + +Should be self contained. + +For example: + +.ip-Carousel { + font-size: $text13; + /* The override is here for when this key-selector sits within a ip-HomeCallouts element */ + .ip-HomeCallouts & { + font-size: $text15; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/base/README.md b/src/assets/stylesheets/base/README.md new file mode 100644 index 0000000..ee174d6 --- /dev/null +++ b/src/assets/stylesheets/base/README.md @@ -0,0 +1 @@ +Holds what we might call the boilerplate stuff for the project: reset (or Normalize.css, or whatever), typography, etc. \ No newline at end of file diff --git a/src/assets/stylesheets/base/_display.scss b/src/assets/stylesheets/base/_display.scss new file mode 100644 index 0000000..c9941a5 --- /dev/null +++ b/src/assets/stylesheets/base/_display.scss @@ -0,0 +1,11 @@ +.hidden { + display: none; +} + +.display-block { + display: block; +} + +.display-inline { + display: inline; +} \ No newline at end of file diff --git a/src/assets/stylesheets/base/_effects.scss b/src/assets/stylesheets/base/_effects.scss new file mode 100644 index 0000000..07958e3 --- /dev/null +++ b/src/assets/stylesheets/base/_effects.scss @@ -0,0 +1,16 @@ +.background-blur { + animation-duration: 0.25s; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-name: sw-ModalAnimation_in; + animation-timing-function: linear; +} + +@keyframes sw-ModalAnimation_in { + 0% { + filter: blur(0); + } + 100% { + filter: blur(2px); + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/base/_index.scss b/src/assets/stylesheets/base/_index.scss new file mode 100644 index 0000000..53711a5 --- /dev/null +++ b/src/assets/stylesheets/base/_index.scss @@ -0,0 +1,6 @@ +@import 'reset'; +@import 'normalize'; + +@import 'display'; +@import 'effects'; +@import 'typography'; \ No newline at end of file diff --git a/src/assets/stylesheets/base/_normalize.scss b/src/assets/stylesheets/base/_normalize.scss new file mode 100644 index 0000000..47b010e --- /dev/null +++ b/src/assets/stylesheets/base/_normalize.scss @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/src/assets/stylesheets/base/_reset.scss b/src/assets/stylesheets/base/_reset.scss new file mode 100644 index 0000000..2eabf48 --- /dev/null +++ b/src/assets/stylesheets/base/_reset.scss @@ -0,0 +1,3 @@ +* { + box-sizing: border-box; +} \ No newline at end of file diff --git a/src/assets/stylesheets/base/_typography.scss b/src/assets/stylesheets/base/_typography.scss new file mode 100644 index 0000000..1a197ad --- /dev/null +++ b/src/assets/stylesheets/base/_typography.scss @@ -0,0 +1,8 @@ +@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700'); + +body { + -webkit-font-smoothing: antialiased; + color: $base-text-color; + font-family: Nunito, sans-serif; + font-size: $base-font-size; +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/README.md b/src/assets/stylesheets/components/README.md new file mode 100644 index 0000000..da3edd3 --- /dev/null +++ b/src/assets/stylesheets/components/README.md @@ -0,0 +1 @@ +All kinds of specific modules like a slider, a loader, a widget, etc. \ No newline at end of file diff --git a/src/assets/stylesheets/components/_index.scss b/src/assets/stylesheets/components/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/stylesheets/helpers/README.md b/src/assets/stylesheets/helpers/README.md new file mode 100644 index 0000000..b557d77 --- /dev/null +++ b/src/assets/stylesheets/helpers/README.md @@ -0,0 +1 @@ +All Sass tools and helpers we’ll use across the project: variables, mixins, functions, placeholders, etc. \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_index.scss b/src/assets/stylesheets/helpers/_index.scss new file mode 100644 index 0000000..00dd107 --- /dev/null +++ b/src/assets/stylesheets/helpers/_index.scss @@ -0,0 +1,3 @@ +@import 'variables'; +@import 'mixins'; +@import 'typography'; \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_mixins.scss b/src/assets/stylesheets/helpers/_mixins.scss new file mode 100644 index 0000000..e4f4c38 --- /dev/null +++ b/src/assets/stylesheets/helpers/_mixins.scss @@ -0,0 +1,100 @@ +// avoid text selection +@mixin not-selectable-text() { + /* Firefox all */ + -moz-user-select: none; + /* IE 10+ */ + -ms-user-select: none; + /* Chrome all / Safari all */ + -webkit-user-select: none; + /* Likely future */ + user-select: none; +} + +// use for retina background images @1x / @2x / @3x +@mixin image-retina($filename, $extension) { + + background-image: url($filename + '.' + $extension); + + @media (-webkit-min-device-pixel-ratio: 2), + (-moz-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + & { + background-image: url($filename + '@2x.' + $extension); + } + } + + @media (-webkit-min-device-pixel-ratio: 3), + (-moz-min-device-pixel-ratio: 3), + (min-resolution: 288dpi), + (min-resolution: 3dppx) { + & { + background-image: url($filename + '@3x.' + $extension); + } + } + +} + +// placeholder color +@mixin placeholder-color($color) { + &::-webkit-input-placeholder { + /* WebKit browsers */ + color: $color !important; + opacity: 1 !important; + } + &:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + color: $color !important; + opacity: 1 !important; + } + &::-moz-placeholder { + /* Mozilla Firefox 19+ */ + color: $color !important; + opacity: 1 !important; + } + &:-ms-input-placeholder { + /* Internet Explorer 10+ */ + color: $color !important; + opacity: 1 !important; + } +} + +// placeholder font size +@mixin placeholder-font-size($font-size) { + &::-webkit-input-placeholder { + /* WebKit browsers */ + font-size: $font-size !important; + } + &:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + font-size: $font-size !important; + } + &::-moz-placeholder { + /* Mozilla Firefox 19+ */ + font-size: $font-size !important; + } + &:-ms-input-placeholder { + /* Internet Explorer 10+ */ + font-size: $font-size !important; + } +} + +// placeholder font style +@mixin placeholder-font-style($font-style) { + &::-webkit-input-placeholder { + /* WebKit browsers */ + font-style: $font-style !important; + } + &:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + font-style: $font-style !important; + } + &::-moz-placeholder { + /* Mozilla Firefox 19+ */ + font-style: $font-style !important; + } + &:-ms-input-placeholder { + /* Internet Explorer 10+ */ + font-style: $font-style !important; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_typography.scss b/src/assets/stylesheets/helpers/_typography.scss new file mode 100644 index 0000000..f92a67e --- /dev/null +++ b/src/assets/stylesheets/helpers/_typography.scss @@ -0,0 +1,31 @@ +.text-light { + font-weight: 300; +} + +.text-normal { + font-weight: 400; +} + +.text-bold { + font-weight: 700; +} + +.text-semibold { + font-weight: 600; +} + +.text-italic { + font-style: italic; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_variables.scss b/src/assets/stylesheets/helpers/_variables.scss new file mode 100644 index 0000000..34c86f0 --- /dev/null +++ b/src/assets/stylesheets/helpers/_variables.scss @@ -0,0 +1,40 @@ +// colors +$brand-primary: #5a2da5; +$brand-secondary: #8ce1d7; +$base-border-color: #e9e9e9; +$base-text-color: #4a4a4a; +$base-text-color-light: #9b9b9b; +$fullscreen-backdrop-color: rgba(78, 44, 137, 0.9); + +// modal +$sw-ModalWindow-horizontal-padding-xs: 8px; + +// typography +$base-font-size: 16px; + +// paths +$base-images-path: '../../assets/images'; + +// responsive breakpoints +$breakpoint-xs: 320px; +$breakpoint-sm: 480px; +$breakpoint-md: 768px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1024px; +$breakpoint-xxl: 1280px; +$breakpoint-xxxl: 1366px; + +// z-index +$z-index-max: 12345678; + +// grid gaps +$grid-column-gap-md: 15px; +$grid-column-gap-xl: 39px; +$grid-column-gap-xxl: 74px; +$grid-column-gap-xxl: 90px; + +$grid-row-gap-md: 22px; +$grid-row-gap-lg: 31px; + +// home +$hm-Home_Btn-width: 230px; \ No newline at end of file diff --git a/src/assets/stylesheets/index.css b/src/assets/stylesheets/index.css new file mode 100644 index 0000000..3838960 --- /dev/null +++ b/src/assets/stylesheets/index.css @@ -0,0 +1,354 @@ +@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,600,700"); +.text-light { + font-weight: 300; } + +.text-normal { + font-weight: 400; } + +.text-bold { + font-weight: 700; } + +.text-semibold { + font-weight: 600; } + +.text-italic { + font-style: italic; } + +.text-left { + text-align: left; } + +.text-right { + text-align: right; } + +.text-center { + text-align: center; } + +* { + box-sizing: border-box; } + +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; } + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; } + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; } + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; } + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; } + +.hidden { + display: none; } + +.display-block { + display: block; } + +.display-inline { + display: inline; } + +.background-blur { + animation-duration: 0.25s; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-name: sw-ModalAnimation_in; + animation-timing-function: linear; } + +@keyframes sw-ModalAnimation_in { + 0% { + filter: blur(0); } + 100% { + filter: blur(2px); } } + +body { + -webkit-font-smoothing: antialiased; + color: #4a4a4a; + font-family: Nunito, sans-serif; + font-size: 16px; } diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss new file mode 100644 index 0000000..72807e6 --- /dev/null +++ b/src/assets/stylesheets/index.scss @@ -0,0 +1,6 @@ +@import 'helpers/index'; +@import 'vendors/index'; +@import 'base/index'; +@import 'layout/index'; +@import 'pages/index'; +@import 'components/index'; diff --git a/src/assets/stylesheets/layout/README.md b/src/assets/stylesheets/layout/README.md new file mode 100644 index 0000000..75bded8 --- /dev/null +++ b/src/assets/stylesheets/layout/README.md @@ -0,0 +1 @@ +Some styles for the main sections of the layout (header, footer, and so on). It can also contain the _grid file for the grid system used to build the layout. \ No newline at end of file diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/stylesheets/layout/_index.scss b/src/assets/stylesheets/layout/_index.scss new file mode 100644 index 0000000..08ec07c --- /dev/null +++ b/src/assets/stylesheets/layout/_index.scss @@ -0,0 +1 @@ +@import "base"; \ No newline at end of file diff --git a/src/assets/stylesheets/pages/README.md b/src/assets/stylesheets/pages/README.md new file mode 100644 index 0000000..40687b4 --- /dev/null +++ b/src/assets/stylesheets/pages/README.md @@ -0,0 +1 @@ +Page-specific styles, For example: for the home page you can have a _home.scss. \ No newline at end of file diff --git a/src/assets/stylesheets/pages/_index.scss b/src/assets/stylesheets/pages/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/stylesheets/vendors/README.md b/src/assets/stylesheets/vendors/README.md new file mode 100644 index 0000000..a5737f2 --- /dev/null +++ b/src/assets/stylesheets/vendors/README.md @@ -0,0 +1 @@ +Contains all the CSS files from external libraries and frameworks: Bootstrap, jQuery, etc. \ No newline at end of file diff --git a/src/assets/stylesheets/vendors/_index.scss b/src/assets/stylesheets/vendors/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/Footer.js b/src/components/Footer/index.js similarity index 95% rename from src/Footer.js rename to src/components/Footer/index.js index 671bfb1..7ae506c 100644 --- a/src/Footer.js +++ b/src/components/Footer/index.js @@ -1,6 +1,6 @@ import React from 'react' import moment from 'moment' -import { constants } from './constants' +import { constants } from '../../utils/constants' const Footer = ({ netId }) => { const footerClassName = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : '' diff --git a/src/Header.js b/src/components/Header/index.js similarity index 90% rename from src/Header.js rename to src/components/Header/index.js index 89db80e..fee98b7 100644 --- a/src/Header.js +++ b/src/components/Header/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { constants } from './constants' +import { constants } from '../../utils/constants' let Header = ({ netId }) => { const thisIsTestnet = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET diff --git a/src/Keys.js b/src/components/Keys/index.js similarity index 99% rename from src/Keys.js rename to src/components/Keys/index.js index 5782d6a..69c061f 100644 --- a/src/Keys.js +++ b/src/components/Keys/index.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import Tooltip from 'rc-tooltip' +// TODO: Check if this is worth it, or move it to vendors' folder import 'rc-tooltip/assets/bootstrap.css' const encodeJson = json => { diff --git a/src/Loading.js b/src/components/Loading/index.js similarity index 93% rename from src/Loading.js rename to src/components/Loading/index.js index cd87c12..a046e10 100644 --- a/src/Loading.js +++ b/src/components/Loading/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { constants } from './constants' +import { constants } from '../../utils/constants' const styles = netId => { const core = { diff --git a/src/images/bg_footer.png b/src/images/bg_footer.png deleted file mode 100644 index 228a44a..0000000 Binary files a/src/images/bg_footer.png and /dev/null differ diff --git a/src/images/bg_header.png b/src/images/bg_header.png deleted file mode 100644 index fe09a28..0000000 Binary files a/src/images/bg_header.png and /dev/null differ diff --git a/src/images/copy.png b/src/images/copy.png deleted file mode 100644 index 161e20b..0000000 Binary files a/src/images/copy.png and /dev/null differ diff --git a/src/images/copy@2x.png b/src/images/copy@2x.png deleted file mode 100644 index 0c27d8b..0000000 Binary files a/src/images/copy@2x.png and /dev/null differ diff --git a/src/images/loading.png b/src/images/loading.png deleted file mode 100644 index 6572ae6..0000000 Binary files a/src/images/loading.png and /dev/null differ diff --git a/src/images/loading@2x.png b/src/images/loading@2x.png deleted file mode 100644 index 5f9d744..0000000 Binary files a/src/images/loading@2x.png and /dev/null differ diff --git a/src/images/logo_ceremony_dapp.png b/src/images/logo_ceremony_dapp.png deleted file mode 100644 index fea9cd4..0000000 Binary files a/src/images/logo_ceremony_dapp.png and /dev/null differ diff --git a/src/images/logo_ceremony_dapp@2x.png b/src/images/logo_ceremony_dapp@2x.png deleted file mode 100644 index e359709..0000000 Binary files a/src/images/logo_ceremony_dapp@2x.png and /dev/null differ diff --git a/src/images/logo_ceremony_dapp_footer.png b/src/images/logo_ceremony_dapp_footer.png deleted file mode 100644 index 9efc12f..0000000 Binary files a/src/images/logo_ceremony_dapp_footer.png and /dev/null differ diff --git a/src/images/logo_ceremony_dapp_footer@2x.png b/src/images/logo_ceremony_dapp_footer@2x.png deleted file mode 100644 index e2cc53b..0000000 Binary files a/src/images/logo_ceremony_dapp_footer@2x.png and /dev/null differ diff --git a/src/images/logo_sokol.png b/src/images/logo_sokol.png deleted file mode 100644 index fe08d28..0000000 Binary files a/src/images/logo_sokol.png and /dev/null differ diff --git a/src/images/logo_sokol@2x.png b/src/images/logo_sokol@2x.png deleted file mode 100644 index 701da74..0000000 Binary files a/src/images/logo_sokol@2x.png and /dev/null differ diff --git a/src/images/socials.png b/src/images/socials.png deleted file mode 100644 index 2f4a0c9..0000000 Binary files a/src/images/socials.png and /dev/null differ diff --git a/src/images/socials/github@2x.png b/src/images/socials/github@2x.png deleted file mode 100755 index ac4536a..0000000 Binary files a/src/images/socials/github@2x.png and /dev/null differ diff --git a/src/images/socials/oracles@2x.png b/src/images/socials/oracles@2x.png deleted file mode 100755 index bf6e8bb..0000000 Binary files a/src/images/socials/oracles@2x.png and /dev/null differ diff --git a/src/images/socials/reddit@2x.png b/src/images/socials/reddit@2x.png deleted file mode 100755 index b6ee84e..0000000 Binary files a/src/images/socials/reddit@2x.png and /dev/null differ diff --git a/src/images/socials/telegram@2x.png b/src/images/socials/telegram@2x.png deleted file mode 100755 index 6f41f03..0000000 Binary files a/src/images/socials/telegram@2x.png and /dev/null differ diff --git a/src/images/socials/twitter@2x.png b/src/images/socials/twitter@2x.png deleted file mode 100755 index b212570..0000000 Binary files a/src/images/socials/twitter@2x.png and /dev/null differ diff --git a/src/images/socials@2x.png b/src/images/socials@2x.png deleted file mode 100644 index c629021..0000000 Binary files a/src/images/socials@2x.png and /dev/null differ diff --git a/src/images/warning.svg b/src/images/warning.svg deleted file mode 100644 index b091906..0000000 --- a/src/images/warning.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/index.js b/src/index.js index 9cbcdc9..7a45c88 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom' import App from './App' -import registerServiceWorker from './registerServiceWorker' +import registerServiceWorker from './utils/registerServiceWorker' window.addEventListener('beforeunload', function(event) { event.returnValue = 'Are you sure?' }) diff --git a/src/index/_0_fonts.scss b/src/index/_0_fonts.scss deleted file mode 100644 index 684617a..0000000 --- a/src/index/_0_fonts.scss +++ /dev/null @@ -1,24 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 700; - src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} - -html, -body { - color: #333; - line-height: 1; - font-size: 14px; - font-family: 'Open Sans', sans-serif; - -webkit-font-smoothing: antialiased; -} diff --git a/src/index/_1_mixins.scss b/src/index/_1_mixins.scss deleted file mode 100644 index a11747a..0000000 --- a/src/index/_1_mixins.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin image-2x($image, $width: 100%, $height: 100%) { - @media (min--moz-device-pixel-ratio: 1.3), - (-o-min-device-pixel-ratio: 2.6/2), - (-webkit-min-device-pixel-ratio: 1.3), - (min-device-pixel-ratio: 1.3), - (min-resolution: 1.3dppx) { - background-image: url($image); - background-size: $width $height; - } -} diff --git a/src/index/_2_placeholders.scss b/src/index/_2_placeholders.scss deleted file mode 100644 index 6c498e2..0000000 --- a/src/index/_2_placeholders.scss +++ /dev/null @@ -1,46 +0,0 @@ -%full-width { - left: 0; - right: 0; -} - -%stretch-width { - left: 0; - right: 0; -} - -%title { - color: #333; - text-transform: uppercase; - font-size: 16px; - font-weight: bold; -} - -%description { - color: #8197a2; - line-height: 24px; - font-size: 14px; - font-weight: normal; -} - -%btn { - transition: 0.3s background-color; - border-radius: 3px; - padding: 0 15px 0 32px; - background-repeat: no-repeat; - background-size: 12px 12px; - background-position: left 15px center; - color: #fff; - line-height: 36px; - font-size: 13px; - text-decoration: none; - text-transform: uppercase; - font-weight: bold; -} - -%item { - margin-bottom: 30px; - border-radius: 8px; - border: 1px solid #eee; - background-color: #fff; - color: #333; -} diff --git a/src/index/_3_base.scss b/src/index/_3_base.scss deleted file mode 100644 index b53d21a..0000000 --- a/src/index/_3_base.scss +++ /dev/null @@ -1,58 +0,0 @@ -html, -body { - margin: 0; - padding: 0; -} - -p, h1, h2, h3, h4 { - margin: 0; - padding: 0; - font-family: 'Open Sans', sans-serif; -} - -input { - border: 0; - background: #fdfdfd; - margin-left: 5px; -} - -html { - height: 100%; - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - background-position: center center; -} - -body { - position: relative; - display: table; - width: 100%; - min-width: 960px; - height: 100%; - box-sizing: border-box; - padding: 80px 0 60px; -} - -.container { - max-width: 960px; - margin: 0 auto; -} - -.content { - vertical-align: middle; - padding: 30px 10px 0px 10px; - background-color: #fdfdfd; - margin-left: 140px; - margin-right: 140px; -} - -.copy { - @include image-2x('../images/copy@2x.png', 14px, 14px); - background-image: url('../images/copy.png'); - background-size: 14px 14px; - width: 14px; - height: 14px; - display: inline-block; - margin-left: 5px; -} \ No newline at end of file diff --git a/src/index/_vars.scss b/src/index/_vars.scss deleted file mode 100644 index 3c0d361..0000000 --- a/src/index/_vars.scss +++ /dev/null @@ -1,10 +0,0 @@ -$container-width: 960px; -$tablet-width: 768px; -$mobile-width: 414px; -$footer-height: 60px; - -$desktop-indent: 30px; -$tablet-indent: 20px; -$mobile-indent: 15px; - -$input-height: 40px; diff --git a/src/index/addition.scss b/src/index/addition.scss deleted file mode 100644 index ddaa92d..0000000 --- a/src/index/addition.scss +++ /dev/null @@ -1,47 +0,0 @@ -.hidden { - display:none; -} - -input[type=file]{ - position:absolute; - top:-100px; - width: 100px !important; -} -button:focus {outline:0;} - -#createKeys { - position: absolute; - top: -webkit-calc(50% - 20px); - left: -webkit-calc(50% - 50px); -} - -.loader { - border: 16px solid grey; - border-radius: 50%; - border-top: 16px solid white; - width: 120px; - height: 120px; - -webkit-animation: spin 2s linear infinite; - animation: spin 2s linear infinite; - position: absolute; - top: -webkit-calc(50% - 76px); - left: -webkit-calc(50% - 76px); -} - -@-webkit-keyframes spin { - 0% { -webkit-transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); } -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -.password-label { - color: #333; -} - -button:focus { - outline: none; -} \ No newline at end of file diff --git a/src/index/create-keys.scss b/src/index/create-keys.scss deleted file mode 100644 index 7eb72bd..0000000 --- a/src/index/create-keys.scss +++ /dev/null @@ -1,103 +0,0 @@ -.create-keys-button-container { - display: flex; - align-items: center; - justify-content: center -} -.create-keys { - @extend %item; - padding: 30px 20px; - - h1 { - @extend %title; - margin-bottom: 20px; - } - - h2 { - @extend %description; - margin-bottom: 20px; - } - - &-button { - @extend %btn; - margin-top: 20px; - display: inline-block; - background-color: #08b3f2; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAFVBMVEX///////////////////////////9nSIHRAAAABnRSTlMASUrk5udXTd49AAAAOUlEQVR42tXQsQEAIAgDQcAn+4+snRZxAK79KokrIcNBwgYdc0Migwxk8Qsd1TJWDf/KQWobqt+9G4coA99W7as5AAAAAElFTkSuQmCC); - - &:hover { - background-color: #079dd4; - } - } - - &-inputs { - overflow: hidden; - display: table; - width: 100%; - } - - .left { - padding-right: 10px; - } - .right { - padding-left: 10px; - } - - .left, - .right { - display: table-cell; - width: 48%; - } - - label { - &:not(.radio) { - display: block; - margin-bottom: 15px; - margin-top: 20px; - text-transform: uppercase; - font-size: 12px; - font-weight: bold; - } - } - - button, - input, - textarea { - outline: none; - font-family: 'Open Sans', sans-serif; - } - - input, - textarea { - transition: 0.3s border-color; - width: 100%; - border-radius: 3px; - box-sizing: border-box; - border: 1px solid #eee; - - &:focus { - border-color: #08b3f2; - } - } - - textarea { - padding: 15px; - height: 110px; - resize: none; - } - - input { - padding: 0 15px; - height: 36px; - } - - input[type="radio"] { - display: none; - - &:checked + .radio:after { - opacity: 1; - } - } -} -.rc-tooltip-inner { - min-height: 0; -} \ No newline at end of file diff --git a/src/index/footer.scss b/src/index/footer.scss deleted file mode 100644 index d6eec28..0000000 --- a/src/index/footer.scss +++ /dev/null @@ -1,60 +0,0 @@ -.footer { - @extend %full-width; - position: absolute; - bottom: 0; - height: $footer-height; - background-color: #6d2eae; - - @media screen and (max-width: $mobile-width) { - height: auto; - padding: 20px 10px 0; - } - - &.sokol { - background-color: #6ac9b9; - } - - .container { - position: relative; - - @media screen and (max-width: $mobile-width) { - padding-top: $footer-height - 20; - } - } - - &-logo, - .socials { - transform: translateY(-50%); - position: absolute; - z-index: 1; - top: 50%; - - @media screen and (max-width: $mobile-width) { - transform: translateY(0); - top: 0; - } - } - - &-logo { - @include image-2x('../images/logo_ceremony_dapp_footer@2x.png', 120px, 24px); - z-index: 2; - display: inline-block; - vertical-align: middle; - width: 120px; - height: 24px; - background-image: url('../images/logo_ceremony_dapp_footer.png'); - background-position: 0 0; - } - - &-rights { - color: #fff; - line-height: $footer-height; - text-align: center; - font-size: 12px; - - @media screen and (max-width: $mobile-width) { - line-height: 30px; - } - } -} - diff --git a/src/index/header.scss b/src/index/header.scss deleted file mode 100644 index e8c40d8..0000000 --- a/src/index/header.scss +++ /dev/null @@ -1,34 +0,0 @@ -.header { - @extend %stretch-width; - position: absolute; - z-index: 1; - top: 0; - padding: 18px 10px; - background-image: url(../images/bg_header.png); - background-repeat: no-repeat; - background-size: cover; - - &.sokol { - background-image: none; - background-color: #6ac9b9; - } - - &-logo { - @include image-2x('../images/logo_ceremony_dapp@2x.png', 182px, 35px); - float: left; - width: 182px; - height: 35px; - background-image: url(../images/logo_ceremony_dapp.png); - background-position: 0 0; - } - - &-logo-sokol { - @include image-2x('../images/logo_sokol@2x.png', 146px, 35px); - display: block; - width: 146px; - height: 35px; - background-image: url('../images/logo_sokol.png'); - background-position: 0 0; - background-repeat: no-repeat; - } -} diff --git a/src/index/index.css b/src/index/index.css deleted file mode 100644 index 9f83d76..0000000 --- a/src/index/index.css +++ /dev/null @@ -1,507 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 700; - src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } - -html, -body { - color: #333; - line-height: 1; - font-size: 14px; - font-family: 'Open Sans', sans-serif; - -webkit-font-smoothing: antialiased; } - -.footer { - left: 0; - right: 0; } - -.header { - left: 0; - right: 0; } - -.create-keys h1, .keys-title { - color: #333; - text-transform: uppercase; - font-size: 16px; - font-weight: bold; } - -.create-keys h2, .keys-description { - color: #8197a2; - line-height: 24px; - font-size: 14px; - font-weight: normal; } - -.create-keys-button, .keys-download { - transition: 0.3s background-color; - border-radius: 3px; - padding: 0 15px 0 32px; - background-repeat: no-repeat; - background-size: 12px 12px; - background-position: left 15px center; - color: #fff; - line-height: 36px; - font-size: 13px; - text-decoration: none; - text-transform: uppercase; - font-weight: bold; } - -.create-keys { - margin-bottom: 30px; - border-radius: 8px; - border: 1px solid #eee; - background-color: #fff; - color: #333; } - -html, -body { - margin: 0; - padding: 0; } - -p, h1, h2, h3, h4 { - margin: 0; - padding: 0; - font-family: 'Open Sans', sans-serif; } - -input { - border: 0; - background: #fdfdfd; - margin-left: 5px; } - -html { - height: 100%; - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - background-position: center center; } - -body { - position: relative; - display: table; - width: 100%; - min-width: 960px; - height: 100%; - box-sizing: border-box; - padding: 80px 0 60px; } - -.container { - max-width: 960px; - margin: 0 auto; } - -.content { - vertical-align: middle; - padding: 30px 10px 0px 10px; - background-color: #fdfdfd; - margin-left: 140px; - margin-right: 140px; } - -.copy { - background-image: url("../images/copy.png"); - background-size: 14px 14px; - width: 14px; - height: 14px; - display: inline-block; - margin-left: 5px; } - @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { - .copy { - background-image: url("../images/copy@2x.png"); - background-size: 14px 14px; } } - -.hidden { - display: none; } - -input[type=file] { - position: absolute; - top: -100px; - width: 100px !important; } - -button:focus { - outline: 0; } - -#createKeys { - position: absolute; - top: -webkit-calc(50% - 20px); - left: -webkit-calc(50% - 50px); } - -.loader { - border: 16px solid grey; - border-radius: 50%; - border-top: 16px solid white; - width: 120px; - height: 120px; - -webkit-animation: spin 2s linear infinite; - animation: spin 2s linear infinite; - position: absolute; - top: -webkit-calc(50% - 76px); - left: -webkit-calc(50% - 76px); } - -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); } - 100% { - -webkit-transform: rotate(360deg); } } - -@keyframes spin { - 0% { - transform: rotate(0deg); } - 100% { - transform: rotate(360deg); } } - -.password-label { - color: #333; } - -button:focus { - outline: none; } - -.create-keys-button-container { - display: flex; - align-items: center; - justify-content: center; } - -.create-keys { - padding: 30px 20px; } - .create-keys h1 { - margin-bottom: 20px; } - .create-keys h2 { - margin-bottom: 20px; } - .create-keys-button { - margin-top: 20px; - display: inline-block; - background-color: #08b3f2; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAFVBMVEX///////////////////////////9nSIHRAAAABnRSTlMASUrk5udXTd49AAAAOUlEQVR42tXQsQEAIAgDQcAn+4+snRZxAK79KokrIcNBwgYdc0Migwxk8Qsd1TJWDf/KQWobqt+9G4coA99W7as5AAAAAElFTkSuQmCC); } - .create-keys-button:hover { - background-color: #079dd4; } - .create-keys-inputs { - overflow: hidden; - display: table; - width: 100%; } - .create-keys .left { - padding-right: 10px; } - .create-keys .right { - padding-left: 10px; } - .create-keys .left, - .create-keys .right { - display: table-cell; - width: 48%; } - .create-keys label:not(.radio) { - display: block; - margin-bottom: 15px; - margin-top: 20px; - text-transform: uppercase; - font-size: 12px; - font-weight: bold; } - .create-keys button, - .create-keys input, - .create-keys textarea { - outline: none; - font-family: 'Open Sans', sans-serif; } - .create-keys input, - .create-keys textarea { - transition: 0.3s border-color; - width: 100%; - border-radius: 3px; - box-sizing: border-box; - border: 1px solid #eee; } - .create-keys input:focus, - .create-keys textarea:focus { - border-color: #08b3f2; } - .create-keys textarea { - padding: 15px; - height: 110px; - resize: none; } - .create-keys input { - padding: 0 15px; - height: 36px; } - .create-keys input[type="radio"] { - display: none; } - .create-keys input[type="radio"]:checked + .radio:after { - opacity: 1; } - -.rc-tooltip-inner { - min-height: 0; } - -.footer { - position: absolute; - bottom: 0; - height: 60px; - background-color: #6d2eae; } - @media screen and (max-width: 414px) { - .footer { - height: auto; - padding: 20px 10px 0; } } - .footer.sokol { - background-color: #6ac9b9; } - .footer .container { - position: relative; } - @media screen and (max-width: 414px) { - .footer .container { - padding-top: 40px; } } - .footer-logo, - .footer .socials { - transform: translateY(-50%); - position: absolute; - z-index: 1; - top: 50%; } - @media screen and (max-width: 414px) { - .footer-logo, - .footer .socials { - transform: translateY(0); - top: 0; } } - .footer-logo { - z-index: 2; - display: inline-block; - vertical-align: middle; - width: 120px; - height: 24px; - background-image: url("../images/logo_ceremony_dapp_footer.png"); - background-position: 0 0; } - @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { - .footer-logo { - background-image: url("../images/logo_ceremony_dapp_footer@2x.png"); - background-size: 120px 24px; } } - .footer-rights { - color: #fff; - line-height: 60px; - text-align: center; - font-size: 12px; } - @media screen and (max-width: 414px) { - .footer-rights { - line-height: 30px; } } - -.header { - position: absolute; - z-index: 1; - top: 0; - padding: 18px 10px; - background-image: url(../images/bg_header.png); - background-repeat: no-repeat; - background-size: cover; } - .header.sokol { - background-image: none; - background-color: #6ac9b9; } - .header-logo { - float: left; - width: 182px; - height: 35px; - background-image: url(../images/logo_ceremony_dapp.png); - background-position: 0 0; } - @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { - .header-logo { - background-image: url("../images/logo_ceremony_dapp@2x.png"); - background-size: 182px 35px; } } - .header-logo-sokol { - display: block; - width: 146px; - height: 35px; - background-image: url("../images/logo_sokol.png"); - background-position: 0 0; - background-repeat: no-repeat; } - @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { - .header-logo-sokol { - background-image: url("../images/logo_sokol@2x.png"); - background-size: 146px 35px; } } - -.keys { - display: table; - width: 100%; - margin-bottom: 60px; - text-align: left; } - .keys-i { - position: relative; - display: table-cell; - vertical-align: top; - width: 33.33%; - box-sizing: border-box; - padding: 0 15px 60px 15px; } - .keys-i:first-child { - padding-left: 0; } - .keys-i:last-child { - padding-right: 0; } - .keys-i:not(:first-child) { - border-left: 1px solid #e1e1e1; } - .keys-title { - margin-bottom: 10px; } - .keys-hash { - height: 30px; - color: #6d2eae; - line-height: 16px; - font-size: 12px; - display: table-cell; } - .keys-hash-container { - display: table; } - .keys-description { - line-height: 18px; - font-size: 12px; } - .keys-footer { - position: absolute; - left: 15px; - right: 15px; - bottom: 0; } - .keys-i:first-child .keys-footer { - left: 0; } - .keys-download, .keys-read-more { - display: inline-block; - vertical-align: middle; } - .keys-download { - background-color: #6d2eae; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEX///////////////////////////////////////////////////////////////////////8BOg0gAAAAEXRSTlMASUtWV1hZXF1e5ebn6Orr/GN0dVoAAABnSURBVHja1cnJDYBADENRDzBsYYn7bxaCFFmMaADf/B+0YlbwNSPtE3jvv9Ad29DCsB0dVtKnN8xOGowhCdm5o/eUgOw+AktKQPYFkDygLglQhyRAXZLzWV2iLlFvRb2V7O3qeVa9C41xDOyv+UmuAAAAAElFTkSuQmCC); } - .keys-download:hover { - background-color: #5d2795; } - .keys-read-more { - margin-left: 10px; - color: #6d2eae; - text-decoration: none; } - .keys-read-more:hover { - text-decoration: underline; } - .keys-note { - overflow: hidden; - position: relative; - border: 1px solid #6d2eae; - border-radius: 5px; - padding: 20px 15px 20px 53px; - background-color: rgba(109, 46, 174, 0.1); - color: #6d2eae; - text-align: left; } - .keys-note:before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 42px; - background-color: #6d2eae; - background-image: url(../images/warning.svg); - background-repeat: no-repeat; - background-position: center center; } - .keys-note-title { - margin-bottom: 10px; - text-transform: uppercase; - font-size: 14px; - font-weight: bold; } - .keys-note-description { - font-size: 12px; } - -@keyframes fadeOut { - 0% { - opacity: .2; } - 20% { - opacity: 1; - transform: scale(1); } - 100% { - opacity: .2; - transform: scale(0.3); } } - -.loading { - display: flex; - justify-content: space-between; - position: absolute; - left: 50%; - top: 50%; - width: 206px; - margin: -30px 0 0 -111.5px; - padding-top: 50px; } - .loading:before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: 206px; - height: 35px; - background-image: url("../images/loading.png"); - background-position: 0 0; } - @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { - .loading:before { - background-image: url("../images/loading@2x.png"); - background-size: 100% 100%; } } - .loading-container { - position: fixed; - z-index: 1000000; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-color: rgba(35, 29, 115, 0.8); } - .loading-i { - animation-duration: 2s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: fadeOut; - animation-timing-function: linear; - opacity: .2; - width: 9px; - height: 9px; - border-radius: 50%; - background-color: #fff; } - .loading-i:nth-child(2) { - animation-delay: .1s; } - .loading-i:nth-child(3) { - animation-delay: .2s; } - .loading-i:nth-child(4) { - animation-delay: .3s; } - .loading-i:nth-child(5) { - animation-delay: .4s; } - .loading-i:nth-child(6) { - animation-delay: .5s; } - -.waiting-container { - text-align: center; - text-transform: uppercase; - height: 100px; - line-height: 100px; } - -.socials { - font-size: 0; } - .footer .socials { - right: 0; } - .socials-i { - transition: 0.3s background-color; - position: relative; - display: inline-block; - vertical-align: top; - width: 30px; - height: 30px; - border-radius: 50%; - background-color: rgba(255, 255, 255, 0.2); } - .socials-i:not(:first-child) { - margin-left: 10px; } - .socials-i:hover { - background-color: rgba(255, 255, 255, 0.4); } - .socials-i:before { - transform: translate(-50%, -50%); - content: ''; - position: absolute; - left: 50%; - top: 50%; - background-image: url(../images/socials.png); } - @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { - .socials-i:before { - background-image: url("../images/socials@2x.png"); - background-size: 16px 69px; } } - .socials-i_github:before { - width: 16px; - height: 16px; - background-position: 0 0; } - .socials-i_oracles:before { - width: 16px; - height: 14px; - background-position: 0 -16px; } - .socials-i_reddit:before { - width: 15px; - height: 13px; - background-position: 0 -30px; } - .socials-i_telegram:before { - width: 16px; - height: 14px; - background-position: 0 -43px; } - .socials-i_twitter:before { - width: 15px; - height: 12px; - background-position: 0 -57px; } diff --git a/src/index/index.scss b/src/index/index.scss deleted file mode 100644 index e1baa64..0000000 --- a/src/index/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import './_vars'; -@import './_0_fonts'; -@import './_1_mixins'; -@import './_2_placeholders'; -@import './_3_base'; -@import './addition'; -@import './create-keys'; -@import './footer'; -@import './header'; -@import './keys'; -@import './loading'; -@import './socials'; diff --git a/src/index/keys.scss b/src/index/keys.scss deleted file mode 100644 index 6bfcd72..0000000 --- a/src/index/keys.scss +++ /dev/null @@ -1,124 +0,0 @@ -.keys { - display: table; - width: 100%; - margin-bottom: 60px; - text-align: left; - - $_this: &; - - &-i { - position: relative; - display: table-cell; - vertical-align: top; - width: 33.33%; - box-sizing: border-box; - padding: 0 15px 60px 15px; - - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; - } - - &:not(:first-child) { - border-left: 1px solid #e1e1e1; - } - } - - &-title { - margin-bottom: 10px; - @extend %title; - } - - &-hash { - height: 30px; - color: #6d2eae; - line-height: 16px; - font-size: 12px; - display: table-cell; - } - - &-hash-container { - display: table; - } - - &-description { - @extend %description; - line-height: 18px; - font-size: 12px; - } - - &-footer { - position: absolute; - left: 15px; - right: 15px; - bottom: 0; - - #{$_this}-i:first-child & { - left: 0; - } - } - - &-download, - &-read-more { - display: inline-block; - vertical-align: middle; - } - - &-download { - @extend %btn; - background-color: #6d2eae; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEX///////////////////////////////////////////////////////////////////////8BOg0gAAAAEXRSTlMASUtWV1hZXF1e5ebn6Orr/GN0dVoAAABnSURBVHja1cnJDYBADENRDzBsYYn7bxaCFFmMaADf/B+0YlbwNSPtE3jvv9Ad29DCsB0dVtKnN8xOGowhCdm5o/eUgOw+AktKQPYFkDygLglQhyRAXZLzWV2iLlFvRb2V7O3qeVa9C41xDOyv+UmuAAAAAElFTkSuQmCC); - - &:hover { - background-color: #5d2795; - } - } - - &-read-more { - margin-left: 10px; - color: #6d2eae; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - - &-note { - overflow: hidden; - position: relative; - border: 1px solid #6d2eae; - border-radius: 5px; - padding: 20px 15px 20px 53px; - background-color: rgba(109, 46, 174, 0.1); - color: #6d2eae; - text-align: left; - - &:before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 42px; - background-color: #6d2eae; - background-image: url(../images/warning.svg); - background-repeat: no-repeat; - background-position: center center; - } - - &-title { - margin-bottom: 10px; - text-transform: uppercase; - font-size: 14px; - font-weight: bold; - } - - &-description { - font-size: 12px; - } - } -} diff --git a/src/index/loading.scss b/src/index/loading.scss deleted file mode 100644 index 37271a0..0000000 --- a/src/index/loading.scss +++ /dev/null @@ -1,86 +0,0 @@ -@keyframes fadeOut { - 0% { - opacity: .2; - } - 20% { - opacity: 1; - transform: scale(1); - } - 100% { - opacity: .2; - transform: scale(0.3); - } -} - -.loading { - display: flex; - justify-content: space-between; - position: absolute; - left: 50%; - top: 50%; - width: 206px; - margin: -30px 0 0 -111.5px; - padding-top: 50px; - - &:before { - @include image-2x('../images/loading@2x.png'); - content: ''; - position: absolute; - left: 0; - top: 0; - width: 206px; - height: 35px; - background-image: url("../images/loading.png"); - background-position: 0 0; - } - - &-container { - position: fixed; - z-index: 1000000; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-color: fade-out(#231d73, 0.2); - } - - &-i { - animation-duration: 2s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: fadeOut; - animation-timing-function: linear; - opacity:.2; - width: 9px; - height: 9px; - border-radius: 50%; - background-color: #fff; - - &:nth-child(2) { - animation-delay: .1s; - } - - &:nth-child(3) { - animation-delay: .2s; - } - - &:nth-child(4) { - animation-delay: .3s; - } - - &:nth-child(5) { - animation-delay: .4s; - } - - &:nth-child(6) { - animation-delay: .5s; - } - } -} - -.waiting-container { - text-align: center; - text-transform: uppercase; - height: 100px; - line-height: 100px; -} diff --git a/src/index/socials.scss b/src/index/socials.scss deleted file mode 100644 index d98022e..0000000 --- a/src/index/socials.scss +++ /dev/null @@ -1,76 +0,0 @@ -.socials { - font-size: 0; - - .footer & { - right: 0; - } - - &-i { - transition: 0.3s background-color; - position: relative; - display: inline-block; - vertical-align: top; - width: 30px; - height: 30px; - border-radius: 50%; - background-color: fade-out(#fff, 0.8); - - &:not(:first-child) { - margin-left: 10px; - } - - &:hover { - background-color: fade-out(#fff, 0.6); - } - - &:before { - @include image-2x('../images/socials@2x.png', 16px, 69px); - transform: translate(-50%, -50%); - content: ''; - position: absolute; - left: 50%; - top: 50%; - background-image: url(../images/socials.png); - } - - &_github { - &:before { - width: 16px; - height: 16px; - background-position: 0 0; - } - } - - &_oracles { - &:before { - width: 16px; - height: 14px; - background-position: 0 -16px; - } - } - - &_reddit { - &:before { - width: 15px; - height: 13px; - background-position: 0 -30px; - } - } - - &_telegram { - &:before { - width: 16px; - height: 14px; - background-position: 0 -43px; - } - } - - &_twitter { - &:before { - width: 15px; - height: 12px; - background-position: 0 -57px; - } - } - } -} \ No newline at end of file diff --git a/src/addressGenerator.js b/src/utils/addressGenerator.js similarity index 100% rename from src/addressGenerator.js rename to src/utils/addressGenerator.js diff --git a/src/addresses.js b/src/utils/addresses.js similarity index 83% rename from src/addresses.js rename to src/utils/addresses.js index f47db98..87bc420 100644 --- a/src/addresses.js +++ b/src/utils/addresses.js @@ -1,8 +1,11 @@ import { constants } from './constants' import helpers from './helpers' -//const local = { +// const local = { // "KEYS_MANAGER_ADDRESS": "0x3ef32bb244016ad9af8c8f45398511e7e551b581" -//} +// } +// module.exports = { +// KEYS_MANAGER_ADDRESS: '0xfc90125492e58dbfe80c0bfb6a2a759c4f703ca8' +// } export default web3Config => { const branch = constants.NETWORKS[web3Config.netId].BRANCH diff --git a/src/constants.js b/src/utils/constants.js similarity index 100% rename from src/constants.js rename to src/utils/constants.js diff --git a/src/getWeb3.js b/src/utils/getWeb3.js similarity index 95% rename from src/getWeb3.js rename to src/utils/getWeb3.js index 3c895c7..e4bd55b 100644 --- a/src/getWeb3.js +++ b/src/utils/getWeb3.js @@ -56,8 +56,8 @@ let getWeb3 = () => { console.log(`This is ${netIdName}`) } else { netIdName = 'ERROR' - errorMsg = `You aren't connected to POA Network. - Please switch on Metamask and refresh the page. + errorMsg = `You aren't connected to POA Network. + Please switch on Metamask and refresh the page. Check POA Network wiki for more info. Current Network ID is ${netId}` console.log('This is an unknown network.') diff --git a/src/helpers.js b/src/utils/helpers.js similarity index 100% rename from src/helpers.js rename to src/utils/helpers.js diff --git a/src/keysManager.js b/src/utils/keysManager.js similarity index 100% rename from src/keysManager.js rename to src/utils/keysManager.js diff --git a/src/messages.js b/src/utils/messages.js similarity index 100% rename from src/messages.js rename to src/utils/messages.js diff --git a/src/registerServiceWorker.js b/src/utils/registerServiceWorker.js similarity index 100% rename from src/registerServiceWorker.js rename to src/utils/registerServiceWorker.js diff --git a/src/App.test.js b/test/App.test.js similarity index 85% rename from src/App.test.js rename to test/App.test.js index 76d121e..f15be2f 100644 --- a/src/App.test.js +++ b/test/App.test.js @@ -1,6 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom' -import App from './App' +import App from '../src/App' it('renders without crashing', () => { const div = document.createElement('div')