From 4494459e7b383ba6c6efd7bcfb77cbfb68c6f4a7 Mon Sep 17 00:00:00 2001
From: Earle white <dancehallvid@gmail.com>
Date: Fri, 16 Mar 2018 10:44:05 -0400
Subject: [PATCH] chore(demos): fix modal event,confirm window,modal event
 (#3976)

---
 demo/src/app/components/+modal/demos/events/events.html   | 2 +-
 demo/src/app/components/+modal/demos/events/events.ts     | 8 +++++++-
 .../service-confirm-window/service-confirm-window.html    | 2 +-
 .../+modal/demos/service-events/service-events.html       | 2 +-
 .../+modal/demos/service-events/service-events.ts         | 8 +++++++-
 5 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/demo/src/app/components/+modal/demos/events/events.html b/demo/src/app/components/+modal/demos/events/events.html
index f902c43abb..6ef0ac6e04 100644
--- a/demo/src/app/components/+modal/demos/events/events.html
+++ b/demo/src/app/components/+modal/demos/events/events.html
@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="showModal()">Open a modal</button>
 <br><br>
-<pre *ngFor="let message of messages">{{message}}</pre>
+<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
 
 <div class="modal fade" bsModal #modal="bs-modal" tabindex="-1" role="dialog"
      aria-labelledby="mySmallModalLabel" aria-hidden="true"
diff --git a/demo/src/app/components/+modal/demos/events/events.ts b/demo/src/app/components/+modal/demos/events/events.ts
index f944b2ac26..4f4f6af647 100644
--- a/demo/src/app/components/+modal/demos/events/events.ts
+++ b/demo/src/app/components/+modal/demos/events/events.ts
@@ -3,7 +3,13 @@ import { ModalDirective } from 'ngx-bootstrap/modal';
 
 @Component({
   selector: 'demo-modal-events',
-  templateUrl: './events.html'
+  templateUrl: './events.html',
+  styles: [`
+    .card {
+      margin-bottom: 0.75rem;
+      padding: 8px;
+    }
+  `]
 })
 export class DemoModalEventsComponent {
   @ViewChild(ModalDirective) modal: ModalDirective;
diff --git a/demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html b/demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html
index b0b7dd2cd9..87bde728d1 100644
--- a/demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html
+++ b/demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html
@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 <br><br>
-<pre>{{message}}</pre>
+<pre class="card card-block card-header">{{message}}</pre>
 <ng-template #template>
   <div class="modal-body text-center">
     <p>Do you want to confirm?</p>
diff --git a/demo/src/app/components/+modal/demos/service-events/service-events.html b/demo/src/app/components/+modal/demos/service-events/service-events.html
index 8464076b76..3c32f28238 100644
--- a/demo/src/app/components/+modal/demos/service-events/service-events.html
+++ b/demo/src/app/components/+modal/demos/service-events/service-events.html
@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 <br><br>
-<pre *ngFor="let message of messages">{{message}}</pre>
+<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Modal</h4>
diff --git a/demo/src/app/components/+modal/demos/service-events/service-events.ts b/demo/src/app/components/+modal/demos/service-events/service-events.ts
index ef72830609..294bb060a0 100644
--- a/demo/src/app/components/+modal/demos/service-events/service-events.ts
+++ b/demo/src/app/components/+modal/demos/service-events/service-events.ts
@@ -8,7 +8,13 @@ import 'rxjs/add/observable/combineLatest';
 
 @Component({
   selector: 'demo-modal-service-events',
-  templateUrl: './service-events.html'
+  templateUrl: './service-events.html',
+  styles: [`
+    .card {
+      margin-bottom: 0.75rem;
+      padding: 8px;
+    }
+  `]
 })
 export class DemoModalServiceEventsComponent {
   modalRef: BsModalRef;