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} -
+ + {key} + {val.display} + ); }); return (

Configure Ports

-
-
-
DOCKER PORT
-
MAC PORT
-
- {ports} -
+ + + + + + + + + {ports} + +
DOCKER PORTMAC PORT
); 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} -
+ + + + + + + + + + {volumes} + +
DOCKER FOLDERMAC FOLDER
); 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); }