Merge pull request Atyantik#2 from zeel123/master

Implement Redux

Author: yash-thakur

package-lock.json

@@ -40,5 +40,8 @@
   "bugs": {
     "url": "https://github.com/Atyantik/example-pawjs-redux/issues"
   },
-  "homepage": "https://github.com/Atyantik/example-pawjs-redux#readme"
+  "homepage": "https://github.com/Atyantik/example-pawjs-redux#readme",
+  "dependencies": {
+    "classnames": "^2.2.6"
+  }
 }

package.json

@@ -4,6 +4,8 @@
 }
 .title {
     font-size: 38px;
+    text-align: left;
+    margin-bottom: 0;
 }
 .btn {
     margin: 18px;
@@ -13,8 +15,57 @@
     color: #ffffff;
     font-size: 16px;
     font-weight: 800;
+    margin-left: 0;
 }
 .value {
-    font-size: 24px;
+    font-size: 180px;
     font-weight: 900;
 }
+.row{
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: space-evenly;
+    align-items: center;
+}
+.mw500{
+    max-width: 500px;
+    margin: 0 auto;
+}
+.col12{
+    width: 100%;
+    float: left;
+    text-align: left;
+}
+.col6{
+    width: 50%;
+    float: left;
+    text-align: right;
+}
+.col6md{
+    width: 50%;
+    float: left;
+}
+.mt{
+    margin-top: 3rem;
+}
+.black{
+    background-color: black;
+    text-decoration: none;
+}
+@media (max-width: 575px) {
+    .col6{
+        width: 100%;
+        text-align: center;
+    }
+    .value{
+        font-size: 100px;
+    }
+    .col12{
+        text-align: center;
+    }
+    .title{
+        text-align: center;
+    }
+
+}

src/app/components/home/home.css

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 import { decrementCounter, incrementCounter } from './actions';
 
 // import custom CSS
@@ -41,19 +42,43 @@ class Home extends Component {
     const { counterValue } = this.props;
     return (
       <div className={styles.container}>
-        <h1 className={styles.title}>Redux Counter</h1>
-        <div>
-          <button type="button" onClick={e => this.incrementCounter(e)} className={styles.btn}>
-            Increment Counter
-          </button>
-        </div>
-        <div className={styles.value}>
-          {counterValue}
+        <div className={styles.mw500}>
+          <h1 className={styles.title}>Redux counter</h1>
+          <div className={styles.row}>
+            <div className={styles.col6}>
+              <div className={styles.row}>
+                <div className={styles.col12}>
+                  <div>
+                    <button type="button" onClick={e => this.incrementCounter(e)} className={styles.btn}>
+                      Increment Counter
+                    </button>
+                  </div>
+                </div>
+                <div className={styles.col12}>
+                  <div>
+                    <button type="button" onClick={e => this.incrementCounter(e)} className={styles.btn}>
+                      Increment Counter
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className={styles.col6}>
+
+              <div className={styles.value}>
+                {counterValue}
+              </div>
+            </div>
+
+          </div>
         </div>
-        <div>
-          <button type="button" onClick={e => this.decrementCounter(e)} className={styles.btn}>
-            Decrement Counter
-          </button>
+        <div className={styles.mt}>
+          <a
+            href="https://github.com/Atyantik/example-pawjs-redux.git"
+            className={classNames(styles.btn, styles.black)}
+          >
+            View source code
+          </a>
         </div>
       </div>
     );