fit and finish changes

client/src/app/shared/models/portal-resources.ts

@@ -1324,4 +1324,5 @@
     public static formIsInvalid = 'formIsInvalid';
     public static finishAndDeploy = 'finishAndDeploy';
     public static readOnlyLinuxDynamic = 'readOnlyLinuxDynamic';
+    public static singleContainerPreviewTitle = 'singleContainerPreviewTitle';
 }

client/src/app/site/container-settings/container-configure/container-configure.component.html

@@ -7,7 +7,7 @@
 
 <div *ngIf="containerConfigureInfo.container.disableMessage" class="container-configure">
     <section class="container-configure-header">
-        <div [load-image]="containerConfigureInfo.container.iconUrl" class="icon-large"></div>
+        <div [load-image]="containerConfigureInfo.container.iconUrl" class="icon-large container-disabled-icon"></div>
         <h4>{{containerConfigureInfo.container.disableMessage}}</h4>
     </section>
 </div>

client/src/app/site/container-settings/container-configure/container-configure.component.scss

@@ -27,4 +27,10 @@ footer {
     border-top: $border;
     padding: 0px 5px;
     background-color: $body-bg-color;
+}
+
+.container-disabled-icon {
+    height: 100px;
+    width: 100px;
+    filter: grayscale(100%);
 }

client/src/app/site/container-settings/container-image-source/container-continuous-delivery/container-continuos-delivery.component.html

@@ -1,9 +1,11 @@
 <div *ngIf="form" [formGroup] = "form">
-    <label>{{ 'containerContinuousDeployment' | translate }}</label><br/>
-    <radio-selector
-        [options] = "containerSettingsManager.continuousDeploymentOptions"
-        [control] = "form.controls.continuousDeploymentOption">
-    </radio-selector>
+    <div class="container-setting-property">
+        <label>{{ 'containerContinuousDeployment' | translate }}</label><br/>
+        <radio-selector
+            [options] = "containerSettingsManager.continuousDeploymentOptions"
+            [control] = "form.controls.continuousDeploymentOption">
+        </radio-selector>
+    </div>
 
     <div>
         <label>{{ 'containerWebhookUrl' | translate }}</label>

client/src/app/site/container-settings/container-image-source/container-continuous-delivery/container-continuos-delivery.component.ts

@@ -10,6 +10,7 @@ import { Observable } from 'rxjs/Observable';
     templateUrl: './container-continuos-delivery.component.html',
     styleUrls: [
         './../../container-settings.component.scss',
+        './../container-image-source.component.scss',
         './container-continuos-delivery.component.scss',
     ],
 })

client/src/app/site/container-settings/container-image-source/container-image-source-acr/container-image-source-acr.component.html

@@ -5,22 +5,24 @@
     </info-box>
 
     <div *ngIf = "!registriesMissing">
-        <label>{{ 'containerACRRegistry' | translate }}</label>
-        <ng-select
-            id="container-acr-registries"
-            class="custom-select container-acr-select"
-            bindLabel="displayLabel"
-            bindValue="value"
-            placeholder="Select Registry"
-            formControlName="registry"
-            [loading]="loadingRegistries"
-            [items]="registryDropdownItems"
-            [clearable]="false"
-            [(ngModel)]="selectedRegistry"
-            (change)="registryChanged($event)">
-        </ng-select>
+        <div class="container-setting-property">
+            <label>{{ 'containerACRRegistry' | translate }}</label>
+            <ng-select
+                id="container-acr-registries"
+                class="custom-select container-acr-select"
+                bindLabel="displayLabel"
+                bindValue="value"
+                placeholder="Select Registry"
+                formControlName="registry"
+                [loading]="loadingRegistries"
+                [items]="registryDropdownItems"
+                [clearable]="false"
+                [(ngModel)]="selectedRegistry"
+                (change)="registryChanged($event)">
+            </ng-select>
+        </div>
 
-        <div *ngIf = "containerImageSourceInfo.container.id === 'single'">
+        <div *ngIf = "containerImageSourceInfo.container.id === 'single'" class="container-setting-property">
             <label>{{ 'containerACRImage' | translate }}</label>
             <ng-select
                 id="container-acr-respositories"
@@ -37,7 +39,7 @@
             </ng-select>
         </div>
 
-        <div *ngIf = "containerImageSourceInfo.container.id === 'single'">
+        <div *ngIf = "containerImageSourceInfo.container.id === 'single'" class="container-setting-property">
             <label>{{ 'containerACRTag' | translate }}</label>
             <ng-select
                 id="container-acr-tags"
@@ -53,18 +55,18 @@
             </ng-select>
         </div>
 
-        <div *ngIf = "containerImageSourceInfo.container.id === 'single'">
+        <div *ngIf = "containerImageSourceInfo.container.id === 'single'" class="container-setting-property">
             <label>{{ 'containerACRStartupFile' | translate }}</label>
             <textbox [control]="imageSourceForm.controls.startupFile"></textbox>
         </div>
 
         <div *ngIf = "containerImageSourceInfo.container.id !== 'single'">
