From eddcec5e8672b79e915c00a9076267bb752c7347 Mon Sep 17 00:00:00 2001
From: Max Nussenbaum <max@maxnuss.com>
Date: Thu, 24 May 2018 12:40:47 -0700
Subject: [PATCH] hotspots: Style "How to reply" hotspot.

Styles the "How to reply" hotstop that shows for new users to
match the rest of the hotspots.
---
 static/styles/hotspots.scss                   | 97 ++++++++++++-------
 .../templates/intro_reply_hotspot.handlebars  | 12 ++-
 2 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/static/styles/hotspots.scss b/static/styles/hotspots.scss
index 8ad2214109..af5ea80528 100644
--- a/static/styles/hotspots.scss
+++ b/static/styles/hotspots.scss
@@ -112,29 +112,46 @@
     border-bottom-right-radius: 4px;
 }
 
+.hotspot-img {
+    height: 83px;
+}
+
 .hotspot.overlay .hotspot-img {
     position: absolute;
     bottom: 10px;
     left: 4px;
-    height: 83px;
+}
+
+.hotspot-inline .hotspot-img {
+    margin-left: 5px;
+}
+
+.hotspot-confirm {
+    max-width: 125px;
+    max-height: 70px;
+    border: none;
+    font-size: 1.15em;
+    font-weight: 600;
+    color: #fff;
+    background-color: #43ad90;
+    border-radius: 4px;
+    white-space: normal;
+    padding: 7px 20px;
+    outline: none;
+}
+
+.hotspot-confirm:hover {
+    background-color: #5cc0a5;
 }
 
 .hotspot.overlay .hotspot-confirm {
     position: absolute;
     bottom: 15px;
     right: 15px;
-    max-width: 125px;
-    max-height: 70px;
+}
 
-    border: none;
-
-    font-size: 1.15em;
-    font-weight: 600;
-    color: hsl(0, 0%, 100%);
-    background-color: hsl(164, 44%, 47%);
-    border-radius: 4px;
-    white-space: normal;
-    padding: 7px 20px;
+.hotspot-inline .hotspot-confirm {
+    display: block;
 }
 
 /* arrows */
@@ -226,26 +243,38 @@
     z-index: 103;
 }
 
-/* hacked together intro_reply styles */
-#bottom_whitespace .hotspot-message {
-    text-align: center;
-    margin-top: 30px;
-
-    span {
-        vertical-align: middle;
-    }
-
-    button {
-        padding: 3px 9px;
-        min-width: 0px;
-        margin-left: 7px;
-        margin-bottom: 0px;
-        border: none;
-        font-size: .97em;
-        font-weight: 600;
-        color: white;
-        background-color: hsl(164, 44%, 47%);
-        border-radius: 4px;
-        white-space: normal;
-    }
+.hotspot-inline {
+    width: 350px;
+    max-width: 95%;
+    box-shadow: 0 5px 10px rgba(133, 136, 142, 0.1);
+    border: 1px solid #f2f2f2;
+    border-radius: 4px;
+    background: #f9f9f9;
+    margin: 0 auto;
+    position: relative;
+}
+
+.hotspot-inline-top {
+    height: 10px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-color: #43ad90;
+}
+
+.hotspot-inline-left {
+    display: inline-block;
+    width: 90px;
+}
+
+.hotspot-inline-right {
+    display: inline-block;
+    width: auto;
+    margin-left: 10px;
+    vertical-align: middle;
+}
+
+#hotspot_intro_reply_icon {
+    position: relative;
+    top: 50%;
+    transform: perspective(1px) translateY(-75%)
 }
diff --git a/static/templates/intro_reply_hotspot.handlebars b/static/templates/intro_reply_hotspot.handlebars
index dbdc1645cb..c8cfb1d53c 100644
--- a/static/templates/intro_reply_hotspot.handlebars
+++ b/static/templates/intro_reply_hotspot.handlebars
@@ -1,4 +1,10 @@
-<div class="trailing_bookend bookend hotspot-message" id="hotspot_intro_reply_icon">
-    <span>{{t 'Click anywhere on a message to reply.' }}</span>
-    <button class="hotspot-button" type="button">{{t 'Got it' }}</button>
+<div class="hotspot-inline trailing_bookend bookend hotspot-message" id="hotspot_intro_reply_icon">
+    <div class="hotspot-inline-top"></div>
+    <div class="hotspot-inline-left">
+        <img class="hotspot-img" alt="" src="/static/images/hotspots/whale.svg">
+    </div>
+    <div class="hotspot-inline-right">
+        <p>{{t 'Click anywhere on a message to reply.' }}</p>
+        <button class="hotspot-button hotspot-confirm" type="button">{{t 'Got it!' }}</button>
+    </div>
 </div>