diff --git a/app/components/ens/nameLookup.js b/app/components/ens/nameLookup.js index 1a9f30a..b13da8c 100644 --- a/app/components/ens/nameLookup.js +++ b/app/components/ens/nameLookup.js @@ -10,6 +10,8 @@ import PublicResolver from 'Embark/contracts/PublicResolver'; import { hash } from 'eth-ens-namehash'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import RegisterSubDomain from '../ens/registerSubDomain'; +import StatusLogo from '../../ui/icons/components/StatusLogo' +import EnsLogo from '../../ui/icons/logos/ens.png'; const { getPrice } = ENSSubdomainRegistry.methods; const invalidSuffix = '0000000000000000000000000000000000000000' @@ -137,7 +139,11 @@ const InnerForm = ({ status, setStatus }) => ( - + + + + Ens Logo + {!status ?
diff --git a/app/reducers/accounts.js b/app/reducers/accounts.js index 7ae592c..db8e573 100644 --- a/app/reducers/accounts.js +++ b/app/reducers/accounts.js @@ -31,7 +31,7 @@ export default function(state = { loading: true, accounts: [] }, action) { } case types.ADD_TO_SNT_TOKEN_BALANCE: { const currentAccount = { ...getCurrentAccount({accounts: state}) } - currentAccount.SNTTokenBalance = Number(currentAccount.SNTTokenBalance) + Number(action.payload.amount) + currentAccount.SNTBalance = Number(currentAccount.SNTBalance) + Number(action.payload.amount) const accounts = [ ...state.accounts ] const idx = accounts.findIndex(a => a.address === currentAccount.address) accounts[idx] = currentAccount @@ -42,7 +42,7 @@ export default function(state = { loading: true, accounts: [] }, action) { } case types.SUBTRACT_FROM_SNT_TOKEN_BALANCE: { const currentAccount = { ...getCurrentAccount({accounts: state}) } - currentAccount.SNTTokenBalance = Number(currentAccount.SNTTokenBalance) - Number(action.payload.amount) + currentAccount.SNTBalance = Number(currentAccount.SNTBalance) - Number(action.payload.amount) const accounts = [ ...state.accounts ] const idx = accounts.findIndex(a => a.address === currentAccount.address) accounts[idx] = currentAccount diff --git a/app/ui/components/Card.js b/app/ui/components/Card.js index 71296f5..da8fea6 100644 --- a/app/ui/components/Card.js +++ b/app/ui/components/Card.js @@ -1,13 +1,19 @@ import styled from 'styled-components' -import { theme } from '../theme' +import { theme } from '../theme'; +import { media } from '../utils/media'; const StyledCard = styled.div` width: ${({ width }) => width || '282px'}; height: ${({ height }) => height || '322px'}; background: ${theme.contentBackground}; - border: 1px solid ${theme.contentBorder}; + border: ${({ border }) => border || `1px solid ${theme.contentBorder}`}; border-radius: 3px; + min-height: 30vh; + ${media.desktop`margin-top: 10%;`} + ${media.giant`margin-top: 10%;`} + ${media.tablet`margin-top: 50%;`} + ${media.phone`margin-top: 50%;`} ` export default StyledCard diff --git a/app/ui/icons/components/StatusLogo.js b/app/ui/icons/components/StatusLogo.js new file mode 100644 index 0000000..f77eee5 --- /dev/null +++ b/app/ui/icons/components/StatusLogo.js @@ -0,0 +1,12 @@ +import React from "react" + +const Status = props => ( + + + + + + +); + +export default Status; diff --git a/app/ui/icons/logos/ens.png b/app/ui/icons/logos/ens.png new file mode 100644 index 0000000..eb0b1ea Binary files /dev/null and b/app/ui/icons/logos/ens.png differ diff --git a/app/ui/utils/index.js b/app/ui/utils/index.js index 26ca5c0..0cea639 100644 --- a/app/ui/utils/index.js +++ b/app/ui/utils/index.js @@ -2,4 +2,5 @@ export { default as styles } from './styles'; export { default as url } from './url.js'; +export { default as media } from './media.js'; diff --git a/app/ui/utils/media.js b/app/ui/utils/media.js new file mode 100644 index 0000000..367f0a2 --- /dev/null +++ b/app/ui/utils/media.js @@ -0,0 +1,21 @@ +import { css } from 'styled-components' + +const sizes = { + giant: 3170, + desktop: 992, + tablet: 768, + phone: 414 +} + +// iterate through the sizes and create a media template +export const media = Object.keys(sizes).reduce((accumulator, label) => { + // use em in breakpoints to work properly cross-browser and support users + // changing their browsers font-size: https://zellwk.com/blog/media-query-units/ + const emSize = sizes[label] / 16 + accumulator[label] = (...args) => css` + @media (max-width: ${emSize}em) { + ${css(...args)} + } + ` + return accumulator +}, {})