diff --git a/src/common/components/DappListItem/DappListItem.module.scss b/src/common/components/DappListItem/DappListItem.module.scss
index 8028825..33f95b7 100644
--- a/src/common/components/DappListItem/DappListItem.module.scss
+++ b/src/common/components/DappListItem/DappListItem.module.scss
@@ -4,6 +4,7 @@
font-family: $font;
background: $background;
display: flex;
+ height: calculateRem(145);
margin: 0 calculateRem(16) calculateRem(11) calculateRem(16);
position: relative;
}
diff --git a/src/common/components/Modal/Modal.jsx b/src/common/components/Modal/Modal.jsx
index 2fd0c96..d9f57b5 100644
--- a/src/common/components/Modal/Modal.jsx
+++ b/src/common/components/Modal/Modal.jsx
@@ -3,7 +3,14 @@ import PropTypes from 'prop-types'
import styles from './Modal.module.scss'
const Modal = props => {
- const { visible, children, modalClassName, contentClassName } = props
+ const {
+ visible,
+ children,
+ modalClassName,
+ windowClassName,
+ contentClassName,
+ onClickClose,
+ } = props
return (
{
visible ? styles.active : ''
}`}
>
-
-
+
+
+
+ +
+
{visible && children}
@@ -21,17 +30,20 @@ const Modal = props => {
Modal.defaultProps = {
modalClassName: '',
+ windowClassName: '',
contentClassName: '',
}
Modal.propTypes = {
visible: PropTypes.bool.isRequired,
modalClassName: PropTypes.string,
+ windowClassName: PropTypes.string,
contentClassName: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]).isRequired,
+ onClickClose: PropTypes.func.isRequired,
}
export default Modal
diff --git a/src/common/components/Modal/Modal.module.scss b/src/common/components/Modal/Modal.module.scss
index fb82459..d96f136 100644
--- a/src/common/components/Modal/Modal.module.scss
+++ b/src/common/components/Modal/Modal.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/variables';
+
.wrapper {
width: 100%;
height: 100%;
@@ -9,22 +11,40 @@
top: 0;
pointer-events: none;
opacity: 0;
- background: rgba(0, 0, 0, 0.5);
+ background: rgba(255, 255, 255, 0.5);
z-index: 4096;
transition-property: opacity;
transition-duration: 0.25s;
.window {
- width: 800px;
- max-height: 90%;
+ width: 100%;
line-height: normal;
position: relative;
- background: #f3f3f3;
- box-shadow: 0px 0px 17px 0px #bbb;
+ border-radius: 16px;
+ background: #fff;
+ box-shadow: 0px 2px 16px rgba(0, 9, 26, 0.12);
overflow-x: hidden;
overflow-y: auto;
}
+
+ .close {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ right: 8px;
+ top: 8px;
+ color: #fff;
+ font-size: 22px;
+ font-weight: 700;
+ border-radius: 50%;
+ background: #939ba1;
+ cursor: pointer;
+ transform: rotate(45deg);
+ }
}
.wrapper.active {
@@ -32,22 +52,15 @@
opacity: 1;
}
-// .PopupWindowWrapper > .PopupWindow > .Close {
-// width:16px; height:16px; line-height:16px;
-// position:absolute;
-// right:0; top:0;
-// font-size:24px;
-// padding:8px;
-// transform:rotate(45deg);
-// z-index:1;
-// cursor:pointer;
-// }
+@media (min-width: $desktop) {
+ .wrapper {
+ .window {
+ width: 400px;
+ max-height: 90%;
+ }
-// .PopupWindowWrapper {
-// background:transparent;
-// }
-
-// .PopupWindowWrapper > .PopupWindow {
-// background:transparent;
-// box-shadow:none;
-// }
+ // .close {
+ // display:flex;
+ // }
+ }
+}
diff --git a/src/common/redux/reducers.js b/src/common/redux/reducers.js
index 3d6a30f..2defed0 100644
--- a/src/common/redux/reducers.js
+++ b/src/common/redux/reducers.js
@@ -1,13 +1,13 @@
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'
import dapps from '../../modules/Dapps/Dapps.reducer'
-import selectedCategory from '../../modules/CategorySelector/CategorySelector.reducer'
+// import selectedCategory from '../../modules/CategorySelector/CategorySelector.reducer'
import vote from '../../modules/Vote/Vote.reducer'
export default history =>
combineReducers({
router: connectRouter(history),
dapps,
- selectedCategory,
+ // selectedCategory,
vote,
})
diff --git a/src/modules/App/Router.jsx b/src/modules/App/Router.jsx
index 6dbe35f..bfcdd47 100644
--- a/src/modules/App/Router.jsx
+++ b/src/modules/App/Router.jsx
@@ -9,7 +9,7 @@ import Vote from '../Vote'
export default () => [
-
+
,
diff --git a/src/modules/Categories/Categories.container.js b/src/modules/Categories/Categories.container.js
index 0bc5191..0b63631 100644
--- a/src/modules/Categories/Categories.container.js
+++ b/src/modules/Categories/Categories.container.js
@@ -1,12 +1,12 @@
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
-import { selectCategory } from '../CategorySelector/CategorySelector.reducer'
+// import { selectCategory } from '../CategorySelector/CategorySelector.reducer'
import Categories from './Categories'
const mapDispatchToProps = dispatch => ({
select: category => {
- dispatch(push('/categories'))
- dispatch(selectCategory(category))
+ dispatch(push(`/categories/${category}`))
+ // dispatch(selectCategory(category))
},
})
diff --git a/src/modules/CategorySelector/CategorySelector.container.js b/src/modules/CategorySelector/CategorySelector.container.js
index 1beba8c..eb26ed6 100644
--- a/src/modules/CategorySelector/CategorySelector.container.js
+++ b/src/modules/CategorySelector/CategorySelector.container.js
@@ -1,13 +1,17 @@
import { connect } from 'react-redux'
+import { push } from 'connected-react-router'
import CategorySelector from './CategorySelector'
-import { selectCategory } from './CategorySelector.reducer'
+// import { selectCategory } from './CategorySelector.reducer'
-const mapStateToProps = state => ({ category: state.selectedCategory })
+// const mapStateToProps = state => ({ category: state.selectedCategory })
const mapDispatchToProps = dispatch => ({
- select: category => dispatch(selectCategory(category)),
+ select: category => {
+ dispatch(push(`/categories/${category}`))
+ //dispatch(selectCategory(category))
+ },
})
export default connect(
- mapStateToProps,
+ null,
mapDispatchToProps,
)(CategorySelector)
diff --git a/src/modules/CategorySelector/CategorySelector.reducer.js b/src/modules/CategorySelector/CategorySelector.reducer.js
index fb9e97b..0e9dc60 100644
--- a/src/modules/CategorySelector/CategorySelector.reducer.js
+++ b/src/modules/CategorySelector/CategorySelector.reducer.js
@@ -1,19 +1,19 @@
-import reducerUtil from '../../common/utils/reducer'
-import { EXCHANGES } from '../../common/data/categories'
+// import reducerUtil from '../../common/utils/reducer'
+// import { EXCHANGES } from '../../common/data/categories'
-const UPDATE_CATEGORY = 'UPDATE_CATEGORY'
+// const UPDATE_CATEGORY = 'UPDATE_CATEGORY'
-export const selectCategory = category => ({
- type: UPDATE_CATEGORY,
- payload: category,
-})
+// export const selectCategory = category => ({
+// type: UPDATE_CATEGORY,
+// payload: category,
+// })
-const initialState = EXCHANGES
+// const initialState = EXCHANGES
-const categoryChange = (_, category) => category
+// const categoryChange = (_, category) => category
-const map = {
- [UPDATE_CATEGORY]: categoryChange,
-}
+// const map = {
+// [UPDATE_CATEGORY]: categoryChange,
+// }
-export default reducerUtil(map, initialState)
+// export default reducerUtil(map, initialState)
diff --git a/src/modules/Filtered/Filtered.container.js b/src/modules/Filtered/Filtered.container.js
index 76d3bb0..8f04fd3 100644
--- a/src/modules/Filtered/Filtered.container.js
+++ b/src/modules/Filtered/Filtered.container.js
@@ -1,9 +1,10 @@
import { connect } from 'react-redux'
import Filtered from './Filtered'
-import filteredDapps from './Filtered.selector'
+// import filteredDapps from './Filtered.selector'
+// dapps: filteredDapps(state),
const mapStateToProps = state => ({
- dapps: filteredDapps(state),
+ dapps: state.dapps,
})
export default connect(mapStateToProps)(Filtered)
diff --git a/src/modules/Filtered/Filtered.jsx b/src/modules/Filtered/Filtered.jsx
index 5863ef0..5552cb1 100644
--- a/src/modules/Filtered/Filtered.jsx
+++ b/src/modules/Filtered/Filtered.jsx
@@ -1,24 +1,40 @@
import React from 'react'
+import PropTypes from 'prop-types'
import { DappListModel } from '../../common/utils/models'
import CategorySelector from '../CategorySelector'
import DappList from '../../common/components/DappList'
import styles from './Filtered.module.scss'
const Filtered = props => {
- const { dapps } = props
+ const { dapps, match } = props
+ const result =
+ match !== undefined
+ ? dapps.filter(dapp => dapp.category === match.params.id)
+ : dapps
return (
<>
-
+
-
+
>
)
}
+Filtered.defaultProps = {
+ match: undefined,
+}
+
Filtered.propTypes = {
dapps: DappListModel.isRequired,
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ id: PropTypes.node,
+ }).isRequired,
+ }),
}
export default Filtered
diff --git a/src/modules/Filtered/Filtered.selector.js b/src/modules/Filtered/Filtered.selector.js
index 9b375aa..6471ee5 100644
--- a/src/modules/Filtered/Filtered.selector.js
+++ b/src/modules/Filtered/Filtered.selector.js
@@ -1,10 +1,10 @@
-import { createSelector } from 'reselect'
+// import { createSelector } from 'reselect'
-const getCategory = state => state.selectedCategory
-const getDapps = state => state.dapps
+// const getCategory = state => state.selectedCategory
+// const getDapps = state => state.dapps
-export default createSelector(
- [getCategory, getDapps],
- (category, dapps) =>
- category ? dapps.filter(dapp => dapp.category === category) : dapps,
-)
+// export default createSelector(
+// [getCategory, getDapps],
+// (category, dapps) =>
+// category ? dapps.filter(dapp => dapp.category === category) : dapps,
+// )
diff --git a/src/modules/HighestRanked/HighestRanked.module.scss b/src/modules/HighestRanked/HighestRanked.module.scss
index 100f7d0..b71379d 100644
--- a/src/modules/HighestRanked/HighestRanked.module.scss
+++ b/src/modules/HighestRanked/HighestRanked.module.scss
@@ -18,7 +18,15 @@
@media (min-width: $desktop) {
grid-auto-flow: row;
- grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-columns: 1fr 1fr;
overflow-x: hidden;
}
+
+ @media (min-width: 970px) {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+
+ @media (min-width: 1300px) {
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ }
}
diff --git a/src/modules/Vote/Vote.container.js b/src/modules/Vote/Vote.container.js
index d22d48f..a2ac893 100644
--- a/src/modules/Vote/Vote.container.js
+++ b/src/modules/Vote/Vote.container.js
@@ -1,7 +1,13 @@
import { connect } from 'react-redux'
import Vote from './Vote'
+import { closeVoteAction } from './Vote.reducer'
const mapStateToProps = state => state.vote
-// const mapDispatchToProps = dispatch => ({})
+const mapDispatchToProps = dispatch => ({
+ onClickClose: () => dispatch(closeVoteAction()),
+})
-export default connect(mapStateToProps)(Vote)
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(Vote)
diff --git a/src/modules/Vote/Vote.jsx b/src/modules/Vote/Vote.jsx
index 32647f6..7d8b21a 100644
--- a/src/modules/Vote/Vote.jsx
+++ b/src/modules/Vote/Vote.jsx
@@ -29,12 +29,16 @@ class Vote extends Component {
}
handleChange(e) {
- this.setState({ sntValue: e.target.value })
+ const { value } = e.target
+ if (value !== '' && /^[1-9][0-9]*$/.test(value) === false) return
+ if (parseInt(value, 10) > 1571296) return
+
+ this.setState({ sntValue: value })
}
render() {
const { isUpvote, sntValue } = this.state
- const { visible } = this.props
+ const { visible, onClickClose } = this.props
// TODO: extract these to props
@@ -50,11 +54,16 @@ class Vote extends Component {
const currentSNTamount = 23456
const categoryPosition = 2
- const upvoteSNTcost = 12422
+ const upvoteSNTcost = currentSNTamount + parseInt(sntValue, 10)
const downvoteSNTcost = 3244
return (
-
+