Header style changes

Gruntfile.js

@@ -285,7 +285,7 @@ module.exports = function (grunt) {
       },
       less: {
         files: ['styles/**/*.less'],
-        tasks: ['newer:less']
+        tasks: ['less']
       },
       copy: {
         files: ['images/*', 'index.html', 'fonts/*'],
@@ -293,7 +293,7 @@ module.exports = function (grunt) {
       }
     }
   });
-  grunt.registerTask('default', ['download-binary', 'newer:babel', 'newer:less', 'newer:copy:dev', 'shell:electron', 'watchChokidar']);
+  grunt.registerTask('default', ['download-binary', 'newer:babel', 'less', 'newer:copy:dev', 'shell:electron', 'watchChokidar']);
 
   if (process.platform === 'win32') {
     grunt.registerTask('release', ['clean', 'download-binary', 'babel', 'less', 'copy:dev', 'electron:windows', 'copy:windows', 'rcedit:exes', 'create-windows-installer', 'rename:installer']);

src/components/ContainerHomePreview.react.js

@@ -92,7 +92,7 @@ var ContainerHomePreview = React.createClass({
               <thead>
                 <tr>
                   <th>DOCKER PORT</th>
-                  <th>MAC PORT</th>
+                  <th>ACCESS URL</th>
                 </tr>
               </thead>
               <tbody>

src/components/ContainerSettingsPorts.react.js

@@ -66,7 +66,7 @@ var ContainerSettingsPorts = React.createClass({
             <thead>
               <tr>
                 <th>DOCKER PORT</th>
-                <th>MAC PORT</th>
+                <th>ACCESS URL</th>
               </tr>
             </thead>
             <tbody>

src/components/ContainerSettingsVolumes.react.js

@@ -57,7 +57,7 @@ var ContainerSettingsVolumes = React.createClass({
     metrics.track('Opened Volume Directory', {
       from: 'settings'
     });
-    shell.showItemInFolder(path);
+    shell.showItemInFolder(util.linuxToWindowsPath(path));
   },
   render: function () {
     if (!this.props.container) {
@@ -71,8 +71,9 @@ var ContainerSettingsVolumes = React.createClass({
           <span className="value-right">No Folder</span>
         );
       } else {
+        let local = util.isWindows() ? util.linuxToWindowsPath(val) : val;
         val = (
-          <a className="value-right" onClick={this.handleOpenVolumeClick.bind(this, val)}>{val.replace(process.env.HOME, '~')}</a>
+          <a className="value-right" onClick={this.handleOpenVolumeClick.bind(this, val)}>{local.replace(process.env.HOME, '~')}</a>
         );
       }
       return (
@@ -94,7 +95,7 @@ var ContainerSettingsVolumes = React.createClass({
             <thead>
               <tr>
                 <th>DOCKER FOLDER</th>
-                <th>MAC FOLDER</th>
+                <th>LOCAL FOLDER</th>
                 <th></th>
               </tr>
             </thead>

src/components/Header.react.js

@@ -95,6 +95,13 @@ var Header = React.createClass({
     });
     accountActions.verify();
   },
+  renderLogo: function () {
+    return (
+      <div className="logo">
+        <RetinaImage src="logo.png"/>
+      </div>
+    );
+  },
   renderWindowButtons: function () {
     let buttons;
     if (this.state.fullscreen) {
@@ -109,9 +116,9 @@ var Header = React.createClass({
       if (util.isWindows()) {
         buttons = (
           <div className="windows-buttons">
+          <div className="windows-button button-minimize enabled" onClick={this.handleMinimize}><div className="icon"></div></div>
+          <div className="windows-button button-fullscreen enabled" onClick={this.handleFullscreen}><div className="icon"></div></div>
           <div className="windows-button button-close enabled" onClick={this.handleClose}></div>
-          <div className="windows-button button-minimize enabled" onClick={this.handleMinimize}></div>
-          <div className="windows-button button-fullscreen enabled" onClick={this.handleFullscreen}></div>
           </div>
         );
       } else {
@@ -161,16 +168,14 @@ var Header = React.createClass({
     return (
       <div className={headerClasses}>
         <div className="left-header">
-          {this.renderWindowButtons()}
+          {util.isWindows () ? this.renderLogo() : this.renderWindowButtons()}
           {username}
         </div>
         <div className="right-header">
           <div className="updates">
             {updateWidget}
           </div>
-          <div className="logo">
+          {util.isWindows () ? this.renderWindowButtons() : this.renderLogo()}
-            <RetinaImage src="logo.png"/>
-          </div>
         </div>
       </div>
     );

src/utils/Util.js

@@ -143,7 +143,7 @@ module.exports = {
     return fullPath;
   },
   linuxToWindowsPath: function (linuxAbsPath) {
-    return linuxAbsPath.replace('/c', 'c:').split('/').join('\\');
+    return linuxAbsPath.replace('/c', 'C:').split('/').join('\\');
   },
   webPorts: ['80', '8000', '8080', '3000', '5000', '2368', '9200', '8983']
 };

styles/header.less

@@ -17,7 +17,7 @@
     display: flex;
     min-width: @sidebar-width + 1px;
   }
-  
+
   .right-header {
     display: flex;
     justify-content: flex-end;
@@ -33,7 +33,7 @@
   }
 
   .logo {
-    padding: 0.9rem 1rem 0 0;
+    padding: 0.9rem 1rem 0 1rem;
   }
 
   .login-wrapper {
@@ -67,10 +67,77 @@
 
   .windows-buttons {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
-    justify-content: center;
+    justify-content: flex-end;
+    flex: 0 1 auto;
+    margin-right: 7px;
+    -webkit-app-region: no-drag;
 
-    
+    .windows-button {
+      height: 25px;
+      margin-left: 1px;
+      -webkit-transition: -webkit-filter 0.3s;
+
+      &:hover {
+        -webkit-transition: -webkit-filter 0s;
+      }
+
+      &.button-minimize, &.button-fullscreen, &.button-fullscreenclose  {
+        min-width: 34px;
+        background-color: white;
+
+        .icon {
+          background-repeat: no-repeat;
+          -webkit-filter: brightness(0.3);
+          height: 25px;
+        }
+
+        &:hover {
+          -webkit-filter: brightness(0.9);
+        }
+
+        &:active {
+          -webkit-filter: brightness(0.8);
+        }
+      }
+
+      &.button-minimize {
+        .icon {
+          background-position: 50% 18px;
+          .at2x('windows-minimize.png', 14px, 2px);
+        }
+      }
+
+      &.button-fullscreen {
+        .icon {
+          background-position: center;
+          .at2x('windows-fullscreen.png', 14px, 2px);
+        }
+      }
+
+      &.button-fullscreenclose {
+        .icon {
+          background-position: center;
+          .at2x('windows-fullscreenclose.png', 14px, 2px);
+        }
+      }
+
+      &.button-close {
+        min-width: 58px;
+        background: #C75050;
+        .at2x('windows-close.png', 12px, 9px);
+        background-repeat: no-repeat;
+        background-position: center;
+        box-shadow: inset 0 0 0 -1px rgba(255, 255, 255, 0.4);
+        &:hover {
+          -webkit-filter: saturate(120%);
+        }
+
+        &:active {
+          -webkit-filter: brightness(0.8);
+        }
+      }
+    }
   }
 
   .buttons {