diff --git a/src/components/ContainerSettingsGeneral.react.js b/src/components/ContainerSettingsGeneral.react.js
index d3c00b9a..e95bee4b 100644
--- a/src/components/ContainerSettingsGeneral.react.js
+++ b/src/components/ContainerSettingsGeneral.react.js
@@ -185,9 +185,9 @@ var ContainerSettingsGeneral = React.createClass({
let [id, key, val] = kvp;
let icon;
if (index === this.state.env.length - 1) {
- icon = ;
+ icon = ;
} else {
- icon = ;
+ icon = ;
}
return (
diff --git a/src/components/ContainerSettingsPorts.react.js b/src/components/ContainerSettingsPorts.react.js
index c266384d..370a0ebc 100644
--- a/src/components/ContainerSettingsPorts.react.js
+++ b/src/components/ContainerSettingsPorts.react.js
@@ -52,23 +52,27 @@ var ContainerSettingsPorts = React.createClass({
var key = pair[0];
var val = pair[1];
return (
-
+
+ {key} |
+ {val.display} |
+
);
});
return (
Configure Ports
-
-
-
DOCKER PORT
-
MAC PORT
-
- {ports}
-
+
+
+
+ DOCKER PORT |
+ MAC PORT |
+
+
+
+ {ports}
+
+
);
diff --git a/src/components/ContainerSettingsVolumes.react.js b/src/components/ContainerSettingsVolumes.react.js
index 5ccd5e4f..3be23ed0 100644
--- a/src/components/ContainerSettingsVolumes.react.js
+++ b/src/components/ContainerSettingsVolumes.react.js
@@ -47,43 +47,43 @@ var ContainerSettingsVolumes = React.createClass({
if (!this.props.container) {
return false;
}
-
var volumes = _.map(this.props.container.Volumes, (val, key) => {
if (!val || val.indexOf(process.env.HOME) === -1) {
val = (
-
- No Folder
- Change
- Remove
-
+ No Folder
);
} else {
val = (
-
- {val.replace(process.env.HOME, '~')}
- Change
- Remove
-
+ {val.replace(process.env.HOME, '~')}
);
}
return (
-
- {key}
- {val}
-
+
+ {key} |
+ {val} |
+
+ Change
+ Remove
+ |
+
);
});
return (
Configure Volumes
-
-
-
DOCKER FOLDER
-
MAC FOLDER
-
- {volumes}
-
+
+
+
+ DOCKER FOLDER |
+ MAC FOLDER |
+ |
+
+
+
+ {volumes}
+
+
);
diff --git a/styles/container-home.less b/styles/container-home.less
index ed62c074..fcc12c03 100644
--- a/styles/container-home.less
+++ b/styles/container-home.less
@@ -143,7 +143,7 @@
font-size: 10px;
white-space: pre-wrap;
-webkit-user-select: text;
- padding: 1.2rem;
+ padding: 1.2rem 1.2rem 5rem 1.2rem;
overflow: auto;
height: 100%;
}
diff --git a/styles/container-settings.less b/styles/container-settings.less
index fc7816fe..a579e921 100644
--- a/styles/container-settings.less
+++ b/styles/container-settings.less
@@ -78,8 +78,9 @@
}
.env-vars-labels {
width: 100%;
- font-size: 12px;
- color: @gray-light;
+ font-size: 14px;
+ color: @gray-lighter;
+ font-weight: 500;
margin-left: 5px;
margin-bottom: 5px;
margin-top: 20px;
@@ -109,97 +110,25 @@
}
}
.table {
- margin-bottom: 0;
- .icon-arrow-right {
- color: #BBB;
- font-size: 20px;
- margin: 0px 10px;
- flex: 0 auto;
- min-width: 13px;
- }
- &.ports {
- .table-labels {
- margin-top: 20px;
- flex: 1 auto;
- display: flex;
- font-size: 12px;
- color: @gray-light;
- .label-left {
- flex: 0 auto;
- min-width: 85px;
- margin-right: 30px;
- text-align: right;
- }
- .label-right {
- flex: 1 auto;
- display: inline-block;
- margin-left: 10px;
- width: 40%;
+ color: @gray-normal;
+ tr {
+ &:first-child {
+ td {
+ border: none;
}
}
- .table-values {
- flex: 1 auto;
- display: flex;
- flex-direction: row;
- margin: 8px 0;
- .value-left {
- text-align: right;
- min-width: 85px;
- flex: 0 auto;
- padding: 0px;
- }
- .value-right {
- flex: 1 auto;
- -webkit-user-select: text;
- max-width: 170px;
- padding: 0px;
- }
- label {
- margin-left: 8px;
- margin-top: 1px;
- font-weight: 400;
- font-size: 13px;
- }
- input[type="checked"] {
-
- }
+ td {
+ border-color: @color-divider;
}
}
- &.volumes {
- .table-labels {
- margin-top: 20px;
- flex: 1 auto;
- display: flex;
- font-size: 12px;
- color: @gray-light;
- .label-left {
- flex: 0 auto;
- margin-right: 30px;
- }
- .label-right {
- flex: 1 auto;
- display: inline-block;
- margin-left: 10px;
- }
- }
- .table-values {
- flex: 1 auto;
- display: flex;
- flex-direction: row;
- margin: 8px 0;
- .value-left {
- flex: 0 auto;
- padding: 0px;
- }
- .value-right {
- flex: 1 auto;
- -webkit-user-select: text;
- padding: 0px;
- }
- .btn {
- margin-left: 10px;
- }
- }
+ th {
+ font-size: 14px;
+ color: @gray-lighter;
+ font-weight: 500;
+ border: none;
+ }
+ .btn {
+ margin-right: 0.5rem;
}
}
}
diff --git a/styles/theme.less b/styles/theme.less
index e7c61ba8..cf58f23e 100644
--- a/styles/theme.less
+++ b/styles/theme.less
@@ -245,9 +245,15 @@ input[type="text"] {
&.only-icon {
padding: 6px 7px 6px 7px;
+ border-radius: 100%;
&.small {
width: 22px;
- padding: 4px 5px 4px 5px;
+ padding: 3px 5px 4px 5px;
+ .icon {
+ &::before {
+ -webkit-font-smoothing: subpixel-antialiased;
+ }
+ }
}
}
}
@@ -260,7 +266,7 @@ input[type="text"] {
}
}
.btn-positive {
- .btn-filled-styles(@brand-positive);
+ .btn-hollow-styles(@brand-positive);
}
.btn-default { .btn-filled-styles(@btn-default-bg); }
.btn-primary { .btn-filled-styles(@btn-primary-bg); }