UI: Style improvements

ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html

@@ -29,7 +29,7 @@
          matTooltipPosition="above"
          [ngClass]="{'configured': featuresInfo?.emailEnabled}"
          routerLink="/settings/outgoing-mail">
-        <div class="tb-feature-text" translate>widgets.configured-features.email-feature</div>
+        <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.emailEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.email-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" colspan="3">
@@ -38,7 +38,7 @@
          matTooltipPosition="above"
          [ngClass]="{'configured': featuresInfo?.smsEnabled}"
          routerLink="/settings/notifications">
-        <div class="tb-feature-text" translate>widgets.configured-features.sms-feature</div>
+        <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.smsEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.sms-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" colspan="2">
@@ -47,7 +47,7 @@
          matTooltipPosition="above"
          [ngClass]="{'configured': featuresInfo?.notificationEnabled}"
          routerLink="/settings/notifications">
-        <div class="tb-feature-text" translate>widgets.configured-features.slack-feature</div>
+        <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.notificationEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.slack-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" colspan="2">
@@ -56,7 +56,7 @@
          matTooltipPosition="above"
          [ngClass]="{'configured': featuresInfo?.oauthEnabled}"
          routerLink="/security-settings/oauth2">
-        <div class="tb-feature-text" translate>widgets.configured-features.oauth2-feature</div>
+        <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.oauthEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.oauth2-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" colspan="2">
@@ -65,7 +65,7 @@
          matTooltipPosition="above"
          [ngClass]="{'configured': featuresInfo?.twoFaEnabled}"
          routerLink="/security-settings/2fa">
-        <div class="tb-feature-text" translate>widgets.configured-features.2fa-feature</div>
+        <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.twoFaEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.2fa-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
   </mat-grid-list>

ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import "../../../../../../../scss/constants";
+
 :host {
   .tb-card-content {
     width: 100%;
@@ -27,7 +30,7 @@
     line-height: 20px;
     letter-spacing: 0.25px;
     color: rgba(0, 0, 0, 0.54);
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       font-size: 12px;
       line-height: 16px;
     }
@@ -51,7 +54,7 @@
   }
 
   .tb-feature-button {
-    height: 48.5px;
+    height: 50px;
     display: flex;
     overflow: hidden;
     flex-direction: column;
@@ -61,8 +64,8 @@
     border: 1px solid rgba(0, 0, 0, 0.05);
     box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
     border-radius: 10px;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
-      height: 21.5px;
+      height: 22px;
       padding: 0 8px;
     }
     &:hover {
@@ -77,12 +80,11 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      @media screen and (min-width: 960px) and (max-width: 1819px) {
+      @media #{$mat-md-lg} {
         font-size: 11px;
         line-height: 16px;
       }
-      &:before {
+      .tb-feature-status {
-        content: "close";
         display: inline-block;
         font-family: 'Material Icons Round';
         font-size: 20px;
@@ -92,27 +94,24 @@
         position: relative;
         background: #F4F4F4;
         border-radius: 4px;
-        width: 20px;
+        width: 24px;
-        height: 20px;
+        height: 24px;
         padding: 2px;
         margin-right: 8px;
         vertical-align: middle;
-        @media screen and (min-width: 960px) and (max-width: 1819px) {
+        @media #{$mat-md-lg} {
           font-size: 14px;
           line-height: 14px;
-          width: 14px;
+          width: 18px;
-          height: 14px;
+          height: 18px;
           margin-right: 4px;
         }
       }
     }
     &.configured {
-      .tb-feature-text {
+      .tb-feature-status {
-        &:before {
+        color: #198038;
-          content: "check";
+        background: #F3F6FA;
-          color: #198038;
-          background: #F3F6FA;
-        }
       }
     }
   }

ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts

@@ -25,6 +25,7 @@ import { Authority } from '@shared/models/authority.enum';
 import { of, Subscription } from 'rxjs';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { TranslateService } from '@ngx-translate/core';
+import { MediaBreakpoints } from '@shared/models/constants';
 
 @Component({
   selector: 'tb-configured-features',
@@ -35,7 +36,7 @@ export class ConfiguredFeaturesComponent extends PageComponent implements OnInit
 
   authUser = getCurrentAuthUser(this.store);
   featuresInfo: FeaturesInfo;
-  rowHeight = '48.5px';
+  rowHeight = '50px';
   gutterSize = '12px';
 
   private observeBreakpointSubscription: Subscription;
@@ -49,17 +50,17 @@ export class ConfiguredFeaturesComponent extends PageComponent implements OnInit
   }
 
   ngOnInit() {
-    const isMdLg = this.breakpointObserver.isMatched('screen and (min-width: 960px) and (max-width: 1819px)');
+    const isMdLg = this.breakpointObserver.isMatched(MediaBreakpoints['md-lg']);
-    this.rowHeight = isMdLg ? '21.5px' : '48.5px';
+    this.rowHeight = isMdLg ? '22px' : '50px';
     this.gutterSize = isMdLg ? '8px' : '12px';
     this.observeBreakpointSubscription = this.breakpointObserver
-      .observe('screen and (min-width: 960px) and (max-width: 1819px)')
+      .observe(MediaBreakpoints['md-lg'])
       .subscribe((state: BreakpointState) => {
           if (state.matches) {
-            this.rowHeight = '21.5px';
+            this.rowHeight = '22px';
             this.gutterSize = '8px';
           } else {
-            this.rowHeight = '48.5px';
+            this.rowHeight = '50px';
             this.gutterSize = '12px';
           }
           this.cd.markForCheck();

ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import "../../../../../../../scss/constants";
+
 :host {
   .tb-card-content {
     width: 100%;
@@ -35,7 +38,7 @@
     color: rgba(0, 0, 0, 0.54);
     position: relative;
     border-bottom: none;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       font-size: 12px;
       line-height: 16px;
     }
@@ -85,7 +88,7 @@
     border: 1px solid rgba(0, 0, 0, 0.05);
     box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
     border-radius: 10px;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       height: 18px;
       padding: 0 8px;
     }
@@ -103,7 +106,7 @@
         background: #F3F6FA;
         border-radius: 6px;
         margin-right: 8px;
-        @media screen and (min-width: 960px) and (max-width: 1819px) {
+        @media #{$mat-md-lg} {
           display: none;
         }
       }
@@ -116,7 +119,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        @media screen and (min-width: 960px) and (max-width: 1819px) {
+        @media #{$mat-md-lg} {
           font-size: 11px;
           line-height: 16px;
         }
@@ -135,7 +138,7 @@
     padding: 8px;
     border: 2px dashed rgba(0, 0, 0, 0.08);
     border-radius: 10px;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       height: 18px;
       padding: 0 8px;
       .tb-add-icon {

ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts

@@ -128,11 +128,11 @@ export class DocLinksWidgetComponent extends PageComponent implements OnInit, On
   ngOnInit() {
     this.settings = this.ctx.settings;
     this.columns = this.settings.columns || 3;
-    const isMdLg = this.breakpointObserver.isMatched('screen and (min-width: 960px) and (max-width: 1819px)');
+    const isMdLg = this.breakpointObserver.isMatched(MediaBreakpoints['md-lg']);
     this.rowHeight = isMdLg ? '18px' : '55px';
     this.gutterSize = isMdLg ? '8px' : '12px';
     this.observeBreakpointSubscription = this.breakpointObserver
-      .observe('screen and (min-width: 960px) and (max-width: 1819px)')
+      .observe(MediaBreakpoints['md-lg'])
       .subscribe((state: BreakpointState) => {
           if (state.matches) {
             this.rowHeight = '18px';

ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import "../../../../../../../scss/constants";
+
 :host {
   display: flex;
   flex-direction: column;
@@ -25,7 +28,7 @@
     letter-spacing: 0.1px;
     color: rgba(0, 0, 0, 0.76);
     padding-bottom: 24px;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       font-weight: 500;
       font-size: 14px;
       line-height: 20px;
@@ -89,7 +92,7 @@
     color: rgba(0, 0, 0, 0.54);
   }
 
-  @media screen and (min-width: 960px) and (max-width: 1819px) {
+  @media #{$mat-md-lg} {
     .tb-get-started .mat-step-label {
       font-size: 12px;
       line-height: 16px;

ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import "../../../../../../../scss/constants";
+
 :host {
   .tb-card-content {
     width: 100%;
@@ -25,7 +28,7 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       margin-bottom: 4px;
     }
   }
@@ -37,14 +40,14 @@
     line-height: 20px;
     letter-spacing: 0.25px;
     color: rgba(0, 0, 0, 0.54);
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       font-size: 12px;
       line-height: 16px;
     }
   }
 
   .tb-contact-us {
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       height: 24px;
       font-size: 12px;
     }
@@ -58,7 +61,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       padding: 4px;
     }
     &.up-to-date {
@@ -71,7 +74,7 @@
 
   .tb-version-info-container+.tb-version-info-container {
     margin-top: 12px;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       margin-top: 4px;
     }
   }
@@ -84,7 +87,7 @@
     color: rgba(0, 0, 0, 0.76);
     position: relative;
     border-bottom: none;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       font-size: 11px;
       line-height: 16px;
     }
@@ -114,14 +117,14 @@
     line-height: 24px;
     letter-spacing: 0.15px;
     color: rgba(0, 0, 0, 0.87);
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       font-size: 12px;
       line-height: 14px;
     }
   }
 
   .tb-upgrade {
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       height: 24px;
       font-size: 12px;
       padding: 0;
@@ -131,7 +134,7 @@
   .check-icon {
     color: #198038;
     font-weight: 600;
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       font-size: 20px;
     }
   }
@@ -142,7 +145,7 @@
     line-height: 20px;
     letter-spacing: 0.2px;
     color: rgba(0, 0, 0, 0.76);
-    @media screen and (min-width: 960px) and (max-width: 1819px) {
+    @media #{$mat-md-lg} {
       font-size: 11px;
       line-height: 16px;
     }

ui-ngx/src/app/shared/models/constants.ts

@@ -67,7 +67,8 @@ export const MediaBreakpoints = {
   'gt-sm': 'screen and (min-width: 960px)',
   'gt-md': 'screen and (min-width: 1280px)',
   'gt-lg': 'screen and (min-width: 1920px)',
-  'gt-xl': 'screen and (min-width: 5001px)'
+  'gt-xl': 'screen and (min-width: 5001px)',
+  'md-lg': 'screen and (min-width: 960px) and (max-width: 1819px)'
 };
 
 export const helpBaseUrl = 'https://thingsboard.io';

ui-ngx/src/scss/constants.scss

@@ -27,5 +27,6 @@ $mat-gt-sm: "screen and (min-width: 960px)";
 $mat-gt-md: "screen and (min-width: 1280px)";
 $mat-gt-xmd: "screen and (min-width: 1600px)";
 $mat-gt-xl: "screen and (min-width: 1920px)";
+$mat-md-lg: "screen and (min-width: 960px) and (max-width: 1819px)";
 
 $primary-hue-3: rgb(207, 216, 220) !default;