From 69656aa7610b8eb5355c3667d01914c17255eaac Mon Sep 17 00:00:00 2001
From: Brandon <itsbhenry@gmail.com>
Date: Thu, 4 Jul 2019 22:59:48 -0500
Subject: [PATCH 1/7] Updated mods page

---
 frontend/src/app/app.module.ts                |   5 +-
 .../app/main-mods/main-mods.component.html    |  82 ++++----
 .../app/main-mods/main-mods.component.scss    | 183 +++++++++++++++++-
 .../src/app/main-mods/main-mods.component.ts  |  55 +++++-
 package-lock.json                             |  48 +++++
 5 files changed, 322 insertions(+), 51 deletions(-)
 create mode 100644 package-lock.json

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 13c876d..1f0bc9a 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -38,6 +38,7 @@ import { BrowserNavComponent } from './browser-nav/browser-nav.component';
 import { FastClickDirective } from './directives/fast-click.directive';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { MainModsComponent } from './main-mods/main-mods.component';
+import {NgxSmartModalComponent, NgxSmartModalModule} from "ngx-smart-modal";
 
 @NgModule({
   declarations: [
@@ -98,7 +99,9 @@ import { MainModsComponent } from './main-mods/main-mods.component';
     MatInputModule,
     MatTooltipModule,
     MatSlideToggleModule,
-    MatListModule
+    MatListModule,
+    FlexLayoutModule,
+    NgxSmartModalModule.forRoot()
   ],
   providers:[ ],
   bootstrap: [AppComponent]
diff --git a/frontend/src/app/main-mods/main-mods.component.html b/frontend/src/app/main-mods/main-mods.component.html
index f4435b1..46184f1 100644
--- a/frontend/src/app/main-mods/main-mods.component.html
+++ b/frontend/src/app/main-mods/main-mods.component.html
@@ -1,34 +1,50 @@
-<div *ngIf="!config.Mods.length">No Mods!</div>
-<div>
-<mat-list  class="viewport"> 
-  
-    <!-- *cdkVirtualFor -->
+<section>
+  <mat-card class="setup-card">
+    <mat-card-header>
+      <div mat-card-avatar>
+        <mat-icon aria-hidden="false" class="setup-icon">cloud_upload</mat-icon>
+      </div>
+      <mat-card-title>Mod Management</mat-card-title>
+      <mat-card-subtitle>Manage all mods available for the quest here. Install, uninstall, and configure mods..</mat-card-subtitle>
+    </mat-card-header>
+  </mat-card>
+</section>
+<section>
+  <div *ngIf="!config">No Mods!</div>
+  <div fxFlex="50%">
+    <mat-list>
+      <!-- *cdkVirtualFor -->
+        <mat-list-item *ngFor="let mod of config.Mods" [class.selected]="mod === selectedMod" (click)="onSelect(mod); myModal.open()">
+          <h1 matLine> {{ mod.Name }}</h1>
+          <h3 matLine> Author: {{ mod.Author }}</h3>
+          <p matLine> {{ mod.Description }}</p>
+          <p matLine class="modUrl" *ngIf="mod?.InfoUrl?.length"><a [href]="mod.InfoUrl">More Information</a></p>
 
-    <mat-card  mat-list-item class="mod" *ngFor="let mod of config.Mods" >
-        <div class="modId">
-            {{mod.ID}}
-        </div>
-      
-      <div class="modclass {{mod.Category}}">{{mod.Category}}</div>
-      <mat-card-header class="header">
-            <mat-card-title>{{mod?.Name}}</mat-card-title>
-            <mat-card-subtitle>{{mod?.Author}}</mat-card-subtitle>
-      </mat-card-header>
-      <mat-card-content class="content">
-        <div class="description">{{mod?.Description}}</div>
-        
-      </mat-card-content>
-      <p class="modUrl" *ngIf="mod?.InfoUrl?.length"><a [href]="mod.InfoUrl">More Information</a></p>
-
-      <mat-card-footer class="bottom">
-        <div class="enabledtext" [ngClass]="{'active': (mod.Status == 'Installed')}">Mod {{ (mod.Status == 'Installed')?"Active":"Inactive"}}:</div>
-        <div class="toggleContainer">
-          <div *ngIf="modIDBeingSwitched != mod.ID" class="toggleSpinner"></div>
-          <mat-progress-spinner *ngIf="modIDBeingSwitched == mod.ID" class="toggleSpinner" mode="indeterminate"  diameter="20"></mat-progress-spinner>
-          <mat-slide-toggle class="toggle" [disabled]="modSwitchInProgress" (change)="toggleMod($event, mod)" ([ngModel])="null" [checked]="getModSwitch(mod)"></mat-slide-toggle>
-        </div>
-      </mat-card-footer>
-    </mat-card>
-
-  </mat-list>
-</div>
\ No newline at end of file
+          <div matLine>
+            <div class="enabledtext" [ngClass]="{'active': (mod.Status == 'Installed')}">Mod {{ (mod.Status == 'Installed')?"Active":"Inactive"}}:</div>
+            <div class="toggleContainer">
+              <div *ngIf="modIDBeingSwitched != mod.ID" class="toggleSpinner"></div>
+              <mat-progress-spinner *ngIf="modIDBeingSwitched == mod.ID" class="toggleSpinner" mode="indeterminate"  diameter="20"></mat-progress-spinner>
+              <mat-slide-toggle class="toggle" [disabled]="modSwitchInProgress" (change)="toggleMod($event, mod)" ([ngModel])="null" [checked]="getModSwitch(mod)"></mat-slide-toggle>
+            </div>
+          </div>
+        </mat-list-item>
+    </mat-list>
+  </div>
+</section>
+<ngx-smart-modal *ngIf="selectedMod" #myModal [identifier]="'myModal'">
+  <div *ngIf="myModal.hasData()">
+    <div class="modal-header">
+      <button type="button" class="close" aria-label="Close" (click)="myModal.close()"><span aria-hidden="true">&times;</span></button>
+      <h4 class="modal-title" id="myModalLabel2">{{ selectedMod.Name }}</h4>
+    </div>
+    <div class="modal-body">
+      <section class="mat-typography">
+        <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
+        <p> {{ selectedMod.Description }} </p>
+        <button mat-raised-button="" class="md-raised md-primary">Install</button>
+        <a href={{ selectedMod.InfoUrl }} > More Info </a>
+      </section>
+    </div>
+  </div>
+</ngx-smart-modal>
diff --git a/frontend/src/app/main-mods/main-mods.component.scss b/frontend/src/app/main-mods/main-mods.component.scss
index 5a71695..0d2e965 100644
--- a/frontend/src/app/main-mods/main-mods.component.scss
+++ b/frontend/src/app/main-mods/main-mods.component.scss
@@ -51,7 +51,7 @@
 
 .content {
     font-style: italic;
-    margin-left: 15px;    
+    margin-left: 15px;
     margin-right: 15px;
     text-align: justify;
 }
@@ -74,11 +74,30 @@
     bottom: 10px;
     color: darkgray;
 }
-.mod {
-   // display: flex;
-    width: 380px;
-    margin-bottom: 20px;
-    margin-left: 6px;
+
+.selected {
+  background-color: #828282 !important;
+  color: white;
+}
+
+mat-list-item {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #404040;
+  margin: .5em;
+  padding: .3em 0 .9em;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+mat-list-item.selected:hover {
+  background-color: #636363 !important;
+  color: white;
+}
+mat-list-item:hover {
+  background-color: #474747;
+  left: .1em;
 }
 
 .toggleContainer {
@@ -100,4 +119,154 @@
 }
 .description {
     font-size: 12px;
-}
\ No newline at end of file
+}
+
+.modal.left .modal-dialog,
+.modal.right .modal-dialog {
+  position: fixed;
+  margin: auto;
+  width: 600px;
+  height: 100%;
+  -webkit-transform: translate3d(0%, 0, 0);
+  -ms-transform: translate3d(0%, 0, 0);
+  -o-transform: translate3d(0%, 0, 0);
+  transform: translate3d(0%, 0, 0);
+}
+
+.modal.left .modal-content,
+.modal.right .modal-content {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.modal.left .modal-body,
+.modal.right .modal-body {
+  padding: 15px 15px 80px;
+}
+
+.modal.right.fade .modal-dialog {
+  right: -320px;
+  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
+  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
+  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
+  transition: opacity 0.3s linear, right 0.3s ease-out;
+}
+
+.modal.right.fade.in .modal-dialog {
+  right: 0;
+}
+
+/* ----- MODAL STYLE ----- */
+.modal-content {
+  border-radius: 0;
+  border: none;
+}
+
+.modal-header {
+  border-bottom-color: #eeeeee;
+  background-color: #fafafa;
+}
+
+.viewport {
+  //   width: 600px;
+  height: 600px;
+  overflow-y: auto;
+  margin-left: 300px;
+}
+.modUrl {
+  position: absolute;
+  bottom: 0px;
+  left: 10px;
+  font-size: 12px;
+  max-width: 80%;
+  font-style: normal;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.modUrl a {
+  color: white;
+}
+.header {
+  margin-top: 20px;
+}
+.modclass {
+  height: 20px;
+  padding-left: 7px;
+  padding-right: 7px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  box-shadow: 0px 1px 2px 0px #000000;
+  font-size: 16px;
+  font-weight: bold;
+  font-style: italic;
+  float: left;
+  position: absolute;
+  top: 5px;
+  right: 0px;
+}
+.modclass.Saber {
+  background-color: darkred;
+}
+
+.modclass.Gameplay {
+  background-color: darkblue;
+}
+
+.modclass.Other {
+  background-color: darkgoldenrod;
+}
+
+.content {
+  font-style: italic;
+  margin-left: 15px;
+  margin-right: 15px;
+  text-align: justify;
+}
+
+.modId {
+  color: darkgray;
+  font-size: 8px;
+  height: 10px;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+}
+.enabledtext.active {
+  font-weight: bold;
+}
+.enabledtext {
+  font-size: 14px;
+  position: absolute;
+  right: 70px;
+  bottom: 10px;
+  color: darkgray;
+}
+.mod {
+  // display: flex;
+  width: 380px;
+  margin-bottom: 20px;
+  margin-left: 6px;
+}
+
+.toggleContainer {
+  display: block;
+  width: 65px;
+  align-content: right;
+  margin-right: 6px;
+  margin-left: auto;
+  margin-bottom: 6px;
+}
+.toggle, .toggleSpinner {
+  display: inline-block;
+}
+.toggleSpinner {
+  margin-bottom: -3px;
+  margin-left: 5px;
+  width: 20px;
+  height: 20px;
+}
+.description {
+  font-size: 13px;
+}
diff --git a/frontend/src/app/main-mods/main-mods.component.ts b/frontend/src/app/main-mods/main-mods.component.ts
index 5fbddeb..d4edd45 100644
--- a/frontend/src/app/main-mods/main-mods.component.ts
+++ b/frontend/src/app/main-mods/main-mods.component.ts
@@ -1,30 +1,52 @@
-import { Component, OnInit } from '@angular/core';
+import {AfterViewInit, Component, OnInit} from '@angular/core';
 import { ConfigService } from '../services/config.service';
 import { BeatOnApiService } from '../services/beat-on-api.service';
 import { HostMessageService } from '../services/host-message.service';
 import { QuestomConfig } from '../models/QuestomConfig';
 import { BeatOnConfig } from '../models/BeatOnConfig';
-import { ModDefinition, ModStatusType } from '../models/ModDefinition';
+import {ModCategory, ModDefinition, ModStatusType} from '../models/ModDefinition';
 import { ClientSetModStatus } from '../models/ClientSetModStatus';
 import { MatSlideToggleChange } from '@angular/material';
 import { HostActionResponse } from '../models/HostActionResponse';
 import { ECANCELED } from 'constants';
+import {NgxSmartModalService} from "ngx-smart-modal";
 
 @Component({
   selector: 'app-main-mods',
   templateUrl: './main-mods.component.html',
   styleUrls: ['./main-mods.component.scss']
 })
-export class MainModsComponent implements OnInit {
+export class MainModsComponent implements OnInit, AfterViewInit {
   config : QuestomConfig = <QuestomConfig> {Mods: []};
   modSwitchInProgress : boolean = false;
   modIDBeingSwitched : string = null;
-  constructor(private configSvc : ConfigService, private beatOnApi : BeatOnApiService, private msgSvc : HostMessageService) { 
+  selectedMod: ModDefinition;
+  constructor(private configSvc : ConfigService, private beatOnApi : BeatOnApiService, private msgSvc : HostMessageService, public ngxSmartModalService: NgxSmartModalService) {
     this.configSvc.configUpdated.subscribe((cfg : BeatOnConfig)=> { this.config = cfg.Config; });
   }
 
   ngOnInit() {
-    this.configSvc.getConfig().subscribe((cfg : BeatOnConfig) => { this.config = cfg.Config; });
+    this.configSvc.getConfig().subscribe((cfg : BeatOnConfig) => {
+      // this.config = cfg.Config;
+      var saberMod = new ModDefinition();
+      saberMod.TargetBeatSaberVersion = "1.0.0"
+      saberMod.ID = "1"
+      saberMod.Author = "Yuuki"
+      saberMod.Name = "Custom Sabers"
+      saberMod.InfoUrl = "http://www.google.com"
+      saberMod.Description = "Change the color of your sabers! Choose between a wide spectrum of colors and jam with your favorite mix!"
+      saberMod.Category = ModCategory.Saber
+      this.config.Mods.push(saberMod)
+      var randomSongSelect = new ModDefinition();
+      randomSongSelect.TargetBeatSaberVersion = "1.0.0"
+      randomSongSelect.ID = "2"
+      randomSongSelect.Author = "Yuuki"
+      randomSongSelect.Name = "Random Song Selection"
+      randomSongSelect.InfoUrl = "http://www.google.com"
+      randomSongSelect.Description = "Tired of deciding what song to play? This mod gives you the ability to randomly select a song from your long list of maps you'll probably never get to."
+      randomSongSelect.Category = ModCategory.Gameplay
+      this.config.Mods.push(randomSongSelect)
+    });
   }
 
   toggleMod(ev : MatSlideToggleChange, mod : ModDefinition) {
@@ -45,19 +67,32 @@ export class MainModsComponent implements OnInit {
           //todo: show error
           console.log("mod id "+ msg.ModID + " did not switch properly");
         }
-             
+
       }
     });
     this.msgSvc.sendClientMessage(msg);
-    
+
   }
   getModSwitch(mod) {
     console.log("getting mod status for mod id " + mod.ID);
     if (mod == null)
       return false;
-    if ((mod.Status != 'Installed' && mod.ID != this.modIDBeingSwitched) || (mod.Status == 'Installed' && mod.ID == this.modIDBeingSwitched))
-      return false;
-    return true;
+    return !((mod.Status != 'Installed' && mod.ID != this.modIDBeingSwitched) || (mod.Status == 'Installed' && mod.ID == this.modIDBeingSwitched));
+  }
+
+  onSelect(mod : ModDefinition): void{
+    this.selectedMod = mod;
+  }
+
+  ngAfterViewInit() {
+    const obj: Object = {
+      Name: this.selectedMod.Name,
+      Author: this.selectedMod.Author,
+      Description: this.selectedMod.Description,
+      InfoUrl: this.selectedMod.InfoUrl
+    };
+
+    this.ngxSmartModalService.setModalData(obj, 'myModal');
   }
 
 }
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..cb87b3f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,48 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@angular/common": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-8.1.0.tgz",
+      "integrity": "sha512-m5oEBPSy5nE+4SZTu3XchJhKT/u73NnJIS3+41xRsF5aX/1p8uNHkhJR7kcJmlVa7BZNr4byl8bGsYjX0CCpVg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@angular/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-GviWJjOu6LJMYNbukdSK35VaXvSrp5LTNd0FbXoBQF+mhVVV/8cG4hTKKjxG1xwWXI5E1t5U4aUKXrKUNJ1sQg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@angular/flex-layout": {
+      "version": "8.0.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-8.0.0-beta.26.tgz",
+      "integrity": "sha512-lXDLlMSNQhidW0grvisIsj/3gqLuYyN2MvABuRYybnFTc233sXGZuOAaulqq663LA0/DP/GNcz6a+A4ZAAlmPA==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
+    "ngx-smart-modal": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-smart-modal/-/ngx-smart-modal-7.1.1.tgz",
+      "integrity": "sha512-o7Cea8eqdBzzmxh2xX0KoSui7abReCGeInSal6Um6ZeidYnxwcUf9bA2G1LF6sjjO2WhnGshAIaSRQqfqAJ3TA=="
+    },
+    "rxjs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz",
+      "integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "tslib": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+    }
+  }
+}

From f35173003e383af20c9a5b86206569560d66ba45 Mon Sep 17 00:00:00 2001
From: Brandon <itsbhenry@gmail.com>
Date: Thu, 4 Jul 2019 23:00:06 -0500
Subject: [PATCH 2/7] styling for ngx-smart-modal

---
 frontend/src/styles.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index f4209eb..891d6c0 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,6 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import '~ngx-toastr/toastr';
+@import "~ngx-smart-modal/ngx-smart-modal";
 html, body { height: 100%; }
 body { background-color: #424242; margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
@@ -9,6 +10,6 @@ body { background-color: #424242; margin: 0; font-family: Roboto, "Helvetica Neu
 .browserNavMenu {
     height: 40px;
     max-width: 600px !important;
-   
+
     margin-left: -200px;
-}
\ No newline at end of file
+}

From 6024eb83ee0928c28fe1d80ad285a25d6414fc16 Mon Sep 17 00:00:00 2001
From: Brandon <itsbhenry@gmail.com>
Date: Sat, 6 Jul 2019 15:28:30 -0500
Subject: [PATCH 3/7] Fixed modal

---
 frontend/package-lock.json                    |  5 +++
 frontend/package.json                         |  1 +
 frontend/src/app/app.module.ts                | 27 ++++++++++++---
 .../{ => directives}/drag-drop.directive.ts   |  0
 .../app/main-mods/main-mods.component.html    | 34 ++++++++++---------
 .../app/main-mods/main-mods.component.scss    |  2 +-
 .../src/app/main-mods/main-mods.component.ts  | 20 +++--------
 7 files changed, 51 insertions(+), 38 deletions(-)
 rename frontend/src/app/{ => directives}/drag-drop.directive.ts (100%)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 177682c..b5aac77 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6138,6 +6138,11 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
+    "ngx-smart-modal": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-smart-modal/-/ngx-smart-modal-6.0.0.tgz",
+      "integrity": "sha512-NZmHS/7HLarC26oPatP7+YhkntufNNg4fy3XFT4Usfr/EQkqnwZ/gviqAQUl8R5r/6xOKjoYTccwVsmOa/H4Dw=="
+    },
     "ngx-toastr": {
       "version": "10.0.4",
       "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-10.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index eab73bd..8f3cdda 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "angular-vertical-tabs": "github:SamuelMarks/angular-vertical-material-tabs",
     "hammerjs": "^2.0.8",
     "material-design-icons": "^3.0.1",
+    "ngx-smart-modal": "6.0.0",
     "ngx-toastr": "^10.0.4",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 1f0bc9a..91d537d 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -4,7 +4,23 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatTooltipModule, MatSlideToggleModule, MatButtonToggleModule, MatChipsModule, MatProgressBarModule, MatMenuModule, MatGridListModule, MatButtonModule, MatCardModule, MatIconModule, MatToolbarModule, MatDialogModule, MatProgressSpinnerModule, MatListModule} from '@angular/material';
+import {
+  MatTooltipModule,
+  MatSlideToggleModule,
+  MatButtonToggleModule,
+  MatChipsModule,
+  MatProgressBarModule,
+  MatMenuModule,
+  MatGridListModule,
+  MatButtonModule,
+  MatCardModule,
+  MatIconModule,
+  MatToolbarModule,
+  MatDialogModule,
+  MatProgressSpinnerModule,
+  MatListModule,
+  MatSidenavModule
+} from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
 import { SetupComponent } from './setup/setup.component';
 import { SetupStep1Component } from './setup-step1/setup-step1.component';
@@ -27,7 +43,7 @@ import { ToolsComponent } from './tools/tools.component';
 import { RemoteUploadComponent } from './remote-upload/remote-upload.component';
 import { DownloadIndicatorComponent } from './download-indicator/download-indicator.component';
 import { ScrollDispatchModule } from '@angular/cdk/scrolling';
-import { DragDropDirective } from "./drag-drop.directive";
+import { DragDropDirective } from "./directives/drag-drop.directive";
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AddEditPlaylistDialogComponent } from './add-edit-playlist-dialog/add-edit-playlist-dialog.component';
 import { FormsModule } from '@angular/forms';
