[Tock Studio] Replacement of Eva icons by Bootstrap icons (#1720)

* Replacement of Eva icons by Bootstrap icons * Improvements * Improvements * Flow view icons update
theopenconversationkit · Aug 27, 2024 · 9f26c58 · 9f26c58
1 parent 550bb9b
commit 9f26c58
Show file tree

Hide file tree

Showing 144 changed files with 1,852 additions and 1,905 deletions.
diff --git a/bot/admin/web/angular.json b/bot/admin/web/angular.json
@@ -25,7 +25,8 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets", "src/img"],
-            "styles": ["src/app/theme/styles/styles.scss", "src/styles.css", "src/jsoneditor.css"],
+            "styles": ["src/app/theme/styles/styles.scss", "src/styles.css", "src/jsoneditor.css",
+              "node_modules/bootstrap-icons/font/bootstrap-icons.css"],
             "scripts": []
           },
           "configurations": {

diff --git a/bot/admin/web/package-lock.json b/bot/admin/web/package-lock.json
diff --git a/bot/admin/web/package.json b/bot/admin/web/package.json
@@ -28,10 +28,10 @@
     "@angular/platform-browser": "^17.3.12",
     "@angular/platform-browser-dynamic": "^17.3.12",
     "@angular/router": "^17.3.12",
-    "@nebular/eva-icons": "13.0.0",
     "@nebular/theme": "13.0.0",
     "ang-jsoneditor": "^3.1.1",
     "bootstrap": "^4.4.1",
+    "bootstrap-icons": "^1.11.3",
     "echarts": "^5.5.1",
     "file-saver-es": "^2.0.5",
     "html2pdf.js": "^0.10.1",

diff --git a/bot/admin/web/src/app/analytics/activity/activity.component.html b/bot/admin/web/src/app/analytics/activity/activity.component.html
@@ -41,7 +41,7 @@
         nbTooltip="Refresh"
         status="basic"
       >
-        <nb-icon icon="refresh-outline"></nb-icon>
+        <nb-icon icon="arrow-clockwise"></nb-icon>
       </button>
       <span style="float: right; padding: 5px"
         >&nbsp;&nbsp;
@@ -112,12 +112,12 @@ <h5 class="heading1 text-basic">{{ currentFilterNbUsers }}</h5>
         <span class="text text-hint caption">New users</span>
         <h5 class="heading1 text-basic">1234</h5>
         <span class="text text-hint caption">
-          <nb-icon  icon="minus-outline" status="basic"></nb-icon>
+          <nb-icon  icon="dash-lg" status="basic"></nb-icon>
           100% vs prev. 28 days</span>
       </div>
       <div class="space icon-space">
         <button nbButton status="basic" shape="round">
-          <nb-icon icon="minus-outline"></nb-icon>
+          <nb-icon icon="dash-lg"></nb-icon>
         </button>
       </div>
     </nb-card> -->

diff --git a/bot/admin/web/src/app/analytics/activity/activity.component.ts b/bot/admin/web/src/app/analytics/activity/activity.component.ts
@@ -235,17 +235,17 @@ export class ActivityComponent implements OnInit {
 
   getBigIcon(before, current) {
     if (current == before) {
-      return 'minus-outline';
+      return 'dash-lg';
     } else {
-      return this.metricIncreased(before, current) ? 'diagonal-arrow-right-up-outline' : 'diagonal-arrow-right-down-outline';
+      return this.metricIncreased(before, current) ? 'arrow-up-right' : 'arrow-down-right';
     }
   }
 
   getSmallIcon(before, current) {
     if (current == before) {
-      return 'minus-outline';
+      return 'dash';
     } else {
-      return this.metricIncreased(before, current) ? 'arrow-upward-outline' : 'arrow-downward-outline';
+      return this.metricIncreased(before, current) ? 'arrow-up-short' : 'arrow-down-short';
     }
   }
 

diff --git a/bot/admin/web/src/app/analytics/analytics.module.ts b/bot/admin/web/src/app/analytics/analytics.module.ts
@@ -80,6 +80,7 @@ import { DialogsListComponent } from './dialogs/dialogs-list/dialogs-list.compon
     NbButtonModule,
     NbInputModule,
     NbSelectModule,
+    NbFormFieldModule,
     NbCalendarModule,
     NbUserModule,
     NbDatepickerModule,

diff --git a/bot/admin/web/src/app/analytics/behavior/behavior.component.html b/bot/admin/web/src/app/analytics/behavior/behavior.component.html
@@ -41,7 +41,7 @@
         nbTooltip="Refresh Data"
         status="basic"
       >
-        <nb-icon icon="refresh-outline"></nb-icon>
+        <nb-icon icon="arrow-clockwise"></nb-icon>
       </button>
       <span style="float: right; padding: 5px">
         <nb-toggle

diff --git a/bot/admin/web/src/app/analytics/chart/chart.component.html b/bot/admin/web/src/app/analytics/chart/chart.component.html
@@ -34,7 +34,7 @@
           nbTooltip="Expand"
           style="float: right"
         >
-          <nb-icon icon="expand-outline"></nb-icon>
+          <nb-icon icon="arrows-angle-expand"></nb-icon>
         </button>
         <button
           nbButton
@@ -57,7 +57,7 @@
           nbTooltip="Pie chart"
           style="float: right"
         >
-          <nb-icon icon="pie-chart-outline"></nb-icon>
+          <nb-icon icon="pie-chart"></nb-icon>
         </button>
         <button
           *ngIf="type === 'PieChart' && isMultiChart === true"
@@ -69,7 +69,7 @@
           nbTooltip="Line chart"
           style="float: right"
         >
-          <nb-icon icon="trending-up-outline"></nb-icon>
+          <nb-icon icon="graph-up"></nb-icon>
         </button>
       </nb-card-header>
       <nb-card-body
@@ -122,7 +122,7 @@
       <nb-card-body>
         <!-- <button nbButton shape="round" (click)="onFlipAction()" nbTooltip="Show Table"
                 status="success" style="float: right;">
-          <nb-icon icon="layout-outline"></nb-icon>
+          <nb-icon icon="table"></nb-icon>
         </button> -->
       </nb-card-body>
     </nb-card>

diff --git a/bot/admin/web/src/app/analytics/chart/chart.component.ts b/bot/admin/web/src/app/analytics/chart/chart.component.ts
@@ -423,7 +423,7 @@ export class ChartComponent implements OnChanges {
   }
 
   chartIcon(): string {
-    return this.mainChart.type == 'PieChart' ? 'pie-chart-outline' : 'bar-chart-outline';
+    return this.mainChart.type == 'PieChart' ? 'pie-chart' : 'bar-chart';
   }
 
   onFlipAction() {

diff --git a/bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list.component.html b/bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list.component.html
@@ -2,13 +2,19 @@
   <nb-card-body class="d-flex flex-wrap gap-1 align-items-center">
     <ng-container *ngIf="!ratingFilter">
       <div class="flex-grow-1 min-width-15 w-100 d-flex gap-1 align-items-center">
-        <input
-          nbInput
-          fullWidth
-          placeholder="Search user text"
-          [(ngModel)]="filter.text"
-          (keyup.enter)="refresh()"
-        />
+        <nb-form-field class="flex-grow-1">
+          <nb-icon
+            nbPrefix
+            icon="search"
+          ></nb-icon>
+          <input
+            nbInput
+            fullWidth
+            placeholder="Search user text"
+            [(ngModel)]="filter.text"
+            (keyup.enter)="refresh()"
+          />
+        </nb-form-field>
 
         <nb-checkbox
           class="text-nowrap"
@@ -18,73 +24,97 @@
       </div>
 
       <div class="d-flex gap-1">
-        <nb-select
-          fullWidth
-          placeholder="Connector type"
-          class="min-width-15"
-          [(ngModel)]="filter.connectorType"
-          (selectedChange)="refresh()"
-        >
-          <nb-option
-            *ngFor="let c of connectorTypes"
-            [value]="c"
-            >{{ c.id }}</nb-option
+        <nb-form-field>
+          <nb-icon
+            nbPrefix
+            icon="plug"
+          ></nb-icon>
+          <nb-select
+            fullWidth
+            placeholder="Connector type"
+            class="min-width-15"
+            [(ngModel)]="filter.connectorType"
+            (selectedChange)="refresh()"
           >
-        </nb-select>
+            <nb-option
+              *ngFor="let c of connectorTypes"
+              [value]="c"
+              >{{ c.id }}</nb-option
+            >
+          </nb-select>
+        </nb-form-field>
 
-        <nb-select
-          fullWidth
-          placeholder="Intent"
-          class="min-width-15"
-          [(ngModel)]="filter.intentName"
-          (selectedChange)="refresh()"
-        >
-          <nb-option value="">All</nb-option>
-          <nb-option
-            *ngFor="let intent of state.currentApplication.intents"
-            [value]="intent.name"
+        <nb-form-field>
+          <nb-icon
+            nbPrefix
+            icon="compass"
+          ></nb-icon>
+          <nb-select
+            fullWidth
+            placeholder="Intent"
+            class="min-width-15"
+            [(ngModel)]="filter.intentName"
+            (selectedChange)="refresh()"
           >
-            {{ intent.name }}
-          </nb-option>
-          <nb-option value="unknown">Unknown</nb-option>
-        </nb-select>
+            <nb-option value="">All</nb-option>
+            <nb-option
+              *ngFor="let intent of state.currentApplication.intents"
+              [value]="intent.name"
+            >
+              {{ intent.name }}
+            </nb-option>
+            <nb-option value="unknown">Unknown</nb-option>
+          </nb-select>
+        </nb-form-field>
       </div>
     </ng-container>
 
     <ng-container *ngIf="ratingFilter">
       <div class="d-flex gap-1">
-        <nb-select
-          fullWidth
-          placeholder="Configuration"
-          [(ngModel)]="filter.configuration"
-          (selectedChange)="refresh()"
-          class="min-width-15"
-        >
-          <nb-option value="">All</nb-option>
-          <nb-option
-            *ngFor="let config of configurationNameList"
-            [value]="config"
+        <nb-form-field>
+          <nb-icon
+            nbPrefix
+            icon="link-45deg"
+          ></nb-icon>
+          <nb-select
+            fullWidth
+            placeholder="Configuration"
+            [(ngModel)]="filter.configuration"
+            (selectedChange)="refresh()"
+            class="min-width-15"
           >
-            {{ config }}
-          </nb-option>
-        </nb-select>
+            <nb-option value="">All</nb-option>
+            <nb-option
+              *ngFor="let config of configurationNameList"
+              [value]="config"
+            >
+              {{ config }}
+            </nb-option>
+          </nb-select>
+        </nb-form-field>
 
-        <nb-select
-          fullWidth
-          multiple
-          placeholder="Intents"
-          [(ngModel)]="filter.intentsToHide"
-          (selectedChange)="refresh()"
-          class="min-width-15"
-        >
-          <nb-option>Clear selection</nb-option>
-          <nb-option
-            *ngFor="let intent of intents"
-            [value]="intent"
+        <nb-form-field>
+          <nb-icon
+            nbPrefix
+            icon="compass"
+          ></nb-icon>
+          <nb-select
+            fullWidth
+            multiple
+            placeholder="Intents"
+            [(ngModel)]="filter.intentsToHide"
+            (selectedChange)="refresh()"
+            class="min-width-15"
           >
-            {{ intent }}
-          </nb-option>
-        </nb-select>
+            <nb-option>Clear selection</nb-option>
+            <nb-option
+              *ngFor="let intent of intents"
+              [value]="intent"
+            >
+              {{ intent }}
+            </nb-option>
+          </nb-select>
+        </nb-form-field>
       </div>
     </ng-container>
 
@@ -115,7 +145,7 @@ <h1 *ngIf="total === 0">
       ghost
       (click)="refresh()"
     >
-      <nb-icon icon="refresh-outline"></nb-icon>
+      <nb-icon icon="arrow-clockwise"></nb-icon>
     </button>
   </h1>
 
@@ -149,7 +179,7 @@ <h1 *ngIf="total === 0">
                     type="button"
                     (click)="createFaq(action, dialog.actions)"
                   >
-                    <nb-icon icon="message-square-outline"></nb-icon>
+                    <nb-icon icon="chat-left-text"></nb-icon>
                     Create a FAQ with this question/answer pair
                   </button>
                 </div>