Design confirm dialog

3 files changed, 21 insertions, 20 deletions

diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
index 2726af6cc..31b735f97 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -6,14 +6,14 @@
         <button type="button" class="close" aria-label="Close" (click)="cancel()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">{{ title }}</h4>
+        <h4 class="title-page title-page-single">{{ title }}</h4>
       </div>
 
       <div class="modal-body" [innerHtml]="message"></div>
 
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="cancel()">Cancel</button>
-        <button type="button" class="btn btn-primary" (click)="confirm()">Confirm</button>
+        <button type="button" class="grey-button" data-dismiss="modal" (click)="cancel()">Cancel</button>
+        <button type="button" class="orange-button" (click)="confirm()">Confirm</button>
       </div>
     </div>
   </div>
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
index c8e41e233..0515d969a 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -11,7 +11,8 @@ export interface ConfigChangedEvent {
 
 @Component({
   selector: 'my-confirm',
-  templateUrl: './confirm.component.html'
+  templateUrl: './confirm.component.html',
+  styles: [ '.button { padding: 0 13px; }' ]
 })
 export class ConfirmComponent implements OnInit {
   @ViewChild('confirmModal') confirmModal: ModalDirective
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index dc1f4dba0..0c999d659 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -42,22 +42,6 @@ label {
 .main-col {
   margin-left: $menu-width;
 
-  .title-page {
-    color: #000;
-    font-size: 16px;
-    display: inline-block;
-    margin-right: 55px;
-    font-weight: $font-semibold;
-    @include disable-default-a-behaviour;
-
-    &.active, &.title-page-single {
-      border-bottom: 2px solid $orange-color;
-      font-weight: $font-bold;
-      margin-top: 30px;
-      margin-bottom: 25px;
-    }
-  }
-
   .margin-content {
     margin-left: $not-expanded-horizontal-margins;
     margin-right: $not-expanded-horizontal-margins;
@@ -88,6 +72,22 @@ label {
   }
 }
 
+.title-page {
+  color: #000;
+  font-size: 16px;
+  display: inline-block;
+  margin-right: 55px;
+  font-weight: $font-semibold;
+  @include disable-default-a-behaviour;
+
+  &.active, &.title-page-single {
+    border-bottom: 2px solid $orange-color;
+    font-weight: $font-bold;
+    margin-top: 30px;
+    margin-bottom: 25px;
+  }
+}
+
 // On small screen, menu is absolute and displayed over the page
 @media screen and (max-width: 500px) {
   .title-menu-left {