bootstrap 5 WIP

tabby-terminal/src/components/colorSchemeSelector.component.pug

@@ -2,7 +2,7 @@
     .bg-dark.p-3.mb-4(*ngIf='model')
         .d-flex.align-items-center
             span {{model.name}}
-            .mr-auto
+            .me-auto
             a.btn-link((click)='selectScheme(null); $event.preventDefault()', href='#', translate) Clear
 
         color-scheme-preview([scheme]='model')
@@ -24,8 +24,8 @@
                 .d-flex.w-100.align-items-center
                     i.fas.fa-fw([class.fa-check]='model?.name === scheme.name')
 
-                    .ml-2
+                    .ms-2
 
-                    .mr-auto {{scheme.name}}
+                    .me-auto {{scheme.name}}
 
                 color-scheme-preview([scheme]='scheme')

tabby-terminal/src/components/colorSchemeSettingsTab.component.pug

@@ -3,12 +3,12 @@
 
     .d-flex.align-items-center(*ngIf='!editing')
         span {{getCurrentSchemeName()}}
-        .mr-auto
+        .me-auto
         .btn-toolbar
             button.btn.btn-secondary((click)='editScheme()')
                 i.fas.fa-pen
                 span(translate) Edit
-            .mr-1
+            .me-1
             button.btn.btn-danger(
                 (click)='deleteScheme(config.store.terminal.colorScheme)',
                 *ngIf='currentCustomScheme'
@@ -17,11 +17,11 @@
                 span(translate) Delete
 
     div(*ngIf='editing')
-        .form-group
+        .mb-3
             label(translate) Name
             input.form-control(type='text', [(ngModel)]='config.store.terminal.colorScheme.name')
 
-        .form-group
+        .mb-3
             color-picker(
                 [(model)]='config.store.terminal.colorScheme.foreground',
                 (modelChange)='config.save()',
@@ -69,11 +69,11 @@
     color-scheme-preview([scheme]='config.store.terminal.colorScheme')
 
     .btn-toolbar.d-flex.mt-2(*ngIf='editing')
-        .mr-auto
+        .me-auto
         button.btn.btn-primary((click)='saveScheme()')
             i.fas.fa-check
             span(translate) Save
-        .mr-1
+        .me-1
         button.btn.btn-secondary((click)='cancelEditing()')
             i.fas.fa-times
             span(translate) Cancel
@@ -97,11 +97,11 @@
                 .d-flex.w-100.align-items-center
                     i.fas.fa-fw([class.fa-check]='(currentCustomScheme || currentStockScheme) === scheme')
 
-                    .ml-2
+                    .ms-2
 
-                    .mr-auto
+                    .me-auto
                         span {{scheme.name}}
-                        .badge.badge-info.ml-2(*ngIf='customColorSchemes.includes(scheme)', translate) Custom
+                        .badge.text-bg-info.ms-2(*ngIf='customColorSchemes.includes(scheme)', translate) Custom
 
                     div
                         .d-flex

tabby-terminal/src/components/searchPanel.component.pug

@@ -27,7 +27,7 @@ ng-container(*ngIf='state.resultCount > 0')
         [fastHtmlBind]='icons.arrowDown'
     )
 
-.mr-2
+.me-2
 
 button.btn.btn-link(
     (click)='options.caseSensitive = !options.caseSensitive; saveSearchOptions()',
@@ -53,7 +53,7 @@ button.btn.btn-link(
     [fastHtmlBind]='icons.wholeWord'
 )
 
-.mr-2
+.me-2
 
 button.btn.btn-link(
     (click)='close.emit()',

tabby-terminal/src/components/terminalSettingsTab.component.pug

@@ -196,7 +196,7 @@ div.mt-4
                 span(translate) Audible
 
     .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.bell != "audible" && (config.store.terminal.profile || "").startsWith("wsl")')
-        .mr-auto(translate) WSL terminal bell can only be muted via Volume Mixer
+        .me-auto(translate) WSL terminal bell can only be muted via Volume Mixer
         button.btn.btn-secondary((click)='openWSLVolumeMixer()', translate) Show Mixer
 
 .mt-4