overlaping, downvote & tc before submit

src/common/components/DappListItem/DappListItem.jsx

@@ -33,7 +33,10 @@ const DappListItem = props => {
   return (
     <div className={isRanked ? styles.rankedListItem : styles.listItem}>
       {isRanked && <div className={styles.position}>{position}</div>}
-      <div onClick={() => onToggleProfileModal(name)}>
+      <div
+        className={styles.imgWrapper}
+        onClick={() => onToggleProfileModal(name)}
+      >
         <ReactImageFallback
           className={styles.image}
           src={image}
@@ -41,7 +44,7 @@ const DappListItem = props => {
           alt="App icon"
         />
       </div>
-      <div>
+      <div className={styles.column}>
         <div onClick={() => onToggleProfileModal(name)}>
           <h2 className={styles.header}>{name}</h2>
           <p
@@ -56,11 +59,12 @@ const DappListItem = props => {
           &nbsp;&rarr;
         </a>
         {showActionButtons && (
-          <p className={styles.actionArea}>
+          <div className={styles.actionArea}>
             <span className={styles.sntAmount}>
               <img src={sntIcon} alt="SNT" width="16" height="16" />
               {dapp.sntValue}
             </span>
+            <div className={styles.voteTriggers}>
               <span className={styles.vote} onClick={handleUpVote}>
                 <img src={upvoteArrowIcon} alt="" />
                 Upvote
@@ -69,7 +73,8 @@ const DappListItem = props => {
                 <img src={downvoteArrowIcon} alt="" />
                 Downvote
               </span>
-          </p>
+            </div>
+          </div>
         )}
       </div>
     </div>

src/common/components/DappListItem/DappListItem.module.scss

@@ -18,6 +18,12 @@
   position: relative;
 }
 
+.column {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+
 .header {
   color: $headline-color;
   font-size: calculateRem(15);
@@ -41,6 +47,7 @@
   font-size: calculateRem(12);
   color: $link-color;
   text-decoration: none;
+  margin-bottom: 12px;
 }
 
 .description {
@@ -60,11 +67,16 @@
 }
 
 .position {
+  flex: 0 0 auto;
   margin-top: calculateRem(20);
   margin-right: calculateRem(16);
   font-size: calculateRem(13);
 }
 
+.imgWrapper {
+  flex: 0 0 auto;
+}
+
 .sntAmount {
   font-size: calculateRem(12);
   font-weight: 500;
@@ -99,6 +111,19 @@
 }
 
 .actionArea {
-  bottom: 0;
+  width: 100%;
-  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: auto;
+
+  .voteTriggers {
+    display: inherit;
+    align-items: inherit;
+  }
+}
+
+.actionArea > * {
+  margin-bottom: calculateRem(8);
 }

src/common/data/how-to-submit.js

@@ -1,5 +1,6 @@
 const howToSubmit = {
-  visible: false,
+  visible_how_to_submit: false,
+  visible_terms: false,
 }
 
 export default howToSubmit

src/modules/HowToSubmit/HowToSubmit.container.js

@@ -1,12 +1,16 @@
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import HowToSubmit from './HowToSubmit'
-import { hideHowToSubmitAction } from './HowToSubmit.reducer'
+import {
+  hideHowToSubmitAction,
+  switchToTermsAction,
+} from './HowToSubmit.reducer'
 import { showSubmitAction } from '../Submit/Submit.reducer'
 
 const mapStateToProps = state => state.howToSubmit
 const mapDispatchToProps = dispatch => ({
   onClickClose: () => dispatch(hideHowToSubmitAction()),
+  onClickContinue: () => dispatch(switchToTermsAction()),
   onClickGetStarted: () => {
     dispatch(hideHowToSubmitAction())
     setTimeout(() => {

src/modules/HowToSubmit/HowToSubmit.jsx

@@ -2,14 +2,30 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './HowToSubmit.module.scss'
 import Modal from '../../common/components/Modal'
+import Terms from '../Terms/Terms'
 
 class HowToSubmit extends React.Component {
   constructor(props) {
     super(props)
+    this.wrapper = React.createRef()
+    this.onClickNext = this.onClickNext.bind(this)
+  }
+
+  onClickNext() {
+    const {
+      visible_how_to_submit,
+      onClickContinue,
+      onClickGetStarted,
+    } = this.props
+    if (visible_how_to_submit) {
+      this.wrapper.current.parentNode.parentNode.scrollTop = 0
+      onClickContinue()
+    } else onClickGetStarted()
   }
 
   render() {
-    const { visible, onClickClose, onClickGetStarted } = this.props
+    const { visible_how_to_submit, visible_terms, onClickClose } = this.props
+    const visible = visible_how_to_submit || visible_terms
 
     return (
       <Modal
@@ -17,8 +33,10 @@ class HowToSubmit extends React.Component {
         onClickClose={onClickClose}
         windowClassName={styles.modalWindow}
       >
-        <div className={styles.cnt}>
+        <div ref={this.wrapper} className={styles.cnt}>
-          <div className={styles.title}>Terms and conditions</div>
+          {visible_how_to_submit && (
+            <>
+              <div className={styles.title}>How to submit a ÐApp</div>
               <div className={styles.frame}>
                 <div className={styles.frameTitle}>Submit your ÐApp</div>
                 <ol>
@@ -31,27 +49,27 @@ class HowToSubmit extends React.Component {
                   </li>
                   <li>Hit “submit”.</li>
                   <li>
-                Our team will ensure that your DApp works well on mobile devices
+                    Our team will ensure that your DApp works well on mobile
-                and will then include it on the live site using the information
+                    devices and will then include it on the live site using the
-                you provided in Step 1.
+                    information you provided in Step 1.
                   </li>
                 </ol>
               </div>
               <div className={styles.frame}>
                 <div className={styles.frameTitle}>Staking</div>
                 <p>
-              You need not stake anything to be included - your DApp just won’t
+                  You need not stake anything to be included - your DApp just
-              appear in the “Highest Ranked” section. If you do stake SNT, your
+                  won’t appear in the “Highest Ranked” section. If you do stake
-              DApp will appear in that section immediately. The DApp with the
+                  SNT, your DApp will appear in that section immediately. The
-              highest effective balance (that is, SNT staked plus/minus votes
+                  DApp with the highest effective balance (that is, SNT staked
-              cast for/against) ranks highest.
+                  plus/minus votes cast for/against) ranks highest.
                 </p>
                 <p>
-              SNT you stake is locked in the Discover contract. You can, at any
+                  SNT you stake is locked in the Discover contract. You can, at
-              time, withdraw a percentage of what you have staked. The more you
+                  any time, withdraw a percentage of what you have staked. The
-              stake, the lower the percentage you can withdraw. Withdrawals must
+                  more you stake, the lower the percentage you can withdraw.
-              be made from the same wallet as you submitted with, so PLEASE
+                  Withdrawals must be made from the same wallet as you submitted
-              SECURE THIS ADDRESS.
+                  with, so PLEASE SECURE THIS ADDRESS.
                 </p>
               </div>
               <div className={`${styles.frame} ${styles.withBorder}`}>
@@ -62,17 +80,18 @@ class HowToSubmit extends React.Component {
                     <strong>9 950 SNT.</strong>
                   </li>
                   <li>
-                Staking <strong>1 000 000 SNT</strong> returns a rate of 50.99%,
+                    Staking <strong>1 000 000 SNT</strong> returns a rate of
-                so you can withdraw up to <strong>509 958 SNT.</strong>
+                    50.99%, so you can withdraw up to{' '}
+                    <strong>509 958 SNT.</strong>
                   </li>
                 </ol>
               </div>
               <div className={styles.frame}>
                 <p>
                   Furthermore, the operators of{' '}
-              <a href="https://dap.ps">https://dap.ps</a> reserve the right to
+                  <a href="https://dap.ps">https://dap.ps</a> reserve the right
-              remove any DApp from the UI for reasons including, but not limited
+                  to remove any DApp from the UI for reasons including, but not
-              to:
+                  limited to:
                 </p>
               </div>
               <div className={`${styles.frame} ${styles.withBorder}`}>
@@ -87,20 +106,24 @@ class HowToSubmit extends React.Component {
               </div>
               <div className={styles.frame}>
                 <p>
-              Anyone is welcome to fork the software and implement different UI
+                  Anyone is welcome to fork the software and implement different
-              choices for the same underlying contract. Note that Discover is
+                  UI choices for the same underlying contract. Note that
-              not affiliated with Status directly, we have simply chosen to use
+                  Discover is not affiliated with Status directly, we have
-              SNT as a token of value, to abide by <a>Status’ principles</a>,
+                  simply chosen to use SNT as a token of value, to abide by{' '}
-              and to take a mobile-first approach to development.
+                  <a>Status’ principles</a>, and to take a mobile-first approach
+                  to development.
                 </p>
               </div>
+            </>
+          )}
+          {visible_terms && <Terms />}
           <div className={styles.footerActions}>
             <button
               className={styles.submitButton}
               type="submit"
-              onClick={onClickGetStarted}
+              onClick={this.onClickNext}
             >
-              Continue
+              {visible_how_to_submit ? 'Continue' : 'Get started'}
             </button>
           </div>
         </div>
@@ -110,8 +133,10 @@ class HowToSubmit extends React.Component {
 }
 
 HowToSubmit.propTypes = {
-  visible: PropTypes.bool.isRequired,
+  visible_how_to_submit: PropTypes.bool.isRequired,
+  visible_terms: PropTypes.bool.isRequired,
   onClickClose: PropTypes.func.isRequired,
+  onClickContinue: PropTypes.func.isRequired,
   onClickGetStarted: PropTypes.func.isRequired,
 }
 

src/modules/HowToSubmit/HowToSubmit.reducer.js

@@ -3,6 +3,7 @@ import reducerUtil from '../../common/utils/reducer'
 
 const SHOW = 'HOW_TO_SHOW'
 const HIDE = 'HOW_TO_HIDE'
+const SWITCH_TO_TERMS = 'HOW_SWITCH_TO_TERMS'
 
 export const showHowToSubmitAction = () => {
   window.location.hash = 'how-to-submit'
@@ -20,21 +21,36 @@ export const hideHowToSubmitAction = () => {
   }
 }
 
+export const switchToTermsAction = () => ({
+  type: SWITCH_TO_TERMS,
+  payload: null,
+})
+
 const show = state => {
   return Object.assign({}, state, {
-    visible: true,
+    visible_how_to_submit: true,
+    visible_terms: false,
   })
 }
 
 const hide = state => {
   return Object.assign({}, state, {
-    visible: false,
+    visible_how_to_submit: false,
+    visible_terms: false,
+  })
+}
+
+const switchToTerms = state => {
+  return Object.assign({}, state, {
+    visible_how_to_submit: false,
+    visible_terms: true,
   })
 }
 
 const map = {
   [SHOW]: show,
   [HIDE]: hide,
+  [SWITCH_TO_TERMS]: switchToTerms,
 }
 
 export default reducerUtil(map, howToSubmitInitialState)

src/modules/TransactionStatus/TransactionStatus.module.scss

@@ -61,8 +61,9 @@
         align-items: center;
         justify-content: center;
         color: #fff;
-        font-size: 16px;
+        font-size: 18px;
         font-weight: 300;
+        font-family: 'Times New Roman', Times, serif;
         margin-left: auto;
         border-radius: 50%;
         background: #939ba1;

src/modules/Vote/Vote.jsx

@@ -34,7 +34,7 @@ class Vote extends Component {
   onClickDownvote() {
     const { dapp, onClickDownvote, fetchVoteRating } = this.props
     onClickDownvote()
-    // fetchVoteRating(dapp, false, 3244)
+    fetchVoteRating(dapp, false, DOWNVOTE_COST)
   }
 
   handleChange(e) {
@@ -91,7 +91,6 @@ class Vote extends Component {
       afterVoteCategoryPosition = 1
       for (let i = 0; i < dappsByCategory.length; ++i) {
         if (dappsByCategory[i] === dapp) continue
-
         if (dappsByCategory[i].sntValue < afterVoteRating) break
         afterVoteCategoryPosition++
       }
@@ -142,11 +141,11 @@ class Vote extends Component {
                 {`${afterVoteRating.toLocaleString()} ↑`}
               </span>
             )}
-            {/* {!isUpvote && afterVoteRating !== null && (
+            {!isUpvote && afterVoteRating !== null && (
               <span className={styles.redBadge}>
                 {`${afterVoteRating.toLocaleString()} ↓`}
               </span>
-            )} */}
+            )}
           </div>
           <div className={styles.itemRow}>
             <span className={styles.item}>
@@ -165,11 +164,13 @@ class Vote extends Component {
                   {`№${afterVoteCategoryPosition} ↑`}
                 </span>
               )}
-            {/* {!isUpvote && afterVoteCategoryPosition !== null &&  afterVoteCategoryPosition !== catPosition (
+            {!isUpvote &&
+              afterVoteCategoryPosition !== null &&
+              afterVoteCategoryPosition !== catPosition && (
                 <span className={styles.redBadge}>
                   {`№${afterVoteCategoryPosition} ↓`}
                 </span>
-            )} */}
+              )}
           </div>
         </div>
         {!isUpvote && (

src/modules/Vote/Vote.reducer.js

@@ -111,15 +111,17 @@ export const updateAfterVotingValuesAction = rating => ({
 export const fetchVoteRatingAction = (dapp, isUpvote, sntValue) => {
   return async (dispatch, getState) => {
     let rating
+    if (isUpvote === true) {
       try {
         rating = await BlockchainSDK.DiscoverService.upVoteEffect(
           dapp.id,
           sntValue,
         )
+        rating = parseInt(rating, 10)
       } catch (e) {
         return
       }
-    rating = parseInt(rating, 10)
+    } else rating = parseInt(dapp.sntValue * 0.99, 10)
 
     const state = getState()
     const voteState = state.vote