feat: add global styles and assets for new components

src/styles/_common.scss

@@ -0,0 +1,14 @@
+body {
+  background-color: $black;
+  font-size: $base-font-size;
+  font-family: $font-family;
+  color: $base-color;
+}
+
+.container {
+  padding: 0 60px;
+}
+
+strong {
+  font-weight: bold;
+}

src/styles/_normalize.scss

@@ -0,0 +1,186 @@
+* {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  box-sizing: border-box;
+}
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  box-sizing: border-box;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-focus-ring-color: rgba(255, 255, 255, 0);
+  cursor: default;
+}
+
+body {
+  font-size: 100%;
+  line-height: 1;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  background: transparent;
+}
+
+*:focus,
+*:active,
+*:hover {
+  outline: none;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+pre {
+  tab-size: 4;
+  white-space: pre-wrap;
+}
+
+q {
+  quotes: '\201C''\201D''\2018''\2019';
+}
+
+img {
+  border: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+button,
+input {
+  line-height: normal;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button {
+  overflow: visible;
+}
+
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type='search'] {
+  -webkit-appearance: textfield;
+  box-sizing: content-box;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: none;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+
+button,
+input,
+select[multiple],
+textarea {
+  background-image: none;
+}
+
+input,
+select,
+textarea {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+input,
+textarea {
+  resize: none;
+  user-select: text;
+}
+
+[placeholder]:focus::placeholder {
+  color: transparent;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

src/styles/_vars.scss

@@ -0,0 +1,28 @@
+$black: #000;
+$white: #fff;
+$primary: #00ffad;
+$grey: #979797;
+$dark-grey: #202020;
+$pink: #f71ef4;
+$border-color: rgba($grey, 0.5);
+
+$font-family: 'Exo', sans-serif;
+$base-font-size: 15px;
+$base-color: $white;
+$title-font-size: 23px;
+$subttl-font-size: 15px;
+$subttl-color: $grey;
+$card-title-color: #c4c4c4;
+
+$input-height: 38px;
+$input-background: $black;
+$input-color: $white;
+$input-placeholder: rgba($white, 0.35);
+$input-font-size: 15px;
+
+$card-background: $dark-grey;
+$card-padding: 25px 25px 30px;
+
+$help-icon-color: #00a771;
+
+$alert-background: $dark-grey;

src/styles/index.scss

@@ -0,0 +1,3 @@
+@import 'normalize';
+@import 'vars';
+@import 'common';

webpack.renderer.config.js

@@ -1,10 +1,12 @@
+const path = require('path');
 const rules = require('./webpack.rules');
 
 module.exports = {
   resolve: {
     extensions: ['.js', '.jsx'],
     alias: {
       'react-dom': '@hot-loader/react-dom',
+      styles: path.resolve(__dirname, './src/styles'),
     },
   },
   module: {

webpack.rules.js

@@ -1,3 +1,5 @@
+const sass = require('sass');
+
 module.exports = [
   {
     test: /\.node$/,
@@ -41,6 +43,12 @@ module.exports = [
           },
         },
       },
+      {
+        loader: 'sass-loader',
+        options: {
+          implementation: sass,
+        },
+      },
     ],
   },
   {