Re-add Send to Phone Feature

Author: consindo

js/views/pin.jsx

@@ -126,21 +126,20 @@ class Pin extends React.Component {
     if (this.state.hide) {
       className += ' hide'
     }
-    var desktopOut = ""
+    var desktopOut = ''
     if (!this.state.emailSent) {     
       desktopOut = <div>
             <h3>Email yourself a link to Transit!</h3>
             <form onSubmit={this.sendEmail}>
               <input value={this.state.email} type="email" placeholder="Email Address" onChange={this.triggerChange}/><br/>
-              <button className="primary" type="submit">Send Link</button>
+              <button className="primary" type="submit">Send Link</button> <button onClick={this.triggerClose}>Cancel</button>
             </form>
           </div>
     } else {
-      console.log("done")
       desktopOut = <div>
-            <h3>Thanks! You should receive an email shortly.</h3>
-            <button onTouchTap={this.triggerClose}>Close</button>
-          </div>
+        <h3>Thanks! You should receive an email shortly.</h3>
+        <button onTouchTap={this.triggerClose}>Close</button>
+      </div>
     }
     return(
       <div className={className}>

js/views/savedstations.jsx

@@ -132,7 +132,7 @@ class SavedSations extends React.Component {
             action={this.props.togglePin}
             icon="pin.svg"
             name="Install App"
-            description="Add Transit to your home screen"
+            description={<div><span>Add Transit to your home screen</span><span>Send Transit to your phone</span></div>}
           />
         </ul>
       </div>

scss/_navigation.scss

@@ -235,16 +235,23 @@
 }
 
 @media (min-width: 851px) {
-  .onboard {
+  // .onboard {
+  //   display: none;
+  // }
+}
+.onboard li:last-child span {
+  &:last-child {
     display: none;
   }
 }
 @media (min-width: 481px) {
-  .onboard .text-only {
-    border-bottom: 0;
-  }
-  .onboard li:last-child {
-    display: none;
+  .onboard li:last-child span {
+    &:first-child {
+      display: none;
+    }
+    &:last-child {
+      display: inline;
+    }
   }
 }
 @media (display-mode: standalone) {

scss/_splash.scss

@@ -87,7 +87,12 @@
   }
 
   @media (min-width: 481px) {
-    display: none;
+    .mobile {
+      display: none;
+    }
+    .desktop {
+      display: block;
+    }
   }
 
   a {
@@ -123,5 +128,6 @@
   }
   h3 {
     margin-top: 0;
+    font-weight: 600;
   }
 }