fix(vscode-ui): Minor spacing/color bugs (#876)

nrwl · Oct 31, 2019 · c3c0352 · c3c0352
1 parent bf63612
commit c3c0352
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/libs/vscode-ui/components/src/lib/field/field.component.html b/libs/vscode-ui/components/src/lib/field/field.component.html
@@ -1,9 +1,7 @@
 <div class="field-title">
   {{ field.name }}
   <ng-container *ngIf="field.required">*</ng-container>
-  <ng-container *ngIf="field.deprecated"
-    >(deprecated: {{ field.deprecated }})</ng-container
-  >
+  <span class="deprecated-warning" *ngIf="field.deprecated">(deprecated)</span>
 </div>
 
 <ng-container [ngSwitch]="field.type">

diff --git a/libs/vscode-ui/components/src/lib/field/field.component.scss b/libs/vscode-ui/components/src/lib/field/field.component.scss
@@ -1,8 +1,9 @@
+@import 'variables';
+
 :host {
   display: block;
   position: relative;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
   white-space: normal;
 
   .field-title {
@@ -15,6 +16,10 @@
     line-height: 1.4rem;
   }
 
+  .deprecated-warning {
+    color: $primary-text-color;
+  }
+
   .setting-item-value {
     margin-top: 9px;
     display: flex;

diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html
@@ -87,7 +87,11 @@
             ></angular-console-field>
           </ng-container>
 
-          <ng-container *ngIf="filteredFields.size === 0" #noMatch>
+          <div
+            class="filter-flags-message"
+            *ngIf="filteredFields.size === 0"
+            #noMatch
+          >
             <div *ngIf="taskExecForm.architect.schema.length; else noFlags">
               No flags found -
               <span
@@ -101,7 +105,7 @@
             <ng-template #noFlags>
               This command has no flags to set
             </ng-template>
-          </ng-container>
+          </div>
         </form>
       </div>
     </div>

diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss
@@ -39,7 +39,6 @@ $offset-with-configurations: $offset-without-configurations +
 }
 
 .scroll-container,
-.form-container,
 vscode-ui-field-tree {
   box-sizing: border-box;
   padding-top: $host-padding-top / 2;
@@ -110,6 +109,7 @@ form {
 vscode-ui-field-tree,
 angular-console-field,
 .form-header,
+.filter-flags-message,
 .title-container {
   padding-left: 0.5rem;
 }
@@ -146,7 +146,7 @@ angular-console-field {
     line-height: 21px;
   }
 
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 
 @media (max-width: 600px) {