From bb321f4bd2dae8e56694f3c93fca075c79dd312a Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Wed, 24 Feb 2016 14:12:07 -0800
Subject: [PATCH] :lipstick:(composer): Shadow on pointer of floating toolbar

---
 .../contenteditable/floating-toolbar.cjsx     |  7 +++--
 static/components/contenteditable.less        | 29 +++++++++++++------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/contenteditable/floating-toolbar.cjsx b/src/components/contenteditable/floating-toolbar.cjsx
index 901616a50..a01fa3759 100644
--- a/src/components/contenteditable/floating-toolbar.cjsx
+++ b/src/components/contenteditable/floating-toolbar.cjsx
@@ -215,7 +215,10 @@ class FloatingToolbar extends React.Component
     return styles
 
   _renderPointer: =>
-    unless @state.hidePointer
-      return <div className="toolbar-pointer" style={@_toolbarPointerStyles()}></div>
+    return false if @state.hidePointer
+    <div className="toolbar-pointer-container" style={@_toolbarPointerStyles()}>
+      <div className="shadow"></div>
+      <div className="foreground"></div>
+    </div>
 
 module.exports = FloatingToolbar
diff --git a/static/components/contenteditable.less b/static/components/contenteditable.less
index 36e5ea881..f54a9cfe9 100644
--- a/static/components/contenteditable.less
+++ b/static/components/contenteditable.less
@@ -42,24 +42,35 @@
       margin-top: 0;
     }
 
-    .toolbar-pointer {
+    .toolbar-pointer-container {
       position: absolute;
-      width: 22.5px;
+      width: 23px;
       height: 10px;
-      background: transparent url('images/tooltip/tooltip-bg-pointer@2x.png') no-repeat;
-      background-size: 22.5px 9.5px;
-      margin-left: -11.2px;
+
+      div {
+        -webkit-mask-image: url('images/tooltip/tooltip-bg-pointer@2x.png');
+        background-color: #fff;
+        position: absolute;
+        zoom: 0.5;
+        width: 45px;
+        height: 21px;
+        &.shadow {
+          -webkit-mask-image: url('images/tooltip/tooltip-bg-pointer-shadow@2x.png');
+          background-color: fade(@black, 22%);
+          transform: translateY(0.5px);
+        }
+      }
     }
 
     &.above {
-      .toolbar-pointer {
-        transform: rotate(0deg);
+      .toolbar-pointer-container {
+        transform: translateX(-11px) rotate(0deg);
         bottom: -9px;
       }
     }
     &.below {
-      .toolbar-pointer {
-        transform: rotate(180deg);
+      .toolbar-pointer-container {
+        transform: translateX(-11px) rotate(180deg);
         top: -9px;
       }
     }