Add Nebular framework

frontend/package-lock.json

@@ -199,6 +199,22 @@
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.2.tgz",
       "integrity": "sha512-5UJ8SzCtFj4vZChVsni4K9oa4qE9tQ67bwnP6DKxkLEJKQWWyasYp+2siAi/7zD2ro2XA0qRMYhgQz5Vj6eBoQ=="
     },
+    "@angular/cdk": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.1.tgz",
+      "integrity": "sha512-aSG1UNPszkSnpNuDCNd7ZgT29oQ8vqHPmoqjvJI0JkEv3i6uEs5tRuhWl3TK39wDNuwdlq0AY47XTa/0Ppb5RQ==",
+      "requires": {
+        "parse5": "^5.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.1.tgz",
@@ -1496,6 +1512,19 @@
         }
       }
     },
+    "@nebular/eva-icons": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/eva-icons/-/eva-icons-5.0.0.tgz",
+      "integrity": "sha512-1kCsQlfEJiNAfd3VxmhZUdk86FHSiNTkKtIvpyA72KKbyiBb4YTqOj3QDsTY9GLScyCxTJZcYF5Dp7KG2DSTUg=="
+    },
+    "@nebular/theme": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-5.0.0.tgz",
+      "integrity": "sha512-xSYyRyuvgT/UPQePB4br6lZtqjTupC2M+QUdLzuezwjeYwWvQw8q+04DQJK+JT+YI2s+LRkkwPsk8b716Ubhfg==",
+      "requires": {
+        "intersection-observer": "0.7.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.1.tgz",
@@ -4485,6 +4514,11 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "eva-icons": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/eva-icons/-/eva-icons-1.1.3.tgz",
+      "integrity": "sha512-QBSEWNbEx1H0numXP1qgxKVCZHonRaky5ft4pGzQBcO4cy7mEja6TuJ8rc7BqX2pmkvetVQWKDH+DK/8y7GTag=="
+    },
     "eventemitter3": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
@@ -5818,6 +5852,11 @@
         "ipaddr.js": "^1.9.0"
       }
     },
+    "intersection-observer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz",
+      "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.1.0",
+    "@angular/cdk": "^9.0.0",
     "@angular/common": "~9.1.0",
     "@angular/compiler": "~9.1.0",
     "@angular/core": "~9.1.0",
@@ -16,6 +17,9 @@
     "@angular/platform-browser": "~9.1.0",
     "@angular/platform-browser-dynamic": "~9.1.0",
     "@angular/router": "~9.1.0",
+    "@nebular/eva-icons": "5.0.0",
+    "@nebular/theme": "^5.0.0",
+    "eva-icons": "^1.1.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
@@ -25,9 +29,10 @@
     "@angular/cli": "~9.1.0",
     "@angular/compiler-cli": "~9.1.0",
     "@angular/language-service": "~9.1.0",
-    "@types/node": "^12.11.1",
+    "@schematics/angular": "~9.1.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",

frontend/src/app/app.module.ts

@@ -3,6 +3,9 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
+import { NbEvaIconsModule } from '@nebular/eva-icons';
 
 @NgModule({
   declarations: [
@@ -10,7 +13,11 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    NbThemeModule.forRoot({ name: 'default' }),
+    NbLayoutModule,
+    NbEvaIconsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

frontend/src/styles.scss

@@ -1 +1,8 @@
+@import 'themes';
+
+@import '~@nebular/theme/styles/globals';
+
+@include nb-install() {
+  @include nb-theme-global();
+};
 /* You can add global styles to this file, and also import other style files */

frontend/src/themes.scss

@@ -0,0 +1,18 @@
+@import '~@nebular/theme/styles/theming';
+@import '~@nebular/theme/styles/themes/default';
+
+$nb-themes: nb-register-theme((
+
+  // add your variables here like:
+
+  // color-primary-100: #f2f6ff,
+  // color-primary-200: #d9e4ff,
+  // color-primary-300: #a6c1ff,
+  // color-primary-400: #598bff,
+  // color-primary-500: #3366ff,
+  // color-primary-600: #274bdb,
+  // color-primary-700: #1a34b8,
+  // color-primary-800: #102694,
+  // color-primary-900: #091c7a,
+
+), default, default);