Touch up dashboard and related changes

modules/portmaster/projects/safing/portmaster-api/src/lib/spn.types.ts

@@ -95,7 +95,7 @@ export interface Feature {
   InPackage: Package | null;
   Comment: string;
   Beta?: boolean;
-  CommingSoon?: boolean;
+  ComingSoon?: boolean;
 
   // does not come from the PM API but is set by SPNService
   IconURL: string;

modules/portmaster/src/app/layout/navigation/navigation.html

@@ -56,7 +56,7 @@
 
   <div class="pt-1 border-t border-gray-400 nav-list">
     <!-- The notification drop-down -->
-    <div sfngTipUpTrigger="navNotifications" sfngTipUpPassive class="relative " (click)="toggleSideDash($event)"
+    <div sfngTipUpTrigger="navNotifications" sfngTipUpPassive class="relative mt-3" (click)="toggleSideDash($event)"
       *ngIf="sideDashStatus !== 'expanded'">
 
       <svg class="w-4 h-4 {{ hasNewNotifications ? notificationColor : '' }}" xmlns="http://www.w3.org/2000/svg"

modules/portmaster/src/app/layout/side-dash/side-dash.html

@@ -1,4 +1,4 @@
-<div class="relative flex flex-row w-full gap-2 px-2 pb-8 justify-evenly">
+<div sfngTipUpTrigger="navShield" sfngTipUpPassive class="relative flex flex-row w-full gap-2 px-2 pb-8 justify-evenly">
   <app-status-pilot class="block w-32"></app-status-pilot>
 </div>
 

modules/portmaster/src/app/layout/side-dash/side-dash.scss

@@ -5,7 +5,7 @@
   justify-content: flex-start;
   overflow: hidden;
   overflow-y: hidden;
-  max-width: 419px;
+  width: 419px;
 
   @apply pt-4;
 }

modules/portmaster/src/app/pages/dashboard/dashboard.component.html

@@ -2,27 +2,30 @@
   <header class="flex flex-row items-center justify-between w-full" id="header">
     <h1 class="flex flex-col flex-grow text-lg font-light text-white">
       Dashboard
-      <span class="text-sm font-normal text-secondary">Welcome back
-        <ng-container *ngIf="!!profile && profile.state !== ''">
-          , <span class="text-primary">{{ profile.username }}</span>
+      <span class="text-sm font-normal text-secondary">
+        <ng-container *ngIf="!!profile && profile.state !== ''; else: noSettingsTemplate">
+          Welcome back, <span class="text-primary">{{ profile.username }}</span>!
         </ng-container>
-        !
+        <ng-template #noSettingsTemplate>
+          Welcome back!
+        </ng-template>
       </span>
+      <span class="font-light text-xs text-green-300 mt-2">⮜ New: Click shield to open dashboard</span>
     </h1>
 
     <div class="flex flex-row gap-8">
       <ng-container *ngIf="!!profile">
         <div class="flex flex-col text-xs leading-4">
           <span class="font-light text-secondary">Your current plan is <span
-              class="font-normal text-green-300">{{ profile.current_plan?.name || 'N/A' }}</span></span>
+              class="font-normal text-primary">{{ profile.current_plan?.name || 'N/A' }}</span></span>
 
           <span class="font-light text-secondary" *ngIf="!profile.subscription?.next_billing_date">
             and ends {{ profile.subscription ? ' in ': ''}} <span class="font-normal text-primary">
               {{ profile.subscription ? (profile.subscription.ends_at | timeAgo) : 'never'}}
             </span>
           </span>
           <span class="font-light text-secondary" *ngIf="!!profile.subscription?.next_billing_date">
-            and re-news in <span class="font-normal text-primary">
+            and auto-renews in <span class="font-normal text-primary">
               {{ profile.subscription!.next_billing_date | timeAgo }}
             </span>
           </span>
@@ -63,17 +66,17 @@ <h1 class="flex flex-col flex-grow text-lg font-light text-white">
     <!-- Mini Stats -->
     <div class="mini-stats-list">
       <div class="mini-stat" routerLink="/monitor" [queryParams]="{q: 'verdict:3 verdict:4'}">
