feat(windows): upgarade preferences UI on Windows

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

@@ -18,7 +18,7 @@ body.platform-win32 {
     .message-toolbar-arrow.down {
       margin: 0 0 0 1px;
       padding: 6px 5px 0 5px;
-      transition: background 300ms;
+      .windows-btn-hover;
       &:hover {
         background: #e5e5e5;
       }
@@ -30,10 +30,7 @@ body.platform-win32 {
     .message-toolbar-arrow.up {
       margin: 0 0 0 1px;
       padding: 6px 5px 0 5px;
-      transition: background 300ms;
-      &:hover {
-        background: #e5e5e5;
-      }
+      .windows-btn-hover;
       &.btn-icon:hover {
         color: @text-color;
         img.content-mask { background: rgba(35, 31, 32, 0.8); }

internal_packages/preferences/lib/preferences-header.cjsx

@@ -11,6 +11,10 @@ class PreferencesHeader extends React.Component
     activeTab: React.PropTypes.object
 
   render: =>
+    if process.platform is "win32"
+        imgMode = RetinaImg.Mode.ContentIsMask
+    else
+        imgMode = RetinaImg.Mode.ContentPreserve
     <div className="preference-header">
       { @props.tabs.map (tab) =>
         classname = "preference-header-item"
@@ -19,7 +23,7 @@ class PreferencesHeader extends React.Component
         <div className={classname} onClick={ => @props.changeActiveTab(tab) } key={tab.name}>
           <div className="phi-container">
             <div className="icon">
-              <RetinaImg mode={RetinaImg.Mode.ContentPreserve} name={tab.icon} />
+              <RetinaImg mode={imgMode} name={tab.icon} />
             </div>
             <div className="name">
               {tab.name}

internal_packages/preferences/stylesheets/preferences.less

@@ -273,5 +273,33 @@ body.platform-darwin {
       }
     }
   }
-
+}
+
+body.platform-win32 {
+  .preference-header {
+    background: #f2f2f2;
+
+    .preference-header-item {
+      margin-left: 0;
+      margin-right: 1px;
+      width: 80px;
+      padding-top: 3px;
+      .windows-btn-hover;
+      height: 63px;
+
+      color: @text-color;
+      .icon img.content-mask { background: @text-color; }
+
+      &:hover {
+        background: #e5e5e5;
+      }
+      &.active {
+        background: #f2f2f2;
+        border-radius: 0 0 0 0;
+        border-bottom: 2px solid @accent-primary;
+        color: @accent-primary;
+        .icon img.content-mask { background: @accent-primary; }
+      }
+    }
+  }
 }

src/flux/models/utils.coffee

@@ -162,10 +162,17 @@ Utils =
         file = file.replace(/\\/g, '/')
         Utils.images[resourcePath][path.basename(file)] = file
 
-    if window.devicePixelRatio > 1
-      return Utils.images[resourcePath]["#{name}@2x.#{ext}"] ? Utils.images[resourcePath][fullname] ? Utils.images[resourcePath]["#{name}@1x.#{ext}"]
-    else
-      return Utils.images[resourcePath]["#{name}@1x.#{ext}"] ? Utils.images[resourcePath][fullname] ? Utils.images[resourcePath]["#{name}@2x.#{ext}"]
+    plat = process.platform ? ""
+    ratio = window.devicePixelRatio ? 1
+
+    return Utils.images[resourcePath]["#{name}-#{plat}@#{ratio}x.#{ext}"] ?
+           Utils.images[resourcePath]["#{name}@#{ratio}x.#{ext}"] ?
+           Utils.images[resourcePath]["#{name}-#{plat}.#{ext}"] ?
+           Utils.images[resourcePath]["#{name}.#{ext}"] ?
+           Utils.images[resourcePath]["#{name}-#{plat}@2x.#{ext}"] ?
+           Utils.images[resourcePath]["#{name}@2x.#{ext}"] ?
+           Utils.images[resourcePath]["#{name}-#{plat}@1x.#{ext}"] ?
+           Utils.images[resourcePath]["#{name}@1x.#{ext}"]
 
   subjectWithPrefix: (subject, prefix) ->
     if subject.search(/fwd:/i) is 0

static/mixins/windows.less

@@ -0,0 +1,6 @@
+.windows-btn-hover {
+  transition: background 300ms;
+  &:hover {
+    background: #e5e5e5;
+  }
+}

static/variables/ui-mixins.less

@@ -1,3 +1,4 @@
 @import "../mixins/common-ui-elements.less";
 @import "../mixins/text-emphasis.less";
 @import "../mixins/background-variant.less";
+@import "../mixins/windows.less";