Feather icons added, use click to copy, scss added to fit in icon + Lora font.
This commit is contained in:
Minesh Mitha
parent
3023b25eb2
commit
5f99629930
9 changed files with 63 additions and 31 deletions
|
|
@ -33,10 +33,20 @@
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
p.asset-description {
|
|
||||||
|
.asset-information-wrap {
|
||||||
|
max-width: 800px;
|
||||||
|
|
||||||
|
p.asset-description {
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #2E2F31;
|
color: #2E2F31;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-information {
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
.click-to-copy {
|
.click-to-copy-wrap {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
.click-to-copy {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
|
|
@ -10,5 +14,11 @@
|
||||||
color: #2E2F31;
|
color: #2E2F31;
|
||||||
letter-spacing: -0.6px;
|
letter-spacing: -0.6px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
stroke: $brand-color;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
padding-top: $thin-padding;
|
padding-top: $thin-padding;
|
||||||
padding-bottom: $thin-padding;
|
padding-bottom: $thin-padding;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-radio {
|
.label-radio {
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,8 @@ h3 {
|
||||||
}
|
}
|
||||||
|
|
||||||
p, body, button, input, textarea, label, select, option {
|
p, body, button, input, textarea, label, select, option {
|
||||||
font-family: 'Lekton', monospace;
|
font-family: 'Lora', serif;
|
||||||
font-size: $text-large;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text--extra-large {
|
.text--extra-large {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import * as Icon from 'react-feather';
|
||||||
|
|
||||||
class ClickToCopy extends React.Component {
|
class ClickToCopy extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
@ -18,6 +19,7 @@ class ClickToCopy extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
const {id, value} = this.props;
|
const {id, value} = this.props;
|
||||||
return (
|
return (
|
||||||
|
<div className='click-to-copy-wrap'>
|
||||||
<input
|
<input
|
||||||
id={id}
|
id={id}
|
||||||
value={value}
|
value={value}
|
||||||
|
|
@ -27,6 +29,8 @@ class ClickToCopy extends React.Component {
|
||||||
readOnly
|
readOnly
|
||||||
spellCheck='false'
|
spellCheck='false'
|
||||||
/>
|
/>
|
||||||
|
<Icon.Copy />
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -125,7 +125,6 @@ class AssetInfo extends React.Component {
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -11090,6 +11090,11 @@
|
||||||
"prop-types": "15.6.2"
|
"prop-types": "15.6.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-feather": {
|
||||||
|
"version": "1.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.3.tgz",
|
||||||
|
"integrity": "sha512-5+KHu7zp5qvc+zq6N0XjeZDhufl3NVEaQyocg486lXZ+ZwW9z66GO+HXABoZ74OCLjsqhBl48j4BS17VRfyjTQ=="
|
||||||
|
},
|
||||||
"react-ga": {
|
"react-ga": {
|
||||||
"version": "2.5.3",
|
"version": "2.5.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.5.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,7 @@
|
||||||
"prop-types": "^15.6.2",
|
"prop-types": "^15.6.2",
|
||||||
"react": "^16.4.2",
|
"react": "^16.4.2",
|
||||||
"react-dom": "^16.4.2",
|
"react-dom": "^16.4.2",
|
||||||
|
"react-feather": "^1.1.3",
|
||||||
"react-ga": "^2.5.3",
|
"react-ga": "^2.5.3",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ module.exports = (helmet, html, preloadedState) => {
|
||||||
<link rel="stylesheet" href="/bundle/style.css" type="text/css">
|
<link rel="stylesheet" href="/bundle/style.css" type="text/css">
|
||||||
<!--google font-->
|
<!--google font-->
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="react-app">${html}</div>
|
<div id="react-app">${html}</div>
|
||||||
|
|
@ -22,6 +23,7 @@ module.exports = (helmet, html, preloadedState) => {
|
||||||
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\\u003c')}
|
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\\u003c')}
|
||||||
</script>
|
</script>
|
||||||
<script src="/bundle/bundle.js"></script>
|
<script src="/bundle/bundle.js"></script>
|
||||||
|
<script src="/assets/js/feather.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue