Update styling

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 <div className="tempalink">
-      <div className="long-url">
+      <div className="qr">
-        <input
+        <QRCode text={url} />
-          onClick={this.onClick}
-          readOnly
-          type="text"
-          value={url} />
       </div>
+      <div className="urls">
+        <div className="long-url">
+          <input
+            onClick={this.onClick}
+            readOnly
+            type="text"
+            value={url} />
+        </div>
 
-      <div className="short-url">
+        <div className="short-url">
-        or, for short: <span>{shortUrl}</span>
+          or, for short: <span>{shortUrl}</span>
+        </div>
       </div>
-
-      <QRCode text={url} />
     </div>
   }
 

src/components/UploadPage.js

@@ -50,7 +50,7 @@ export default class UploadPage extends React.Component {
 
             <h1>FilePizza</h1>
             <p>Free peer-to-peer file transfers in your browser.</p>
-            <p>We never store anything. Files only served fresh.</p>
+            <small className="notice">We never store anything. Files only served fresh.</small>
             <p>
               <label className="select-file-label">
                 <input type="file" onChange={this.handleSelectedFile} required/>
@@ -79,7 +79,7 @@ export default class UploadPage extends React.Component {
             size={this.state.fileSize} />
 
           <p>Send someone this link to download.</p>
-          <p>This link will work as long as this page is open.</p>
+          <small className="notice">This link will work as long as this page is open.</small>
           <p>Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)}</p>
           <Tempalink token={this.state.token} shortToken={this.state.shortToken} />
 

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
+        height: 100px
-        padding-bottom: 60px
+        width: 100px
+        display: block
     }
 }