From 5b17527d824774e96c29480019446b14010d56fd Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Wed, 13 Jun 2018 17:44:14 -0400 Subject: [PATCH] add status + ens logo assets add media queries to make somewhat mobile responsive --- app/components/ens/nameLookup.js | 8 +++++++- app/reducers/accounts.js | 4 ++-- app/ui/components/Card.js | 10 ++++++++-- app/ui/icons/components/StatusLogo.js | 12 ++++++++++++ app/ui/icons/logos/ens.png | Bin 0 -> 15197 bytes app/ui/utils/index.js | 1 + app/ui/utils/media.js | 21 +++++++++++++++++++++ 7 files changed, 51 insertions(+), 5 deletions(-) create mode 100644 app/ui/icons/components/StatusLogo.js create mode 100644 app/ui/icons/logos/ens.png create mode 100644 app/ui/utils/media.js 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 0000000000000000000000000000000000000000..eb0b1ea64ffc78acf0c58f2a1742638ee8147e93 GIT binary patch literal 15197 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 DDudK& literal 0 HcmV?d00001 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 +}, {})