Merge pull request #630 from kitematic/fix-username-overflow

Fixed long username and adjusted verify account layout.

src/components/Header.react.js

@@ -128,7 +128,12 @@ var Header = React.createClass({
       username = (
         <div className="login-wrapper">
           <div className="login no-drag" onClick={this.handleUserClick}>
-            <span className="icon icon-user"></span> {this.state.username} {this.state.verified ? null : '(Unverified)'} <RetinaImage src="userdropdown.png"/>
+            <span className="icon icon-user"></span>
+              <span className="text">
+                {this.state.username}
+                {this.state.verified ? null : '(Unverified)'}
+              </span>
+              <RetinaImage src="userdropdown.png"/>
           </div>
         </div>
       );

src/components/NewContainerSearch.react.js

@@ -126,7 +126,7 @@ module.exports = React.createClass({
         <div className="no-results">
           <h2>Please verify your Docker Hub account email address</h2>
           <div className="verify">
-            <button className="btn btn-primary btn-lg" onClick={this.handleCheckVerification}>{'I\'ve Verified My Email Address'}</button> {spinner}
+            <button className="btn btn-primary" onClick={this.handleCheckVerification}>{'I\'ve Verified My Email Address'}</button> {spinner}
           </div>
           <RetinaImage src="inspection.png" checkIfRetinaImgExists={false}/>
         </div>

styles/header.less

@@ -50,15 +50,18 @@
     border-right: 1px solid @color-divider;
     padding: 0 1rem 0 1rem;
     .box-button();
-
+    .text {
-    &:active {
+      width: 70px;
-      img, span {
+      overflow: hidden;
-        -webkit-filter: brightness(0.9);
+      text-overflow: ellipsis;
-      }
+      white-space: nowrap;
     }
-
     img {
-      margin: 0 5px;
+      position: relative;
+      top: 0.1rem;
+      margin: 0 0rem 0 0.4rem;
+      width: 8px;
+      height: 5px;
     }
   }
 

styles/new-container.less

@@ -55,7 +55,7 @@
       }
 
       .verify {
-        margin: 15px 0;
+        margin: 0.5rem 0 3rem 0;
         position: relative;
 
         .spinner {