basic template for React App + bulma + sass

package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@oqton/redux-black-box": "^1.1.3",
+    "bulma": "^0.7.5",
+    "bulma-switch": "^2.0.0",
+    "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"

src/App.js

@@ -1,25 +1,86 @@
 import React from 'react';
 import logo from './logo.svg';
-import './App.css';
+import './App.sass';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <section class="hero is-medium has-text-white">
+        <div class="hero-body">
+          <div class="container">
+            <div class="columns is-mobile">
+              <div class="column is-8-desktop is-10 is-offset-1">
+                    <h1 class="title is-1 is-spaced has-text-white">TECH-Dapp</h1>
+                    <div class="media">
+                        <div class="media-left">
+                            {/* <figure class="image is-48x48">
+                                <img class="is-rounded has-background-white" src="./assets/logo_vipnode.png"/>
+                            </figure> */}
+                        </div>
+                        <div class="media-content">
+                            <p class="">Welcome to the commons stack. Here you can contribute to the commons stack roadmap and acquire some TECH tokens.</p>
+                            <p><span class="title is-6"><a href="https://commonsstack.org">https://commonsstack.org/</a></span></p>
+
+                        </div>
+                    </div>
+                    <div class="setting">
+                        <h3 class="is-size-5">How would you like setting 1 to be? *</h3>
+                        <div class="field">
+                            <p class="control">
+                                <input class="input" type="text" placeholder="Normal input"/>
+                            </p>
+                            <p class="help is-danger">
+                                This setting is required
+                            </p>
+                        </div>
+                    </div>
+                    <div class="setting">
+                        <h3 class="is-size-5">Do you want setting 2 on or off? *</h3>
+                        <nav class="level switch_w_options">
+                            <div class="level-left">
+                                <div class="level-item">
+                                    <p>Setting off</p>
+                                </div>
+                                <div class="level-item">
+                                    <div class="field">
+                                        <input id="switchRoundedDefault" type="checkbox" name="switchRoundedDefault" class="switch is-rounded is-link" checked="checked"/>
+                                        <label for="switchRoundedDefault">Setting on</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </nav>
+                        <p class="help is-danger">
+                            This setting is required
+                        </p>
+                    </div>
+                    <div class="setting">
+                        <h3 class="is-size-5">Set a password.</h3>
+                        <div class="field">
+                            <p class="control">
+                                <input class="input" type="password" placeholder="Normal input"/>
+                            </p>
+                            <p class="help is-danger">
+                                This setting is required
+                            </p>
+                        </div>
+                    </div>
+                    <div class="field is-grouped buttons">
+                        <p class="control">
+                            <a class="button is-medium is-link">Cancel</a>
+                        </p>
+                        <p class="control">
+                            <a class="button is-medium is-success">Submit</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer">
+            <div class="content has-text-centered">
+                <p>The Commons Stack</p>
+            </div>
+        </footer>
+    </section>
   );
 }
 

src/App.sass

@@ -0,0 +1,83 @@
+@charset "utf-8";
+@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan:400,700|Exo+2:400,700');
+
+
+// **********************************
+//  overwrites
+// **********************************
+
+
+// Core Variables
+$info: #413594
+$success: #20BC44
+$family-sans-serif: 'Exo 2', sans-serif
+
+$base-col: #2e4e72
+$accent-col-1: #c6dc94
+$accent-col-2: #54b276
+
+$input-background-color: transparent
+$input-color: white
+$input-focus-border-color: white
+$input-border-color: rgba(255,255,255,0.5)
+
+$footer-background-color: #253548
+
+$switch-background: rgba(255,255,255,0.1)
+
+
+@import "../node_modules/bulma/bulma.sass"
+@import "../node_modules/bulma-switch/src/sass/index.sass"
+
+
+$dottedlinecolor: rgba(0,0,0,0.3)   
+
+html
+  background-color: $base-col
+  font-family: 'Baloo Bhaijaan', cursive
+
+a:hover
+    color:white
+
+.subtitle
+    opacity: .7
+
+.setting
+    border-top: 1px dashed $dottedlinecolor
+    box-sizing:border-box
+    padding-top: 40px
+    margin: 50px 0
+
+.setting input
+    margin-top: 15px
+    outline:none
+
+.help
+    margin-top: 10px
+    font-weight: bold
+
+
+.footer .content p
+    opacity: .25
+
+
+.buttons
+    margin-top: 10vh
+
+
+.set_setting
+    border-top: 1px dashed $dottedlinecolor
+    box-sizing:border-box
+    padding-top: 2vh
+    margin: 3vh 0
+
+.changebtn
+    margin-top: 4vh
+
+.switch_w_options
+    margin-top: 10px
+
+
+.spacer
+    height: 15px
+    width: 100%