From b70cc6f53321bb5b4f94fdf592f7d008dc1d217e Mon Sep 17 00:00:00 2001
From: Kaylee <34007889+KayleePop@users.noreply.github.com>
Date: Sat, 1 Jun 2019 18:21:53 -0500
Subject: [PATCH] Add QR code for tempalinks (#97)

* Add QR code of tempalink

* add padding to the bottom of the QR code

to ensure that there's space to scroll down far enough so the footer
isn't covering the QR code

* Fix spinner css

Use a rotating css background image instead of a separate element placed
behind

This allows flexbox to function correctly
---
 lib/components/Spinner.js   | 26 ++++++------------
 lib/components/Tempalink.js | 18 +++++++-----
 lib/index.styl              | 55 +++++++++++++++++++------------------
 package.json                |  1 +
 4 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/lib/components/Spinner.js b/lib/components/Spinner.js
index c606a41..485b4af 100644
--- a/lib/components/Spinner.js
+++ b/lib/components/Spinner.js
@@ -10,23 +10,15 @@ export default class Spinner extends React.Component {
     })
 
     return <div className={classes}>
-
-      <div className="spinner-content">
-
-        <img
-          alt={this.props.name || this.props.dir}
-          src={`/images/${this.props.dir}.png`}
-          className="spinner-image" />
-
-        {this.props.name === null ? null
-          : <div className="spinner-name">{this.props.name}</div>}
-        {this.props.size === null ? null
-          : <div className="spinner-size">{formatSize(this.props.size)}</div>}
-
-      </div>
-
-      <img src="/images/pizza.png" className="spinner-background" />
-
+      <img
+        alt={this.props.name || this.props.dir}
+        src={`/images/${this.props.dir}.png`}
+        className="spinner-image" />
+
+      {this.props.name === null ? null
+        : <div className="spinner-name">{this.props.name}</div>}
+      {this.props.size === null ? null
+        : <div className="spinner-size">{formatSize(this.props.size)}</div>}
     </div>
   }
 
diff --git a/lib/components/Tempalink.js b/lib/components/Tempalink.js
index 8ae9ef7..24a3644 100644
--- a/lib/components/Tempalink.js
+++ b/lib/components/Tempalink.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import QRCode from 'react-qr'
 
 export default class Tempalink extends React.Component {
   constructor() {
@@ -12,13 +13,16 @@ export default class Tempalink extends React.Component {
 
   render() {
     var url = window.location.origin + '/' + this.props.token
-    return <input
-      className="tempalink"
-      onClick={this.onClick}
-      readOnly
-      ref="input"
-      type="text"
-      value={url} />
+    return <div className="tempalink">
+      <input
+        onClick={this.onClick}
+        readOnly
+        ref="input"
+        type="text"
+        value={url} />
+
+        <QRCode text={url} />
+    </div>
   }
 
 }
diff --git a/lib/index.styl b/lib/index.styl
index f26319c..79d6bc9 100644
--- a/lib/index.styl
+++ b/lib/index.styl
@@ -82,10 +82,6 @@ p {
     }
 }
 
-.container {
-    height: 100vh
-}
-
 .page {
     display: flex
     flex-direction: column;
@@ -121,35 +117,32 @@ p {
 }
 
 .spinner {
-    position: relative
-    z-index: -1
     width: 300px
-    height: 300px
+    min-height: 300px
     margin: 0 auto 20px
 
     display: flex
+    flex-direction: column
     align-items: center
+    align-content: center
     justify-content: center
 
-    .spinner-background {
-        display: block
+    &:before {
+        background: url(/images/pizza.png) center center / 300px 300px no-repeat
+        content: ""
+        position: absolute
         width: 300px
         height: 300px
-        position: absolute
-        top: 0
-        left: 0
         transition: transform 1s
         z-index: -1
     }
 
-    &.spinner-animated .spinner-background {
+    &.spinner-animated:before {
         animation: rotate 5s infinite linear
     }
 
     .spinner-image {
-        display: block
-        width: 150px
-        margin: 0 auto
+        width: 50%
     }
 
     .spinner-name {
@@ -160,8 +153,6 @@ p {
         text-overflow: ellipsis
         white-space: nowrap
         margin-top: 10px
-        margin: 0 auto
-        width: 220px
     }
 
     .spinner-size {
@@ -175,15 +166,25 @@ p {
 }
 
 .tempalink {
-    background: beige
-    color: dark-gray
-    border: 0
-    margin: 20px 0
-    font: 18px/1 monospace
-    height: 60px
-    padding: 20px
-    text-align: center
-    width: 100%
+    display: flex
+    flex-direction: column
+
+    input {
+        background: beige
+        color: dark-gray
+        border: 0
+        margin: 20px 0
+        font: 18px/1 monospace
+        height: 60px
+        padding: 20px
+        text-align: center
+        width: 100%
+    }
+
+    img {
+        margin: auto
+        padding-bottom: 60px
+    }
 }
 
 .data {
diff --git a/package.json b/package.json
index 23e7bdf..864badb 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "react": "^0.13.0",
     "react-frozenhead": "^0.3.0",
     "react-google-analytics": "^0.2.0",
+    "react-qr": "0.0.2",
     "react-router": "^0.13.1",
     "socket.io": "^1.3.5",
     "socket.io-client": "^1.3.5",