fix(console): add resource id to meta layout, error highlighting formfield label, missing tooltips, cleanup app detail (#1025)

* add resource id to meta layout, tooltips

* input label disable prop, app detail info

* lint

console/src/app/modules/accounts-card/accounts-card.component.scss

@@ -56,7 +56,7 @@
 
       &:hover {
         cursor: pointer;
-        background-color: #ffffff10;
+        background-color: #00000010;
       }
 
       .small-avatar {

console/src/app/modules/contributors/contributors.component.html

@@ -30,7 +30,7 @@
                 </div>
             </ng-template>
             <button class="add-img" (click)="emitAddMember()" [disabled]="disabled" mat-icon-button
-                aria-label="Edit contributors">
+                matTooltip="{{'ACTIONS.ADD' | translate}}" aria-label="Edit contributors">
                 <mat-icon>add</mat-icon>
             </button>
             <span class="fill-space"></span>

console/src/app/modules/form-field/form-field.component.ts

@@ -45,7 +45,10 @@ class CnslFormFieldBase {
         '[class.ng-valid]': '_shouldForward("valid")',
         '[class.ng-invalid]': '_shouldForward("invalid")',
         '[class.ng-pending]': '_shouldForward("pending")',
-        // '[class.cnsl-form-field-invalid]': '_control.errorState',
+        '[class.cnsl-form-field-disabled]': '_control.disabled',
+        '[class.cnsl-form-field-autofilled]': '_control.autofilled',
+        '[class.cnsl-focused]': '_control.focused',
+        '[class.cnsl-form-field-invalid]': '_control.errorState',
     },
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,

console/src/app/modules/info-section/info-section.component.html

@@ -0,0 +1,6 @@
+<div class="info-section-row">
+    <i class="icon las la-info"></i>
+    <div class="info-section-content">
+        <ng-content></ng-content>
+    </div>
+</div>

console/src/app/modules/info-section/info-section.component.scss

@@ -0,0 +1,30 @@
+@import '~@angular/material/theming';
+
+@mixin info-section-theme($theme) {
+  $primary: map-get($theme, primary);
+  $primary-color: mat-color($primary, 500);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .info-section-row {
+    display: flex;
+    background-color: if($is-dark-theme, #ffffff13, #f3f3f3);
+    border-radius: 4px;
+    padding: .5rem 0;
+    padding-right: 1rem;
+    color: if($is-dark-theme, #d6d6d6, #3c4257);
+    font-size: 14px;
+
+    .icon {
+      margin-right: 1rem;
+      height: 1.2rem;
+      line-height: 1.2rem;
+      font-size: 1.2rem;
+      margin-left: .5rem;
+      color: $primary-color;
+    }
+
+    .info-section-content {
+      flex: 1;
+    }
+  }
+}

console/src/app/modules/info-section/info-section.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoSectionComponent } from './info-section.component';
+
+describe('InfoSectionComponent', () => {
+    let component: InfoSectionComponent;
+    let fixture: ComponentFixture<InfoSectionComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [InfoSectionComponent],
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(InfoSectionComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

console/src/app/modules/info-section/info-section.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'cnsl-info-section',
+    templateUrl: './info-section.component.html',
+    styleUrls: ['./info-section.component.scss'],
+})
+export class InfoSectionComponent { }

console/src/app/modules/info-section/info-section.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { InfoSectionComponent } from './info-section.component';
+
+
+
+@NgModule({
+    declarations: [InfoSectionComponent],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        InfoSectionComponent,
+    ],
+})
+export class InfoSectionModule { }

console/src/app/modules/label/label.component.scss

@@ -5,12 +5,27 @@
   $primary: map-get($theme, primary);
   $primary-color: mat-color($primary, 500);
   $is-dark-theme: map-get($theme, is-dark);
+  $warn: map-get($theme, warn);
+  $warn-color: mat-color($warn, 500);
 
   .cnsl-label {
     display: block;
     font-size: 12px;
     color: if($is-dark-theme, var(--grey), var(--grey));
+    transition: color .2s ease;
     margin-bottom: 4px;
     font-weight: 400;
   }
+
+  .cnsl-form-field-disabled {
+    .cnsl-label {
+      color: if($is-dark-theme, #ffffff80, #00000061);
+    }
+  }
+
+  .cnsl-form-field-invalid {
+    .cnsl-label {
+      color: $warn-color;
+    }
+  }
 }

console/src/app/modules/meta-layout/meta.scss

@@ -0,0 +1,57 @@
+
+@import '~@angular/material/theming';
+
+@mixin meta-theme($theme) {
+  .meta-details {
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #81868a40;
+    padding-bottom: 1rem;
+
+    .meta-row {
+      display: flex;
+      margin-bottom: .5rem;
+      align-items: center;
+
+      .first {
+        flex: 1;
+        font-size: 13px;
+        margin-right: .5rem;
+      }
+
+      .fill-space {
+        flex: 1;
+      }
+
+      .second {
+        font-size: 13px;
+      }
+
+      .state {
+        border-radius: 50vw;
+        padding: 2px .5rem;
+        letter-spacing: .05em;
+        font-size: 13px;
+        background-color: #8795a120;
+
+        &.active {
+          background-color: #85d996;
+          color: black;
+        }
+
+        &.inactive {
+          background-color: #ff8981;
+          color: black;
+        }
+      }
+    }
+  }
+
+  .mat-tab-label {
+    min-width: 100px !important;
+  }
+
+  .meta-flex-col {
+    display: flex;
+    flex-direction: column;
+  }
+}