Added edit mode UI improvements (#4954)

* added changes for the tabs CSS

Signed-off-by: Vinay Sharma <vsharma@chef.io>

* changes for data bag name and border

Signed-off-by: chaitali-mane <cmane@progress.com>

* changed Data bags text

Signed-off-by: chaitali-mane <cmane@progress.com>

* Conflict Resloved

Signed-off-by: chaitali-mane <cmane@progress.com>

Co-authored-by: Vinay Sharma <vsharma@chef.io>

components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.scss

@@ -1,4 +1,5 @@
 @import "~styles/variables";
+@import '../infra_shared/shared';
 
 chef-page-header {
   padding-bottom: 0;
@@ -29,38 +30,6 @@ chef-toolbar {
   }
 }
 
-::ng-deep {
-
-  chef-tab-selector {
-    chef-option {
-      margin-right: 4px;
-      color: $chef-primary-dark;
-    }
-
-    ::ng-deep .selected {
-      background-color: $gray-highlight;
-    }
-
-    ::ng-deep .selected::before {
-      height: 4px;
-      background-color: $chef-dark-blue;
-    }
-
-    chef-option:focus {
-      outline: none;
-    }
-
-    ::ng-deep chef-option::before {
-      height: 4px;
-      background-color: $chef-tab-hover;
-    }
-
-    ::ng-deep chef-option:hover::before {
-      background: $chef-azureish-gray;
-    }
-  }
-}
-
 form {
 
   chef-form-field {

components/automate-ui/src/app/modules/infra-proxy/client-details/client-details.component.scss

@@ -1,6 +1,7 @@
 @import "~styles/variables";
 @import 'app/page-components/json-tree/json-tree.component.scss';
 @import "~styles/mixins";
+@import '../infra_shared/shared';
 
 chef-page-header {
   padding-bottom: 0;

components/automate-ui/src/app/modules/infra-proxy/cookbook-details/cookbook-details.component.scss

@@ -1,4 +1,5 @@
 @import "~styles/variables";
+@import '../infra_shared/shared';
 
 chef-page-header {
   padding-bottom: 0;

components/automate-ui/src/app/modules/infra-proxy/data-bags-details/data-bags-details.component.scss

@@ -1,5 +1,6 @@
 @import "~styles/variables";
 @import 'app/page-components/json-tree/json-tree.component.scss';
+@import '../infra_shared/shared';
 
 chef-page-header {
   padding-bottom: 0;

components/automate-ui/src/app/modules/infra-proxy/data-bags-list/data-bags-list.component.html

@@ -18,7 +18,7 @@
   <ng-container  *ngIf="!dataBagsListLoading && !authFailure">
     <chef-toolbar>
       <app-authorized [allOf]="['/api/v0/infra/servers', 'post']">
-        <chef-button primary (click)="openCreateModal()">Create Databag</chef-button>
+        <chef-button primary (click)="openCreateModal()">Create Data Bag</chef-button>
       </app-authorized>
     </chef-toolbar>
     <chef-table *ngIf="dataBags.length">
@@ -43,7 +43,7 @@
   <div *ngIf="!authFailure">
     <div class="empty-section" *ngIf="!dataBagsListLoading && (dataBags.length === 0)">
       <img alt="No preview" src="/assets/img/no_preview.gif"/>
-      <p>No databags available.</p>
+      <p>No Data Bags available.</p>
     </div>
   </div>
 </section>

components/automate-ui/src/app/modules/infra-proxy/edit-environment-attribute-modal/edit-environment-attribute-modal.component.scss

@@ -167,8 +167,8 @@ chef-modal {
 .divider-constraint {
   margin-top: 9px;
   width: 643px;
-  height: 0px;
-  border: 0.5px solid $chef-key-tab;
+  height: 1px;
+  background-color: $chef-key-tab;
 }
 
 .dynamic {

components/automate-ui/src/app/modules/infra-proxy/environment-details/environment-details.component.scss

@@ -1,5 +1,6 @@
 @import "~styles/variables";
 @import 'app/page-components/json-tree/json-tree.component.scss';
+@import '../infra_shared/shared';
 
 chef-page-header {
   padding-bottom: 0;

components/automate-ui/src/app/modules/infra-proxy/infra-role-details/infra-role-details.component.scss

@@ -1,4 +1,5 @@
 @import "~styles/variables";
+@import '../infra_shared/shared';
 @import '../../../../app/page-components/json-tree/json-tree.component.scss';
 
 chef-page-header {

components/automate-ui/src/app/modules/infra-proxy/infra_shared/shared.scss

@@ -0,0 +1,28 @@
+chef-tab-selector {
+  chef-option {
+    margin-right: 4px;
+    color: $chef-primary-dark;
+  }
+
+  ::ng-deep .selected {
+    background-color: $gray-highlight;
+  }
+
+  ::ng-deep .selected::before {
+    height: 4px;
+    background-color: $chef-dark-blue;
+  }
+
+  chef-option:focus {
+    outline: none;
+  }
+
+  ::ng-deep chef-option::before {
+    height: 4px;
+    background-color: $chef-tab-hover;
+  }
+
+  ::ng-deep chef-option:hover::before {
+    background: $chef-azureish-gray;
+  }
+}

components/automate-ui/src/app/modules/infra-proxy/org-details/org-details.component.scss

@@ -77,7 +77,7 @@ chef-table {
   }
 
   ::ng-deep button.nav-tab.active {
-    background: $chef-active-grey;
+    background-color: $chef-active-grey;
   }
 
   ::ng-deep button.nav-tab:focus {