💄: White buttons, dropdown / popover cleanup, hairline dividers

internal_packages/category-picker/stylesheets/category-picker.less

@@ -16,6 +16,7 @@ body.platform-win32 {
   .menu {
     background: @background-secondary;
     width: @popover-width;
+    max-height: 400px;
 
     .header-container {
       border-bottom: 0;

internal_packages/composer-templates/stylesheets/message-templates.less

@@ -7,6 +7,7 @@
   .menu {
     .content-container {
       height:150px;
+      width: 210px;
       overflow-y:scroll;
     }
     .footer-container {
@@ -85,7 +86,7 @@
       margin: 0 0 0 8px;
     }
   }
-  
+
 
   .section-body {
     padding: 10px 0 0 0;

internal_packages/composer-translate/stylesheets/translate.less

@@ -8,6 +8,7 @@
   }
   .content-container {
     height:185px;
+    width:170px;
     overflow:scroll;
   }
 }

internal_packages/composer/stylesheets/composer.less

@@ -316,11 +316,11 @@ body.platform-win32 {
     &:hover {
       .primary-item,
       .only-item {
-        border-radius: 4px;
+        border-radius: @border-radius-base;
       }
     }
     .secondary-items {
-      border-radius: 4px;
+      border-radius: @border-radius-base;
     }
     .item {
       .contact.is-alias {

internal_packages/message-list/lib/message-participants.cjsx

@@ -29,19 +29,9 @@ class MessageParticipants extends React.Component
   _allToParticipants: =>
     _.union(@props.to, @props.cc, @props.bcc)
 
-  _selectPlainText: (e) =>
+  _selectText: (e) =>
     textNode = e.currentTarget.childNodes[0]
-    @_selectText(textNode)
 
-  _selectCommaText: (e) =>
-    textNode = e.currentTarget.childNodes[0].childNodes[0]
-    @_selectText(textNode)
-
-  _selectBracketedText: (e) =>
-    textNode = e.currentTarget.childNodes[1].childNodes[0] # because of React rendering
-    @_selectText(textNode)
-
-  _selectText: (textNode) =>
     range = document.createRange()
     range.setStart(textNode, 0)
     range.setEnd(textNode, textNode.length)
@@ -67,12 +57,18 @@ class MessageParticipants extends React.Component
 
       if c.name?.length > 0 and c.name isnt c.email
         <div key={"#{c.email}-#{i}"} className="participant selectable">
-          <span className="participant-primary" onClick={@_selectPlainText}>{c.name}</span>&nbsp;
-          <span className="participant-secondary" onClick={@_selectBracketedText}><{c.email}>{comma}</span>&nbsp;
+          <div className="participant-primary" onClick={@_selectText}>
+            {c.name}
+          </div>
+          <div className="participant-secondary">
+            {"<"}<span onClick={@_selectText}>{c.email}</span>{">#{comma}"}
+          </div>
         </div>
       else
         <div key={"#{c.email}-#{i}"} className="participant selectable">
-          <span className="participant-primary" onClick={@_selectCommaText}>{c.email}{comma}</span>&nbsp;
+          <div className="participant-primary">
+            <span onClick={@_selectText}>{c.email}</span>{comma}
+          </div>
         </div>
     )
 

internal_packages/message-list/stylesheets/message-list.less

@@ -76,12 +76,10 @@ body.platform-win32 {
   .message-toolbar-arrow.down {
     order:201;
     margin-right: 0;
-    padding-top:6px;
     margin-left: @spacing-standard * 1.5;
   }
   .message-toolbar-arrow.up {
     order:202;
-    padding-top:6px;
     // <1 because of hit region padding on the button
     margin-right: @spacing-standard * 0.75;
   }
@@ -130,6 +128,7 @@ body.platform-win32 {
     line-height: @font-size-large * 1.8;
     display: flex;
     align-items: center;
+    padding: 0 @padding-large-horizontal;
   }
   .mail-important-icon {
     margin-right:@spacing-half;
@@ -146,7 +145,6 @@ body.platform-win32 {
      cursor: pointer;
      -webkit-user-select: none;
      margin-left: auto;
-     margin-right: @padding-large-horizontal;
      display: flex;
      align-items: center;
 
@@ -192,10 +190,7 @@ body.platform-win32 {
     width: calc(~"100% - 12px");
 
     margin: 0 auto;
-    padding: @message-spacing 0;
-    &:last-child {
-      padding-bottom: @spacing-double;
-    }
+
     .message-item-white-wrap {
       background: @background-primary;
       border: 0;
@@ -203,6 +198,7 @@ body.platform-win32 {
       border-radius: 4px;
     }
 
+    padding-bottom: @message-spacing * 2;
     &.before-reply-area { padding-bottom: 0; }
 
     &.collapsed {
@@ -285,7 +281,7 @@ body.platform-win32 {
       top: 50%;
       left: 50%;
       margin-left: -80px;
-      margin-top: -14px;
+      margin-top: -15px;
       border-radius: 15px;
       border: 1px solid @border-color-divider;
       width: 160px;
@@ -425,7 +421,7 @@ body.platform-win32 {
       width: 100%;
       border: 0;
       padding: 0;
-      margin-top: 5px;
+      margin-top: 10px;
       overflow: auto;
     }
   }
@@ -554,7 +550,7 @@ body.platform-win32 {
 
     .participant {
       display: inline-block;
-      margin-right: 0.5em;
+      margin-right: 0.25em;
     }
 
     .participant-type {
@@ -580,9 +576,12 @@ body.platform-win32 {
 
     .participant-primary {
       color: @text-color-very-subtle;
+      margin-right: 0.15em;
+      display:inline-block;
     }
     .participant-secondary {
       color: @text-color-very-subtle;
+      display:inline-block;
     }
 
     .from-contact {

internal_packages/mode-switch/stylesheets/mode-switch.less

@@ -1,11 +1,8 @@
 @import 'ui-variables';
 
 .btn-toolbar.mode-toggle {
-    z-index: 1000;
-    position: relative;
-    img.content-mask {
-      background-color: @text-color-subtle;
-    }
+  z-index: 1000;
+  position: relative;
 }
 .btn-toolbar.mode-toggle.mode-false {
   img.content-mask {

internal_packages/search-bar/stylesheets/search-bar.less

@@ -8,8 +8,6 @@
   z-index: 100;
   width:450px;
   margin-top: (38px - 23px) / 2;
-  margin-left: 12px;
-  margin-right: 12px;
 
   .menu .header-container {
     padding:0;

src/components/popover.cjsx

@@ -154,7 +154,7 @@ class Popover extends React.Component
           'top': -10,
         pointerStyle = _.extend pointerStyle,
           'transform': 'translateX(-50%)'
-          'bottom': -10
+          'bottom': -21
 
       else if @props.direction is 'down'
         popoverStyle = _.extend popoverStyle,
@@ -162,7 +162,7 @@ class Popover extends React.Component
           'top': '100%'
         pointerStyle = _.extend pointerStyle,
           'transform': 'rotateX(180deg)'
-          'top': -10
+          'top': -21
           'left':-12
 
       if @props.direction is "down-align-left"
@@ -176,6 +176,7 @@ class Popover extends React.Component
       popoverComponent = <div ref="popover" className={"popover popover-"+@props.direction} style={popoverStyle}>
         {@props.children}
         <div className="popover-pointer" style={pointerStyle}></div>
+        <div className="popover-pointer shadow" style={pointerStyle}></div>
       </div>
 
     <div className={"popover-container "+@props.className}

static/buttons.less

@@ -53,15 +53,14 @@ body.platform-win32 {
   cursor: default;
   display:inline-block;
   color: @btn-default-text-color;
+  background: @background-primary;
 
   img.content-mask { background-color: @btn-default-text-color; }
 
-  .btn-gradient;
-
   // Use 4 box shadows to create a 0.5px hairline around the button, and another
   // for the actual shadow. Pending https://code.google.com/p/chromium/issues/detail?id=236371
   // Yes, 1px border looks really bad on retina.
-  box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 0.5px 1px rgba(0, 0, 0, 0.15);
 
   height: 1.9em;
   line-height: 1.9em;
@@ -115,7 +114,7 @@ body.platform-win32 {
       content: ' ';
       width: calc(~"100% + 2px");
       height: calc(~"100% + 2px");
-      border-radius: 5px;
+      border-radius: @border-radius-base + 1;
       top: -1px;
       left: -1px;
       position: absolute;
@@ -135,6 +134,8 @@ body.platform-win32 {
 }
 
 .btn-toolbar {
+  .btn-gradient;
+
   padding: 0 13px;
   &.narrow {
     padding: 0 9px;

static/components/button-dropdown.less

@@ -12,10 +12,10 @@
 
   &.open.open-up {
     .secondary-items {
-      border-radius: 4px 4px 0 4px;
-      box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.20);
+      border-radius: @border-radius-base @border-radius-base 0 @border-radius-base;
+      box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 -3px 12px rgba(0, 0, 0, 0.2);
       top: -100%;
-      transform:translate(0, -8px);
+      transform:translate(0, -6px);
     }
     .secondary-picker {
       border-top-right-radius: 0;
@@ -23,8 +23,9 @@
   }
   &.open.open-down {
     .secondary-items {
-      border-radius: 4px 0 4px 4px;
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20);
+      border-radius: @border-radius-base 0 @border-radius-base @border-radius-base;
+      box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 5px 12px rgba(0, 0, 0, 0.2);
+      transform:translate(0, 1.5px);
     }
     .secondary-picker {
       border-bottom-right-radius: 0;
@@ -50,14 +51,15 @@
     color: @btn-default-text-color;
   }
   .primary-item {
-    border-radius: 4px 0 0 4px;
+    border-radius: @border-radius-base 0 0 @border-radius-base;
   }
 
   .secondary-picker {
     .btn();
-    border-radius: 0 4px 4px 0;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5px 0px, rgba(0, 0, 0, 0.15) 0px -0.5px 0px, rgba(0, 0, 0, 0.15) 0.5px 0px 0px, rgba(0, 0, 0, 0.15) 0px 0.5px 1px;
+    border-radius: 0 @border-radius-base @border-radius-base 0;
     border-left: 0;
-    padding: 0 8px;
+    padding: 0 6px;
   }
   .secondary-items {
     &:hover {
@@ -69,11 +71,10 @@
       right:auto;
       white-space:nowrap;
     }
-    border: 1px solid rgba(0, 0, 0, 0.15);
     z-index: 2;
-    background-color: @background-primary;
+    background-color: @background-secondary;
     position: absolute;
-    right: -1px; // -1, because of the border above
+    right: 0px; // -1, because of the border above
     white-space:nowrap;
     visibility:hidden;
 
@@ -105,14 +106,14 @@
         }
       }
       .item:first-child {
-        border-top-left-radius: 4px;
+        border-top-left-radius: @border-radius-base;
       }
       .item:last-child {
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: @border-radius-base;
+        border-bottom-right-radius: @border-radius-base;
       }
       .item:hover {
-        background-color: darken(@background-primary, 3%);
+        background-color: darken(@background-secondary, 3%);
         color:inherit;
       }
     }

static/components/popover.less

@@ -6,12 +6,9 @@
 }
 
 .popover {
-  display: flex;
-  max-height:400px;
   background-color: @background-primary;
   border-radius: @border-radius-base;
-  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15), 0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15), 0 4px 7px rgba(0,0,0,0.15), inset 0 0 1px rgba(0,0,0,0.5);
-
+  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15), 0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15), 0 4px 7px rgba(0,0,0,0.15);
   .menu {
     z-index:1;
     position: relative;
@@ -39,6 +36,10 @@
     -webkit-mask-image: url('images/tooltip/tooltip-bg-pointer@2x.png');
     background-color: @background-primary;
   }
+  .popover-pointer.shadow {
+    -webkit-mask-image: url('images/tooltip/tooltip-bg-pointer-shadow@2x.png');
+    background-color: fade(@black, 22%);
+  }
 }
 
 body.platform-win32 {

static/variables/ui-variables.less

@@ -168,14 +168,15 @@
 @line-height-large:         @line-height-computed * 1.3;
 @line-height-small:         @line-height-computed * 0.95;
 
-@border-radius-base:        4px;
-@border-radius-large:       6px;
-@border-radius-small:       3px;
+@border-radius-base:        3px;
+@border-radius-large:       5px;
+@border-radius-small:       2px;
 
 
 //============================== Shadows ===============================//
-@standard-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.21);
-@standard-shadow-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.21);
+@standard-shadow-color: rgba(0, 0, 0, 0.21);
+@standard-shadow: 0 1px 4px 0 @standard-shadow-color;
+@standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color;
 
 //=============================== Buttons ==============================//
 

static/workspace.less

@@ -242,10 +242,10 @@ body.is-blurred {
     line-height: 1.75em;
     height: 1.75em;
     box-shadow: 0 0.5px 0.05px rgba(0,0,0,0.4), 0 -0.5px 0 rgba(0,0,0,0.12);
-    img.content-mask { background-color: fadeout(@text-color-heading, 10%); }
+    img.content-mask { background-color: fade(@text-color-heading, 80%); }
   }
   .btn-toolbar:active {
-    img.content-mask { background-color: fadeout(@text-color-heading, 3%); }
+    img.content-mask { background-color: fade(@text-color-heading, 90%); }
   }
   .btn-toolbar:only-of-type {
     margin-right: @spacing-three-quarters;
@@ -271,7 +271,7 @@ body.is-blurred {
 }
 
 .flexbox-handle-horizontal {
-  width: 6px;
+  width: 8px;
   top: 0;
   bottom: 0;
   z-index: 2;
@@ -279,16 +279,16 @@ body.is-blurred {
   cursor: col-resize;
   div {
     height:100%;
-    border-right: 1px solid @border-color-divider;
+    box-shadow: 0.5px 0 0 @border-color-divider;
   }
 
   &.flexbox-handle-right {
     right:-4px;
-    padding-right:3px;
+    padding-right:4px;
   }
   &.flexbox-handle-left {
-    left:-3px;
-    padding-right:2px;
+    left:-4px;
+    padding-right:4px;
   }
 }