diff --git a/src/components/Header.react.js b/src/components/Header.react.js index 296b3590be..8005f61011 100644 --- a/src/components/Header.react.js +++ b/src/components/Header.react.js @@ -94,8 +94,7 @@ var Header = React.createClass({ }); accountActions.verify(); }, - render: function () { - let updateWidget = this.state.updateAvailable && !this.props.hideLogin ? UPDATE NOW : null; + renderWindowButtons: function () { let buttons; if (this.state.fullscreen) { buttons = ( @@ -114,7 +113,11 @@ var Header = React.createClass({ ); } - + return buttons; + }, + render: function () { + let updateWidget = this.state.updateAvailable && !this.props.hideLogin ? UPDATE NOW : null; + let username; if (this.props.hideLogin) { username = null; @@ -140,12 +143,18 @@ var Header = React.createClass({ return (
- {buttons} -
- {updateWidget} +
+ {this.renderWindowButtons()} +
+
+ {username} +
+
-
- {username} +
+
+ {updateWidget} +
); diff --git a/styles/header.less b/styles/header.less index 5a4da6bfc3..55ad1454eb 100644 --- a/styles/header.less +++ b/styles/header.less @@ -1,10 +1,10 @@ .header { - min-height: 50px; + min-height: 40px; -webkit-app-region: drag; -webkit-user-select: none; &.bordered { - border-bottom: 1px solid #E7E7E7; + border-bottom: 1px solid @color-divider; } display: flex; @@ -12,6 +12,12 @@ .no-drag { -webkit-app-region: no-drag; } + + .left-header { + display: flex; + min-width: 260px; + } + .updates { flex: 1 auto; display: flex; @@ -26,13 +32,20 @@ } } + .login-wrapper { + flex: 1 auto; + display: flex; + justify-content: flex-end; + } + .login { flex: 0 auto; display: flex; - color: #88919C; + color: @gray-light; align-items: center; - justify-content: flex-end; - margin-right: 13px; + border-left: 1px solid @color-divider; + border-right: 1px solid @color-divider; + padding: 0 1rem 0 0.6rem; &:active { img, span { @@ -47,8 +60,7 @@ .buttons { display: flex; - margin-left: 14px; - + margin: 0 1.5rem; align-items: center; justify-content: center; &:hover { diff --git a/styles/left-panel.less b/styles/left-panel.less index 4fe8312929..28a6006010 100644 --- a/styles/left-panel.less +++ b/styles/left-panel.less @@ -1,7 +1,6 @@ /* Sidebar */ .sidebar { - padding-top: 10px; background-color: white; margin: 0; border-right: 1px solid @color-divider; @@ -13,7 +12,7 @@ .sidebar-header { flex: 0 auto; min-width: 240px; - min-height: 47px; + min-height: 40px; display: flex; border-bottom: 1px solid transparent; transition: border-bottom 0.25s; @@ -23,8 +22,7 @@ } h4 { align-self: flex-start; - padding-left: 26px; - margin: 14px 0 0; + padding: 0.2rem 0 0 1.4rem; display: inline-block; position: relative; } @@ -32,8 +30,9 @@ display: flex; flex: 1 auto; justify-content: flex-end; - margin-right: 20px; - margin-top: 3px; + margin: 0.6rem 1rem 0 0; + //margin-right: 20px; + //margin-top: 3px; a { display: block; text-decoration: none; @@ -88,13 +87,18 @@ text-decoration: none; cursor: default; } + &:first-child { + li { + border-top: 1px solid @color-divider; + } + } &:focus { text-decoration: none; } &.active { background: @brand-action; li { - height: 57px; + height: 45px; border-bottom: none; .brand-gradient(); .name { @@ -136,25 +140,25 @@ } li { vertical-align: middle; - padding: 10px 16px 10px 26px; + padding: 0.7rem 1rem 0.7rem 1.4rem; display: flex; flex-direction: row; - height: 57px; + height: 45px; + border-bottom: 1px solid @color-divider; .info { - font-size: 13px; - margin-left: 16px; + margin-left: 1rem; .name { text-overflow: ellipsis; max-width: 140px; white-space: nowrap; overflow: hidden; - font-size: 14px; + font-size: 12px; font-weight: 400; color: @gray-darkest; } .image { color: @gray-light; - font-size: 10px; + font-size: 9px; font-weight: 400; text-overflow: ellipsis; max-width: 140px; @@ -166,9 +170,8 @@ display: none; flex: 1; position: relative; - top: 5px; + top: 0.2rem; text-align: right; - margin-right: 4px; .btn-delete { font-size: 24px; color: @gray-lighter; @@ -177,7 +180,7 @@ } } .state { - margin-top: 9px; + margin-top: 0.6rem; display: inline-block; position: relative; min-width: 20px; diff --git a/styles/theme.less b/styles/theme.less index e5bda86122..5bb8256d8a 100644 --- a/styles/theme.less +++ b/styles/theme.less @@ -63,33 +63,31 @@ input[type="text"] { // Mixin for generating new styles .btn-styles(@btn-color: @gray-normal) { - transition: all 0.25s; .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners - border-color: @btn-color; - color: @btn-color; + transition: all 100ms; + background: transparent; + border-color: @btn-color; + color: @btn-color; - &:hover, - &:focus { - border-color: darken(@btn-color, 15%); - color: darken(@btn-color, 15%); + &:hover { + background-color: fade(@btn-color, 3%); + border-color: darken(@btn-color, 5%); + color: darken(@btn-color, 5%); cursor: default; box-shadow: none; - background: none; } + &:focus, + &.focus { + color: @btn-color; + outline: none; + } + &:active { - background-color: lighten(@btn-color, 45%); - border-color: darken(@btn-color, 15%); - color: darken(@btn-color, 15%); - box-shadow: none; - } - - &.active { - background-color: @btn-color; - color: white; - box-shadow: none; - box-shadow: none; - } + background-color: fade(@btn-color, 5%); + border-color: darken(@btn-color, 5%); + box-shadow: 0 0 0 3px fade(@btn-color, 25%); + } &:disabled, &[disabled] { @@ -129,7 +127,7 @@ input[type="text"] { background-color: transparent; color: @gray-normal; border: 1px solid @gray-normal; - border-radius: 40px; + border-radius: @border-radius; box-shadow: none; font-weight: 400; text-shadow: none; @@ -169,7 +167,6 @@ input[type="text"] { &:active, &.active { background-image: none; - box-shadow: none; } &:focus, @@ -193,16 +190,6 @@ input[type="text"] { } .btn-positive { .btn-styles(@brand-positive); - &:hover, - &:focus { - border-color: darken(@brand-positive, 7%); - color: darken(@brand-positive, 7%); - } - &:active { - background-color: lighten(@brand-positive, 53%); - border-color: darken(@brand-positive, 7%); - color: darken(@brand-positive, 7%); - } } .btn-default { .btn-styles(@btn-default-bg); } .btn-primary { .btn-styles(@btn-primary-bg); } diff --git a/styles/variables.less b/styles/variables.less index 83e17a8c3b..bdf280fb62 100644 --- a/styles/variables.less +++ b/styles/variables.less @@ -13,14 +13,16 @@ @traffic-light-gray-border: #D3D3D3; @gray-darkest: #233137; -@gray-darker: #556473; -@gray-normal: #7A8491; -@gray-light: #9AA7BB; -@gray-lighter: #C4CDDA; -@gray-lightest: #E1E8EF; +@gray-darker: #3f5167; +@gray-normal: #556473; +@gray-light: #7a8491; +@gray-lighter: #c4cdda; +@gray-lightest: #e6edf4; -@color-divider: @gray-lightest; +@color-divider: #EDF0F4; @color-background: #FCFCFC; @font-regular: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; @font-code: Menlo; + +@border-radius: 0.2rem;