Merge pull request #15 from iamonuwa/deployment

Issues killer PR

src/common/components/FeatureDapps/FeatureDapps.module.scss

@@ -25,6 +25,9 @@
   flex-direction: column;
   margin: 0 calculateRem(20) calculateRem(20) calculateRem(20);
   text-decoration: none;
+  @media (min-width: 412px) {
+    min-width: 360px;
+  }
 }
 
 .bannerWrapper {

src/common/components/Modal/Modal.module.scss

@@ -45,6 +45,7 @@
     background: #939ba1;
     cursor: pointer;
     transform: rotate(45deg);
+    z-index: 99;
   }
 }
 

src/common/redux/reducers.js

@@ -6,7 +6,7 @@ import vote from '../../modules/Vote/Vote.reducer'
 import profile from '../../modules/Profile/Profile.reducer'
 import submit from '../../modules/Submit/Submit.reducer'
 import desktopMenu from '../../modules/DesktopMenu/DesktopMenu.reducer'
-import transactionStatus from '../../modules/TransactionStatus/TransactionStatus.recuder'
+import transactionStatus from '../../modules/TransactionStatus/TransactionStatus.reducer'
 import alert from '../../modules/Alert/Alert.reducer'
 import howToSubmit from '../../modules/HowToSubmit/HowToSubmit.reducer'
 import withdraw from '../../modules/Withdraw/Withdraw.reducer'

src/modules/Alert/Alert.container.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux'
 import Alert from './Alert'
 import { hideAlertAction } from './Alert.reducer'
