From 4cc7b9d5b56e00d9d99fadb176a15becf1ae90c9 Mon Sep 17 00:00:00 2001
From: Aurora Virmasalo <93916893+VirmasaloA@users.noreply.github.com>
Date: Mon, 19 Aug 2024 12:02:32 +0300
Subject: [PATCH] CSCEXAM-1172 Add clear focus to buttons and update button
 styles to use bootstrap (#1143)

---
 .../teacher/teacher-dashboard.component.html  |  8 +++++--
 .../show-instructions-dialog.component.ts     |  2 +-
 .../exam-enrolment-details.component.html     |  8 ++-----
 .../exam-answers-dialog.component.html        |  2 +-
 .../search/exam-search-result.component.ts    |  4 ++--
 .../assessment/auto-evaluation.component.html |  8 +++++--
 .../assessment/exam-assessment.component.html |  8 ++++---
 .../exam-feedback-config.component.html       |  4 ++--
 .../basic/basic-exam-info.component.html      |  8 ++++---
 .../editor/creation/new-exam.component.html   |  2 +-
 .../exam-publication.component.html           | 10 ++++-----
 .../publication-error-dialog.component.ts     |  2 +-
 .../sections/exam-material.component.html     |  2 +-
 .../editor/sections/section.component.html    |  4 ++--
 .../editor/sections/sections.component.html   | 12 +++++------
 .../header/examination-header.component.ts    |  6 +++---
 .../examination-toolbar.component.html        | 21 ++++++++++++-------
 .../inspection-statement-dialog.component.ts  |  2 +-
 .../maturity-reporting.component.html         |  2 +-
 .../basequestion/question-body.component.html |  2 +-
 .../basequestion/question.component.html      |  4 ++--
 .../examquestion/exam-question.component.html |  2 +-
 .../library-transfer-dialog.component.html    |  4 ++--
 .../app/question/library/library.component.ts |  4 ++--
 .../owners/library-owners-dialog.component.ts |  4 ++--
 .../tags/library-tags-dialog.component.ts     |  2 +-
 .../picker/question-picker.component.ts       |  2 +-
 .../assessment/assessment.component.html      |  2 +-
 .../assessment/grading/toolbar.component.ts   |  8 +++----
 .../maturity/inspection-comments.component.ts |  2 +-
 .../assessment/maturity/toolbar.component.ts  | 10 ++++-----
 .../categories/graded-logged.component.html   |  2 +-
 .../listing/categories/graded.component.html  |  2 +-
 .../categories/in-progress.component.html     |  4 ++--
 .../listing/dialogs/no-shows.component.html   |  2 +-
 ui/src/app/session/dev/dev-login.component.ts |  2 +-
 ui/src/styles.scss                            | 15 ++-----------
 37 files changed, 95 insertions(+), 93 deletions(-)

diff --git a/ui/src/app/dashboard/staff/teacher/teacher-dashboard.component.html b/ui/src/app/dashboard/staff/teacher/teacher-dashboard.component.html
index 9df6f9aef..04e81876f 100644
--- a/ui/src/app/dashboard/staff/teacher/teacher-dashboard.component.html
+++ b/ui/src/app/dashboard/staff/teacher/teacher-dashboard.component.html
@@ -2,10 +2,14 @@
 <xm-page-content [content]="content" />
 <ng-template #buttons>
     <div class="float-end pe-3">
-        <button [routerLink]="['/staff/exams']" class="xm-ok-button me-3">
+        <button [routerLink]="['/staff/exams']" class="btn btn-success me-3">
             {{ 'i18n_toolbar_new_exam' | translate }}
         </button>
-        <button [routerLink]="['/staff/questions/new']" [queryParams]="{ nextState: 'teacher' }" class="xm-ok-button">
+        <button
+            [routerLink]="['/staff/questions/new']"
+            [queryParams]="{ nextState: 'teacher' }"
+            class="btn btn-success"
+        >
             {{ 'i18n_toolbar_new_question' | translate }}
         </button>
     </div>
diff --git a/ui/src/app/enrolment/active/dialogs/show-instructions-dialog.component.ts b/ui/src/app/enrolment/active/dialogs/show-instructions-dialog.component.ts
index 39fbbcd6a..b2c479a80 100644
--- a/ui/src/app/enrolment/active/dialogs/show-instructions-dialog.component.ts
+++ b/ui/src/app/enrolment/active/dialogs/show-instructions-dialog.component.ts
@@ -30,7 +30,7 @@ import { MathJaxDirective } from 'src/app/shared/math/math-jax.directive';
         </div>
         <div class="modal-body" [xmMathJax]="instructions"></div>
         <div class="modal-footer">
-            <button class="xm-cancel-button" (click)="ok()" autofocus>
+            <button class="btn btn-secondary" (click)="ok()" autofocus>
                 {{ 'i18n_button_ok' | translate }}
             </button>
         </div>
diff --git a/ui/src/app/enrolment/exams/exam-enrolment-details.component.html b/ui/src/app/enrolment/exams/exam-enrolment-details.component.html
index 457f363dd..c6e785de5 100644
--- a/ui/src/app/enrolment/exams/exam-enrolment-details.component.html
+++ b/ui/src/app/enrolment/exams/exam-enrolment-details.component.html
@@ -21,11 +21,7 @@ <h3>{{ exam.name }}</h3>
         <div class="row">
             @if (!exam.alreadyEnrolled && !exam.noTrialsLeft) {
                 <div class="col-md-3 col-6">
-                    <button
-                        class="xm-ok-button important-clear-focus"
-                        [disabled]="getExpiration()"
-                        (click)="enrollForExam()"
-                    >
+                    <button class="btn btn-success" [disabled]="getExpiration()" (click)="enrollForExam()">
                         {{ 'i18n_enroll_to_exam' | translate }}
                     </button>
                     @if (getExpiration()) {
@@ -112,7 +108,7 @@ <h3>{{ exam.name }}</h3>
         @if (!exam.reservationMade && exam.alreadyEnrolled && !exam.noTrialsLeft) {
             <div class="row mt-4 me-1">
                 <div class="col-md-12">
-                    <button class="xm-ok-button" (click)="makeReservation()">
+                    <button class="btn btn-success" (click)="makeReservation()">
                         {{ 'i18n_student_new_reservation' | translate }}
                     </button>
                 </div>
diff --git a/ui/src/app/enrolment/finished/exam-answers-dialog.component.html b/ui/src/app/enrolment/finished/exam-answers-dialog.component.html
index ea39b044c..dd89e9e49 100644
--- a/ui/src/app/enrolment/finished/exam-answers-dialog.component.html
+++ b/ui/src/app/enrolment/finished/exam-answers-dialog.component.html
@@ -210,7 +210,7 @@ <h3 class="col-md-12">{{ 'i18n_exam_review_settings' | translate }}</h3>
         </div>
     }
     <div class="modal-footer mt-4">
-        <button class="xm-cancel-button" (click)="activeModal.close()">
+        <button class="btn btn-secondary" (click)="activeModal.close()">
             {{ 'i18n_button_ok' | translate }}
         </button>
     </div>
diff --git a/ui/src/app/enrolment/search/exam-search-result.component.ts b/ui/src/app/enrolment/search/exam-search-result.component.ts
index f46fdc264..1a4186c21 100644
--- a/ui/src/app/enrolment/search/exam-search-result.component.ts
+++ b/ui/src/app/enrolment/search/exam-search-result.component.ts
@@ -87,12 +87,12 @@ import { TeacherListComponent } from 'src/app/shared/user/teacher-list.component
         <div class="row mt-3">
             <div class="col flex justify-content-end">
                 @if (!exam.alreadyEnrolled) {
-                    <button class="xm-ok-button important-clear-focus" (click)="enrollForExam()" [disabled]="enrolling">
+                    <button class="btn btn-success" (click)="enrollForExam()" [disabled]="enrolling">
                         {{ 'i18n_enroll_to_exam' | translate }}
                     </button>
                 }
                 @if (exam.alreadyEnrolled && !exam.reservationMade) {
-                    <button class="xm-ok-button important-clear-focus" (click)="makeReservation()">
+                    <button class="btn btn-success" (click)="makeReservation()">
                         {{ 'i18n_student_new_reservation' | translate }}
                     </button>
                 }
diff --git a/ui/src/app/exam/editor/assessment/auto-evaluation.component.html b/ui/src/app/exam/editor/assessment/auto-evaluation.component.html
index eb65b6208..d1b89c6f3 100644
--- a/ui/src/app/exam/editor/assessment/auto-evaluation.component.html
+++ b/ui/src/app/exam/editor/assessment/auto-evaluation.component.html
@@ -39,13 +39,17 @@
     </div>
     <div class="col-md-12 mb-3">
         @if (!autoevaluation.enabled) {
-            <button class="xm-ok-button" name="enableAutoEvaluation" (click)="autoevaluation.enabled = true; enable()">
+            <button
+                class="btn btn-success"
+                name="enableAutoEvaluation"
+                (click)="autoevaluation.enabled = true; enable()"
+            >
                 {{ 'i18n_use' | translate }}
             </button>
         }
         @if (autoevaluation.enabled) {
             <button
-                class="xm-warning-button"
+                class="btn btn-outline-danger"
                 name="disableAutoEvaluation"
                 (click)="autoevaluation.enabled = false; disable()"
             >
diff --git a/ui/src/app/exam/editor/assessment/exam-assessment.component.html b/ui/src/app/exam/editor/assessment/exam-assessment.component.html
index 2a332d9b1..067a5efa7 100644
--- a/ui/src/app/exam/editor/assessment/exam-assessment.component.html
+++ b/ui/src/app/exam/editor/assessment/exam-assessment.component.html
@@ -83,18 +83,20 @@
 <div class="row mt-3">
     <div class="col-md-12 mb-3">
         <div class="float-end">
-            <button class="xm-ok-button" (click)="updateExam(false)">{{ 'i18n_save' | translate }}</button>
+            <button class="btn btn-success" (click)="updateExam(false)">{{ 'i18n_save' | translate }}</button>
         </div>
     </div>
 </div>
 
 <div class="row mt-4">
     <div class="col-md-2 grey-top mb-3 pt-3">
-        <button class="xm-neutral-button" (click)="previousTab()">&#171; {{ 'i18n_questions' | translate }}</button>
+        <button class="btn btn-outline-secondary" (click)="previousTab()">
+            &#171; {{ 'i18n_questions' | translate }}
+        </button>
     </div>
     <div class="col grey-top mb-3 pt-3">
         <div class="float-end">
-            <button class="xm-neutral-button" (click)="nextTab()">
+            <button class="btn btn-outline-secondary" (click)="nextTab()">
                 {{ 'i18n_exam_publish_tab' | translate }} &#187;
             </button>
         </div>
diff --git a/ui/src/app/exam/editor/assessment/exam-feedback-config.component.html b/ui/src/app/exam/editor/assessment/exam-feedback-config.component.html
index 6dac90751..eec038608 100644
--- a/ui/src/app/exam/editor/assessment/exam-feedback-config.component.html
+++ b/ui/src/app/exam/editor/assessment/exam-feedback-config.component.html
@@ -37,7 +37,7 @@
         <div class="col-md-12 my-3">
             @if (!examFeedbackConfig.enabled) {
                 <button
-                    class="xm-ok-button"
+                    class="btn btn-success"
                     [ngClass]="{ 'feature-not-in-use': modifiable !== 'everything' }"
                     name="enableExamFeedbackConfig"
                     (click)="enable()"
@@ -47,7 +47,7 @@
             }
             @if (examFeedbackConfig.enabled) {
                 <button
-                    class="xm-warning-button"
+                    class="btn btn-outline-danger"
                     [ngClass]="{ 'feature-not-in-use': modifiable !== 'everything' }"
                     name="disableExamFeedbackConfig"
                     (click)="disable()"
diff --git a/ui/src/app/exam/editor/basic/basic-exam-info.component.html b/ui/src/app/exam/editor/basic/basic-exam-info.component.html
index 7cb447ed5..cfca81437 100644
--- a/ui/src/app/exam/editor/basic/basic-exam-info.component.html
+++ b/ui/src/app/exam/editor/basic/basic-exam-info.component.html
@@ -302,20 +302,22 @@
 <!-- Buttons -->
 <div class="row d-flex flex-row-reverse flex-align-r m-4">
     <div class="col-auto p1">
-        <button class="xm-ok-button" (click)="updateExam(false)">
+        <button class="btn btn-success" (click)="updateExam(false)">
             {{ 'i18n_save' | translate }}
         </button>
     </div>
     <div class="col-auto p1">
         @if (showDelete()) {
-            <button class="xm-warning-button" (click)="removeExam()">{{ 'i18n_exam_remove' | translate }}</button>
+            <button class="btn btn-outline-danger" (click)="removeExam()">{{ 'i18n_exam_remove' | translate }}</button>
         }
     </div>
 </div>
 <div class="row mt-3">
     <div class="col-md-12 mb-3 pt-3 grey-top">
         <span class="float-end">
-            <button class="xm-neutral-button" (click)="nextTab()">{{ 'i18n_questions' | translate }} &raquo;</button>
+            <button class="btn btn-outline-secondary" (click)="nextTab()">
+                {{ 'i18n_questions' | translate }} &raquo;
+            </button>
         </span>
     </div>
 </div>
diff --git a/ui/src/app/exam/editor/creation/new-exam.component.html b/ui/src/app/exam/editor/creation/new-exam.component.html
index a485d22b3..f24d87dc1 100644
--- a/ui/src/app/exam/editor/creation/new-exam.component.html
+++ b/ui/src/app/exam/editor/creation/new-exam.component.html
@@ -76,7 +76,7 @@
     <div class="row mt-3">
         @if (homeExaminationSupported || sebExaminationSupported) {
             <div class="col-md-12">
-                <button class="xm-ok-button" (click)="createExam()" [disabled]="!type">
+                <button class="btn btn-success" (click)="createExam()" [disabled]="!type">
                     {{ 'i18n_create_new' | translate }}
                 </button>
             </div>
diff --git a/ui/src/app/exam/editor/publication/exam-publication.component.html b/ui/src/app/exam/editor/publication/exam-publication.component.html
index 1d7d24057..f847efb9e 100644
--- a/ui/src/app/exam/editor/publication/exam-publication.component.html
+++ b/ui/src/app/exam/editor/publication/exam-publication.component.html
@@ -321,12 +321,12 @@
                     <div
                         [hidden]="exam.state !== 'PUBLISHED' || exam.executionType.type !== 'PUBLIC' || collaborative()"
                     >
-                        <button class="xm-warning-button" (click)="unpublishExam()">
+                        <button class="btn btn-outline-danger" (click)="unpublishExam()">
                             {{ 'i18n_unpublish_exam' | translate }}
                         </button>
                     </div>
                     <div [hidden]="exam.state === 'PUBLISHED'">
-                        <button class="xm-ok-button me-3" (click)="saveAndPublishExam()">
+                        <button class="btn btn-success me-3" (click)="saveAndPublishExam()">
                             @if (!isDraftCollaborativeExam()) {
                                 <span>{{ 'i18n_save_and_publish' | translate }}</span>
                             } @else {
@@ -334,8 +334,8 @@
                             }
                         </button>
                     </div>
-                    <button class="xm-ok-button me-3" (click)="updateExam()">{{ 'i18n_save' | translate }}</button>
-                    <button class="xm-neutral-button me-3" (click)="previewExam(4)">
+                    <button class="btn btn-success me-3" (click)="updateExam()">{{ 'i18n_save' | translate }}</button>
+                    <button class="btn btn-outline-secondary me-3" (click)="previewExam(4)">
                         {{ 'i18n_preview' | translate }}
                     </button>
                 </div>
@@ -343,7 +343,7 @@
         </div>
         <div class="row me-3">
             <div class="col-md-12 mb-3 pt-3 grey-top">
-                <button class="xm-neutral-button" (click)="previousTab()">
+                <button class="btn btn-outline-secondary" (click)="previousTab()">
                     &#171; {{ 'i18n_exam_assessment_settings' | translate }}
                 </button>
             </div>
diff --git a/ui/src/app/exam/editor/publication/publication-error-dialog.component.ts b/ui/src/app/exam/editor/publication/publication-error-dialog.component.ts
index 4fa152d6c..e621c6f4c 100644
--- a/ui/src/app/exam/editor/publication/publication-error-dialog.component.ts
+++ b/ui/src/app/exam/editor/publication/publication-error-dialog.component.ts
@@ -32,7 +32,7 @@ import { TranslateModule } from '@ngx-translate/core';
             }
         </div>
         <div class="modal-footer">
-            <button class="xm-cancel-button" (click)="activeModal.close()" autofocus>
+            <button class="btn btn-secondary" (click)="activeModal.close()" autofocus>
                 {{ 'i18n_button_ok' | translate }}
             </button>
         </div>
diff --git a/ui/src/app/exam/editor/sections/exam-material.component.html b/ui/src/app/exam/editor/sections/exam-material.component.html
index 6ca52e4e9..db457a275 100644
--- a/ui/src/app/exam/editor/sections/exam-material.component.html
+++ b/ui/src/app/exam/editor/sections/exam-material.component.html
@@ -92,7 +92,7 @@ <h1 class="col-md-12">
     </div>
 </div>
 <div class="modal-footer">
-    <button class="xm-cancel-button" (click)="ok()">
+    <button class="btn btn-secondary" (click)="ok()">
         {{ 'i18n_close' | translate }}
     </button>
 </div>
diff --git a/ui/src/app/exam/editor/sections/section.component.html b/ui/src/app/exam/editor/sections/section.component.html
index 60a55124e..143a69e3a 100644
--- a/ui/src/app/exam/editor/sections/section.component.html
+++ b/ui/src/app/exam/editor/sections/section.component.html
@@ -244,11 +244,11 @@
     <div class="row my-3">
         <div class="col-12">
             @if (!collaborative) {
-                <button class="xm-ok-button" (click)="openLibrary()">
+                <button class="btn btn-success" (click)="openLibrary()">
                     <i class="bi-plus"></i>&nbsp;{{ 'i18n_add_from_library' | translate }}
                 </button>
             }
-            <button class="xm-ok-button ms-2" (click)="addNewQuestion()">
+            <button class="btn btn-success ms-2" (click)="addNewQuestion()">
                 <i class="bi-plus"></i>&nbsp;{{ 'i18n_exam_new_question' | translate }}
             </button>
         </div>
diff --git a/ui/src/app/exam/editor/sections/sections.component.html b/ui/src/app/exam/editor/sections/sections.component.html
index 6f2706f91..22540492f 100644
--- a/ui/src/app/exam/editor/sections/sections.component.html
+++ b/ui/src/app/exam/editor/sections/sections.component.html
@@ -55,25 +55,25 @@ <h4>{{ calculateExamMaxScore() }}</h4>
 <!-- Buttons -->
 <div class="row me-1 mt-4">
     <div class="col-md-3 mb-3">
-        <button class="xm-ok-button" (click)="addNewSection()">
+        <button class="btn btn-success" (click)="addNewSection()">
             <i class="bi-plus"></i>&nbsp;{{ 'i18n_section_add' | translate }}
         </button>
     </div>
     <div class="col">
         <div class="row justify-content-end">
             <div class="col-auto p-1">
-                <button class="xm-neutral-button" (click)="previewExam(2)">
+                <button class="btn btn-outline-secondary" (click)="previewExam(2)">
                     {{ 'i18n_preview' | translate }}
                 </button>
             </div>
             <div class="col-auto p-1">
-                <button class="xm-ok-button" (click)="updateExam(false)">
+                <button class="btn btn-success" (click)="updateExam(false)">
                     {{ 'i18n_save' | translate }}
                 </button>
             </div>
             <div class="col-auto p-1">
                 @if (showDelete()) {
-                    <button class="xm-warning-button" (click)="removeExam()">
+                    <button class="btn btn-outline-danger" (click)="removeExam()">
                         {{ 'i18n_exam_remove' | translate }}
                     </button>
                 }
@@ -83,13 +83,13 @@ <h4>{{ calculateExamMaxScore() }}</h4>
 </div>
 <div class="row mt-2">
     <div class="col-md-2 grey-top mb-3 pt-3">
-        <button class="xm-neutral-button" (click)="previousTab()">
+        <button class="btn btn-outline-secondary" (click)="previousTab()">
             &#171; {{ 'i18n_exam_basic_information_tab' | translate }}
         </button>
     </div>
     <div class="col grey-top mb-3 pt-3">
         <div class="float-end">
-            <button class="xm-neutral-button" (click)="nextTab()">
+            <button class="btn btn-outline-secondary" (click)="nextTab()">
                 {{ 'i18n_exam_assessment_settings' | translate }} &#187;
             </button>
         </div>
diff --git a/ui/src/app/examination/header/examination-header.component.ts b/ui/src/app/examination/header/examination-header.component.ts
index 90046b739..cbb8b69a5 100644
--- a/ui/src/app/examination/header/examination-header.component.ts
+++ b/ui/src/app/examination/header/examination-header.component.ts
@@ -35,9 +35,9 @@ import { CourseCodeComponent } from 'src/app/shared/miscellaneous/course-code.co
                     }
                 </div>
                 <div class="language-selector">
-                    <button class="xm-ok-button ms-1" (click)="switchLanguage('fi')">FI</button>
-                    <button class="xm-ok-button ms-1" (click)="switchLanguage('sv')">SV</button>
-                    <button class="xm-ok-button ms-1" (click)="switchLanguage('en')">EN</button>
+                    <button class="btn btn-success ms-1" (click)="switchLanguage('fi')">FI</button>
+                    <button class="btn btn-success ms-1" (click)="switchLanguage('sv')">SV</button>
+                    <button class="btn btn-success ms-1" (click)="switchLanguage('en')">EN</button>
                     <div class="divider-free"></div>
                 </div>
                 @if (!isPreview) {
diff --git a/ui/src/app/examination/navigation/examination-toolbar.component.html b/ui/src/app/examination/navigation/examination-toolbar.component.html
index c216fe2f4..c3154e1f3 100644
--- a/ui/src/app/examination/navigation/examination-toolbar.component.html
+++ b/ui/src/app/examination/navigation/examination-toolbar.component.html
@@ -20,7 +20,7 @@
         <!-- ATTACHMENT -->
         <div class="row mt-4 ms-2 align-items-center" [hidden]="!exam.attachment">
             <div class="col-6">
-                <button class="xm-ok-button" [title]="exam.attachment?.fileName" (click)="downloadExamAttachment()">
+                <button class="btn btn-success" [title]="exam.attachment?.fileName" (click)="downloadExamAttachment()">
                     {{ 'i18n_open_it' | translate }} {{ 'i18n_exam_attachment' | translate }}
                     <img src="/assets/images/icon_attachment.svg" alt="attachment" />
                 </button>
@@ -33,7 +33,7 @@
         <div class="row mt-3 ms-2">
             <div class="col-12">
                 <button
-                    class="xm-ok-button"
+                    class="btn btn-success"
                     [ngClass]="!activeSection ? '' : 'notactive'"
                     (click)="selectGuidePage()"
                     (keydown.enter)="selectGuidePage()"
@@ -79,7 +79,7 @@
                 </div>
                 <div class="col">
                     <button
-                        class="xm-ok-button"
+                        class="btn btn-success"
                         (click)="selectSection(section)"
                         (keydown.enter)="selectSection(section)"
                         [attr.aria-current]="activeSection?.sequenceNumber === i"
@@ -103,7 +103,7 @@
                 @if (exam.examType.type !== 'MATURITY') {
                     <!-- ROOM INSTRUCTIONS -->
                     <button
-                        class="xm-ok-button"
+                        class="btn btn-success"
                         ngbPopover="{{ displayRoomInstructions() }}"
                         popoverTitle="{{ 'i18n_instructions' | translate }}"
                     >
@@ -112,7 +112,7 @@
                     </button>
                 } @else {
                     <!-- MATURITY INSTRUCTIONS -->
-                    <button class="xm-ok-button" (click)="showMaturityInstructions()">
+                    <button class="btn btn-success" (click)="showMaturityInstructions()">
                         {{ 'i18n_maturity_instructions' | translate }}
                         <i class="bi bi-info-square ps-2"></i>
                     </button>
@@ -123,7 +123,12 @@
         <!-- EXIT PREVIEW -->
         <div class="row mt-3 ms-2" [hidden]="!isPreview">
             <div class="col-md-12">
-                <button tabindex="0" class="xm-neutral-button" (click)="exitPreview()" (keydown.enter)="exitPreview()">
+                <button
+                    tabindex="0"
+                    class="btn btn-outline-secondary"
+                    (click)="exitPreview()"
+                    (keydown.enter)="exitPreview()"
+                >
                     {{ 'i18n_exit_preview' | translate }}
                     <i class="bi bi-x ps-2"></i>
                 </button>
@@ -135,7 +140,7 @@
         <!-- RETURN -->
         <div class="row" [hidden]="isPreview">
             <div class="col-md-12 ms-3">
-                <button class="xm-ok-button" (click)="turnExam()">
+                <button class="btn btn-success" (click)="turnExam()">
                     {{ 'i18n_save_and_return_exam' | translate }}
                 </button>
             </div>
@@ -144,7 +149,7 @@
         <!-- ABORT -->
         <div class="row mt-3" [hidden]="isPreview">
             <div class="col-md-12 ms-3">
-                <button class="xm-neutral-button" (click)="abortExam()">
+                <button class="btn btn-outline-secondary" (click)="abortExam()">
                     {{ 'i18n_abort_exam' | translate }}
                     <i class="bi bi-x ps-2"></i>
                 </button>
diff --git a/ui/src/app/maturity/dialogs/inspection-statement-dialog.component.ts b/ui/src/app/maturity/dialogs/inspection-statement-dialog.component.ts
index 59c1bc1e6..e6f1f059f 100644
--- a/ui/src/app/maturity/dialogs/inspection-statement-dialog.component.ts
+++ b/ui/src/app/maturity/dialogs/inspection-statement-dialog.component.ts
@@ -31,7 +31,7 @@ import { TranslateModule } from '@ngx-translate/core';
             </div>
         </div>
         <div class="modal-footer">
-            <button class="xm-cancel-button" (click)="activeModal.close()" autofocus>
+            <button class="btn btn-secondary" (click)="activeModal.close()" autofocus>
                 {{ 'i18n_close' | translate }}
             </button>
         </div>
diff --git a/ui/src/app/maturity/reporting/maturity-reporting.component.html b/ui/src/app/maturity/reporting/maturity-reporting.component.html
index 76aa7f673..060e2d050 100644
--- a/ui/src/app/maturity/reporting/maturity-reporting.component.html
+++ b/ui/src/app/maturity/reporting/maturity-reporting.component.html
@@ -3,7 +3,7 @@
 <ng-template #print>
     <span class="print-only compact-header-text">{{ month | date: 'MM/yyyy' }}</span>
     <div class="float-end me-2 no-print">
-        <button (click)="printReport()" class="xm-ok-button">
+        <button (click)="printReport()" class="btn btn-success">
             {{ 'i18n_print' | translate }}<i class="bi bi-printer ps-2"></i>
         </button>
     </div>
diff --git a/ui/src/app/question/basequestion/question-body.component.html b/ui/src/app/question/basequestion/question-body.component.html
index c1a8ee5d3..5f42fc00d 100644
--- a/ui/src/app/question/basequestion/question-body.component.html
+++ b/ui/src/app/question/basequestion/question-body.component.html
@@ -359,7 +359,7 @@
                         <span class="warning-text-small">{{ 'i18n_shared_question_property_info' | translate }}</span>
                     </div>
                 }
-                <button class="xm-ok-button" (click)="selectFile()">{{ 'i18n_attach_file' | translate }}</button>
+                <button class="btn btn-success" (click)="selectFile()">{{ 'i18n_attach_file' | translate }}</button>
                 @if (question.attachment && !question.attachment?.removed) {
                     <div class="make-inline ps-2">
                         @if (hasUploadedAttachment()) {
diff --git a/ui/src/app/question/basequestion/question.component.html b/ui/src/app/question/basequestion/question.component.html
index e6a8469ff..0c0d643d7 100644
--- a/ui/src/app/question/basequestion/question.component.html
+++ b/ui/src/app/question/basequestion/question.component.html
@@ -36,12 +36,12 @@
                     "
                     (click)="saveQuestion()"
                     type="submit"
-                    class="xm-ok-button"
+                    class="btn btn-success"
                 >
                     {{ 'i18n_save' | translate }}
                 </button>
 
-                <button (click)="cancel()" type="submit" class="xm-cancel-button me-2">
+                <button (click)="cancel()" type="submit" class="btn btn-secondary me-2">
                     {{ 'i18n_button_cancel' | translate }}
                 </button>
                 <!--button
diff --git a/ui/src/app/question/examquestion/exam-question.component.html b/ui/src/app/question/examquestion/exam-question.component.html
index cda4ae9a5..7cec77cf3 100644
--- a/ui/src/app/question/examquestion/exam-question.component.html
+++ b/ui/src/app/question/examquestion/exam-question.component.html
@@ -557,7 +557,7 @@
                                 }}</span>
                             </div>
                         }
-                        <button class="xm-ok-button" (click)="selectFile()">
+                        <button class="btn btn-success" (click)="selectFile()">
                             {{ 'i18n_attach_file' | translate }}
                         </button>
 
diff --git a/ui/src/app/question/library/export/library-transfer-dialog.component.html b/ui/src/app/question/library/export/library-transfer-dialog.component.html
index 9f808d606..686517bba 100644
--- a/ui/src/app/question/library/export/library-transfer-dialog.component.html
+++ b/ui/src/app/question/library/export/library-transfer-dialog.component.html
@@ -22,7 +22,7 @@ <h1 class="xm-modal-title">{{ 'i18n_transfer_questions' | translate }}</h1>
     </div>
     <div class="row mt-4">
         <div class="col-12">
-            <button class="xm-ok-button" [disabled]="!organisation" (click)="transfer()">
+            <button class="btn btn-success" [disabled]="!organisation" (click)="transfer()">
                 {{ 'i18n_copy' | translate }}
             </button>
             @if (organisation) {
@@ -32,7 +32,7 @@ <h1 class="xm-modal-title">{{ 'i18n_transfer_questions' | translate }}</h1>
     </div>
 </div>
 <div class="modal-footer">
-    <button class="xm-cancel-button" (click)="activeModal.close()" autofocus>
+    <button class="btn btn-secondary" (click)="activeModal.close()" autofocus>
         {{ 'i18n_close' | translate }}
     </button>
 </div>
diff --git a/ui/src/app/question/library/library.component.ts b/ui/src/app/question/library/library.component.ts
index 7bebc1633..0d96dc3c9 100644
--- a/ui/src/app/question/library/library.component.ts
+++ b/ui/src/app/question/library/library.component.ts
@@ -38,10 +38,10 @@ import { LibraryTagsDialogComponent } from './tags/library-tags-dialog.component
         <xm-page-content [content]="content" />
         <ng-template #buttons>
             <div class="float-end pe-3">
-                <button (click)="import()" class="xm-ok-button me-3">
+                <button (click)="import()" class="btn btn-success me-3">
                     {{ 'i18n_toolbar_import_questions' | translate }}
                 </button>
-                <button [routerLink]="['new']" [queryParams]="{ nextState: 'questions' }" class="xm-ok-button">
+                <button [routerLink]="['new']" [queryParams]="{ nextState: 'questions' }" class="btn btn-success">
                     {{ 'i18n_toolbar_new_question' | translate }}
                 </button>
             </div>
diff --git a/ui/src/app/question/library/owners/library-owners-dialog.component.ts b/ui/src/app/question/library/owners/library-owners-dialog.component.ts
index a5e4f3fcc..4b3b84222 100644
--- a/ui/src/app/question/library/owners/library-owners-dialog.component.ts
+++ b/ui/src/app/question/library/owners/library-owners-dialog.component.ts
@@ -39,13 +39,13 @@ import { UserService } from 'src/app/shared/user/user.service';
                     [resultFormatter]="nameFormatter"
                 />
 
-                <button class="xm-ok-button" (click)="addOwnerForSelected()">
+                <button class="btn btn-success" (click)="addOwnerForSelected()">
                     {{ 'i18n_add' | translate }}
                 </button>
             </div>
         </div>
         <div class="modal-footer">
-            <button class="xm-cancel-button" (click)="close()" autofocus>
+            <button class="btn btn-secondary" (click)="close()" autofocus>
                 {{ 'i18n_close' | translate }}
             </button>
         </div>
diff --git a/ui/src/app/question/library/tags/library-tags-dialog.component.ts b/ui/src/app/question/library/tags/library-tags-dialog.component.ts
index 2ef752521..01232f607 100644
--- a/ui/src/app/question/library/tags/library-tags-dialog.component.ts
+++ b/ui/src/app/question/library/tags/library-tags-dialog.component.ts
@@ -49,7 +49,7 @@ import { LibraryService } from 'src/app/question/library/library.service';
             </div>
         </div>
         <div class="modal-footer">
-            <button class="xm-cancel-button" (click)="close()" autofocus>
+            <button class="btn btn-secondary" (click)="close()" autofocus>
                 {{ 'i18n_close' | translate }}
             </button>
         </div>
diff --git a/ui/src/app/question/picker/question-picker.component.ts b/ui/src/app/question/picker/question-picker.component.ts
index 99e0f8d91..865cdce25 100644
--- a/ui/src/app/question/picker/question-picker.component.ts
+++ b/ui/src/app/question/picker/question-picker.component.ts
@@ -36,7 +36,7 @@ import { LibrarySearchComponent } from 'src/app/question/library/search/library-
 
             <div class="row ms-3 mb-3">
                 <div class="col-md-12">
-                    <button class="xm-ok-button" (click)="addQuestions()">
+                    <button class="btn btn-success" (click)="addQuestions()">
                         {{ 'i18n_add_chosen' | translate }} ( {{ selections.length }} )
                     </button>
                 </div>
diff --git a/ui/src/app/review/assessment/assessment.component.html b/ui/src/app/review/assessment/assessment.component.html
index 8651f4eca..60608208e 100644
--- a/ui/src/app/review/assessment/assessment.component.html
+++ b/ui/src/app/review/assessment/assessment.component.html
@@ -3,7 +3,7 @@
     <xm-page-content [content]="content" />
 }
 <ng-template #printButton>
-    <button (click)="print()" class="xm-ok-button float-end">
+    <button (click)="print()" class="btn btn-success float-end">
         {{ 'i18n_print' | translate }}<i class="bi bi-printer ps-2"></i>
     </button>
 </ng-template>
diff --git a/ui/src/app/review/assessment/grading/toolbar.component.ts b/ui/src/app/review/assessment/grading/toolbar.component.ts
index 7139e04a2..643110c54 100644
--- a/ui/src/app/review/assessment/grading/toolbar.component.ts
+++ b/ui/src/app/review/assessment/grading/toolbar.component.ts
@@ -38,7 +38,7 @@ import { CollaborativeAssesmentService } from 'src/app/review/assessment/collabo
                     >
                         @if (!isMaturityRejection()) {
                             <button
-                                class="xm-ok-button"
+                                class="btn btn-success"
                                 [disabled]="!isOwnerOrAdmin() || !valid"
                                 (click)="createExamRecord()"
                             >
@@ -49,7 +49,7 @@ import { CollaborativeAssesmentService } from 'src/app/review/assessment/collabo
                 </div>
                 <div [hidden]="isReadOnly()" class="ms-2">
                     <button
-                        class="xm-ok-button"
+                        class="btn btn-success"
                         [disabled]="isReadOnly()"
                         (click)="saveAssessment()"
                         ngbPopover="{{ 'i18n_save_changes_popover_info' | translate }}"
@@ -62,7 +62,7 @@ import { CollaborativeAssesmentService } from 'src/app/review/assessment/collabo
                 <div [hidden]="isReadOnly()">
                     @if (isMaturityRejection()) {
                         <button
-                            class="xm-warning-button ms-2"
+                            class="btn btn-outline-danger ms-2"
                             [disabled]="!isOwnerOrAdmin() || !valid"
                             (click)="rejectMaturity()"
                         >
@@ -71,7 +71,7 @@ import { CollaborativeAssesmentService } from 'src/app/review/assessment/collabo
                     }
                 </div>
                 <button
-                    class="xm-cancel-button ms-2"
+                    class="btn btn-secondary ms-2"
                     [routerLink]="getExitState().fragments"
                     [queryParams]="getExitState().params"
                     [hidden]="(!isReadOnly() && isOwnerOrAdmin()) || (!isReadOnly() && !isGraded())"
diff --git a/ui/src/app/review/assessment/maturity/inspection-comments.component.ts b/ui/src/app/review/assessment/maturity/inspection-comments.component.ts
index 0aeae9b18..7f8bbe9a0 100644
--- a/ui/src/app/review/assessment/maturity/inspection-comments.component.ts
+++ b/ui/src/app/review/assessment/maturity/inspection-comments.component.ts
@@ -29,7 +29,7 @@ import { InspectionCommentDialogComponent } from './dialogs/inspection-comment-d
             <div class="col-md-2 ">{{ 'i18n_inspector_comments' | translate }}:</div>
             <div class="col-md-10">
                 @if (addingVisible) {
-                    <button class="xm-ok-button me-2" (click)="addInspectionComment()">
+                    <button class="btn btn-success me-2" (click)="addInspectionComment()">
                         {{ 'i18n_inspection_comment_title' | translate }}
                     </button>
                 }
diff --git a/ui/src/app/review/assessment/maturity/toolbar.component.ts b/ui/src/app/review/assessment/maturity/toolbar.component.ts
index 1fd3cd4af..34337cb40 100644
--- a/ui/src/app/review/assessment/maturity/toolbar.component.ts
+++ b/ui/src/app/review/assessment/maturity/toolbar.component.ts
@@ -31,11 +31,11 @@ import { MaturityService } from './maturity.service';
                 <span [hidden]="isUnderLanguageInspection()">
                     <div class="ms-1">
                         @if (!isReadOnly()) {
-                            <button (click)="saveAssessment()" [disabled]="!valid" class="xm-ok-button">
+                            <button (click)="saveAssessment()" [disabled]="!valid" class="btn btn-success">
                                 {{ 'i18n_save' | translate }}
                             </button>
                         } @else {
-                            <button class="xm-cancel-button" [routerLink]="['/staff/exams', exam.parent?.id, '5']">
+                            <button class="btn btn-secondary" [routerLink]="['/staff/exams', exam.parent?.id, '5']">
                                 {{ 'i18n_close' | translate }}
                             </button>
                         }
@@ -44,7 +44,7 @@ import { MaturityService } from './maturity.service';
                 @if (!isReadOnly() && !isDisabled()) {
                     <div class="ms-1">
                         <button
-                            [ngClass]="getNextState().warn ? 'xm-warning-button' : 'xm-ok-button'"
+                            [ngClass]="getNextState().warn ? 'btn btn-outline-danger' : 'btn btn-success'"
                             (click)="proceed(false)"
                         >
                             {{ getNextState().text | translate }}
@@ -60,8 +60,8 @@ import { MaturityService } from './maturity.service';
                         <button
                             [ngClass]="
                                 getAlternateState(getNextState().alternateState).warn
-                                    ? 'xm-warning-button'
-                                    : 'xm-ok-button'
+                                    ? 'btn btn-outline-danger'
+                                    : 'btn btn-success'
                             "
                             (click)="proceed(true)"
                         >
diff --git a/ui/src/app/review/listing/categories/graded-logged.component.html b/ui/src/app/review/listing/categories/graded-logged.component.html
index 6f91fa6b3..7483b2b37 100644
--- a/ui/src/app/review/listing/categories/graded-logged.component.html
+++ b/ui/src/app/review/listing/categories/graded-logged.component.html
@@ -285,7 +285,7 @@
                 }
             </div>
             @if (!collaborative) {
-                <button class="xm-ok-button" (click)="archiveSelected()">
+                <button class="btn btn-success" (click)="archiveSelected()">
                     {{ 'i18n_archive_selected' | translate }}
                 </button>
             }
diff --git a/ui/src/app/review/listing/categories/graded.component.html b/ui/src/app/review/listing/categories/graded.component.html
index 28bdbb5fd..e5588c16d 100644
--- a/ui/src/app/review/listing/categories/graded.component.html
+++ b/ui/src/app/review/listing/categories/graded.component.html
@@ -38,7 +38,7 @@
         </div>
         @if (view.toggle && view.filtered.length > 0) {
             <div class="my-2">
-                <button class="xm-ok-button" (click)="sendSelectedToRegistry()">
+                <button class="btn btn-success" (click)="sendSelectedToRegistry()">
                     {{ 'i18n_send_results_to_registry' | translate }}
                 </button>
             </div>
diff --git a/ui/src/app/review/listing/categories/in-progress.component.html b/ui/src/app/review/listing/categories/in-progress.component.html
index 674faf17d..2f6a28afc 100644
--- a/ui/src/app/review/listing/categories/in-progress.component.html
+++ b/ui/src/app/review/listing/categories/in-progress.component.html
@@ -37,13 +37,13 @@
         </div>
         <div class="my-2 d-flex justify-content-end">
             <div [hidden]="exam.executionType.type === 'MATURITY' || collaborative" class="me-2">
-                <button class="xm-ok-button" [routerLink]="['/staff/assessments', exam.id, 'speedreview']">
+                <button class="btn btn-success" [routerLink]="['/staff/assessments', exam.id, 'speedreview']">
                     {{ 'i18n_speed_review' | translate }} ({{ view.filtered.length }})
                 </button>
             </div>
             @if (!collaborative) {
                 <button
-                    class="xm-ok-button"
+                    class="btn btn-success"
                     ngbPopover="{{ 'i18n_exam_review_attachment_description' | translate }}"
                     popoverTitle="{{ 'i18n_instructions' | translate }}"
                     triggers="mouseenter:mouseleave"
diff --git a/ui/src/app/review/listing/dialogs/no-shows.component.html b/ui/src/app/review/listing/dialogs/no-shows.component.html
index fbb1e84a7..5354d7418 100644
--- a/ui/src/app/review/listing/dialogs/no-shows.component.html
+++ b/ui/src/app/review/listing/dialogs/no-shows.component.html
@@ -103,7 +103,7 @@
 <div class="modal-footer">
     <!-- Buttons -->
     <div class="justify-content-end">
-        <button class="xm-ok-button mb-2 me-2" (click)="cancel()">
+        <button class="btn btn-success mb-2 me-2" (click)="cancel()">
             {{ 'i18n_button_ok' | translate }}
         </button>
     </div>
diff --git a/ui/src/app/session/dev/dev-login.component.ts b/ui/src/app/session/dev/dev-login.component.ts
index fa0907738..9f4c8d19b 100644
--- a/ui/src/app/session/dev/dev-login.component.ts
+++ b/ui/src/app/session/dev/dev-login.component.ts
@@ -54,7 +54,7 @@ import { PageHeaderComponent } from 'src/app/shared/components/page-header.compo
                     />
                 </div>
 
-                <button type="submit" class="xm-ok-button" id="submit">
+                <button type="submit" class="btn btn-success" id="submit">
                     {{ 'i18n_login' | translate }}
                 </button>
             </form>
diff --git a/ui/src/styles.scss b/ui/src/styles.scss
index 4e64a62c3..f701256c2 100644
--- a/ui/src/styles.scss
+++ b/ui/src/styles.scss
@@ -132,18 +132,7 @@ form .exclude {
         color: $color2;
     }
 }
-.xm-ok-button {
-    @include xm-button(#2c7639, #25622f, white, #25622f);
-}
-.xm-cancel-button {
-    @include xm-button(#808080, #6b6b6b, white, #6b6b6b);
-}
-.xm-neutral-button {
-    @include xm-button(white, #979797, #555555, #7f7f7f);
-}
-.xm-warning-button {
-    @include xm-button(white, red, red, red);
-}
+
 /* Standard bordered box */
 .xm-bordered-area {
     border: 1px solid #c3c3c3;
@@ -212,7 +201,7 @@ form .exclude {
         left: auto;
         z-index: 999;
 }
-.important-clear-focus:focus {
+.important-clear-focus:focus, .btn:focus{
     box-shadow:
         0px 0px 0px 1.5px rgb(255, 255, 255),
         0px 0px 0px 4px rgb(68, 120, 247) !important;