Restyle components using Nebular

https://github.com/akveo/nebular/

README.adoc

@@ -15,7 +15,7 @@ the popular online game: http://leagueoflegends.com/[League of Legends].
 * http://www.postgresql.org/[PostgreSQL] or https://github.com/h2database/h2database[H2]
 * https://github.com/flyway/flyway[Flyway]
 * https://github.com/ehcache[EhCache]
-* https://github.com/jgthms/bulma[Bulma]
+* https://github.com/akveo/nebular/[Nebular]
 * https://github.com/vmware/clarity/[Clarity]
 
 == Running the Backend locally

backend/src/main/java/com/drumonii/loltrollbuild/api/BuildsRestController.java

@@ -29,7 +29,7 @@
  */
 @RestController
 @RequestMapping("${api.base-path}/builds")
-@Disabled
+// TODO: Restore @Disabled
 public class BuildsRestController {
 
 	static final int PAGE_SIZE = 20;

frontend/angular.json

@@ -173,8 +173,7 @@
               "projects/troll-build/src/assets"
             ],
             "styles": [
-              "projects/troll-build/src/styles.scss",
-              "./node_modules/font-awesome/css/font-awesome.css"
+              "projects/troll-build/src/styles/ltb.scss"
             ],
             "scripts": [],
             "deployUrl": "/troll-build/"
@@ -243,7 +242,7 @@
               "projects/troll-build/src/assets"
             ],
             "styles": [
-              "projects/troll-build/src/styles.scss"
+              "projects/troll-build/src/styles/ltb.scss"
             ],
             "scripts": []
           }

frontend/package.json

@@ -25,6 +25,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "8.2.11",
+    "@angular/cdk": "^8.2.3",
     "@angular/common": "8.2.11",
     "@angular/compiler": "8.2.11",
     "@angular/core": "8.2.11",
@@ -35,12 +36,13 @@
     "@clr/angular": "^2.2.2",
     "@clr/icons": "^2.2.2",
     "@clr/ui": "^2.2.2",
+    "@nebular/eva-icons": "^4.5.0",
+    "@nebular/theme": "^4.5.0",
     "@ngx-loading-bar/core": "^4.2.0",
     "@ngx-loading-bar/http-client": "^4.2.0",
     "@webcomponents/custom-elements": "^1.3.0",
-    "bulma": "^0.7.5",
     "core-js": "^2.6.5",
-    "font-awesome": "^4.7.0",
+    "eva-icons": "^1.1.2",
     "rxjs": "^6.5.3",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"

frontend/projects/troll-build/e2e/src/builds/builds.e2e-spec.ts

@@ -1,6 +1,6 @@
 import { BuildsPage } from './builds.po';
 