+import { hideAction } from '../TransactionStatus/TransactionStatus.reducer'
 
 const mapStateToProps = state => state.alert
 const mapDispatchToProps = dispatch => ({
   hideAlert: () => dispatch(hideAlertAction()),
+  hideTransaction: () => dispatch(hideAction()),
 })
 
 export default connect(

src/modules/Alert/Alert.jsx

@@ -9,13 +9,15 @@ class Alert extends React.Component {
     this.onClickNegative = this.onClickNegative.bind(this)
   }
   onClickPositive() {
-    const { hideAlert, positiveListener } = this.props
+    const { hideAlert, positiveListener, hideTransaction } = this.props
     hideAlert()
+    hideTransaction()
     if (positiveListener !== null) positiveListener()
   }
   onClickNegative() {
-    const { hideAlert, negativeListener } = this.props
+    const { hideAlert, negativeListener, hideTransaction } = this.props
     hideAlert()
+    hideTransaction()
     if (negativeListener !== null) negativeListener()
   }
   render() {

src/modules/HowToSubmit/HowToSubmit.jsx

@@ -37,21 +37,23 @@ class HowToSubmit extends React.Component {
           {visible_how_to_submit && (
             <>
               <div className={styles.title}>How to submit a ÐApp</div>
+              <div className={styles.howto}>
                 <div className={styles.frame}>
                   <div className={styles.frameTitle}>Submit your ÐApp</div>
                   <ol>
                     <li>
-                    Upload a name, url, description, category and image for your
-                    DApp in the next step compulsory.
+                      Upload a name, url, description, category and image for
+                      your DApp in the next step compulsory.
                     </li>
                     <li>
-                    Stake the amount of SNT you want to rank your DApp optional.
+                      Stake the amount of SNT you want to rank your DApp
+                      optional.
                     </li>
                     <li>Hit “submit”.</li>
                     <li>
                       Our team will ensure that your DApp works well on mobile
-                    devices and will then include it on the live site using the
-                    information you provided in Step 1.
+                      devices and will then include it on the live site using
+                      the information you provided in Step 1.
                     </li>
                   </ol>
                 </div>
@@ -59,17 +61,18 @@ class HowToSubmit extends React.Component {
                   <div className={styles.frameTitle}>Staking</div>
                   <p>
                     You need not stake anything to be included - your DApp just
-                  won’t appear in the “Highest Ranked” section. If you do stake
-                  SNT, your DApp will appear in that section immediately. The
-                  DApp with the highest effective balance (that is, SNT staked
-                  plus/minus votes cast for/against) ranks highest.
+                    won’t appear in the “Highest Ranked” section. If you do
+                    stake SNT, your DApp will appear in that section
+                    immediately. The DApp with the highest effective balance
+                    (that is, SNT staked plus/minus votes cast for/against)
+                    ranks highest.
                   </p>
                   <p>
-                  SNT you stake is locked in the Discover contract. You can, at
-                  any time, withdraw a percentage of what you have staked. The
-                  more you stake, the lower the percentage you can withdraw.
-                  Withdrawals must be made from the same wallet as you submitted
-                  with, so PLEASE SECURE THIS ADDRESS.
+                    SNT you stake is locked in the Discover contract. You can,
+                    at any time, withdraw a percentage of what you have staked.
+                    The more you stake, the lower the percentage you can
+                    withdraw. Withdrawals must be made from the same wallet as
+                    you submitted with, so PLEASE SECURE THIS ADDRESS.
                   </p>
                 </div>
                 <div className={`${styles.frame} ${styles.withBorder}`}>
@@ -89,9 +92,9 @@ class HowToSubmit extends React.Component {
                 <div className={styles.frame}>
                   <p>
                     Furthermore, the operators of{' '}
-                  <a href="https://dap.ps">https://dap.ps</a> reserve the right
-                  to remove any DApp from the UI for reasons including, but not
-                  limited to:
+                    <a href="https://dap.ps">https://dap.ps</a> reserve the
+                    right to remove any DApp from the UI for reasons including,
+                    but not limited to:
                   </p>
                 </div>
                 <div className={`${styles.frame} ${styles.withBorder}`}>
@@ -107,14 +110,15 @@ class HowToSubmit extends React.Component {
                 </div>
                 <div className={styles.frame}>
                   <p>
-                  Anyone is welcome to fork the software and implement different
-                  UI choices for the same underlying contract. Note that
-                  Discover is not affiliated with Status directly, we have
-                  simply chosen to use SNT as a token of value, to abide by{' '}
-                  <a href="https://status.im/about/">Status’ principles</a>, and
-                  to take a mobile-first approach to development.
+                    Anyone is welcome to fork the software and implement
+                    different UI choices for the same underlying contract. Note
+                    that Discover is not affiliated with Status directly, we
+                    have simply chosen to use SNT as a token of value, to abide
+                    by <a href="https://status.im/about/">Status’ principles</a>
+                    , and to take a mobile-first approach to development.
                   </p>
                 </div>
+              </div>
             </>
           )}
           {visible_terms && <Terms />}

src/modules/HowToSubmit/HowToSubmit.module.scss

@@ -9,14 +9,22 @@
 }
 
 .title {
-  line-height: 40px;
   text-align: center;
+  letter-spacing: calculateRem(0.2);
   text-transform: uppercase;
-  font-weight: 600;
-  font-size: 17px;
+  font-weight: 500;
+  font-size: calculateRem(16);
+  padding: calculateRem(10) 0;
+  position: sticky;
+  top: 0;
+  background: #fff;
   border-bottom: 1px solid #f7f7f7;
 }
 
+.title + .howto {
+  padding-top: calculateRem(1);
+}
+
 a {
   color: $link-color;
 }

src/modules/Profile/Profile.jsx

@@ -71,7 +71,9 @@ const ProfileContent = ({
         <div className={styles.ranking}>
           <span className={styles.heading}>Ranking</span>
           <div className={styles.rank}>
-            <div className={styles.rank_position_1}>
+            <div
+              className={[styles.rank_position_1, styles[category]].join(' ')}
+            >
               <span className={styles.rank_position_span}>
                 {categoryPosition}
               </span>

src/modules/Profile/Profile.module.scss

@@ -45,10 +45,6 @@ a {
   cursor: pointer;
 }
 
-.category {
-  margin-bottom: calculateRem(20);
-}
-
 .heading {
   color: $text-color;
   font-size: calculateRem(13);
@@ -64,14 +60,14 @@ a {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: calculateRem(40) auto;
+  margin: calculateRem(40) 0 0 0;
 }
 
 .button {
   border-radius: 20px;
   background-color: #4360df;
   color: #ffffff;
-  margin: calculateRem(16) 0 calculateRem(24) 0;
+  margin: calculateRem(16) 0 calculateRem(16) 0;
   padding: calculateRem(12) calculateRem(32);
 }
 
@@ -98,17 +94,17 @@ a {
 .chat_image {
   width: calculateRem(40);
   height: calculateRem(40);
-  margin-top: calculateRem(20);
+  // margin-top: calculateRem(20);
   border-radius: 20px;
 }
 
 .chat_link {
-  margin: calculateRem(25) calculateRem(10) 0;
+  margin: 0 0 0 calculateRem(10);
 }
 
 .chat_icon {
   margin-left: calculateRem(-10);
-  margin-bottom: calculateRem(10);
+  margin-bottom: calculateRem(20);
 }
 
 .url {
@@ -183,3 +179,35 @@ a {
     }
   }
 }
+
+.EXCHANGES {
+  background: $purple-bg;
+}
+
+.MARKETPLACES {
+  background: $orange-bg;
+}
+
+.OTHER {
+  background: $yellow-bg;
+}
+
+.MEDIA {
+  background: $yellow-bg;
+}
+
+.GAMES {
+  background: $pink-bg;
+}
+
+.COLLECTIBLES {
+  background: $blue-bg;
+}
+
+.SOCIAL_NETWORKS {
+  background: $green-bg;
+}
+
+.UTILITIES {
+  background: $red-bg;
+}

src/modules/Submit/Submit.module.scss

@@ -122,8 +122,9 @@
     }
   }
 
-  input::placeholder {
-    color: $headline-color;
+  input::placeholder,
+  textarea::placeholder {
+    color: #939ba1;
   }
 
   .imgInfo {

src/modules/Submit/Submit.reducer.js

@@ -5,7 +5,7 @@ import {
   checkTransactionStatusAction,
   onStartProgressAction,
   hideAction,
-} from '../TransactionStatus/TransactionStatus.recuder'
+} from '../TransactionStatus/TransactionStatus.reducer'
 import {
   TYPE_SUBMIT,
   TYPE_UPDATE,

src/modules/TransactionStatus/TransactionStatus.container.js

@@ -3,7 +3,7 @@ import TransactionStatus from './TransactionStatus'
 import {
   hideAction,
   checkTransactionStatusAction,
-} from './TransactionStatus.recuder'
+} from './TransactionStatus.reducer'
 
 const mapStateToProps = state => state.transactionStatus
 const mapDispatchToProps = dispatch => ({

src/modules/TransactionStatus/TransactionStatus.reducer.js

@@ -8,7 +8,7 @@ import {
 import { onUpdateDappDataAction } from '../Dapps/Dapps.reducer'
 import { showAlertAction } from '../Alert/Alert.reducer'
 import BlockchainSDK from '../../common/blockchain'
-import DappModel from '../../common/data/dapp';
+import DappModel from '../../common/data/dapp'
 
 const HIDE = 'TXS_HIDE'
 const ON_START_PROGRESS = 'TXS_ON_START_PROGRESS'

src/modules/Vote/Vote.jsx

@@ -106,6 +106,7 @@ class Vote extends Component {
       >
         {!learnMoreUpVote && !learnMoreDownVote && (
           <>
+            <form onSubmit={this.onClickVote}>
               <div className={styles.tabs}>
                 <button
                   className={isUpvote ? styles.active : ''}
@@ -201,8 +202,11 @@ class Vote extends Component {
                       type="text"
                       value={sntValue}
                       onChange={this.handleChange}
+                      onKeyDown={this.handleDown}
                       placeholder="0"
-                    style={{ width: `${21 * Math.max(1, sntValue.length)}px` }}
+                      style={{
+                        width: `${21 * Math.max(1, sntValue.length)}px`,
+                      }}
                     />
                   </div>
                 )}
@@ -216,8 +220,8 @@ class Vote extends Component {
                 {!isUpvote && (
                   <p className={styles.disclaimer}>
                     SNT you spend to downvote goes directly back to {dapp.name}.
-                  Downvoting moves their DApp down by 1% of the current ranking.
-                  The cost is fixed by our unique bonded curve.{' '}
+                    Downvoting moves their DApp down by 1% of the current
+                    ranking. The cost is fixed by our unique bonded curve.{' '}
                     <a onClick={onClickLearnMoreDownVote}>Learn more↗</a>
                   </p>
                 )}
@@ -232,6 +236,7 @@ class Vote extends Component {
                   {isUpvote ? 'Upvote' : 'Downvote'}
                 </button>
               </div>
+            </form>
           </>
         )}
         {learnMoreUpVote && (

src/modules/Vote/Vote.module.scss

@@ -53,11 +53,6 @@
 
 .tabs button:first-child {
   margin-right: 32px;
-  color: #44d058;
-}
-
-.tabs button:last-child {
-  color: #ff2d55;
 }
 
 .tabs button:after {

src/modules/Vote/Vote.reducer.js

@@ -7,7 +7,7 @@ import {
   onStartProgressAction,
   onReceiveTransactionInfoAction,
   checkTransactionStatusAction,
-} from '../TransactionStatus/TransactionStatus.recuder'
+} from '../TransactionStatus/TransactionStatus.reducer'
 import {
   TYPE_UPVOTE,
   TYPE_DOWNVOTE,

src/modules/Withdraw/Withdraw.reducer.js

@@ -5,7 +5,7 @@ import {
   checkTransactionStatusAction,
   onStartProgressAction,
   hideAction,
-} from '../TransactionStatus/TransactionStatus.recuder'
+} from '../TransactionStatus/TransactionStatus.reducer'
 import { TYPE_WITHDRAW } from '../TransactionStatus/TransactionStatus.utilities'
 import { showAlertAction } from '../Alert/Alert.reducer'