LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

Feather icons added, use click to copy, scss added to fit in icon + Lora font.

Browse source
This commit is contained in:
Minesh Mitha 2018-10-08 20:51:09 +01:00
parent 3023b25eb2
commit 5f99629930
9 changed files with 63 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
client/scss/asset-display/_asset-display.scss
View file

@ -33,10 +33,20 @@
height: 90vh; height: 90vh;
} }
p.asset-description {
white-space: pre-line; .asset-information-wrap {
font-size: 14px; max-width: 800px;
color: #2E2F31;
letter-spacing: 0; p.asset-description {
line-height: 18px; white-space: pre-line;
} font-size: 14px;
color: #2E2F31;
letter-spacing: 0;
line-height: 18px;
}
.asset-information {
width: 320px;
}
}

34
client/scss/click-to-copy/_click-to-copy.scss
View file

@ -1,14 +1,24 @@
.click-to-copy { .click-to-copy-wrap {
cursor: pointer; display: flex;
border: none; width: 100%;
padding: 0.5em; justify-content: space-between;
margin: 0; .click-to-copy {
color: black; cursor: pointer;
background-color: white; border: none;
width: calc(100% - 1em - 2px); padding: 0.5em;
font-size: 14px; margin: 0;
color: #2E2F31; color: black;
letter-spacing: -0.6px; background-color: white;
line-height: 20px; width: calc(100% - 1em - 2px);
font-size: 14px;
color: #2E2F31;
letter-spacing: -0.6px;
line-height: 20px;
max-width: 200px;
}
svg {
stroke: $brand-color;
}
} }

1
client/scss/label/_label.scss
View file

@ -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 {

4
client/scss/text/_text.scss
View file

@ -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 {

22
client/src/components/ClickToCopy/index.jsx
View file

@ -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,15 +19,18 @@ class ClickToCopy extends React.Component {
render () { render () {
const {id, value} = this.props; const {id, value} = this.props;
return ( return (
<input <div className='click-to-copy-wrap'>
id={id} <input
value={value} id={id}
onClick={this.copyToClipboard} value={value}
type='text' onClick={this.copyToClipboard}
className='click-to-copy' type='text'
readOnly className='click-to-copy'
spellCheck='false' readOnly
/> spellCheck='false'
/>
<Icon.Copy />
</div>
); );
} }
} }

1
client/src/containers/AssetInfo/view.jsx
View file

@ -125,7 +125,6 @@ class AssetInfo extends React.Component {
} }
/> />
</div> </div>
); );
} }

5
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

2
server/render/renderFullPage.js
View file

@ -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>
`; `;