-xdescribe('builds page', () => {
+describe('builds page', () => {
   const page = new BuildsPage();
 
   // ** saved build page is tested on champion spec

frontend/projects/troll-build/e2e/src/champion/champion.e2e-spec.ts

@@ -19,10 +19,10 @@ describe('champion page', () => {
     expect(await trollBuild.trinket().count()).toBe(1);
   });
 
-  xit('should save the troll build', async () => {
+  it('should save the troll build', async () => {
     await page.saveTrollBuild();
 
-    const savedBuildLink = await page.getSavedBuild();
+    const savedBuildLink = await page.getSavedBuildInputLink().getText();
     await page.navigateToBuild(savedBuildLink);
     expect(await page.getTitle()).toContain('Build');
   });

frontend/projects/troll-build/e2e/src/champion/champion.po.ts

@@ -21,7 +21,7 @@ export class ChampionPage extends BaseTrollBuildPage {
   }
 
   private getMaps(): ElementFinder {
-    return element(by.css('#map-select'));
+    return element(by.css('[data-e2e="map-select"]'));
   }
 
   getDefaultSelectedMap(): ElementFinder {
@@ -50,12 +50,11 @@ export class ChampionPage extends BaseTrollBuildPage {
 
   async saveTrollBuild(): Promise<void> {
     await element(by.css('#save-build-btn')).click();
-    const saveBuildInput = await element(by.css('#saved-build-input-link'));
-    await browser.wait(ExpectedConditions.presenceOf(saveBuildInput));
+    await browser.wait(ExpectedConditions.presenceOf(this.getSavedBuildInputLink()));
   }
 
-  async getSavedBuild(): Promise<string> {
-    return element(by.css('#saved-build-input-link')).getText();
+  getSavedBuildInputLink(): ElementFinder {
+    return element(by.css('[data-e2e="saved-build-input-link"]'));
   }
 
 }

frontend/projects/troll-build/e2e/src/champions/champions.po.ts

@@ -9,23 +9,23 @@ export class ChampionsPage extends BaseTrollBuildPage {
   }
 
   getChampions(): ElementArrayFinder {
-    return element.all(by.css('.champion'));
+    return element.all(by.css('ltb-champion-img'));
   }
 
   getFirstChampion(): ElementFinder {
     return this.getChampions().first();
   }
 
   async championName(champion: ElementFinder): Promise<string> {
-    return champion.element(by.css('.champion-name')).getText();
+    return champion.element(by.css('[data-e2e="champion-name"]')).getText();
   }
 
   getChampionTagFilters(): ElementArrayFinder {
-    return element.all(by.css('.champion-tag-btn'));
+    return element.all(by.css('[data-e2e="champion-tag-filter-btn"]'));
   }
 
   getChampionNameFilter(): ElementFinder {
-    return element(by.css('#champions-search-input'));
+    return element(by.css('[data-e2e="champions-search-input"]'));
   }
 
 }

frontend/projects/troll-build/e2e/src/error/not-found.po.ts

@@ -9,15 +9,15 @@ export class NotFoundPage extends BaseTrollBuildPage {
   }
 
   getMsgHeader(): ElementFinder {
-    return element(by.css('#title'));
+    return element(by.css('[data-e2e="title"]'));
   }
 
   getMsgBody(): ElementFinder {
-    return element(by.css('#msg'));
+    return element(by.css('[data-e2e="msg"]'));
   }
 
   getReturnToHomeLink(): ElementFinder {
-    return element(by.css('#return-to-home'));
+    return element(by.css('[data-e2e="return-to-home"]'));
   }
 
 }

frontend/projects/troll-build/e2e/src/troll-build-app.e2e-spec.ts

@@ -17,18 +17,14 @@ describe('troll-build-app', () => {
   });
 
   it('should have body styles', async () => {
-    const body = element(by.css('body'));
+    const body = element(by.css('nb-layout .layout'));
     const bodyBgImageCss = await body.getCssValue('background-image');
     expect(bodyBgImageCss).toContain('background.jpg');
     const bodyBgRpeatCss = await body.getCssValue('background-repeat');
     expect(bodyBgRpeatCss).toBe('no-repeat');
 
     const bodyBgColorCss = await element(by.css('body')).getCssValue('background-color');
-    if (bodyBgColorCss.indexOf('rgba') === -1) {
-      expect(bodyBgColorCss).toBe('rgb(0, 0, 0)');
-    } else { // if IE
-      expect(bodyBgColorCss).toBe('rgba(0, 0, 0, 1)');
-    }
+    expect(bodyBgColorCss).toBe('rgba(0, 0, 0, 0)');
   });
 
   it('should show the troll build header', async () => {

frontend/projects/troll-build/e2e/src/troll-build-app.po.ts

@@ -9,11 +9,11 @@ export class TrollBuildAppPage extends BaseTrollBuildPage {
   }
 
   async getHeaderText(): Promise<string> {
-    return element(by.css('#header-title')).getText();
+    return element(by.css('.header-title')).getText();
   }
 
   getFooter(): ElementFinder {
-    return element(by.css('#footer'));
+    return element(by.css('footer'));
   }
 
 }

frontend/projects/troll-build/src/app/champion/champion.module.ts

@@ -2,20 +2,26 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
+import { NbAlertModule, NbButtonModule, NbSelectModule, NbSpinnerModule } from '@nebular/theme';
+
 import { ChampionRoutingModule } from './champion-routing.module';
+import { TrollBuildModule } from './troll-build.module';
 import { ChampionPage } from './champion.page';
-import { TrollBuildComponent } from './troll-build.component';
 import { ChampionService } from './champion.service';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-    ChampionRoutingModule
+    NbAlertModule,
+    NbButtonModule,
+    NbSelectModule,
+    NbSpinnerModule,
+    ChampionRoutingModule,
+    TrollBuildModule
   ],
   declarations: [
     ChampionPage,
-    TrollBuildComponent
   ],
   providers: [
     ChampionService