Merge pull request #398 from fujaba/feat/bootstrap-5.3

Bootstrap 5.3 Native Darkmode
fujaba · Dec 13, 2023 · 66b4da5 · 66b4da5
2 parents 67be7e7 + 09fc114
commit 66b4da5
Show file tree

Hide file tree

Showing 11 changed files with 167 additions and 213 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,14 +23,13 @@
     "@angular/router": "^17.0.6",
     "@angular/service-worker": "^17.0.6",
     "@ctrl/ngx-codemirror": "^7.0.0",
-    "@mean-stream/ngbx": "^0.12.0",
+    "@mean-stream/ngbx": "^0.13.0",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
     "@sentry/angular-ivy": "^7.86.0",
     "angular-gridster2": "^17.0.0",
     "angular-split": "^17.1.1",
-    "bootstrap": "~5.2.3",
-    "bootstrap-darkmode": "^5.0.1",
+    "bootstrap": "~5.3.2",
     "bootstrap-icons": "^1.11.2",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/app/assignment/modules/assignment/solution-table/solution-table.component.html b/frontend/src/app/assignment/modules/assignment/solution-table/solution-table.component.html
@@ -1,4 +1,4 @@
-<div class="p-3 d-flex align-items-center position-sticky bg-light bg-darkmode-dark" style="top: 3.5rem; z-index: 1">
+<div class="p-3 d-flex align-items-center position-sticky bg-body-secondary" style="top: 3.5rem; z-index: 1">
   <div class="position-relative me-sm-2 flex-grow-1">
     <input type="search" class="form-control" id="searchInput" [class.is-invalid]="searchError"
            placeholder="Search for Name, Student ID, E-Mail, GitHub Username, Assignee"
@@ -89,7 +89,12 @@
     <thead>
     <tr>
       <th>
-        <input type="checkbox" [ngModel]="(selected | keyvalue).length === solutions.length" (ngModelChange)="selectAll($event)">
+        <input
+          type="checkbox"
+          class="form-check-input"
+          [ngModel]="(selected | keyvalue).length === solutions.length"
+          (ngModelChange)="selectAll($event)"
+        >
       </th>
       @for (prop of authorProperties;track prop) {
         <th>
@@ -148,7 +153,12 @@
       @for (solution of solutions;track solution._id) {
         <tr>
           <th>
-            <input type="checkbox" [ngModel]="selected[solution._id!]" (ngModelChange)="select(solution._id!, $event)">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              [ngModel]="selected[solution._id!]"
+              (ngModelChange)="select(solution._id!, $event)"
+            >
           </th>
           @for (prop of authorProperties;track prop) {
             <td>{{ solution.author[prop[1]] }}</td>

diff --git a/.../assignment/modules/course/create-course-solutions/create-course-solutions.component.html b/.../assignment/modules/course/create-course-solutions/create-course-solutions.component.html
@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-3 bg-light bg-darkmode-dark">
+  <div class="col-md-3 bg-body-secondary">
     <div class="container" style="position: sticky; top: 0">
       <h1>{{course?.title || 'Loading Title...'}}</h1>
       <app-markdown [markdown]="course?.description"></app-markdown>

diff --git a/frontend/src/app/assignment/modules/shared/statistic-value/statistic-value.component.html b/frontend/src/app/assignment/modules/shared/statistic-value/statistic-value.component.html
@@ -1,4 +1,4 @@
-<div [class]="'text-center ' + (standalone ? 'bg-light bg-darkmode-dark p-3 rounded text-danger mx-2' : '')">
+<div [class]="'text-center ' + (standalone ? 'bg-body-secondary p-3 rounded text-danger mx-2' : '')">
   <h3 class="mb-0">
     {{ value }}
   </h3>

diff --git a/frontend/src/app/components/home/home.component.html b/frontend/src/app/components/home/home.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="m-3 p-5 bg-light bg-darkmode-dark rounded-3">
+  <div class="m-3 p-5 bg-body-secondary rounded-3">
     <img src="/assets/icons/icon-512x512.png" alt="SE Logo" height="100" class="float-end icon"/>
     <h1 class="display-5 fw-bold">
       Welcome to fulib.org

diff --git a/frontend/src/app/editor/four-pane-editor/four-pane-editor.component.html b/frontend/src/app/editor/four-pane-editor/four-pane-editor.component.html
@@ -17,21 +17,21 @@
       >
         Scenario
       </div>
-      <div class="progress-bar bg-light bg-darkmode-dark status-separator" role="progressbar"></div>
+      <div class="progress-bar bg-body-secondary status-separator" role="progressbar"></div>
       <div class="progress-bar status-item" role="progressbar"
            [class.bg-success]="response && toolSuccess(1)"
            [class.bg-danger]="response && !toolSuccess(1)"
       >
         Model Code
       </div>
-      <div class="progress-bar bg-light bg-darkmode-dark status-separator" role="progressbar"></div>
+      <div class="progress-bar bg-body-secondary status-separator" role="progressbar"></div>
       <div class="progress-bar status-item" role="progressbar"
            [class.bg-success]="response && toolSuccess(2)"
            [class.bg-danger]="response && !toolSuccess(2)"
       >
         Test Code
       </div>
-      <div class="progress-bar bg-light bg-darkmode-dark status-separator" role="progressbar"></div>
+      <div class="progress-bar bg-body-secondary status-separator" role="progressbar"></div>
       <div class="progress-bar status-item" role="progressbar"
            [class.bg-success]="response && toolSuccess(3)"
            [class.bg-danger]="response && !toolSuccess(3)"