-            <div>
+            <div class="container-setting-property">
                 <label>{{ 'containerMultiConfigurationFile' | translate }}</label>
                 <input type="file" (change)="extractConfig($event)">
             </div>
 
-            <div>
+            <div class="container-setting-property">
                 <label>{{ 'containerMultiConfiguration' | translate }}</label><br/>
                 <textarea class="config" formControlName="config" disabled></textarea>
             </div>

client/src/app/site/container-settings/container-image-source/container-image-source-dockerhub/container-image-source-dockerhub.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="imageSourceForm" [formGroup] = "imageSourceForm">
+<div *ngIf="imageSourceForm" class="container-setting-property" [formGroup] = "imageSourceForm">
     <label>{{ 'containerRepositoryAccess' | translate }}</label>
     <div>
         <radio-selector
@@ -10,28 +10,28 @@
 </div>
 
 <div *ngIf="dockerHubForm" [formGroup] = "dockerHubForm">
-    <div *ngIf = "selectedAccessType === 'private'">
+    <div *ngIf = "selectedAccessType === 'private'" class="container-setting-property">
         <label>{{ 'containerLogin' | translate }}</label>
         <textbox [control] = "dockerHubForm.controls.login"></textbox>
     </div>
 
-    <div *ngIf = "selectedAccessType === 'private'">
+    <div *ngIf = "selectedAccessType === 'private'" class="container-setting-property">
         <label>{{ 'containerPassword' | translate }}</label>
         <textbox type="password" [control] = "dockerHubForm.controls.password"></textbox>
     </div>
 
-    <div *ngIf = "containerImageSourceInfo.container.id === 'single'">
+    <div *ngIf = "containerImageSourceInfo.container.id === 'single'" class="container-setting-property">
         <label>{{ 'containerImageAndTag' | translate }}</label>
         <textbox [control] = "dockerHubForm.controls.image"></textbox>
     </div>
 
     <div *ngIf = "containerImageSourceInfo.container.id !== 'single'">
-        <div>
+        <div class="container-setting-property">
             <label>{{ 'containerMultiConfigurationFile' | translate }}</label>
             <input type="file" (change)="extractConfig($event)">
         </div>
 
-        <div>
+        <div class="container-setting-property">
             <label>{{ 'containerMultiConfiguration' | translate }}</label><br/>
             <textarea class="config" formControlName="config" disabled></textarea>
         </div>

client/src/app/site/container-settings/container-image-source/container-image-source-privateregistry/container-image-source-privateregistry.component.html

@@ -1,36 +1,36 @@
 <div *ngIf="imageSourceForm" [formGroup] = "imageSourceForm">
-    <div>
+    <div class="container-setting-property">
         <label>{{ 'containerServerURL' | translate }}</label>
         <textbox [control] = "imageSourceForm.controls.serverUrl"></textbox>
     </div>
 
-    <div>
+    <div class="container-setting-property">
         <label>{{ 'containerLogin' | translate }}</label>
         <textbox [control] = "imageSourceForm.controls.login"></textbox>
     </div>
 
-    <div>
+    <div class="container-setting-property">
         <label>{{ 'containerPassword' | translate }}</label>
         <textbox type="password" [control] = "imageSourceForm.controls.password"></textbox>
     </div>
 
-    <div *ngIf = "containerImageSourceInfo.container.id === 'single'">
+    <div *ngIf = "containerImageSourceInfo.container.id === 'single'" class="container-setting-property">
         <label>{{ 'containerImageAndTag' | translate }}</label>
         <textbox [control] = "imageSourceForm.controls.image"></textbox>
     </div>
 
-    <div *ngIf = "containerImageSourceInfo.container.id === 'single'">
+    <div *ngIf = "containerImageSourceInfo.container.id === 'single'" class="container-setting-property">
         <label>{{ 'containerStartupFile' | translate }}</label>
         <textbox [control] = "imageSourceForm.controls.startupFile"></textbox>
     </div>
 
     <div *ngIf = "containerImageSourceInfo.container.id !== 'single'">
-        <div>
+        <div class="container-setting-property">
             <label>{{ 'containerMultiConfigurationFile' | translate }}</label>
             <input type="file" (change)="extractConfig($event)">
         </div>
 
-        <div>
+        <div class="container-setting-property">
             <label>{{ 'containerMultiConfiguration' | translate }}</label><br/>
             <textarea class="config" formControlName="config" disabled></textarea>
         </div>

client/src/app/site/container-settings/container-image-source/container-image-source-quickstart/container-image-source-quickstart.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="container-setting-property">
     <label>{{ 'quickstartSelectSample' | translate }}</label>
     <ng-select
         id="container-quickstart"
@@ -15,22 +15,22 @@
 </div>
 
 <div *ngIf="imageSourceForm" [formGroup] = "imageSourceForm">
