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 @@
-
+

Send a reply