@@ -38,7 +54,7 @@ import { BrowserNavComponent } from './browser-nav/browser-nav.component';
 import { FastClickDirective } from './directives/fast-click.directive';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { MainModsComponent } from './main-mods/main-mods.component';
-import {NgxSmartModalComponent, NgxSmartModalModule} from "ngx-smart-modal";
+import {NgxSmartModalModule, NgxSmartModalService} from "ngx-smart-modal";
 
 @NgModule({
   declarations: [
@@ -101,9 +117,10 @@ import {NgxSmartModalComponent, NgxSmartModalModule} from "ngx-smart-modal";
     MatSlideToggleModule,
     MatListModule,
     FlexLayoutModule,
-    NgxSmartModalModule.forRoot()
+    NgxSmartModalModule,
+    MatSidenavModule
   ],
-  providers:[ ],
+  providers:[ NgxSmartModalService ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/frontend/src/app/drag-drop.directive.ts b/frontend/src/app/directives/drag-drop.directive.ts
similarity index 100%
rename from frontend/src/app/drag-drop.directive.ts
rename to frontend/src/app/directives/drag-drop.directive.ts
diff --git a/frontend/src/app/main-mods/main-mods.component.html b/frontend/src/app/main-mods/main-mods.component.html
index 46184f1..24cae02 100644
--- a/frontend/src/app/main-mods/main-mods.component.html
+++ b/frontend/src/app/main-mods/main-mods.component.html
@@ -14,7 +14,7 @@
   <div fxFlex="50%">
     <mat-list>
       <!-- *cdkVirtualFor -->
-        <mat-list-item *ngFor="let mod of config.Mods" [class.selected]="mod === selectedMod" (click)="onSelect(mod); myModal.open()">
+        <mat-list-item *ngFor="let mod of config.Mods" [class.selected]="mod === selectedMod" (click)="onSelect(mod); modDetails.open()">
           <h1 matLine> {{ mod.Name }}</h1>
           <h3 matLine> Author: {{ mod.Author }}</h3>
           <p matLine> {{ mod.Description }}</p>
@@ -32,19 +32,21 @@ <h3 matLine> Author: {{ mod.Author }}</h3>
     </mat-list>
   </div>
 </section>
-<ngx-smart-modal *ngIf="selectedMod" #myModal [identifier]="'myModal'">
-  <div *ngIf="myModal.hasData()">
-    <div class="modal-header">
-      <button type="button" class="close" aria-label="Close" (click)="myModal.close()"><span aria-hidden="true">&times;</span></button>
-      <h4 class="modal-title" id="myModalLabel2">{{ selectedMod.Name }}</h4>
-    </div>
-    <div class="modal-body">
-      <section class="mat-typography">
-        <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
-        <p> {{ selectedMod.Description }} </p>
-        <button mat-raised-button="" class="md-raised md-primary">Install</button>
-        <a href={{ selectedMod.InfoUrl }} > More Info </a>
-      </section>
+<section>
+  <ngx-smart-modal customClass="modal right fade" #modDetails [identifier]="'modDetails'">
+    <div *ngIf="selectedMod" >
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="modDetails.close()"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="myModalLabel2">{{ selectedMod.Name }}</h4>
+      </div>
+      <div class="modal-body">
+        <section class="mat-typography">
+          <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
+          <p> {{ selectedMod.Description }} </p>
+          <button mat-raised-button="" class="md-raised md-primary">Install</button>
+          <a href="{{ selectedMod.InfoUrl }}" > More Info </a>
+        </section>
+      </div>
     </div>
-  </div>
-</ngx-smart-modal>
+  </ngx-smart-modal>
+</section>
diff --git a/frontend/src/app/main-mods/main-mods.component.scss b/frontend/src/app/main-mods/main-mods.component.scss
index 0d2e965..75aefa0 100644
--- a/frontend/src/app/main-mods/main-mods.component.scss
+++ b/frontend/src/app/main-mods/main-mods.component.scss
@@ -145,7 +145,7 @@ mat-list-item:hover {
 }
 
 .modal.right.fade .modal-dialog {
-  right: -320px;
+  right: -320px !important;
   -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
   -o-transition: opacity 0.3s linear, right 0.3s ease-out;
diff --git a/frontend/src/app/main-mods/main-mods.component.ts b/frontend/src/app/main-mods/main-mods.component.ts
index d4edd45..e3d50fe 100644
--- a/frontend/src/app/main-mods/main-mods.component.ts
+++ b/frontend/src/app/main-mods/main-mods.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, OnInit} from '@angular/core';
+import { Component, OnInit} from '@angular/core';
 import { ConfigService } from '../services/config.service';
 import { BeatOnApiService } from '../services/beat-on-api.service';
 import { HostMessageService } from '../services/host-message.service';
@@ -9,19 +9,19 @@ import { ClientSetModStatus } from '../models/ClientSetModStatus';
 import { MatSlideToggleChange } from '@angular/material';
 import { HostActionResponse } from '../models/HostActionResponse';
 import { ECANCELED } from 'constants';
-import {NgxSmartModalService} from "ngx-smart-modal";
 
 @Component({
   selector: 'app-main-mods',
   templateUrl: './main-mods.component.html',
   styleUrls: ['./main-mods.component.scss']
 })
-export class MainModsComponent implements OnInit, AfterViewInit {
+export class MainModsComponent implements OnInit {
   config : QuestomConfig = <QuestomConfig> {Mods: []};
   modSwitchInProgress : boolean = false;
   modIDBeingSwitched : string = null;
   selectedMod: ModDefinition;
-  constructor(private configSvc : ConfigService, private beatOnApi : BeatOnApiService, private msgSvc : HostMessageService, public ngxSmartModalService: NgxSmartModalService) {
+  opened: boolean;
+  constructor(private configSvc : ConfigService, private beatOnApi : BeatOnApiService, private msgSvc : HostMessageService) {
     this.configSvc.configUpdated.subscribe((cfg : BeatOnConfig)=> { this.config = cfg.Config; });
   }
 
@@ -83,16 +83,4 @@ export class MainModsComponent implements OnInit, AfterViewInit {
   onSelect(mod : ModDefinition): void{
     this.selectedMod = mod;
   }
-
-  ngAfterViewInit() {
-    const obj: Object = {
-      Name: this.selectedMod.Name,
-      Author: this.selectedMod.Author,
-      Description: this.selectedMod.Description,
-      InfoUrl: this.selectedMod.InfoUrl
-    };
-
-    this.ngxSmartModalService.setModalData(obj, 'myModal');
-  }
-
 }

From d088beca2662a26fd5da35f7dd66d9c23c1a7974 Mon Sep 17 00:00:00 2001
From: Brandon <itsbhenry@gmail.com>
Date: Sat, 6 Jul 2019 16:38:01 -0500
Subject: [PATCH 4/7] added bootstrap and new custom styling

---
 frontend/package-lock.json                    |  5 ++
 frontend/package.json                         |  1 +
 .../app/main-mods/main-mods.component.html    | 28 +++++------
 .../app/main-mods/main-mods.component.scss    | 46 -------------------
 .../src/assets/css/ngx-custom-styles.scss     | 46 +++++++++++++++++++
 frontend/src/styles.scss                      |  3 ++
 6 files changed, 70 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/assets/css/ngx-custom-styles.scss

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b5aac77..33f39fd 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1694,6 +1694,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8f3cdda..d9c2900 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "@angular/router": "~8.0.1",
     "@ngu/carousel": "^1.5.5",
     "angular-vertical-tabs": "github:SamuelMarks/angular-vertical-material-tabs",
+    "bootstrap": "^4.1.3",
     "hammerjs": "^2.0.8",
     "material-design-icons": "^3.0.1",
     "ngx-smart-modal": "6.0.0",
diff --git a/frontend/src/app/main-mods/main-mods.component.html b/frontend/src/app/main-mods/main-mods.component.html
index 24cae02..259c425 100644
--- a/frontend/src/app/main-mods/main-mods.component.html
+++ b/frontend/src/app/main-mods/main-mods.component.html
@@ -33,19 +33,21 @@ <h3 matLine> Author: {{ mod.Author }}</h3>
   </div>
 </section>
 <section>
-  <ngx-smart-modal customClass="modal right fade" #modDetails [identifier]="'modDetails'">
-    <div *ngIf="selectedMod" >
-      <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="modDetails.close()"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="myModalLabel2">{{ selectedMod.Name }}</h4>
-      </div>
-      <div class="modal-body">
-        <section class="mat-typography">
-          <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
-          <p> {{ selectedMod.Description }} </p>
-          <button mat-raised-button="" class="md-raised md-primary">Install</button>
-          <a href="{{ selectedMod.InfoUrl }}" > More Info </a>
-        </section>
+  <ngx-smart-modal #modDetails [identifier]="'modDetails'" [closable]="false" [customClass]="'modal-dialog'">
+    <div *ngIf="selectedMod" class="modal-content">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title" id="myModalLabel2">{{ selectedMod.Name }}</h4>
+          <button type="button" class="close" aria-label="Close" (click)="modDetails.close()"><span aria-hidden="true">&times;</span></button>
+        </div>
+        <div class="modal-body">
+          <section class="mat-typography">
+            <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
+            <p> {{ selectedMod.Description }} </p>
+            <button mat-raised-button="" class="md-raised md-primary">Install</button>
+            <a href="{{selectedMod.InfoUrl }}" >More Info</a>
+          </section>
+        </div>
       </div>
     </div>
   </ngx-smart-modal>
diff --git a/frontend/src/app/main-mods/main-mods.component.scss b/frontend/src/app/main-mods/main-mods.component.scss
index 75aefa0..39db903 100644
--- a/frontend/src/app/main-mods/main-mods.component.scss
+++ b/frontend/src/app/main-mods/main-mods.component.scss
@@ -121,52 +121,6 @@ mat-list-item:hover {
     font-size: 12px;
 }
 
-.modal.left .modal-dialog,
-.modal.right .modal-dialog {
-  position: fixed;
-  margin: auto;
-  width: 600px;
-  height: 100%;
-  -webkit-transform: translate3d(0%, 0, 0);
-  -ms-transform: translate3d(0%, 0, 0);
-  -o-transform: translate3d(0%, 0, 0);
-  transform: translate3d(0%, 0, 0);
-}
-
-.modal.left .modal-content,
-.modal.right .modal-content {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.modal.left .modal-body,
-.modal.right .modal-body {
-  padding: 15px 15px 80px;
-}
-
-.modal.right.fade .modal-dialog {
-  right: -320px !important;
-  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
-  transition: opacity 0.3s linear, right 0.3s ease-out;
-}
-
-.modal.right.fade.in .modal-dialog {
-  right: 0;
-}
-
-/* ----- MODAL STYLE ----- */
-.modal-content {
-  border-radius: 0;
-  border: none;
-}
-
-.modal-header {
-  border-bottom-color: #eeeeee;
-  background-color: #fafafa;
-}
-
 .viewport {
   //   width: 600px;
   height: 600px;
diff --git a/frontend/src/assets/css/ngx-custom-styles.scss b/frontend/src/assets/css/ngx-custom-styles.scss
new file mode 100644
index 0000000..4269807
--- /dev/null
+++ b/frontend/src/assets/css/ngx-custom-styles.scss
@@ -0,0 +1,46 @@
+
+.modal.left .modal-dialog,
+.modal.right .modal-dialog {
+  position: fixed !important;
+  margin: auto !important;
+  width: 600px !important;
+  height: 100% !important;
+  -webkit-transform: translate3d(0%, 0, 0) !important;
+  -ms-transform: translate3d(0%, 0, 0) !important;
+  -o-transform: translate3d(0%, 0, 0) !important;
+  transform: translate3d(0%, 0, 0) !important;
+}
+
+.modal.left .modal-content,
+.modal.right .modal-content {
+  height: 100% !important;
+  overflow-y: auto !important;
+}
+
+.modal.left .modal-body,
+.modal.right .modal-body {
+  padding: 15px 15px 80px !important;
+}
+
+.modal.right.fade .modal-dialog {
+  right: -320px !important;
+  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out !important;
+  -moz-transition: opacity 0.3s linear, right 0.3s ease-out !important;
+  -o-transition: opacity 0.3s linear, right 0.3s ease-out !important;
+  transition: opacity 0.3s linear, right 0.3s ease-out !important;
+}
+
+.modal.right.fade.in .modal-dialog {
+  right: 0 !important;
+}
+
+/* ----- MODAL STYLE ----- */
+.modal-content {
+  border-radius: 0 !important;
+  border: none !important;
+}
+
+.modal-header {
+  border-bottom-color: #eeeeee !important;
+  background-color: #fafafa !important;
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 891d6c0..d89be2e 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -2,6 +2,9 @@
 
 @import '~ngx-toastr/toastr';
 @import "~ngx-smart-modal/ngx-smart-modal";
+@import url("./assets/css/ngx-custom-styles.scss");
+@import "~bootstrap/scss/bootstrap";
+
 html, body { height: 100%; }
 body { background-color: #424242; margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 

From 6b6793c4036c96731bc6fd0c4d42e8462e07e9ef Mon Sep 17 00:00:00 2001
From: Brandon <itsbhenry@gmail.com>
Date: Sat, 6 Jul 2019 18:28:25 -0500
Subject: [PATCH 5/7] Removed ngx smart modal and bootstrap.

Relying on ng-bootstrap to display modal
---
 frontend/package-lock.json                    | 13 ++++--
 frontend/package.json                         |  3 +-
 frontend/src/app/app.module.ts                |  8 ++--
 .../app/main-mods/main-mods.component.html    | 36 ++++++---------
 .../src/app/main-mods/main-mods.component.ts  |  9 +++-
 frontend/src/assets/css/modal.scss            | 46 +++++++++++++++++++
 .../src/assets/css/ngx-custom-styles.scss     | 46 -------------------
 frontend/src/styles.scss                      |  5 +-
 8 files changed, 82 insertions(+), 84 deletions(-)
 create mode 100644 frontend/src/assets/css/modal.scss
 delete mode 100644 frontend/src/assets/css/ngx-custom-styles.scss

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 33f39fd..57923b8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -539,6 +539,14 @@
         }
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "5.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-5.0.0-rc.1.tgz",
+      "integrity": "sha512-LRbA+qCbsY3rnXQiFbDG6M0fyDOi6n4MadUUrrnI6DyNAsH+uAg2twxkjXhkizUD6+XihpvR6AMsQ91T3Bndaw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.0.3.tgz",
@@ -6143,11 +6151,6 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
-    "ngx-smart-modal": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ngx-smart-modal/-/ngx-smart-modal-6.0.0.tgz",
-      "integrity": "sha512-NZmHS/7HLarC26oPatP7+YhkntufNNg4fy3XFT4Usfr/EQkqnwZ/gviqAQUl8R5r/6xOKjoYTccwVsmOa/H4Dw=="
-    },
     "ngx-toastr": {
       "version": "10.0.4",
       "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-10.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d9c2900..b8cc8d4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,12 +21,11 @@
     "@angular/platform-browser": "~8.0.1",
     "@angular/platform-browser-dynamic": "~8.0.1",
     "@angular/router": "~8.0.1",
+    "@ng-bootstrap/ng-bootstrap": "^5.0.0-rc.1",
     "@ngu/carousel": "^1.5.5",
     "angular-vertical-tabs": "github:SamuelMarks/angular-vertical-material-tabs",
-    "bootstrap": "^4.1.3",
     "hammerjs": "^2.0.8",
     "material-design-icons": "^3.0.1",
-    "ngx-smart-modal": "6.0.0",
     "ngx-toastr": "^10.0.4",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 91d537d..7e0b24c 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -19,7 +19,6 @@ import {
   MatDialogModule,
   MatProgressSpinnerModule,
   MatListModule,
-  MatSidenavModule
 } from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
 import { SetupComponent } from './setup/setup.component';
@@ -54,7 +53,7 @@ import { BrowserNavComponent } from './browser-nav/browser-nav.component';
 import { FastClickDirective } from './directives/fast-click.directive';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { MainModsComponent } from './main-mods/main-mods.component';
-import {NgxSmartModalModule, NgxSmartModalService} from "ngx-smart-modal";
+import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 
 @NgModule({
   declarations: [
@@ -117,10 +116,9 @@ import {NgxSmartModalModule, NgxSmartModalService} from "ngx-smart-modal";
     MatSlideToggleModule,
     MatListModule,
     FlexLayoutModule,
-    NgxSmartModalModule,
-    MatSidenavModule
+    NgbModule
   ],
-  providers:[ NgxSmartModalService ],
+  providers:[ ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/frontend/src/app/main-mods/main-mods.component.html b/frontend/src/app/main-mods/main-mods.component.html
index 259c425..2018dba 100644
--- a/frontend/src/app/main-mods/main-mods.component.html
+++ b/frontend/src/app/main-mods/main-mods.component.html
@@ -1,3 +1,17 @@
+<ng-template #modDetails let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="myModalLabel2">{{ selectedMod.Name }}</h4>
+    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"><span aria-hidden="true">&times;</span></button>
+  </div>
+  <div class="modal-body">
+    <section class="mat-typography">
+      <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
+      <p> {{ selectedMod.Description }} </p>
+      <button mat-raised-button="" class="md-raised md-primary">Install</button>
+      <a href="{{selectedMod.InfoUrl }}" >More Info</a>
+    </section>
+  </div>
+</ng-template>
 <section>
   <mat-card class="setup-card">
     <mat-card-header>
@@ -14,7 +28,7 @@
   <div fxFlex="50%">
     <mat-list>
       <!-- *cdkVirtualFor -->
-        <mat-list-item *ngFor="let mod of config.Mods" [class.selected]="mod === selectedMod" (click)="onSelect(mod); modDetails.open()">
+        <mat-list-item *ngFor="let mod of config.Mods" [class.selected]="mod === selectedMod" (click)="onSelect(mod); openModal(modDetails)">
           <h1 matLine> {{ mod.Name }}</h1>
           <h3 matLine> Author: {{ mod.Author }}</h3>
           <p matLine> {{ mod.Description }}</p>
@@ -32,23 +46,3 @@ <h3 matLine> Author: {{ mod.Author }}</h3>
     </mat-list>
   </div>
 </section>
-<section>
-  <ngx-smart-modal #modDetails [identifier]="'modDetails'" [closable]="false" [customClass]="'modal-dialog'">
-    <div *ngIf="selectedMod" class="modal-content">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h4 class="modal-title" id="myModalLabel2">{{ selectedMod.Name }}</h4>
-          <button type="button" class="close" aria-label="Close" (click)="modDetails.close()"><span aria-hidden="true">&times;</span></button>
-        </div>
-        <div class="modal-body">
-          <section class="mat-typography">
-            <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
-            <p> {{ selectedMod.Description }} </p>
-            <button mat-raised-button="" class="md-raised md-primary">Install</button>
-            <a href="{{selectedMod.InfoUrl }}" >More Info</a>
-          </section>
-        </div>
-      </div>
-    </div>
-  </ngx-smart-modal>
-</section>
diff --git a/frontend/src/app/main-mods/main-mods.component.ts b/frontend/src/app/main-mods/main-mods.component.ts
index e3d50fe..3dde7c9 100644
--- a/frontend/src/app/main-mods/main-mods.component.ts
+++ b/frontend/src/app/main-mods/main-mods.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import { ConfigService } from '../services/config.service';
 import { BeatOnApiService } from '../services/beat-on-api.service';
 import { HostMessageService } from '../services/host-message.service';
@@ -9,6 +9,7 @@ import { ClientSetModStatus } from '../models/ClientSetModStatus';
 import { MatSlideToggleChange } from '@angular/material';
 import { HostActionResponse } from '../models/HostActionResponse';
 import { ECANCELED } from 'constants';
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
   selector: 'app-main-mods',
@@ -21,7 +22,7 @@ export class MainModsComponent implements OnInit {
   modIDBeingSwitched : string = null;
   selectedMod: ModDefinition;
   opened: boolean;
-  constructor(private configSvc : ConfigService, private beatOnApi : BeatOnApiService, private msgSvc : HostMessageService) {
+  constructor(private configSvc : ConfigService, private beatOnApi : BeatOnApiService, private msgSvc : HostMessageService, private modalService: NgbModal) {
     this.configSvc.configUpdated.subscribe((cfg : BeatOnConfig)=> { this.config = cfg.Config; });
   }
 
@@ -83,4 +84,8 @@ export class MainModsComponent implements OnInit {
   onSelect(mod : ModDefinition): void{
     this.selectedMod = mod;
   }
+
+  openModal(modal){
+    this.modalService.open(modal, { windowClass: 'modal right fade', size: 'xl'});
+  }
 }
diff --git a/frontend/src/assets/css/modal.scss b/frontend/src/assets/css/modal.scss
new file mode 100644
index 0000000..97b342c
--- /dev/null
+++ b/frontend/src/assets/css/modal.scss
@@ -0,0 +1,46 @@
+
+.modal.left .modal-dialog,
+.modal.right .modal-dialog {
+  position: fixed;
+  margin: auto;
+  max-width: calc(100vw - 700px);
+  height: 100%;
+  -webkit-transform: translate3d(0%, 0, 0);
+  -ms-transform: translate3d(0%, 0, 0);
+  -o-transform: translate3d(0%, 0, 0);
+  transform: translate3d(0%, 0, 0);
+}
+
+.modal.left .modal-content,
+.modal.right .modal-content {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.modal.left .modal-body,
+.modal.right .modal-body {
+  padding: 15px 15px 80px;
+}
+
+.modal.right.fade .modal-dialog {
+  right: -320px;
+  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
+  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
+  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
+  transition: opacity 0.3s linear, right 0.3s ease-out;
+}
+
+.modal.right.fade.in .modal-dialog {
+  right: 0;
+}
+
+/* ----- MODAL STYLE ----- */
+.modal-content {
+  border-radius: 0;
+  border: none;
+}
+
+.modal-header {
+  border-bottom-color: #eeeeee;
+  background-color: #fafafa;
+}
diff --git a/frontend/src/assets/css/ngx-custom-styles.scss b/frontend/src/assets/css/ngx-custom-styles.scss
deleted file mode 100644
index 4269807..0000000
--- a/frontend/src/assets/css/ngx-custom-styles.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-
-.modal.left .modal-dialog,
-.modal.right .modal-dialog {
-  position: fixed !important;
-  margin: auto !important;
-  width: 600px !important;
-  height: 100% !important;
-  -webkit-transform: translate3d(0%, 0, 0) !important;
-  -ms-transform: translate3d(0%, 0, 0) !important;
-  -o-transform: translate3d(0%, 0, 0) !important;
-  transform: translate3d(0%, 0, 0) !important;
-}
-
-.modal.left .modal-content,
-.modal.right .modal-content {
-  height: 100% !important;
-  overflow-y: auto !important;
-}
-
-.modal.left .modal-body,
-.modal.right .modal-body {
-  padding: 15px 15px 80px !important;
-}
-
-.modal.right.fade .modal-dialog {
-  right: -320px !important;
-  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out !important;
-  -moz-transition: opacity 0.3s linear, right 0.3s ease-out !important;
-  -o-transition: opacity 0.3s linear, right 0.3s ease-out !important;
-  transition: opacity 0.3s linear, right 0.3s ease-out !important;
-}
-
-.modal.right.fade.in .modal-dialog {
-  right: 0 !important;
-}
-
-/* ----- MODAL STYLE ----- */
-.modal-content {
-  border-radius: 0 !important;
-  border: none !important;
-}
-
-.modal-header {
-  border-bottom-color: #eeeeee !important;
-  background-color: #fafafa !important;
-}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index d89be2e..403ef07 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,9 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import '~ngx-toastr/toastr';
-@import "~ngx-smart-modal/ngx-smart-modal";
-@import url("./assets/css/ngx-custom-styles.scss");
-@import "~bootstrap/scss/bootstrap";
+@import '~bootstrap/dist/css/bootstrap.css';
+@import url("./assets/css/modal.scss");
 
 html, body { height: 100%; }
 body { background-color: #424242; margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

From 825f2491e4a30bc192714c0087e85bd1102b960c Mon Sep 17 00:00:00 2001
From: Brandon <itsbhenry@gmail.com>
Date: Sun, 7 Jul 2019 14:25:56 -0500
Subject: [PATCH 6/7] Fixed text wrapping of modal popup

---
 frontend/src/app/main-mods/main-mods.component.html | 8 +++++---
 frontend/src/app/main-mods/main-mods.component.ts   | 2 +-
 frontend/src/assets/css/modal.scss                  | 7 +++++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/main-mods/main-mods.component.html b/frontend/src/app/main-mods/main-mods.component.html
index 2018dba..a78eb9b 100644
--- a/frontend/src/app/main-mods/main-mods.component.html
+++ b/frontend/src/app/main-mods/main-mods.component.html
@@ -25,12 +25,14 @@ <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
 </section>
 <section>
   <div *ngIf="!config">No Mods!</div>
-  <div fxFlex="50%">
+  <div id="mod-list" fxFlex="50%">
     <mat-list>
       <!-- *cdkVirtualFor -->
         <mat-list-item *ngFor="let mod of config.Mods" [class.selected]="mod === selectedMod" (click)="onSelect(mod); openModal(modDetails)">
-          <h1 matLine> {{ mod.Name }}</h1>
-          <h3 matLine> Author: {{ mod.Author }}</h3>
+
+          <span class="modId">{{ mod.ID }}</span>
+          <h1 matLine class="modName"> {{ mod.Name }}</h1>
+          <h2 matLine> By {{ mod.Author }} </h2>
           <p matLine> {{ mod.Description }}</p>
           <p matLine class="modUrl" *ngIf="mod?.InfoUrl?.length"><a [href]="mod.InfoUrl">More Information</a></p>
 
diff --git a/frontend/src/app/main-mods/main-mods.component.ts b/frontend/src/app/main-mods/main-mods.component.ts
index 3dde7c9..d29b38c 100644
--- a/frontend/src/app/main-mods/main-mods.component.ts
+++ b/frontend/src/app/main-mods/main-mods.component.ts
@@ -86,6 +86,6 @@ export class MainModsComponent implements OnInit {
   }
 
   openModal(modal){
-    this.modalService.open(modal, { windowClass: 'modal right fade', size: 'xl'});
+    this.modalService.open(modal, { windowClass: 'modal right fade', size: 'xl', container: '#mod-list'});
   }
 }
diff --git a/frontend/src/assets/css/modal.scss b/frontend/src/assets/css/modal.scss
index 97b342c..101ce63 100644
--- a/frontend/src/assets/css/modal.scss
+++ b/frontend/src/assets/css/modal.scss
@@ -1,9 +1,12 @@
+#mod-list{
+  position: absolute;
+}
 
 .modal.left .modal-dialog,
 .modal.right .modal-dialog {
-  position: fixed;
+  position: absolute;
   margin: auto;
-  max-width: calc(100vw - 700px);
+  width: 30%;
   height: 100%;
   -webkit-transform: translate3d(0%, 0, 0);
   -ms-transform: translate3d(0%, 0, 0);

From cf209b324586448b4a2a948dac17a562fcdca341 Mon Sep 17 00:00:00 2001
From: Brandon <itsbhenry@gmail.com>
Date: Sun, 7 Jul 2019 15:11:17 -0500
Subject: [PATCH 7/7] Fixed styling on list items

---
 .../app/main-mods/main-mods.component.html    |  23 ++--
 .../app/main-mods/main-mods.component.scss    | 125 +++---------------
 2 files changed, 31 insertions(+), 117 deletions(-)

diff --git a/frontend/src/app/main-mods/main-mods.component.html b/frontend/src/app/main-mods/main-mods.component.html
index a78eb9b..7cadf9c 100644
--- a/frontend/src/app/main-mods/main-mods.component.html
+++ b/frontend/src/app/main-mods/main-mods.component.html
@@ -16,7 +16,7 @@ <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
   <mat-card class="setup-card">
     <mat-card-header>
       <div mat-card-avatar>
-        <mat-icon aria-hidden="false" class="setup-icon">cloud_upload</mat-icon>
+        <mat-icon aria-hidden="false" class="setup-icon">settings</mat-icon>
       </div>
       <mat-card-title>Mod Management</mat-card-title>
       <mat-card-subtitle>Manage all mods available for the quest here. Install, uninstall, and configure mods..</mat-card-subtitle>
@@ -28,14 +28,19 @@ <h3 class="mat-display-1"> Created by: {{ selectedMod.Author }} </h3>
   <div id="mod-list" fxFlex="50%">
     <mat-list>
       <!-- *cdkVirtualFor -->
-        <mat-list-item *ngFor="let mod of config.Mods" [class.selected]="mod === selectedMod" (click)="onSelect(mod); openModal(modDetails)">
-
-          <span class="modId">{{ mod.ID }}</span>
-          <h1 matLine class="modName"> {{ mod.Name }}</h1>
-          <h2 matLine> By {{ mod.Author }} </h2>
-          <p matLine> {{ mod.Description }}</p>
-          <p matLine class="modUrl" *ngIf="mod?.InfoUrl?.length"><a [href]="mod.InfoUrl">More Information</a></p>
-
+        <mat-list-item *ngFor="let mod of config.Mods" [class.selected]="mod === selectedMod">
+          <div matLine (click)="onSelect(mod); openModal(modDetails)">
+            <span class="modId">{{ mod.ID }}</span>
+            <div matLine>
+              <p class="mod-name"> {{ mod.Name }} </p>
+              <span class="modclass {{ mod.Category }}"> {{ mod.Category }}</span>
+            </div>
+            <div matLine>
+              By <span class="mod-author">{{ mod.Author }} </span>
+            </div>
+            <p matLine> {{ mod.Description }}</p>
+            <p matLine class="modUrl" *ngIf="mod?.InfoUrl?.length"><a [href]="mod.InfoUrl">More Information</a></p>
+          </div>
           <div matLine>
             <div class="enabledtext" [ngClass]="{'active': (mod.Status == 'Installed')}">Mod {{ (mod.Status == 'Installed')?"Active":"Inactive"}}:</div>
             <div class="toggleContainer">
diff --git a/frontend/src/app/main-mods/main-mods.component.scss b/frontend/src/app/main-mods/main-mods.component.scss
index 39db903..49e9db2 100644
--- a/frontend/src/app/main-mods/main-mods.component.scss
+++ b/frontend/src/app/main-mods/main-mods.component.scss
@@ -4,6 +4,7 @@
     overflow-y: auto;
     margin-left: 300px;
 }
+
 .modUrl {
     position: absolute;
     bottom: 0px;
@@ -22,20 +23,17 @@
 .header {
     margin-top: 20px;
 }
+
 .modclass {
-    height: 20px;
-    padding-left: 7px;
-    padding-right: 7px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    box-shadow: 0px 1px 2px 0px #000000;
-    font-size: 16px;
+    height: 30px;
+  padding: 2px 7px;
+  font-size: 16px;
     font-weight: bold;
     font-style: italic;
     float: left;
     position: absolute;
     top: 5px;
-    right: 0px;
+    right: 0;
 }
 .modclass.Saber {
     background-color: darkred;
@@ -100,6 +98,17 @@ mat-list-item:hover {
   left: .1em;
 }
 
+.mod-name {
+  font-size: 25px !important;
+  font-weight: bold;
+  margin-bottom: 0;
+}
+
+.mod-author {
+  font-weight: bold;
+  font-style: italic;
+}
+
 .toggleContainer {
     display: block;
     width: 65px;
@@ -121,106 +130,6 @@ mat-list-item:hover {
     font-size: 12px;
 }
 
-.viewport {
-  //   width: 600px;
-  height: 600px;
-  overflow-y: auto;
-  margin-left: 300px;
-}
-.modUrl {
-  position: absolute;
-  bottom: 0px;
-  left: 10px;
-  font-size: 12px;
-  max-width: 80%;
-  font-style: normal;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.modUrl a {
-  color: white;
-}
-.header {
-  margin-top: 20px;
-}
-.modclass {
-  height: 20px;
-  padding-left: 7px;
-  padding-right: 7px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  box-shadow: 0px 1px 2px 0px #000000;
-  font-size: 16px;
-  font-weight: bold;
-  font-style: italic;
-  float: left;
-  position: absolute;
-  top: 5px;
-  right: 0px;
-}
-.modclass.Saber {
-  background-color: darkred;
-}
-
-.modclass.Gameplay {
-  background-color: darkblue;
-}
-
-.modclass.Other {
-  background-color: darkgoldenrod;
-}
-
-.content {
-  font-style: italic;
-  margin-left: 15px;
-  margin-right: 15px;
-  text-align: justify;
-}
-
-.modId {
-  color: darkgray;
-  font-size: 8px;
-  height: 10px;
-  position: absolute;
-  left: 5px;
-  top: 5px;
-}
-.enabledtext.active {
-  font-weight: bold;
-}
-.enabledtext {
-  font-size: 14px;
-  position: absolute;
-  right: 70px;
-  bottom: 10px;
-  color: darkgray;
-}
-.mod {
-  // display: flex;
-  width: 380px;
-  margin-bottom: 20px;
-  margin-left: 6px;
-}
-
-.toggleContainer {
-  display: block;
-  width: 65px;
-  align-content: right;
-  margin-right: 6px;
-  margin-left: auto;
-  margin-bottom: 6px;
-}
-.toggle, .toggleSpinner {
-  display: inline-block;
-}
-.toggleSpinner {
-  margin-bottom: -3px;
-  margin-left: 5px;
-  width: 20px;
-  height: 20px;
-}
 .description {
   font-size: 13px;
 }