-        <label>Connections Blocked</label>
+        <label routerLink="/monitor" [queryParams]="{q: 'verdict:3 verdict:4'}">Connections Blocked</label>
         <span>{{ blockedConnections }}</span>
       </div>
 
       <div class="mini-stat" routerLink="/monitor" [queryParams]="{q: 'active:true'}">
-        <label>Active Connections</label>
+        <label routerLink="/monitor" [queryParams]="{q: 'active:true'}">Active Connections</label>
         <span>{{ activeConnections }}</span>
       </div>
 
       <div class="mini-stat" routerLink="/monitor" [queryParams]="{q: 'active:true groupby:profile'}">
-        <label>Active Apps</label>
+        <label routerLink="/monitor" [queryParams]="{q: 'active:true groupby:profile'}">Active Apps</label>
         <span>{{ activeProfiles }}</span>
       </div>
 
@@ -83,8 +86,8 @@ <h1 class="flex flex-col flex-grow text-lg font-light text-white">
           {{ dataOutgoing | bytes }}
         </span>
 
-        <span *ngIf="!featureBw" class="!text-xxs !text-secondary w-full text-center !leading-3">
-          Available in <br />Portmaster Plus
+        <span *ngIf="!featureBw" class="!text-xxs !font-light !text-tertiary !text-opacity-50 w-full text-center !leading-3">
+          Available in<br />Portmaster Plus
         </span>
       </div>
 
@@ -93,16 +96,16 @@ <h1 class="flex flex-col flex-grow text-lg font-light text-white">
         <span *ngIf="featureBw">
           {{ dataIncoming | bytes }}
         </span>
-        <span *ngIf="!featureBw" class="!text-xxs !text-secondary w-full text-center !leading-3">
-          Available in <br />Portmaster Plus
+        <span *ngIf="!featureBw" class="!text-xxs !font-light !text-tertiary !text-opacity-50 w-full text-center !leading-3">
+          Available in<br />Portmaster Plus
         </span>
       </div>
 
       <div class="mini-stat" routerLink="/monitor" [queryParams]="{q: 'tunneled:true groupby:exit_node'}">
-        <label>SPN Identities</label>
+        <label routerLink="/monitor" [queryParams]="{q: 'tunneled:true groupby:exit_node'}">SPN Identities</label>
         <span *ngIf="featureSPN">{{ activeIdentities }}</span>
-        <span *ngIf="!featureSPN" class="!text-xxs !text-secondary w-full text-center !leading-3">
-          Available in <br />Portmaster Pro
+        <span *ngIf="!featureSPN" class="!text-xxs !font-light !text-tertiary !text-opacity-50 w-full text-center !leading-3">
+          Available in<br />Portmaster Pro
         </span>
       </div>
     </div>
@@ -155,9 +158,9 @@ <h1 class="flex flex-col flex-grow text-lg font-light text-white">
       Recently Blocked Applications
     </label>
     <div class="block w-full h-full">
-      <span *ngIf="!(blockedProfiles |keyvalue)?.length" class="flex flex-row items-center justify-center h-full gap-2">
+      <span *ngIf="!(blockedProfiles |keyvalue)?.length" class="flex flex-row items-center justify-center h-full gap-2 text-tertiary">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-          class="w-6 h-6">
+          class="w-5 h-5">
           <path stroke-linecap="round" stroke-linejoin="round"
             d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
         </svg>
@@ -184,7 +187,7 @@ <h1 class="flex flex-col flex-grow text-lg font-light text-white">
 
   <div class="flex-grow feature-card-container" id="connmap">
     <label>
-      Connection Targets
+      Connection Destinations
     </label>
     <div class="block w-full h-96" #map>
     </div>

modules/portmaster/src/app/pages/dashboard/feature-card/feature-card.component.html

@@ -1,5 +1,8 @@
-    <div class="feature-card" [class.disabled]="disabled || commingSoon" (click)="navigateToConfigScope()">
-      <ng-container *ngIf="disabled || commingSoon">
+    <div class="feature-card"
+      [class.disabled]="disabled || comingSoon"
+      [class.clickable]="disabled || comingSoon || !!configValue || !!feature?.ConfigScope"
+      (click)="navigateToConfigScope()">
+      <ng-container *ngIf="disabled || comingSoon">
         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" class="disabled-bg">
           <defs>
             <pattern id="pattern_63Hoo" patternUnits="userSpaceOnUse" width="9.5" height="9.5"
