CSCEXAM-1172 Add clear focus to buttons and update button styles to u…

…se bootstrap (#1143)
CSCfi · Aug 19, 2024 · 4cc7b9d · 4cc7b9d
1 parent 73eba05
commit 4cc7b9d
Show file tree

Hide file tree

Showing 37 changed files with 95 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -321,29 +321,29 @@
                     <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 {
                                 <span>{{ 'i18n_save_and_pre_publish' | translate }}</span>
                             }
                         </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>
             </div>
         </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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()) {