-    <div *ngIf="selectedSampleDescription">
+    <div *ngIf="selectedSampleDescription" class="container-setting-property">
         <label>{{ 'quickStartSampleDescription' | translate }}</label>
         <p>{{selectedSampleDescription}}</p>
     </div>
 
-    <div *ngIf="containerImageSourceInfo.container.id === 'single'">
+    <div *ngIf="containerImageSourceInfo.container.id === 'single'" class="container-setting-property">
         <label>{{ 'containerImageAndTag' | translate }}</label><br/>
         <textarea formControlName="config" class="singleContainerConfig" disabled></textarea>
     </div>
 
-    <div *ngIf="containerImageSourceInfo.container.id === 'dockerCompose'">
+    <div *ngIf="containerImageSourceInfo.container.id === 'dockerCompose'" class="container-setting-property">
         <label>{{ 'containerConfiguration' | translate }}</label><br/>
         <textarea formControlName="config" class="dockerComposeConfig"  disabled></textarea>
     </div>
 
-    <div *ngIf="containerImageSourceInfo.container.id === 'kubernetes'">
+    <div *ngIf="containerImageSourceInfo.container.id === 'kubernetes'" class="container-setting-property">
         <label>{{ 'containerConfiguration' | translate }}</label><br/>
         <textarea formControlName="config" class="kubernetesConfig"  disabled></textarea>
     </div>

client/src/app/site/container-settings/container-image-source/container-image-source-quickstart/container-image-source-quickstart.component.scss

@@ -1,6 +1,6 @@
 .singleContainerConfig {
     width: 100%;
-    height: 200px;
+    height: 25px;
 }
 
 .dockerComposeConfig {

client/src/app/site/container-settings/container-image-source/container-image-source.component.html

@@ -1,12 +1,12 @@
 <div *ngIf = "containerImageSourceInfo" [formGroup] = "containerImageSourceInfo.containerForm">
-    <div>
+    <div class="container-setting-property">
         <label>{{ 'containerImageSource' | translate }}</label>
         <div>
-        <radio-selector
-            [options] = "containerSettingsManager.containerImageSourceOptions"
-            (value) = "updateContainerImageSource($event)"
-            [control] = "containerImageSourceInfo.containerForm.controls.imageSource">
-        </radio-selector>
+            <radio-selector
+                [options] = "containerSettingsManager.containerImageSourceOptions"
+                (value) = "updateContainerImageSource($event)"
+                [control] = "containerImageSourceInfo.containerForm.controls.imageSource">
+            </radio-selector>
         </div>
     </div>
 

client/src/app/site/container-settings/container-image-source/container-image-source.component.scss

@@ -1,4 +1,10 @@
 .config {
     width: 100%;
     height: 200px;
+}
+
+.container-setting-property {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    width: 750px;
 }

client/src/app/site/container-settings/container-image-source/container-logs/container-logs.component.html

@@ -1,5 +1,5 @@
 <div>
-    <h2>Logs</h2>
+    <h4>{{ 'logStreaming_logs' | translate }}</h4>
     <textarea class="logs" disabled>{{log}}</textarea>
 
     <div class="actionButtons">

client/src/app/site/container-settings/container-settings.component.scss

@@ -43,6 +43,7 @@ $center-column-max-width: calc(#{$spec-card-max-width}*4 - 40px);
         text-align: center;
         height: 83px;
         padding-top: 7px;
+        box-shadow: $card-box-shadow;
 
         h3 {
             margin-top: 2px;
@@ -109,5 +110,17 @@ $center-column-max-width: calc(#{$spec-card-max-width}*4 - 40px);
     }
 }
 
+:host-context(#app-root[theme=dark]){
+    .container{
+        background-color: lighten($chrome-color-dark, 10%);
+        box-shadow: $card-box-shadow-hover-dark;
 
-
+        &.selected-container{
+            background-color: $chrome-color-dark;
+        }
+    }
+
+    footer {
+        background-color:$body-bg-color-dark;
+    }
+}

client/src/app/site/container-settings/container-settings.ts

@@ -95,6 +95,10 @@ export class SingleContainer extends Container {
 
     constructor(injector: Injector, containerSettingsData: ContainerSettingsData) {
         super(injector);
+
+        if (containerSettingsData.os === 'windows') {
+            this.title = this.ts.instant(PortalResources.singleContainerPreviewTitle);
+        }
     }
 }
 

server/Resources/Resources.resx

@@ -4114,4 +4114,7 @@ Set to "External URL" to use an API definition that is hosted elsewhere.</value>
   <data name="readOnlyLinuxDynamic" xml:space="preserve">
     <value>Editing functions in the portal is not supported for Linux Consumption Function Apps (Preview).</value>
   </data>
+  <data name="singleContainerPreviewTitle" xml:space="preserve">
+    <value>Single Container (Preview)</value>
+  </data>
 </root>