@@ -18,11 +21,11 @@
           {{ feature?.Name }}
         </span>
 
-        <div class="relative flex flex-row self-start flex-grow" *ngIf="disabled || commingSoon || !!feature?.Beta">
+        <div class="relative flex flex-row self-start flex-grow" *ngIf="disabled || comingSoon || !!feature?.Beta">
           <div class="flex-grow"></div>
 
           <div *ngIf="!!feature?.Beta && !disabled"
-            class="absolute top-0 right-0 flex flex-col items-center justify-center gap-0 text-yellow-300">
+            class="absolute top-0 right-0 flex flex-col items-center justify-center gap-0 text-yellow-200">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="relative z-10 w-4 h-4">
               <path stroke-linecap="round" stroke-linejoin="round"
@@ -35,13 +38,20 @@
       <div>
         <span class="font-normal ml-7 text-xxs text-secondary">
           {{ (disabled ? 'Available in ' : '') + 'Portmaster ' + feature?.InPackage?.Name}}
-          {{ commingSoon ? ' - Comming Soon' : '' }}</span>
+          {{ comingSoon ? ' - coming soon' : '' }}
+          {{ feature?.Comment }}
+        </span>
       </div>
 
-      <div *ngIf="!commingSoon && !disabled && configValue !== undefined" class="absolute right-4 bottom-4">
+      <div *ngIf="!comingSoon && !disabled && configValue !== undefined" class="absolute right-4 bottom-4">
         <sfng-toggle [ngModel]="configValue" (ngModelChange)="updateSettingsValue($event)"
           (click)="$event.cancelBubble = true"></sfng-toggle>
       </div>
+      <div *ngIf="!comingSoon && !disabled && configValue === undefined" class="absolute right-4 bottom-4">
+        <span class="text-light text-green text-opacity-80">
+          Active
+        </span>
+      </div>
 
       <div class="ribbon" *ngIf="!!disabled && !!feature?.InPackage"><span class="ribbon__content"
           [style.backgroundColor]="feature?.InPackage?.HexColor" [style.color]="planColor">

modules/portmaster/src/app/pages/dashboard/feature-card/feature-card.component.scss

@@ -1,20 +1,19 @@
 .feature-card {
   @apply flex flex-col p-4 bg-gray-300 rounded shadow w-full relative gap-2 overflow-hidden;
-  @apply cursor-pointer;
 
   .disabled-bg {
-    @apply absolute top-0 left-0 text-gray-500;
+    @apply absolute top-0 left-0 text-gray-500 opacity-50;
   }
 
   &.disabled {
-    @apply opacity-60 shadow-inner;
+    @apply opacity-80 shadow-inner;
   }
 
-  &:not(.disabled) {
+  &.clickable {
+    @apply cursor-pointer;
     &:hover {
       @apply bg-gray-400;
     }
-
   }
 
   header {
@@ -55,7 +54,7 @@
   text-transform: uppercase;
   text-align: center;
   border: 2px dotted #fff;
-  outline-color: #f5cd79aa;
-  outline-width: 3px;
+  outline-color: #fff;
+  outline-width: 1px;
   outline-style: solid;
 }

modules/portmaster/src/app/pages/dashboard/feature-card/feature-card.component.ts

@@ -23,7 +23,7 @@ export class FeatureCardComponent implements OnChanges, OnDestroy {
   get disabled() { return this._disabled }
   _disabled = false;
 
-  get commingSoon() { return this.feature?.CommingSoon || false }
+  get comingSoon() { return this.feature?.ComingSoon || false }
 
   @Input()
   feature?: Feature;

modules/portmaster/src/i18n/helptexts.yaml

@@ -32,14 +32,14 @@ intro:
     Open tips to learn how the Portmaster work.
 
     Tips like this one are found throughout the Portmaster. With some tips you can tour an element or a feature, like this:
-  nextKey: navNotifications
+  nextKey: navShield
 
-navNotifications:
-  title: Notifications
+navShield:
+  title: Status Shield & Dashboard
   content: |
-    View any active notifications.
+    The shield gives you a high level overview of Portmaster's status. If turns any other color than green, look for a notification that tells you what is going on.
 
-    A colored dot signifies the presence and urgency of the active noticiations, together with the color of the shield.
+    __Click the shield in order to open the dashboard.__
   nextKey: navMonitor
 
 navMonitor: