Bootstrap v5 upgrade

package.json

@@ -24,13 +24,14 @@
     "@angular/platform-browser-dynamic": "~13.2.3",
     "@angular/router": "~13.2.3",
     "@egjs/hammerjs": "^2.0.17",
+    "@fontsource/lato": "^4.5.2",
     "@ng-bootstrap/ng-bootstrap": "12.0.0",
     "@ngrx/entity": "^13.0.2",
     "@ngrx/store": "^13.0.2",
     "@popperjs/core": "^2.11.2",
     "@types/d3": "^7.1.0",
     "@types/lz-string": "^1.3.34",
-    "bootstrap": "4.6.1",
+    "bootstrap": "5.1.3",
     "bootstrap-icons": "^1.7.2",
     "d3": "^7.3.0",
     "highlight.js": "^11.4.0",

src/app/app.effects.spec.ts

@@ -1,25 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { provideMockActions } from '@ngrx/effects/testing';
-import { Observable } from 'rxjs';
-
-import { AppEffects } from './app.effects';
-
-describe('AppEffects', () => {
-  let actions$: Observable<any>;
-  let effects: AppEffects;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        AppEffects,
-        provideMockActions(() => actions$)
-      ]
-    });
-
-    effects = TestBed.inject(AppEffects);
-  });
-
-  it('should be created', () => {
-    expect(effects).toBeTruthy();
-  });
-});

src/app/app.effects.ts

@@ -1,13 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Actions, createEffect } from '@ngrx/effects';
-
-
-
-@Injectable()
-export class AppEffects {
-
-
-
-  constructor(private actions$: Actions) {}
-
-}

src/app/components/overview/overview.component.html

@@ -7,13 +7,13 @@
 
         <div class="col-md-8 participants">
             <h2>Ring participants
-                <div class="btn-group btn-small small btn-group-toggle" ngbRadioGroup name="names"
+                <div class="btn-group btn-small small" ngbRadioGroup name="names"
                     [(ngModel)]="settings.viewMode" (ngModelChange)="viewChange($event)">
                     <label ngbButtonLabel class="btn-primary btn-sm">
-                        <input ngbButton type="radio" value="node"> Nodename
+                        <input ngbButton type="radio" value="node" class="btn-check"> Nodename
                     </label>
                     <label ngbButtonLabel class="btn-primary btn-sm">
-                        <input ngbButton type="radio" value="tg"> TG username
+                        <input ngbButton type="radio" value="tg" class="btn-check"> TG username
                     </label>
                 </div>
             </h2>

src/app/components/settings/settings.component.html

@@ -2,19 +2,19 @@
     <div class="row">
         <div class="col-md-12 col-lg-4">
             <form [formGroup]="ringForm" (submit)="saveRingSettings()">
-                <div class="form-group row">
+                <div class="row mb-3">
                     <label for="ringName" class="col-sm-2 col-form-label">Ringname</label>
-                    <div class="col-sm-10 input-group">
+                    <div class="col-sm-10">
+                        <div class="input-group">
                         <input type="text" class="form-control" formControlName="name" id="ringName"
                             placeholder="Ring Name" name="ringName">
-                        <div class="input-group-append">
+                        <button (click)="parseCapacityName()" class="btn btn-secondary" type="button"
-                            <button (click)="parseCapacityName()" class="btn btn-secondary" type="button"
+                            id="parseCapacityBtn">Parse capacity</button>
-                                id="parseCapacityBtn">Parse capacity</button>
                         </div>
                     </div>
                 </div>
 
-                <div class="form-group row">
+                <div class="row mb-3">
                     <label for="ringSize" class="col-sm-2 col-form-label">Ring size</label>
                     <div class="col-sm-10">
                         <input type="number" class="form-control" id="ringSize" placeholder="Ring size"
@@ -22,7 +22,7 @@
                     </div>
                 </div>
 
-                <div class="form-group">
+                <div class="mb-3">
                     <label for="pubkeys">Import groupnodes from 🧀 CheeseRobot ₿ <small>(or use <a
                                 href="https://t.me/ringtools_bot" target="_blank">@ringtools_bot</a> command
                             <code>/ringurl</code>)</small></label>
@@ -32,16 +32,13 @@
                         type="button">Import Groupnodes</button>
                 </div>
 
-                <div class="form-check">
+                <div class="form-check form-switch">
-                    <div class="custom-control custom-switch">
 
-                        <input class="custom-control-input" type="checkbox" value="" id="showSrRofLogo"
+                    <input class="form-check-input" type="checkbox" value="" id="showSrRofLogo" [(ngModel)]="showLogo"
-                            [(ngModel)]="showLogo" (ngModelChange)="updateShowLogo($event)"
+                        (ngModelChange)="updateShowLogo($event)" [ngModelOptions]="{standalone: true}">
-                            [ngModelOptions]="{standalone: true}">
+                    <label class="form-check-label" for="showSrRofLogo">
-                        <label class="custom-control-label" for="showSrRofLogo">
+                        Show SR RoF logo
-                            Show SR RoF logo
+                    </label>
-                        </label>
-                    </div>
                 </div>
             </form>
         </div>
@@ -89,17 +86,13 @@
                             </th>
 
                             <th scope="row" class="no-padding" colspan="1">
-                                <div class="form-check">
+                                <input class="form-control form-control-sm" type="text" id="pubkey"
-                                    <input class="form-check-input position-static" type="text" id="pubkey"
+                                    formControlName="pubKey" name="pubKey" placeholder="Public Key">
-                                        formControlName="pubKey" name="pubKey" placeholder="Public Key">
-                                </div>
                             </th>
                             <td>{{ tempNodename }}</td>
                             <td class="no-padding">
-                                <div class="form-check">
+                                <input class="form-control form-control-sm" type="text" id="TG username"
-                                    <input class="form-check-input position-static" type="text" id="TG username"
+                                    formControlName="tgUsername" name="tgUsername" placeholder="TG username">
-                                        formControlName="tgUsername" name="tgUsername" placeholder="TG username">
-                                </div>
                             </td>
                             <td><button class="btn btn-primary btn-small btn-sm" id="addNodeOwnerBtn">Add</button>
                             </td>
@@ -107,7 +100,8 @@
                     </tbody>
                 </table>
             </form>
-            <button (click)="saveRingSettings()" class="btn btn-primary mb-2" name="saveRingSettings" id="saveRingSettings">Save Ring Settings</button>
+            <button (click)="saveRingSettings()" class="btn btn-primary mb-2" name="saveRingSettings"
+                id="saveRingSettings">Save Ring Settings</button>
             <p *ngIf="shareUrl"><small>copied to clipboard <a [href]="shareUrl">link</a></small></p>
             <h3>Saved Rings</h3>
             <ul class="list-group small">
@@ -116,10 +110,12 @@
                     <span [innerHTML]="emojiPrefix(item)"></span>
                     <div class="btn-group btn-small small btn-group-toggle" ngbRadioGroup>
                         <label ngbButtonLabel class="btn-success btn-sm">
-                            <input ngbButton type="radio" value="node" (click)="loadSettings(item)"> Load
+                            <input ngbButton type="radio" value="node" (click)="loadSettings(item)" class="btn-check">
+                            Load
                         </label>
                         <label ngbButtonLabel class="btn-danger btn-sm">
-                            <input ngbButton type="radio" value="tg" (click)="removeSettings(item)"> Remove
+                            <input ngbButton type="radio" value="tg" (click)="removeSettings(item)" class="btn-check">
+                            Remove
                         </label>
                     </div>
                 </li>

src/app/components/visual/visual.component.html

@@ -5,10 +5,10 @@
                 <div class="btn-group btn-small small btn-group-toggle" ngbRadioGroup name="names"
                     [(ngModel)]="settings.viewMode" (ngModelChange)="viewChange($event)">
                     <label ngbButtonLabel class="btn-primary btn-sm">
-                        <input ngbButton type="radio" value="node"> Nodename
+                        <input ngbButton type="radio" value="node"  class="btn-check"> Nodename
                     </label>
                     <label ngbButtonLabel class="btn-primary btn-sm">
-                        <input ngbButton type="radio" value="tg"> TG username
+                        <input ngbButton type="radio" value="tg"  class="btn-check"> TG username
                     </label>
                 </div>
             </h3>

src/app/partials/edit-ring-order/edit-ring-order.component.html

@@ -11,5 +11,5 @@
     </li>
 </ul>
 <span *ngIf="isDirty">
-<span class="badge badge-warning"><i class="bi bi-exclamation-triangle"></i> Unsaved changes, click "Persist channel order" to save.</span>
+<span class="badge bg-warning"><i class="bi bi-exclamation-triangle"></i> Unsaved changes, click "Persist channel order" to save.</span>
 </span>

src/app/partials/file-exporter/file-exporter.component.html

@@ -1,8 +1,10 @@
-<button type="button" class="btn btn-warning btn-lg btn-block btn-sm" (click)="persistOrder()">Persist channel
+<div class="d-grid gap-2">
-    order</button>
+    <button type="button" class="btn btn-warning btn-lg btn-sm" (click)="persistOrder()">Persist channel
-<button type="button" class="btn btn-primary btn-lg btn-block btn-sm" (click)="downloadChannelsTxt()">Download
+        order</button>
-    channels.txt</button>
+    <button type="button" class="btn btn-primary btn-lg btn-sm" (click)="downloadChannelsTxt()">Download
-<button type="button" class="btn btn-success btn-lg btn-block btn-sm" (click)="downloadPubKeysTxt()">Download
+        channels.txt</button>
-    pubkeys.txt</button>
+    <button type="button" class="btn btn-success btn-lg btn-sm" (click)="downloadPubKeysTxt()">Download
-<button type="button" class="btn btn-secondary btn-lg btn-block btn-sm" (click)="downloadIgniterPubkeys()">Download
+        pubkeys.txt</button>
-    igniter.sh pubkeys</button>
+    <button type="button" class="btn btn-secondary btn-lg btn-sm" (click)="downloadIgniterPubkeys()">Download
+        igniter.sh pubkeys</button>
+</div>

src/app/partials/reorder-participants/reorder-participants.component.html

@@ -1,18 +1,24 @@
- <form class="form-inline">
+<form class="row">
-    <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Ringleader</label>
+  <div class="col-12">
-    <select class="form-control"  [(ngModel)]="selectedIgniter" name="selectedIgniter">
+  <div class="form-floating">
-      <option [value]="undefined">Select</option>
-      <ng-container  *ngFor="let s of nodeOwners">
-      <option [ngValue]="s">
-        <ng-template [ngIf]="(settings$ | async)?.viewMode === 'tg'" [ngIfElse]="elseBlock">
-          {{ s.first_name }}
-        </ng-template>
-        <ng-template #elseBlock>
-          {{ s.nodename }}
-        </ng-template>
-      </option>
-    </ng-container>
-    </select>
-    <button type="submit" class="btn btn-primary my-1" (click)="reorderIgniter()">Reorder</button>
 
-  </form>
+    <select class="form-select" [(ngModel)]="selectedIgniter" name="selectedIgniter" id="floatingSelect">
+      <option [value]="undefined">Select</option>
+      <ng-container *ngFor="let s of nodeOwners">
+        <option [ngValue]="s">
+          <ng-template [ngIf]="(settings$ | async)?.viewMode === 'tg'" [ngIfElse]="elseBlock">
+            {{ s.first_name }}
+          </ng-template>
+          <ng-template #elseBlock>
+            {{ s.nodename }}
+          </ng-template>
+        </option>
+      </ng-container>
+    </select>
+    <label for="floatingSelect">Ringleader</label>
+  </div>
+</div>
+  <div class="col-12">
+    <button type="submit" class="btn btn-primary my-1" (click)="reorderIgniter()">Reorder</button>
+  </div>
+</form>

src/app/shared/notification/toast/toast.component.ts

@@ -6,9 +6,17 @@ import { ToastService } from './toast.service';
   selector: 'app-toast',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss'],
+//  host: {'class': 'toast-container position-fixed top-0 end-0 p-3', 'style': 'z-index: 1200'}
 })
 export class ToastComponent {
-  @HostBinding('class.ngb-toasts')
+  @HostBinding('class.toast-container')
+  @HostBinding('class.position-fixed')
+  @HostBinding('class.top-0')
+  @HostBinding('class.end-0')
+  @HostBinding('class.p-3')
+  @HostBinding('style.z-index')
+  zIndex = 1200;
+
   readonly ngbToasts = true;
 
   constructor(public toastService: ToastService) {}

src/style/bootswatch.scss

@@ -1,14 +1,12 @@
-// Darkly 4.6.0
+// Darkly 5.1.3
 // Bootswatch
 
 
-// Variables ===================================================================
+// Variables
 
-$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
+@import "@fontsource/lato";
-@if $web-font-path {
+
-  @import url($web-font-path);
+// Typography
-}
-// Typography ==================================================================
 
 .blockquote {
   &-footer {
@@ -16,164 +14,17 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0
   }
 }
 
-// Tables ======================================================================
+// Forms
-
-.table {
-  &-primary {
-    &,
-    > th,
-    > td {
-      background-color: $primary;
-    }
-  }
-
-  &-secondary {
-    &,
-    > th,
-    > td {
-      background-color: $secondary;
-    }
-  }
-
-  &-light {
-    &,
-    > th,
-    > td {
-      background-color: $light;
-    }
-  }
-
-  &-dark {
-    &,
-    > th,
-    > td {
-      background-color: $dark;
-    }
-  }
-
-  &-success {
-    &,
-    > th,
-    > td {
-      background-color: $success;
-    }
-  }
-
-  &-info {
-    &,
-    > th,
-    > td {
-      background-color: $info;
-    }
-  }
-
-  &-danger {
-    &,
-    > th,
-    > td {
-      background-color: $danger;
-    }
-  }
-
-  &-warning {
-    &,
-    > th,
-    > td {
-      background-color: $warning;
-    }
-  }
-
-  &-active {
-    &,
-    > th,
-    > td {
-      background-color: $table-active-bg;
-    }
-  }
-
-  &-hover {
-    .table-primary:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($primary, 5%);
-      }
-    }
-
-    .table-secondary:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($secondary, 5%);
-      }
-    }
-
-    .table-light:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($light, 5%);
-      }
-    }
-
-    .table-dark:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($dark, 5%);
-      }
-    }
-
-    .table-success:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($success, 5%);
-      }
-    }
-
-    .table-info:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($info, 5%);
-      }
-    }
-
-    .table-danger:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($danger, 5%);
-      }
-    }
-
-    .table-warning:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($warning, 5%);
-      }
-    }
-
-    .table-active:hover {
-      &,
-      > th,
-      > td {
-        background-color: $table-active-bg;
-      }
-    }
-
-  }
-}
-
-// Forms =======================================================================
 
 .input-group-addon {
   color: $white;
 }
 
-// Navs ========================================================================
+.form-floating > label {
+  color: $gray-700;
+}
+
+// Navs
 
 .nav-tabs,
 .nav-pills {
@@ -198,20 +49,11 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0
   }
 }
 
-// Indicators ==================================================================
+// Indicators
-
-.close {
-  opacity: .4;
-
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-}
 
 .alert {
-  border: none;
   color: $white;
+  border: none;
 
   a,
   .alert-link {
@@ -228,20 +70,4 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0
       }
     }
   }
-}
-
-// Containers ==================================================================
-
-.list-group-item-action {
-  color: $white;
-
-  &:hover,
-  &:focus {
-    background-color: $gray-700;
-    color: $white;
-  }
-
-  .list-group-item-heading {
-    color: $white;
-  }
 }

src/style/dark.scss

@@ -1,6 +1,8 @@
-// Darkly 4.6.0
+// Darkly 5.1.3
 // Bootswatch
 
