Update arrow on mobile to not be a unicode character and remove blue highlighting when tap

Author: mirandawang

rails/app/assets/stylesheets/components/card.scss

@@ -173,7 +173,7 @@ $el-shadow: 0 1px 4px #bbb;
       }
       .tab {
         &:after {
-          content: '\25b6\fe0e';
+          content: '';
         }
       }
     }
@@ -210,6 +210,27 @@ $el-shadow: 0 1px 4px #bbb;
     }
 
     .tab {
+      &:focus {
+        outline: none;
+      }
+
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+      -webkit-tap-highlight-color: transparent;
+
+      &:after {
+        content: '';
+      }
+
+      .arrow {
+        width: 0;
+        height: 0;
+        border-top: 12px solid transparent;
+        border-left: 15px solid rgba(255, 255, 255, 0.9);
+        border-bottom: 12px solid transparent;
+        margin-top: 1.1rem;
+        margin-left: 0.5rem;
+      }
+
       background: orange;
       left: 0;
       top: 0.5rem;

rails/app/javascript/components/Card.jsx

@@ -43,7 +43,9 @@ class Card extends Component {
   render() {
     return (
       <div className={this.state.isToggleOn ? 'cardContainer onCanvas' : 'cardContainer offCanvas'}>
-        <div className="tab" onClick={this.handleTray} />
+        <div className="tab" onClick={this.handleTray}>
+          <div className="arrow" />
+        </div>
         <div className="closeMe" onClick={this.handleTray} />
         <div className="card">
           <div className="bar">