diff --git a/src/components/ContainerHomePreview.react.js b/src/components/ContainerHomePreview.react.js
index 66cff5a098..e44461498c 100644
--- a/src/components/ContainerHomePreview.react.js
+++ b/src/components/ContainerHomePreview.react.js
@@ -83,7 +83,7 @@ var ContainerHomePreview = React.createClass({
You can access this container using the following IP address and port:
diff --git a/src/components/Containers.react.js b/src/components/Containers.react.js
index 8d0fb669e1..449afb4835 100644
--- a/src/components/Containers.react.js
+++ b/src/components/Containers.react.js
@@ -161,7 +161,7 @@ var Containers = React.createClass({
Containers
-
+ New
diff --git a/src/components/ImageCard.react.js b/src/components/ImageCard.react.js
index 7b995de430..663a703d03 100644
--- a/src/components/ImageCard.react.js
+++ b/src/components/ImageCard.react.js
@@ -152,7 +152,7 @@ var ImageCard = React.createClass({
SELECTED TAG: {this.state.chosenTag}
- VIEW ON DOCKER HUB
+ VIEW ON DOCKER HUB
diff --git a/styles/left-panel.less b/styles/left-panel.less
index 631469725a..f63d18d835 100644
--- a/styles/left-panel.less
+++ b/styles/left-panel.less
@@ -41,19 +41,6 @@
&.active {
.btn-new {
opacity: 0.3;
- &:hover {
- color: @brand-action;
- }
- }
- }
- .btn-new {
- color: @brand-action;
- transition: all 0.25s;
- .icon {
- font-size: 14px;
- }
- &:hover {
- color: darken(@brand-action, 15%);
}
}
}
diff --git a/styles/right-panel.less b/styles/right-panel.less
index 800ea7cf7d..4db5bbc702 100644
--- a/styles/right-panel.less
+++ b/styles/right-panel.less
@@ -123,6 +123,20 @@
box-shadow: inset 0 0 1px @color-divider;
background-color: darken(@color-box-button, 1%);
}
+ &.disabled {
+ color: @gray-lightest;
+ &:hover {
+ background-color: white;
+ }
+ &:active {
+ background-color: white;
+ }
+ &.active {
+ &:hover {
+ background-color: @color-background;
+ }
+ }
+ }
}
}
}
diff --git a/styles/theme.less b/styles/theme.less
index bf0a0b2c9e..18c7aa3bb9 100644
--- a/styles/theme.less
+++ b/styles/theme.less
@@ -65,12 +65,13 @@ input[type="text"] {
}
// Mixin for generating new styles
-.btn-styles(@btn-color: @gray-normal) {
+.btn-hollow-styles(@btn-color: @gray-normal) {
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
transition: all 100ms;
background: transparent;
- border-color: @btn-color;
+ border: 1px solid @btn-color;
color: @btn-color;
+ font-weight: 500;
&:hover {
background-color: fade(@btn-color, 3%);
@@ -109,8 +110,10 @@ input[type="text"] {
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
transition: all 100ms;
background: @btn-color;
+ border: none;
color: white;
-
+ font-weight: 500;
+
&:hover {
background-color: darken(@btn-color, 4%);
color: white;
@@ -163,17 +166,27 @@ input[type="text"] {
// Common styles
.btn {
- font-size: 13px;
background-color: transparent;
color: @gray-normal;
border: 1px solid @gray-normal;
border-radius: @border-radius;
box-shadow: none;
- font-weight: 400;
text-shadow: none;
- padding: 5px 14px 5px 14px;
cursor: default;
-
+ font-size: 12px;
+ padding: 0.4rem 1rem;
+ text-transform: uppercase;
+
+ &.has-icon {
+ .icon {
+ font-size: 0.9rem;
+ margin-right: 0.4rem;
+ &::before {
+ -webkit-font-smoothing: subpixel-antialiased;
+ }
+ }
+ }
+
&.circular {
border-radius: 100%;
width: 25px;
@@ -241,20 +254,20 @@ input[type="text"] {
// Apply the mixin to the buttons
.btn-action {
- .btn-styles(@brand-action);
- &.btn-filled {
- .btn-filled-styles(@brand-action);
+ .btn-hollow-styles(@brand-action);
+ &.btn-hollow {
+ .btn-hollow-styles(@brand-action);
}
}
.btn-positive {
- .btn-styles(@brand-positive);
+ .btn-filled-styles(@brand-positive);
}
-.btn-default { .btn-styles(@btn-default-bg); }
-.btn-primary { .btn-styles(@btn-primary-bg); }
-.btn-success { .btn-styles(@btn-success-bg); }
-.btn-info { .btn-styles(@btn-info-bg); }
-.btn-warning { .btn-styles(@btn-warning-bg); }
-.btn-danger { .btn-styles(@btn-danger-bg); }
+.btn-default { .btn-filled-styles(@btn-default-bg); }
+.btn-primary { .btn-filled-styles(@btn-primary-bg); }
+.btn-success { .btn-filled-styles(@btn-success-bg); }
+.btn-info { .btn-filled-styles(@btn-info-bg); }
+.btn-warning { .btn-filled-styles(@btn-warning-bg); }
+.btn-danger { .btn-filled-styles(@btn-danger-bg); }
.tooltip {
.tooltip-inner {