Volumes and log home widget.

src/components/ContainerHome.react.js

@@ -27,7 +27,7 @@ var ContainerHome = React.createClass({
   },
 
   handleResize: function () {
-    $('.left .wrapper').height(window.innerHeight - 240);
+    $('.left .wrapper').height(window.innerHeight - 105);
     $('.right .wrapper').height(window.innerHeight / 2 - 100);
   },
 
@@ -93,10 +93,10 @@ var ContainerHome = React.createClass({
           <div className="details-panel home">
             <div className="content">
               <div className="left">
-                <ContainerHomePreview ports={this.props.ports} defaultPort={this.props.defaultPort} />
+                <ContainerHomeLogs container={this.props.container}/>
               </div>
               <div className="right">
-                <ContainerHomeLogs container={this.props.container}/>
+                <ContainerHomePreview ports={this.props.ports} defaultPort={this.props.defaultPort} />
                 <ContainerHomeFolders container={this.props.container} />
               </div>
             </div>

src/components/ContainerHomeFolders.react.js

@@ -64,7 +64,7 @@ var ContainerHomeFolder = React.createClass({
     }
 
     var folders = _.map(this.props.container.Volumes, (val, key) => {
-      var firstFolder = key.split(path.sep)[1];
+      var firstFolder = key;
       return (
         <div key={key} className="folder" onClick={this.handleClickFolder.bind(this, val, key)}>
           <RetinaImage src="folder.png" />
@@ -76,9 +76,13 @@ var ContainerHomeFolder = React.createClass({
     if (this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running) {
       return (
         <div className="folders wrapper">
-          <h4>Edit Files</h4>
           <div className="widget">
-            {folders}
+            <div className="top-bar">
+              <div className="text">Edit Files</div>
+            </div>
+            <div className="folders-list">
+              {folders}
+            </div>
           </div>
           <div className="subtext" onClick={this.handleClickChangeFolders}>Change Folders</div>
         </div>

src/components/ContainerHomeLogs.react.js

@@ -69,14 +69,22 @@ module.exports = React.createClass({
     if (logs.length === 0) {
       logs = "No logs for this container.";
     }
+    var tempDisp = (
+      <div className="mini-logs-overlay" onClick={this.handleClickLogs}>
+        <span className="icon icon-expand"></span>
+        <div className="text">View Logs</div>
+      </div>
+    );
     return (
       <div className="mini-logs wrapper">
-        <h4>Logs</h4>
         <div className="widget">
+          <div className="top-bar">
+            <div className="text">Container Logs</div>
+          </div>
           <div className="logs">
             {logs}
           </div>
-          <div className="mini-logs-overlay" onClick={this.handleClickLogs}><span className="icon icon-scale-spread-1"></span><div className="text">View Logs</div></div> </div>
+        </div>
       </div>
     );
   }

src/components/ContainerHomePreview.react.js

@@ -51,8 +51,10 @@ var ContainerHomePreview = React.createClass({
       var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'});
       preview = (
         <div className="web-preview wrapper">
-          <h4>Web Preview</h4>
           <div className="widget">
+            <div className="top-bar">
+              <div className="text">WEB PREVIEW</div>
+            </div>
             {frame}
             <div className="frame-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
           </div>
@@ -73,8 +75,10 @@ var ContainerHomePreview = React.createClass({
 
       preview = (
         <div className="web-preview wrapper">
-          <h4>IP &amp; Ports</h4>
           <div className="widget">
+            <div className="top-bar">
+              <div className="text">IP & PORTS</div>
+            </div>
             <p>You can access this container using the following IP address and port:</p>
             <div className="table ports">
               <div className="table-labels">

styles/container-home.less

@@ -5,11 +5,11 @@
     display: flex;
     flex: 1 auto;
     flex-direction: row;
-    padding: 10px 27px;
+    padding: 1rem;
     .left {
       width: 60%;
       flex-direction: column;
-      margin-right: 30px;
+      margin-right: 1rem;
     }
     .right {
       width: 40%;
@@ -29,8 +29,9 @@
       .widget {
         .widget-style();
         background-color: white;
+        padding: 0.5rem;
         width: 100%;
-        height: 95%;
+        height: 100%;
         p {
           font-size: 13px;
           color: @gray-normal;
@@ -94,7 +95,7 @@
           left: -100%;
           top: -100%;
           height: 400%;
-          width: 401%;
+          width: 400%;
           transform: scale(0.5);
         }
         .frame-overlay {
@@ -125,24 +126,30 @@
       }
     }
     .mini-logs {
-      margin-bottom: 50px;
       .widget {
         .widget-style();
-        background-color: @gray-darkest;
-        color: @gray-lightest;
+        .top-bar {
+          .widget-bar-style();
+          background-color: darken(@gray-darkest, 3%);
+          border-bottom: 1px solid rgba(255,255,255,0.1);
+          color: white;
+        }
         height: 100%;
-        padding: 10px;
-        font-family: @font-code;
-        font-size: 7px;
-        white-space: pre;
         .logs {
-          overflow: hidden;
+          background-color: @gray-darkest;
+          color: @gray-lightest;
+          font-family: @font-code;
+          font-size: 9px;
+          white-space: pre-wrap;
+          -webkit-user-select: text;
+          padding: 1.2rem;
+          overflow: auto;
           height: 100%;
         }
         p {
           margin-bottom: 0px;
         }
-        .mini-logs-overlay {
+        /*.mini-logs-overlay {
           position: absolute;
           top: 0;
           left: 0;
@@ -167,29 +174,37 @@
             background-color: @gray-darkest;
             opacity: 0.75;
           }
-        }
+        }*/
       }
     }
     .folders {
       .widget {
         .widget-style();
-        padding: 10px 5px;
         background-color: white;
-        display: flex;
-        .folder {
-          width: 110px;
-          padding: 5px;
-          &:hover {
-            background-color: darken(@color-background, 2%);
-            border-radius: 10px;
-          }
-          img {
-            display: block;
-            margin: 0 auto;
-          }
-          .text {
-            margin-top: 4px;
-            text-align: center;
+        .top-bar {
+          .widget-bar-style();
+        }
+        .folders-list {
+          .folder {
+            display: flex;
+            padding: 1rem;
+            border-bottom: 1px solid @color-divider;
+            &:hover {
+              background-color: @color-box-button;
+            }
+            img {
+              width: 32px;
+              min-width: 32px;
+              height: 25px;
+            }
+            .text {
+              margin-top: 0.3rem;
+              margin-left: 1rem;
+              width: 180px;  
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+            }
           }
         }
       }

styles/mixins.less

@@ -23,12 +23,23 @@
 }
 
 .widget-style() {
-  border-radius: 4px;
-  border: 1px solid @gray-lighter;
+  border-radius: @border-radius;
+  border: 1px solid @color-divider;
   position: relative;
   overflow: hidden;
 }
 
+.widget-bar-style() {
+  height: 40px;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 1.1rem;
+  background-color: white;
+  color: @gray-light;
+  border-bottom: 1px solid @color-divider;
+}
+
 .fade-in() {
   opacity: 0;
   -webkit-animation: fadein ease-in 1;

styles/new-container.less

@@ -141,7 +141,8 @@
       .results-filter-title {
         color: @gray-lighter;
         font-weight: 500;
-        padding-top: 0.7rem;
+        position: relative;
+        top: 1px;
         margin-right: 0.7rem;
       }
     }

styles/right-panel.less

@@ -111,7 +111,7 @@
     color: @gray-light;
     border-bottom: 3px solid transparent;
     text-align: center;
-    min-width: 28px;
+    min-width: 20px;
     padding-bottom: 0.2rem;
     &.active {
       color: @gray-darkest;
@@ -121,7 +121,6 @@
       opacity: 0.5;
       &:hover {
         color: @gray-light;
-        border-bottom: 3px solid transparent;
       }
     }
     &:hover {