add status + ens logo assets
add media queries to make somewhat mobile responsive
This commit is contained in:
Barry Gitarts
parent
c5bf75d171
commit
5b17527d82
|
|
@ -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
|
||||
}) => (
|
||||
<Card style={cardStyle}>
|
||||
<Card border="None" width="100%" height="auto">
|
||||
<span style={{ display: 'flex', justifyContent: 'space-evenly', marginBottom: '10px' }}>
|
||||
<StatusLogo />
|
||||
<img style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/>
|
||||
</span>
|
||||
{!status
|
||||
? <form onSubmit={handleSubmit} style={{ marginTop: '3em' }}>
|
||||
<Field label="Enter Domain or Status Name" wide>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import React from "react"
|
||||
|
||||
const Status = props => (
|
||||
<svg width="330" height="124" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path d="M72.458 61.429c-7.431.427-12.088-1.299-19.52-.871a31.245 31.245 0 0 0-5.47.796C48.565 47.65 58.292 35.662 71.519 34.9c8.117-.467 16.23 4.53 16.67 12.642.433 7.973-5.664 13.307-15.73 13.886M52.503 89.46c-7.776.438-15.547-4.24-15.969-11.831-.415-7.462 5.427-12.454 15.07-12.996 7.118-.4 11.58 1.216 18.698.815a30.589 30.589 0 0 0 5.24-.745C74.493 77.528 65.175 88.748 52.503 89.46M62 .181C27.758.18 0 27.857 0 62s27.758 61.82 62 61.82c34.242 0 62-27.678 62-61.82C124 27.858 96.242.18 62 .18" fill="#4360DF" />
|
||||
<path d="M152 71.11h9.464c0 1.389.452 2.386 1.356 2.991.905.605 2.066.908 3.484.908 1.172 0 2.132-.198 2.883-.596.75-.398 1.125-1.05 1.125-1.958 0-.536-.16-.976-.478-1.318-.319-.342-.807-.648-1.465-.916a34.317 34.317 0 0 0-2.517-.888l-3.71-1.18a61.345 61.345 0 0 1-3.653-1.304c-1.14-.45-2.142-1.012-3.005-1.683a7.086 7.086 0 0 1-2.02-2.453c-.483-.964-.724-2.159-.724-3.584 0-1.636.319-3.05.955-4.246a8.143 8.143 0 0 1 2.683-2.956c1.15-.776 2.528-1.358 4.13-1.745 1.604-.388 3.371-.582 5.303-.582 2.364 0 4.398.272 6.104.817 1.705.546 3.103 1.29 4.193 2.233 1.088.944 1.895 2.055 2.42 3.334.524 1.279.786 2.652.786 4.12h-9.526c0-1.28-.324-2.275-.972-2.988-.647-.713-1.628-1.07-2.943-1.07-1.007 0-1.87.226-2.59.677-.72.45-1.079 1.127-1.079 2.028 0 .605.17 1.09.51 1.454.34.364.839.693 1.497.984.66.292 1.472.595 2.44.907l3.326 1.076c1.355.356 2.619.75 3.79 1.185 1.17.435 2.203.964 3.096 1.586a6.936 6.936 0 0 1 2.127 2.34c.524.938.786 2.129.786 3.57 0 1.903-.37 3.523-1.11 4.861a9.342 9.342 0 0 1-2.975 3.267c-1.243.84-2.687 1.443-4.331 1.808-1.644.365-3.37.547-5.179.547-4.5 0-7.99-.959-10.466-2.877-2.477-1.918-3.715-4.702-3.715-8.35m28.768-12.938V50.86h4.7v-9.195h9.554v9.195h6.837v7.312h-6.837v11.015c0 1.144.102 2.054.305 2.73.203.676.493 1.207.87 1.591a2.64 2.64 0 0 0 1.374.749 8.744 8.744 0 0 0 1.816.171c.406 0 .926-.015 1.557-.047.63-.03 1.18-.088 1.648-.172v7.62a36.13 36.13 0 0 1-2.671.349c-1.068.106-2.325.159-3.77.159a26.9 26.9 0 0 1-3.548-.25 8.077 8.077 0 0 1-3.46-1.32c-1.062-.71-1.94-1.804-2.633-3.278-.695-1.475-1.042-3.5-1.042-6.073V58.171h-4.7zm33.723 8.773c0 1.073.185 2.099.554 3.078.368.978.875 1.82 1.517 2.525a7.436 7.436 0 0 0 2.323 1.705c.906.432 1.918.647 3.035.647 1.116 0 2.134-.215 3.05-.647.918-.432 1.697-1 2.34-1.705.643-.704 1.148-1.54 1.517-2.51a8.614 8.614 0 0 0 .554-3.093 8.273 8.273 0 0 0-.554-3.03 8.493 8.493 0 0 0-1.517-2.526 6.915 6.915 0 0 0-2.323-1.736c-.907-.42-1.93-.631-3.067-.631-1.117 0-2.129.21-3.035.63a6.92 6.92 0 0 0-2.323 1.737 8.5 8.5 0 0 0-1.517 2.526 8.272 8.272 0 0 0-.554 3.03m-9.915 0c0-2.336.376-4.504 1.129-6.503.752-2 1.8-3.72 3.147-5.161a15.203 15.203 0 0 1 4.72-3.425c1.802-.842 3.752-1.263 5.851-1.263 2.339 0 4.368.495 6.085 1.483 1.718.99 3.009 2.242 3.873 3.757v-4.451h9.915v31.158h-9.915V78.15c-.78 1.43-2.035 2.651-3.762 3.661-1.728 1.01-3.794 1.516-6.196 1.516-2.077 0-4.022-.421-5.834-1.263a15.017 15.017 0 0 1-4.737-3.441c-1.346-1.452-2.395-3.177-3.147-5.177-.753-1.999-1.129-4.167-1.129-6.503m36.704-8.773v-7.31h4.7v-9.195h9.554v9.195h6.837v7.312h-6.837v11.015c0 1.144.102 2.054.305 2.73.203.676.493 1.207.87 1.591a2.64 2.64 0 0 0 1.374.749 8.72 8.72 0 0 0 1.816.171c.406 0 .926-.015 1.557-.047.63-.03 1.18-.088 1.648-.172v7.62a36.13 36.13 0 0 1-2.671.349c-1.068.106-2.325.159-3.77.159a26.9 26.9 0 0 1-3.548-.25 8.077 8.077 0 0 1-3.46-1.32c-1.062-.71-1.94-1.804-2.633-3.278-.695-1.475-1.042-3.5-1.042-6.073V58.171h-4.7zm25.792 10.802v-18.38h9.723v15.872c0 2.217.392 4.02 1.177 5.411.784 1.39 2.188 2.086 4.212 2.086 2.024 0 3.517-.706 4.477-2.118.96-1.411 1.44-3.319 1.44-5.724V50.592h9.723v30.96h-9.723v-4.423c-.846 1.631-2.137 2.907-3.872 3.827-1.734.92-3.81 1.38-6.226 1.38-2.124 0-3.867-.335-5.231-1.004-1.364-.669-2.473-1.515-3.327-2.54-.978-1.193-1.618-2.573-1.92-4.14-.302-1.57-.453-3.462-.453-5.679m34.72 2.137h9.464c0 1.389.452 2.386 1.356 2.991.904.605 2.066.908 3.484.908 1.172 0 2.132-.198 2.882-.596.75-.398 1.126-1.05 1.126-1.958 0-.536-.16-.976-.478-1.318-.319-.342-.807-.648-1.465-.916a34.393 34.393 0 0 0-2.517-.888l-3.71-1.18a61.434 61.434 0 0 1-3.653-1.304c-1.14-.45-2.143-1.012-3.005-1.683a7.083 7.083 0 0 1-2.02-2.453c-.483-.964-.724-2.159-.724-3.584 0-1.636.318-3.05.955-4.246a8.143 8.143 0 0 1 2.683-2.956c1.15-.776 2.528-1.358 4.13-1.745 1.603-.388 3.37-.582 5.303-.582 2.363 0 4.398.272 6.104.817 1.705.546 3.103 1.29 4.193 2.233 1.088.944 1.895 2.055 2.42 3.334.523 1.279.786 2.652.786 4.12h-9.526c0-1.28-.324-2.275-.972-2.988-.647-.713-1.629-1.07-2.944-1.07-1.007 0-1.87.226-2.59.677-.719.45-1.078 1.127-1.078 2.028 0 .605.17 1.09.51 1.454.34.364.838.693 1.497.984.66.292 1.471.595 2.439.907l3.327 1.076a40.42 40.42 0 0 1 3.79 1.185c1.17.435 2.203.964 3.096 1.586a6.94 6.94 0 0 1 2.127 2.34c.524.938.786 2.129.786 3.57 0 1.903-.37 3.523-1.11 4.861a9.335 9.335 0 0 1-2.975 3.267c-1.243.84-2.687 1.443-4.331 1.808-1.645.365-3.37.547-5.179.547-4.5 0-7.99-.959-10.466-2.877-2.477-1.918-3.715-4.702-3.715-8.35" fill="#000" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default Status;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -2,4 +2,5 @@
|
|||
|
||||
export { default as styles } from './styles';
|
||||
export { default as url } from './url.js';
|
||||
export { default as media } from './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
|
||||
}, {})
|
||||
Loading…
Reference in New Issue