diff --git a/src/common/components/FeatureDapps/FeatureDapps.module.scss b/src/common/components/FeatureDapps/FeatureDapps.module.scss index 1819a15..990e3c9 100644 --- a/src/common/components/FeatureDapps/FeatureDapps.module.scss +++ b/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 { diff --git a/src/common/components/Modal/Modal.module.scss b/src/common/components/Modal/Modal.module.scss index 7ac1a62..8dc115f 100644 --- a/src/common/components/Modal/Modal.module.scss +++ b/src/common/components/Modal/Modal.module.scss @@ -45,6 +45,7 @@ background: #939ba1; cursor: pointer; transform: rotate(45deg); + z-index: 99; } } diff --git a/src/common/redux/reducers.js b/src/common/redux/reducers.js index 94523dc..e6bf061 100644 --- a/src/common/redux/reducers.js +++ b/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' diff --git a/src/modules/Alert/Alert.container.js b/src/modules/Alert/Alert.container.js index cf9eb76..11bc386 100644 --- a/src/modules/Alert/Alert.container.js +++ b/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( diff --git a/src/modules/Alert/Alert.jsx b/src/modules/Alert/Alert.jsx index e6e9570..ff90a6e 100644 --- a/src/modules/Alert/Alert.jsx +++ b/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() { diff --git a/src/modules/HowToSubmit/HowToSubmit.jsx b/src/modules/HowToSubmit/HowToSubmit.jsx index 02a4896..1e82c9a 100644 --- a/src/modules/HowToSubmit/HowToSubmit.jsx +++ b/src/modules/HowToSubmit/HowToSubmit.jsx @@ -37,83 +37,87 @@ class HowToSubmit extends React.Component { {visible_how_to_submit && ( <>
How to submit a ÐApp
-
-
Submit your ÐApp
-
    -
  1. - Upload a name, url, description, category and image for your - DApp in the next step compulsory. -
  2. -
  3. - Stake the amount of SNT you want to rank your DApp optional. -
  4. -
  5. Hit “submit”.
  6. -
  7. - 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. -
  8. -
-
-
-
Staking
-

- 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. -

-

- 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. -

-
-
-
    -
  1. - Staking 10 000 SNT returns a rate of{' '} - 99.5%, so you can withdraw up to{' '} - 9 950 SNT. -
  2. -
  3. - Staking 1 000 000 SNT returns a rate of - 50.99%, so you can withdraw up to{' '} - 509 958 SNT. -
  4. -
-
-
-

- Furthermore, the operators of{' '} - https://dap.ps reserve the right - to remove any DApp from the UI for reasons including, but not - limited to: -

-
-
-
    -
  1. Malicious code injection
  2. -
  3. - Violation of{' '} - Status' principles -
  4. -
  5. Lack of usability (especially on mobile)
  6. -
  7. Vote manipulation.
  8. -
-
-
-

- 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{' '} - Status’ principles, and - to take a mobile-first approach to development. -

+
+
+
Submit your ÐApp
+
    +
  1. + Upload a name, url, description, category and image for + your DApp in the next step compulsory. +
  2. +
  3. + Stake the amount of SNT you want to rank your DApp + optional. +
  4. +
  5. Hit “submit”.
  6. +
  7. + 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. +
  8. +
+
+
+
Staking
+

+ 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. +

+

+ 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. +

+
+
+
    +
  1. + Staking 10 000 SNT returns a rate of{' '} + 99.5%, so you can withdraw up to{' '} + 9 950 SNT. +
  2. +
  3. + Staking 1 000 000 SNT returns a rate of + 50.99%, so you can withdraw up to{' '} + 509 958 SNT. +
  4. +
+
+
+

+ Furthermore, the operators of{' '} + https://dap.ps reserve the + right to remove any DApp from the UI for reasons including, + but not limited to: +

+
+
+
    +
  1. Malicious code injection
  2. +
  3. + Violation of{' '} + Status' principles +
  4. +
  5. Lack of usability (especially on mobile)
  6. +
  7. Vote manipulation.
  8. +
+
+
+

+ 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 Status’ principles + , and to take a mobile-first approach to development. +

+
)} diff --git a/src/modules/HowToSubmit/HowToSubmit.module.scss b/src/modules/HowToSubmit/HowToSubmit.module.scss index 379717c..6d25187 100644 --- a/src/modules/HowToSubmit/HowToSubmit.module.scss +++ b/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; } diff --git a/src/modules/Profile/Profile.jsx b/src/modules/Profile/Profile.jsx index 07fc80f..2fb8407 100644 --- a/src/modules/Profile/Profile.jsx +++ b/src/modules/Profile/Profile.jsx @@ -71,7 +71,9 @@ const ProfileContent = ({
Ranking
-
+
{categoryPosition} diff --git a/src/modules/Profile/Profile.module.scss b/src/modules/Profile/Profile.module.scss index 326e39a..711a4d5 100644 --- a/src/modules/Profile/Profile.module.scss +++ b/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; +} diff --git a/src/modules/Submit/Submit.module.scss b/src/modules/Submit/Submit.module.scss index 842f388..960254f 100644 --- a/src/modules/Submit/Submit.module.scss +++ b/src/modules/Submit/Submit.module.scss @@ -122,8 +122,9 @@ } } - input::placeholder { - color: $headline-color; + input::placeholder, + textarea::placeholder { + color: #939ba1; } .imgInfo { diff --git a/src/modules/Submit/Submit.reducer.js b/src/modules/Submit/Submit.reducer.js index e52176b..0a9da44 100644 --- a/src/modules/Submit/Submit.reducer.js +++ b/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, diff --git a/src/modules/TransactionStatus/TransactionStatus.container.js b/src/modules/TransactionStatus/TransactionStatus.container.js index ded9507..271212d 100644 --- a/src/modules/TransactionStatus/TransactionStatus.container.js +++ b/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 => ({ diff --git a/src/modules/TransactionStatus/TransactionStatus.recuder.js b/src/modules/TransactionStatus/TransactionStatus.reducer.js similarity index 98% rename from src/modules/TransactionStatus/TransactionStatus.recuder.js rename to src/modules/TransactionStatus/TransactionStatus.reducer.js index ca4e355..30c0615 100644 --- a/src/modules/TransactionStatus/TransactionStatus.recuder.js +++ b/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' diff --git a/src/modules/Vote/Vote.jsx b/src/modules/Vote/Vote.jsx index 9da83ae..b400428 100644 --- a/src/modules/Vote/Vote.jsx +++ b/src/modules/Vote/Vote.jsx @@ -106,132 +106,137 @@ class Vote extends Component { > {!learnMoreUpVote && !learnMoreDownVote && ( <> -
- - -
-
-
- - {dapp.name} -
-
-
- - SNT - {currentSNTamount.toLocaleString()} - - {isUpvote && - sntValue > 0 && - afterVoteRating !== null && - afterVoteRating > 0 && ( - - {`${afterVoteRating.toLocaleString()} ↑`} - - )} - {!isUpvote && - sntValue > 0 && - afterVoteRating !== null && - afterVoteRating > 0 && ( - - {`${afterVoteRating.toLocaleString()} ↓`} - - )} -
-
- - {getCategoryName(dapp.category)} - {`${getCategoryName(dapp.category)} №${catPosition}`} - - {isUpvote && - sntValue > 0 && - afterVoteCategoryPosition !== null && - afterVoteCategoryPosition !== catPosition && ( - - {`№${afterVoteCategoryPosition} ↑`} - - )} - {!isUpvote && - sntValue > 0 && - afterVoteCategoryPosition !== null && - afterVoteCategoryPosition !== catPosition && ( - - {`№${afterVoteCategoryPosition} ↓`} - - )} -
-
- {!isUpvote && ( -
+
+
- )} - {isUpvote && ( -
+
+
+
+ + {dapp.name}
- )} - {isUpvote && ( -

- SNT you spend to upvote is locked in the contract and - contributes directly to {dapp.name}'s ranking.{' '} - Learn more↗ -

- )} - {!isUpvote && ( -

- 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.{' '} - Learn more↗ -

- )} -
+
+
+ + SNT + {currentSNTamount.toLocaleString()} + + {isUpvote && + sntValue > 0 && + afterVoteRating !== null && + afterVoteRating > 0 && ( + + {`${afterVoteRating.toLocaleString()} ↑`} + + )} + {!isUpvote && + sntValue > 0 && + afterVoteRating !== null && + afterVoteRating > 0 && ( + + {`${afterVoteRating.toLocaleString()} ↓`} + + )} +
+
+ + {getCategoryName(dapp.category)} + {`${getCategoryName(dapp.category)} №${catPosition}`} + + {isUpvote && + sntValue > 0 && + afterVoteCategoryPosition !== null && + afterVoteCategoryPosition !== catPosition && ( + + {`№${afterVoteCategoryPosition} ↑`} + + )} + {!isUpvote && + sntValue > 0 && + afterVoteCategoryPosition !== null && + afterVoteCategoryPosition !== catPosition && ( + + {`№${afterVoteCategoryPosition} ↓`} + + )} +
+
+ {!isUpvote && ( +
+ {sntValue} +
+ )} + {isUpvote && ( +
+ +
+ )} + {isUpvote && ( +

+ SNT you spend to upvote is locked in the contract and + contributes directly to {dapp.name}'s ranking.{' '} + Learn more↗ +

+ )} + {!isUpvote && ( +

+ 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.{' '} + Learn more↗ +

+ )} +
-
- -
+
+ +
+ )} {learnMoreUpVote && ( diff --git a/src/modules/Vote/Vote.module.scss b/src/modules/Vote/Vote.module.scss index cdcb923..6a7288e 100644 --- a/src/modules/Vote/Vote.module.scss +++ b/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 { diff --git a/src/modules/Vote/Vote.reducer.js b/src/modules/Vote/Vote.reducer.js index 4f9d02a..7ffdf79 100644 --- a/src/modules/Vote/Vote.reducer.js +++ b/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, diff --git a/src/modules/Withdraw/Withdraw.reducer.js b/src/modules/Withdraw/Withdraw.reducer.js index 29cfa87..56dee30 100644 --- a/src/modules/Withdraw/Withdraw.reducer.js +++ b/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'