UX cleanup for link entry

src/assets/stylesheets/link.scss

@@ -10,6 +10,17 @@ body {
   padding: 0;
   background-color: white;
   color: black;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow-y: hidden;
+}
+
+button {
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
+  -webkit-tap-highlight-color: transparent;
 }
 
 a {
@@ -112,6 +123,7 @@ a {
 
 :local(.header) {
   text-align: center;
+  white-space: pre-wrap;
 }
 
 :local(.footer) {

src/assets/translations.data.json

@@ -76,7 +76,7 @@
     "link.link_page_header_entry": "Enter your code:",
     "link.link_page_header_headset": "Enter headset link code:",
     "link.linking_a_headset": "Linking a Headset?",
-    "link.try_again": "We couldn't find that code. Please try again.",
+    "link.try_again": "We couldn't find that code.\nPlease try again.",
     "help.report_issue": "Report an Issue",
     "scene.logo_tagline": "A new way to get together",
     "scene.create_button": "Create a room with this scene",

src/react-components/link-root.js

@@ -14,6 +14,7 @@ const MAX_LETTERS = 4;
 
 addLocaleData([...en]);
 disableiOSZoom();
+const hasTouchEvents = "ontouchstart" in document.documentElement;
 
 class LinkRoot extends Component {
   static propTypes = {
@@ -196,14 +197,20 @@ class LinkRoot extends Component {
                   disabled={this.state.entered.length === this.maxAllowedChars()}
                   key={`char_${i}`}
                   className={styles.keypadButton}
-                  onClick={() => this.addToEntry(d)}
+                  onClick={() => {
+                    if (!hasTouchEvents) this.addToEntry(d);
+                  }}
+                  onTouchStart={() => this.addToEntry(d)}
                 >
                   {d}
                 </button>
               ))}
               <button
                 className={classNames(styles.keypadButton, styles.keypadToggleMode)}
-                onClick={() => this.toggleMode()}
+                onTouchStart={() => this.toggleMode()}
+                onClick={() => {
+                  if (!hasTouchEvents) this.toggleMode();
+                }}
               >
                 {this.state.isAlphaMode ? "123" : "ABC"}
               </button>
@@ -211,7 +218,10 @@ class LinkRoot extends Component {
                 <button
                   disabled={this.state.entered.length === this.maxAllowedChars()}
                   className={classNames(styles.keypadButton, styles.keypadZeroButton)}
-                  onClick={() => this.addToEntry(0)}
+                  onTouchStart={() => this.addToEntry(0)}
+                  onClick={() => {
+                    if (!hasTouchEvents) this.addToEntry(0);
+                  }}
                 >
                   0
                 </button>
@@ -219,23 +229,27 @@ class LinkRoot extends Component {
               <button
                 disabled={this.state.entered.length === 0 || this.state.entered.length === this.maxAllowedChars()}
                 className={classNames(styles.keypadButton, styles.keypadBackspace)}
-                onClick={() => this.removeChar()}
+                onTouchStart={() => this.removeChar()}
+                onClick={() => {
+                  if (!hasTouchEvents) this.removeChar();
+                }}
               >
                 ⌫
               </button>
             </div>
 
             <div className={styles.footer}>
-              {!this.state.isAlphaMode && (
-                <div className={styles.linkHeadsetFooterLink}>
-                  <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} />
-                  <span>
-                    <a href="#" onClick={() => this.toggleMode()}>
-                      <FormattedMessage id="link.linking_a_headset" />
-                    </a>
-                  </span>
-                </div>
-              )}
+              <div
+                className={styles.linkHeadsetFooterLink}
+                style={{ visibility: this.state.isAlphaMode ? "hidden" : "visible" }}
+              >
+                <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} />
+                <span>
+                  <a href="#" onClick={() => this.toggleMode()}>
+                    <FormattedMessage id="link.linking_a_headset" />
+                  </a>
+                </span>
+              </div>
             </div>
           </div>
         </div>