From 138cef09061fadea40002d0de566bec1057f4cf7 Mon Sep 17 00:00:00 2001
From: Akash Nimare <svnitakash@gmail.com>
Date: Mon, 1 Oct 2018 21:35:47 +0530
Subject: [PATCH] hotspots: Change styling of intro to reply hotspot.

Updated the styling so that it looks like other hotspots.
---
 static/styles/hotspots.scss                     | 13 +++++++++----
 static/styles/night_mode.scss                   |  4 +++-
 static/templates/intro_reply_hotspot.handlebars |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/static/styles/hotspots.scss b/static/styles/hotspots.scss
index 502b2ebf21..35bc45f4ca 100644
--- a/static/styles/hotspots.scss
+++ b/static/styles/hotspots.scss
@@ -248,18 +248,22 @@
     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;
+.hotspot-inline-top .hotspot-title {
+    background: #00b08d;
+    margin: 0;
+    color: hsl(0, 0%, 100%);
+    font-weight: 600;
+    line-height: 24px;
+    padding: 5px 13px;
+    font-size: 1.15em;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
-    background-color: #43ad90;
 }
 
 .hotspot-inline-left {
@@ -276,6 +280,7 @@
 
 #hotspot_intro_reply_icon {
     position: relative;
+    background: hsl(0, 0%, 100%);
     top: 50%;
     transform: perspective(1px) translateY(-75%);
 }
diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss
index 11cb1e3647..e07a489bc4 100644
--- a/static/styles/night_mode.scss
+++ b/static/styles/night_mode.scss
@@ -402,7 +402,8 @@ on a dark background, and don't change the dark labels dark either. */
     }
 
     /* Popover: */
-    .hotspot.overlay .hotspot-popover {
+    .hotspot.overlay .hotspot-popover,
+    #hotspot_intro_reply_icon {
         border-color: hsla(0, 0%, 0%, 0.2) !important;
         /* Based on the `.hotspot-popover` shadow in `hotspots.css`, but with a new
     color. */
@@ -444,6 +445,7 @@ on a dark background, and don't change the dark labels dark either. */
 
     /* Content: */
     .hotspot.overlay .hotspot-popover .hotspot-popover-content,
+    #hotspot_intro_reply_icon,
     .hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
         background-color: hsl(212, 28%, 18%);
     }
diff --git a/static/templates/intro_reply_hotspot.handlebars b/static/templates/intro_reply_hotspot.handlebars
index c8cfb1d53c..b967202e4b 100644
--- a/static/templates/intro_reply_hotspot.handlebars
+++ b/static/templates/intro_reply_hotspot.handlebars
@@ -1,5 +1,5 @@
 <div class="hotspot-inline trailing_bookend bookend hotspot-message" id="hotspot_intro_reply_icon">
-    <div class="hotspot-inline-top"></div>
+    <div class="hotspot-inline-top"><h1 class="hotspot-title">Send a reply</h1></div>
     <div class="hotspot-inline-left">
         <img class="hotspot-img" alt="" src="/static/images/hotspots/whale.svg">
     </div>