+$theme: "darkly" !default;
+
 //
 // Color system
 //
@@ -37,7 +39,7 @@ $danger:        $red !default;
 $light:         $gray-500 !default;
 $dark:          $gray-800 !default;
 
-$yiq-contrasted-threshold:  175 !default;
+$min-contrast-ratio:   1.9 !default;
 
 // Body
 
@@ -52,8 +54,6 @@ $link-color:                $success !default;
 
 // stylelint-disable-next-line value-keyword-case
 $font-family-sans-serif:      Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-size-base:              .9375rem !default;
-$font-size-sm:                $font-size-base * .88 !default;
 $h1-font-size:                3rem !default;
 $h2-font-size:                2.5rem !default;
 $h3-font-size:                2rem !default;
@@ -61,16 +61,29 @@ $text-muted:                  $gray-600 !default;
 
 // Tables
 
-$table-accent-bg:             $gray-800 !default;
 $table-border-color:          $gray-700 !default;
 
+$table-bg-scale:              0 !default;
+$table-color:                 $body-color !default;
+$table-striped-color:         $table-color !default;
+$table-striped-bg-factor:     .08 !default;
+$table-striped-bg:            rgba($white, $table-striped-bg-factor) !default;
+
+$table-striped-order:         odd !default;
+$table-striped-columns-order: even !default;
+
 // Forms
 
+$input-bg:                          $white !default;
+$input-color:                       $gray-800 !default;
 $input-border-color:                $body-bg !default;
 $input-group-addon-color:           $gray-500 !default;
 $input-group-addon-bg:              $gray-700 !default;
-$custom-file-color:                 $gray-500 !default;
+
-$custom-file-border-color:          $body-bg !default;
+$form-check-input-bg:                     $white !default;
+$form-check-input-border:                 none !default;
+
+$form-file-button-color:          $white !default;
 
 // Dropdowns
 
@@ -115,10 +128,6 @@ $pagination-disabled-color:         $white !default;
 $pagination-disabled-bg:            darken($success, 15%) !default;
 $pagination-disabled-border-color:  transparent !default;
 
-// Jumbotron
-
-$jumbotron-bg:                      $gray-800 !default;
-
 // Cards
 
 $card-cap-bg:                       $gray-700 !default;
@@ -146,18 +155,25 @@ $progress-bg:                       $gray-700 !default;
 
 // List group
 
+$list-group-color:                  $body-color !default;
 $list-group-bg:                     $gray-800 !default;
 $list-group-border-color:           $gray-700 !default;
 $list-group-hover-bg:               $gray-700 !default;
+$list-group-action-hover-color:     $list-group-color !default;
+$list-group-action-active-bg:       $gray-900 !default;
 
 // Breadcrumbs
 
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
 $breadcrumb-bg:                     $gray-700 !default;
+$breadcrumb-border-radius:          .25rem !default;
 
 // Close
 
-$close-color:                       $white !default;
+$btn-close-color:            $white !default;
-$close-text-shadow:                 none !default;
+$btn-close-opacity:          .4 !default;
+$btn-close-hover-opacity:    1 !default;
 
 // Code
 

yarn.lock

@@ -1392,6 +1392,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/lato@^4.5.2":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/@fontsource/lato/-/lato-4.5.2.tgz#88b63c8643d91bf96b82050cb0321ea9de406ae3"
+  integrity sha512-4HvkoFOXI31LyZHZWCl84ESQQ0XIcQWqdfBVQEUAYarQsFSqCEby255o3n/sWPJZjWHJf6eJqhvFl5WgGYj1bA==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -2858,10 +2863,10 @@ bootstrap-icons@^1.7.2:
   resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz#773c1625bcbf3e86090ea9da4386c2c6459c5582"
   integrity sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w==
 
-bootstrap@4.6.1:
+bootstrap@5.1.3:
-  version "4.6.1"
+  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.1.tgz#bc25380c2c14192374e8dec07cf01b2742d222a2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
-  integrity sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
 
 brace-expansion@^1.1.7:
   version "1.1.11"