diff --git a/src/components/Tempalink.js b/src/components/Tempalink.js index e7e4ad6..71bc39e 100644 --- a/src/components/Tempalink.js +++ b/src/components/Tempalink.js @@ -16,19 +16,22 @@ export default class Tempalink extends React.Component { var shortUrl = window.location.origin + '/download/' + this.props.shortToken return
-
- +
+
+
+
+ +
-
- or, for short: {shortUrl} +
+ or, for short: {shortUrl} +
- -
} diff --git a/src/components/UploadPage.js b/src/components/UploadPage.js index ca2cfeb..5f217a8 100644 --- a/src/components/UploadPage.js +++ b/src/components/UploadPage.js @@ -50,7 +50,7 @@ export default class UploadPage extends React.Component {

FilePizza

Free peer-to-peer file transfers in your browser.

-

We never store anything. Files only served fresh.

+ We never store anything. Files only served fresh.

Send someone this link to download.

-

This link will work as long as this page is open.

+ This link will work as long as this page is open.

Peers: {this.state.peers} · Up: {formatSize(this.state.speedUp)}

diff --git a/src/index.styl b/src/index.styl index 72d07b0..028639a 100644 --- a/src/index.styl +++ b/src/index.styl @@ -47,6 +47,17 @@ p { } } +small { + color: gray; + font: 12px/22px "Quicksand", sans-serif; + text-align: center; + margin: 0; + + &.notice { + margin: 0 0 10px; + } +} + .footer { width: 100% text-align: center @@ -163,39 +174,51 @@ p { .tempalink { display: flex - flex-direction: column + width: calc(100vw - 40px) + max-width: 1024px + margin 20px auto .long-url input { background: beige color: dark-gray border: 0 - margin: 20px 0 0 + margin: 0 font: 18px/1 monospace height: 60px padding: 20px text-align: center width: 100% + border-radius: 4px 4px 0 0 } .short-url { background: light-gray color: dark-gray - border: 0 - margin: 0 0 20px height: 40px padding: 10px 20px text-align: center width: 100% font: 14px/1 "Quicksand", sans-serif; + border-radius: 0 0 4px 4px span { font: 14px/1 monospace } } + .qr { + flex: none + padding-right: 40px + } + + .urls { + flex: auto + } + img { - margin: auto - padding-bottom: 60px + height: 100px + width: 100px + display: block } }