bootstrap 5 WIP

app/src/global.scss

@@ -53,6 +53,10 @@ a, button {
     &>.form-control, &>.input-group {
         width: 33%;
     }
+
+    &>.form-check {
+        display: flex;
+    }
 }
 
 input[type=range] {
@@ -175,19 +179,19 @@ ngb-typeahead-window {
 
 // Windows high contrast mode
 @media screen and (forced-colors: active) {
-    .custom-switch .custom-control-label::before {
+    .form-switch .form-check-label::before {
         background: buttonface;
     }
 
-    .custom-switch .custom-control-label::after {
+    .form-switch .form-check-label::after {
         background: buttontext;
     }
 
-    .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
+    .form-switch .form-check-input:checked ~ .form-check-label::before {
         background: activetext;
     }
 
-    .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
+    .form-switch .form-check-input:checked ~ .form-check-label::after {
         background: canvas;
     }
 

package.json

@@ -54,7 +54,6 @@
     "ngx-sortablejs": "^11.1.0",
     "ngx-toastr": "^14.0.0",
     "node-abi": "^3.25.0",
-    "node-sass": "^7.0.3",
     "npmlog": "6.0.2",
     "npx": "^10.2.2",
     "patch-package": "^6.4.7",
@@ -66,6 +65,7 @@
     "pug-loader": "^2.4.0",
     "pug-static-loader": "2.0.0",
     "raw-loader": "4.0.2",
+    "sass": "^1.58.0",
     "sass-loader": "^12.6.0",
     "shell-quote": "^1.7.4",
     "shelljs": "0.8.5",

tabby-core/package.json

@@ -18,7 +18,7 @@
   "license": "MIT",
   "devDependencies": {
     "@ngx-translate/core": "^14.0.0",
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^5.3.0-alpha.1",
     "deepmerge": "^4.1.1",
     "fuzzy-search": "^3.2.1",
     "js-yaml": "^4.0.0",

tabby-core/src/components/checkbox.component.ts

@@ -6,9 +6,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 @Component({
     selector: 'checkbox',
     template: `
-        <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" [(ngModel)]='model'>
-            <label class="custom-control-label">{{text}}</label>
+        <div class="form-check form-checkbox">
+            <input type="checkbox" class="form-check-input" [(ngModel)]='model'>
+            <label class="form-check-label">{{text}}</label>
         </div>
     `,
     providers: [

tabby-core/src/components/promptModal.component.pug

@@ -14,6 +14,6 @@
             [(ngModel)]='remember',
             text='Remember'
         )
-        button.btn.btn-primary.ml-auto(
+        button.btn.btn-primary.ms-auto(
             (click)='ok()',
         ) OK

tabby-core/src/components/selectorModal.component.pug

@@ -21,14 +21,14 @@
                     [icon]='option.icon',
                     [color]='option.color'
                 )
-                .title.mr-2 {{getOptionText(option)}}
+                .title.me-2 {{getOptionText(option)}}
                 .description.no-wrap.text-muted(
                     *ngIf='option.description !== getOptionText(option)'
                 ) {{option.description}}
-                .ml-auto
-                .no-wrap.badge.badge-secondary.text-muted.ml-2(*ngIf='selectedIndex == i && canEditSelected()')
+                .ms-auto
+                .no-wrap.badge.text-bg-secondary.text-muted.ms-2(*ngIf='selectedIndex == i && canEditSelected()')
                     span Backspace
-                    i.fas.fa-pencil.ml-1
-                .no-wrap.badge.badge-secondary.text-muted.ml-2(*ngIf='selectedIndex == i')
+                    i.fas.fa-pencil.ms-1
+                .no-wrap.badge.text-bg-secondary.text-muted.ms-2(*ngIf='selectedIndex == i')
                     span Enter
-                    i.fas.fa-arrow-right.ml-1
+                    i.fas.fa-arrow-right.ms-1

tabby-core/src/components/splitTabPaneLabel.component.ts

@@ -15,7 +15,7 @@ import { SelfPositioningComponent } from './selfPositioning.component'
         (cdkDragStarted)='onTabDragStart(tab)'
         (cdkDragEnded)='onTabDragEnd()'
     >
-        <i class="fa fa-window-maximize mr-3"></i>
+        <i class="fa fa-window-maximize me-3"></i>
         <label>{{tab.title}}</label>
     </div>
     `,

tabby-core/src/components/startPage.component.pug

@@ -12,7 +12,7 @@ div
             span {{command.label}}
 
 footer.d-flex.align-items-center
-    .btn-group.mr-auto
+    .btn-group.me-auto
         button.btn.btn-dark((click)='homeBase.openGitHub()')
             i.fab.fa-github
             span GitHub

tabby-core/src/components/toggle.component.ts

@@ -6,9 +6,9 @@ import { CheckboxComponent } from './checkbox.component'
 @Component({
     selector: 'toggle',
     template: `
-    <div class="custom-control custom-switch">
-      <input type="checkbox" class="custom-control-input" [(ngModel)]='model'>
-      <label class="custom-control-label"></label>
+    <div class="form-check form-switch">
+      <input type="checkbox" class="form-check-input" [(ngModel)]='model'>
+      <label class="cform-check-label"></label>
     </div>
     `,
     styles: [require('./toggle.component.scss')],

tabby-core/src/components/transfersMenu.component.pug

@@ -1,6 +1,6 @@
 .d-flex.align-items-center
     .dropdown-header(translate) File transfers
-    button.btn.btn-link.ml-auto((click)='removeAll(); $event.stopPropagation()') !{require('../icons/times.svg')}
+    button.btn.btn-link.ms-auto((click)='removeAll(); $event.stopPropagation()') !{require('../icons/times.svg')}
 .transfer(*ngFor='let transfer of transfers', (click)='showTransfer(transfer)')
     .icon(*ngIf='isDownload(transfer)') !{require('../icons/download.svg')}
     .icon(*ngIf='!isDownload(transfer)') !{require('../icons/upload.svg')}

tabby-core/src/components/unlockVaultModal.component.pug

@@ -1,7 +1,7 @@
 .modal-body
     .d-flex.align-items-center.mb-3
         h3.m-0(translate) Vault is locked
-        .ml-auto(ngbDropdown, placement='bottom-right')
+        .ms-auto(ngbDropdown, placement='bottom-right')
             button.btn.btn-link(ngbDropdownToggle, (click)='$event.stopPropagation()')
                 span(
                     *ngIf='rememberFor',
@@ -29,6 +29,5 @@
             (keyup.enter)='ok()',
             (keyup.esc)='cancel()',
         )
-        .input-group-append
-            button.btn.btn-secondary((click)='ok()', *ngIf='passphrase')
-                i.fas.fa-check
+        button.btn.btn-secondary((click)='ok()', *ngIf='passphrase')
+            i.fas.fa-check

tabby-core/src/theme.paper.scss

@@ -19,10 +19,9 @@ $tab-border-radius: 5px;
 $button-hover-bg: rgba(0, 0, 0, .125);
 $button-active-bg: rgba(0, 0, 0, .25);
 
-$theme-colors: (
-    "primary":    $orange,
-    "secondary":  $base0
-);
+
+$primary: #fd7e14;
+$secondary: #495057;
 
 $content-bg: rgba($white, 0.65);
 $content-bg-solid: $white;
@@ -257,8 +256,8 @@ multi-hotkey-input {
     }
 
     .item:has(.duplicate) {
-        background-color: theme-color('danger');
-        border: 1px solid theme-color('danger');
+        background-color: map-get($theme-colors, 'danger');
+        border: 1px solid map-get($theme-colors, 'danger');
     }
 
     .add {
@@ -272,8 +271,8 @@ multi-hotkey-input {
     }
 
     .add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove {
-        &:hover { background: darken(theme-color('danger'), 5%); }
-        &:active { background: darken(theme-color('danger'), 15%); }
+        &:hover { background: darken(map-get($theme-colors, 'danger'), 5%); }
+        &:active { background: darken(map-get($theme-colors, 'danger'), 15%); }
     }
 }
 
@@ -303,7 +302,7 @@ hotkey-input-modal {
     }
 }
 
-.form-group label {
+.mb-3 label {
     margin-bottom: 2px;
 }
 
@@ -370,7 +369,7 @@ toggle {
     }
 
     &.active .body .toggle {
-        background: theme-colors(primary) !important;
+        background: map-get($theme-colors, primary) !important;
     }
 }
 

tabby-core/src/theme.scss

@@ -163,8 +163,8 @@ multi-hotkey-input {
     }
 
     .item:has(.duplicate) {
-        background-color: theme-color('danger');
-        border: 1px solid theme-color('danger');
+        background-color: map-get($theme-colors, 'danger');
+        border: 1px solid map-get($theme-colors, 'danger');
     }
 
     .add {
@@ -178,8 +178,8 @@ multi-hotkey-input {
     }
 
     .add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove {
-        &:hover { background: darken(theme-color('danger'), 5%); }
-        &:active { background: darken(theme-color('danger'), 15%); }
+        &:hover { background: darken(map-get($theme-colors, 'danger'), 5%); }
+        &:active { background: darken(map-get($theme-colors, 'danger'), 15%); }
     }
 }
 
@@ -209,7 +209,7 @@ hotkey-input-modal {
     }
 }
 
-.form-group label {
+.mb-3 label {
     margin-bottom: 2px;
 }
 
@@ -375,9 +375,9 @@ search-panel {
             font-size: 18px;
         }
 
-        @include hover-focus {
-            color: $nav-tabs-link-active-color;
-        }
+        // @include hover-focus {
+        //     color: $nav-tabs-link-active-color;
+        // }
 
         &.disabled {
             color: $nav-link-disabled-color;

tabby-core/src/theme.vars.scss

@@ -175,13 +175,12 @@ $badge-padding-y: 4px;
 $badge-padding-x: 6px;
 
 
-$custom-control-indicator-size: 1.2rem;
-$custom-control-indicator-bg: $body-bg;
-$custom-control-indicator-border-color: lighten($body-bg, 25%);
-$custom-control-indicator-checked-bg: theme-color("primary");
-$custom-control-indicator-checked-color: $body-bg;
-$custom-control-indicator-checked-border-color: transparent;
-$custom-control-indicator-active-bg: rgba(255, 255, 0, 0.5);
+$form-check-input-border: lighten($body-bg, 25%);
+$form-check-input-width: 1.4em;
+$form-switch-width: 2.5em;
+$form-switch-color: lighten($body-bg, 25%);
+$form-switch-focus-color: lighten($body-bg, 40%);
+$form-switch-checked-color: map-get($theme-colors, "primary");
 
 
 $modal-content-bg:               $content-bg-solid;

tabby-core/yarn.lock

@@ -33,10 +33,10 @@ base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-bootstrap@^4.1.3:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.3.tgz#c6a72b355aaf323920be800246a6e4ef30997fe6"
-  integrity sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==
+bootstrap@^5.3.0-alpha.1:
+  version "5.3.0-alpha1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.0-alpha1.tgz#380629c4367893f02f7879a01ea3ae0f94e2e70e"
+  integrity sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==
 
 buffer@^6.0.3:
   version "6.0.3"

tabby-local/src/components/commandLineEditor.component.pug

@@ -1,5 +1,5 @@
 ng-container(*ngIf='!argvMode')
-    .form-group
+    .mb-3
         label(translate) Command line
         .input-group
             .input-group-prepend
@@ -15,7 +15,7 @@ ng-container(*ngIf='!argvMode')
             )
 
 ng-container(*ngIf='argvMode')
-    .form-group
+    .mb-3
         label(translate) Program
         .input-group
             .input-group-prepend
@@ -30,7 +30,7 @@ ng-container(*ngIf='argvMode')
                 [(ngModel)]='_model.command',
             )
 
-    .form-group
+    .mb-3
         label(translate) Arguments
         .input-group(
             *ngFor='let arg of _model.args; index as i; trackBy: trackByIndex',
@@ -45,5 +45,5 @@ ng-container(*ngIf='argvMode')
 
         .mt-2
             button.btn.btn-secondary((click)='_model.args.push("")')
-                i.fas.fa-plus.mr-2
+                i.fas.fa-plus.me-2
                 span(translate) Add

tabby-local/src/components/environmentEditor.component.pug

@@ -10,11 +10,11 @@
 
 .d-flex
     button.btn.btn-secondary((click)='addEnvironmentVar()')
-        i.fas.fa-plus.mr-2
+        i.fas.fa-plus.me-2
         span(translate) Add
 
-    .ml-auto
+    .ms-auto
     .text-muted(translate) Substitutions allowed.
-    .d-flex.ml-1(*ngIf='shouldShowExample()')
+    .d-flex.ms-1(*ngIf='shouldShowExample()')
         .text-muted(translate) Example:
-        a.ml-1((click)='addExample()', href='#') extend PATH
+        a.ms-1((click)='addExample()', href='#') extend PATH

tabby-local/src/components/localProfileSettings.component.pug

@@ -7,7 +7,7 @@ command-line-editor([model]='profile.options')
         [(ngModel)]='profile.options.runAsAdministrator',
     )
 
-.form-group
+.mb-3
     label(translate) Working directory
 
     .input-group
@@ -20,7 +20,7 @@ command-line-editor([model]='profile.options')
             button.btn.btn-secondary((click)='pickWorkingDirectory()')
                 i.fas.fa-folder-open
 
-.form-group
+.mb-3
     label(translate) Environment
     environment-editor(
         type='text',

tabby-local/src/components/shellSettingsTab.component.pug

@@ -11,7 +11,7 @@ h3.mb-3(translate) Shell
     )
 
 .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.useConPTY && isConPTYAvailable && !isConPTYStable')
-    .mr-auto(translate) Windows 10 build 18309 or above is recommended for ConPTY
+    .me-auto(translate) Windows 10 build 18309 or above is recommended for ConPTY
 
 .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.profile.startsWith("WSL") && (!config.store.terminal.useConPTY)')
-    .mr-auto(translate) WSL terminal only supports TrueColor with ConPTY
+    .me-auto(translate) WSL terminal only supports TrueColor with ConPTY

tabby-plugin-manager/src/components/pluginsSettingsTab.component.pug

@@ -1,6 +1,6 @@
 .d-flex.mb-3
     h3(translate) Plugins
-    button.btn.btn-secondary.btn-sm.ml-auto((click)='openPluginsFolder()')
+    button.btn.btn-secondary.btn-sm.ms-auto((click)='openPluginsFolder()')
         i.fas.fa-folder
         span(translate) Plugins folder
 
@@ -43,14 +43,14 @@ ul.nav-tabs.mb-2(ngbNav, #nav='ngbNav')
                                     )
                                         i.fas.fa-fw.fa-cloud-download(*ngIf='busy.get(plugin.name) != BusyState.Installing')
                                         i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy.get(plugin.name) == BusyState.Installing')
-                                        span.ml-2(translate) Get
+                                        span.ms-2(translate) Get
 
                                     button.btn.btn-secondary.btn-block.justify-content-center(
                                         *ngIf='plugin.homepage',
                                         (click)='showPluginHomepage(plugin)'
                                     )
                                         i.fas.fa-fw.fa-external-link-alt
-                                        span.ml-2(translate) Homepage
+                                        span.ms-2(translate) Homepage
 
                                 .col-8
                                     ng-container(*ngTemplateOutlet='pluginInfo; context: { plugin }')
@@ -75,14 +75,14 @@ ul.nav-tabs.mb-2(ngbNav, #nav='ngbNav')
                 ng-container(*ngFor='let plugin of installedPlugins$')
                     ngb-panel
                         ng-template(ngbPanelTitle)
-                            .text-left.mr-auto
+                            .text-left.me-auto
                                 div
                                     strong {{plugin.name}}
-                                    small.text-muted.ml-2(*ngIf='plugin.isBuiltin', translate) Built-in
-                                    small.text-warning.ml-2(*ngIf='!isPluginEnabled(plugin)', translate) Disabled
+                                    small.text-muted.ms-2(*ngIf='plugin.isBuiltin', translate) Built-in
+                                    small.text-warning.ms-2(*ngIf='!isPluginEnabled(plugin)', translate) Disabled
                                 small.d-block.text-muted {{plugin.description}}
 
-                            button.btn.btn-primary.ml-2(
+                            button.btn.btn-primary.ms-2(
                                 *ngIf='knownUpgrades[plugin.name]',
                                 (click)='upgradePlugin(plugin)',
                                 [disabled]='busy.has(plugin.name)'
@@ -133,11 +133,11 @@ ng-template(#pluginInfo, let-plugin='plugin')
         .col-4
             strong(translate) Author
         .col-8
-            .badge.badge-success(*ngIf='plugin.isOfficial')
+            .badge.text-bg-success(*ngIf='plugin.isOfficial')
                 i.fas.fa-check
-                span.ml-1(translate) Official
+                span.ms-1(translate) Official
             a.btn.btn-link.px-0.w-auto((click)='showPluginInfo(plugin)', *ngIf='!plugin.isOfficial')
                 span {{plugin.author}}
-                i.fas.fa-fw.fa-external-link-alt.ml-2
+                i.fas.fa-fw.fa-external-link-alt.ms-2
 
 .mb-4([ngbNavOutlet]='nav')

tabby-serial/src/components/serialProfileSettings.component.pug

@@ -4,7 +4,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
         ng-template(ngbNavContent)
             .row
                 .col-6(ng:if='hostApp.platform !== Platform.Web')
-                    .form-group
+                    .mb-3
                         label(translate) Device
                         input.form-control(
                             type='text',
@@ -15,7 +15,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                         )
 
                 .col-6
-                    .form-group
+                    .mb-3
                         label(translate) Baud rate
                         input.form-control(
                             type='number',

tabby-serial/src/components/serialTab.component.pug

@@ -1,11 +1,11 @@
 terminal-toolbar([tab]='this')
-    i.fas.fa-xs.fa-circle.text-success.mr-2(*ngIf='session && session.open')
-    i.fas.fa-xs.fa-circle.text-danger.mr-2(*ngIf='!session || !session.open')
+    i.fas.fa-xs.fa-circle.text-success.me-2(*ngIf='session && session.open')
+    i.fas.fa-xs.fa-circle.text-danger.me-2(*ngIf='!session || !session.open')
     strong {{profile.options.port}} ({{profile.options.baudrate}})
 
-    .mr-auto
+    .me-auto
 
-    button.btn.btn-sm.btn-link.mr-3((click)='changeBaudRate()', *ngIf='session && session.open && hostApp.platform !== Platform.Web')
+    button.btn.btn-sm.btn-link.me-3((click)='changeBaudRate()', *ngIf='session && session.open && hostApp.platform !== Platform.Web')
         span(translate) Change baud rate
 
     button.btn.btn-sm.btn-link((click)='reconnect()', *ngIf='!session || !session.open')

tabby-settings/src/components/configSyncSettingsTab.component.pug

@@ -38,7 +38,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
             ng-container(*ngIf='config.store.configSync.token')
                 .alert.alert-danger(*ngIf='connectionSuccessful === false')
                     i.fas.fa-exclamation-triangle
-                    span.ml-2(translate='Connection failed: {error}', [translateParams]='{error: connectionError}')
+                    span.ms-2(translate='Connection failed: {error}', [translateParams]='{error: connectionError}')
 
             ng-container(*ngIf='connectionSuccessful')
                 .form-line
@@ -47,7 +47,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
 
                 div(*ngIf='configs === null')
                     i.fas.fa-fw.fa-circle-notch.fa-spin
-                    span.ml-2(translate) Loading configs...
+                    span.ms-2(translate) Loading configs...
 
                 ng-container(*ngIf='configs !== null')
                     .list-group-light
@@ -57,39 +57,39 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                         )
                             i.fas.fa-fw.text-success([class.fa-check]='isActiveConfig(cfg)')
                             i.fas.fa-fw.fa-file
-                            .ml-2.d-flex.flex-column.align-items-start
+                            .ms-2.d-flex.flex-column.align-items-start
                                 div {{cfg.name}}
                                 small.text-muted(
                                     translate='Modified on {date}',
                                     [translateParams]='{date: cfg.modified_at|date:"medium"}'
                                 )
-                            .mr-auto
-                            button.btn.btn-link.ml-1(
+                            .me-auto
+                            button.btn.btn-link.ms-1(
                                 (click)='uploadAndSync(cfg)',
                                 [class.hover-reveal]='!isActiveConfig(cfg)'
                             )
                                 i.fas.fa-arrow-up
-                                span.ml-2(*ngIf='isActiveConfig(cfg)', translate) Upload
-                                span.ml-2(*ngIf='!isActiveConfig(cfg)', translate) Replace
-                            button.btn.btn-link.ml-1(
+                                span.ms-2(*ngIf='isActiveConfig(cfg)', translate) Upload
+                                span.ms-2(*ngIf='!isActiveConfig(cfg)', translate) Replace
+                            button.btn.btn-link.ms-1(
                                 (click)='downloadAndSync(cfg)',
                                 [class.hover-reveal]='!isActiveConfig(cfg)'
                             )
                                 i.fas.fa-arrow-down
-                                span.ml-2(translate) Download
-                            button.btn.btn-link.ml-1(
+                                span.ms-2(translate) Download
+                            button.btn.btn-link.ms-1(
                                 (click)='delete(cfg)',
                                 [class.hover-reveal]='!isActiveConfig(cfg)'
                             )
                                 i.fas.fa-trash
-                                span.ml-2(translate) Delete
+                                span.ms-2(translate) Delete
                         a.list-group-item.list-group-item-action.d-flex.align-items-center(
                             href='#',
                             (click)='uploadAsNew()'
                         )
                             i.fas.fa-fw
                             i.fas.fa-fw.fa-cloud-upload-alt
-                            .ml-2(translate) Upload as a new config
+                            .ms-2(translate) Upload as a new config
 
             ng-container(*ngIf='hasMatchingRemoteConfig()')
                 .form-line

tabby-settings/src/components/editProfileModal.component.pug

@@ -10,7 +10,7 @@
 .modal-body
     .row
         .col-12.col-lg-4
-            .form-group(*ngIf='!defaultsMode')
+            .mb-3(*ngIf='!defaultsMode')
                 label(translate) Name
                 input.form-control(
                     type='text',
@@ -18,7 +18,7 @@
                     [(ngModel)]='profile.name',
                 )
 
-            .form-group(*ngIf='!defaultsMode')
+            .mb-3(*ngIf='!defaultsMode')
                 label(translate) Group
                 input.form-control(
                     type='text',
@@ -28,7 +28,7 @@
                     [ngbTypeahead]='groupTypeahead',
                 )
 
-            .form-group(*ngIf='!defaultsMode')
+            .mb-3(*ngIf='!defaultsMode')
                 label(translate) Icon
                 .input-group
                     input.form-control(
@@ -47,7 +47,7 @@
 
                 ng-template(#rt,let-r='result',let-t='term')
                     i([class]='"fa-fw " + r')
-                    ngb-highlight.ml-2([result]='r', [term]='t')
+                    ngb-highlight.ms-2([result]='r', [term]='t')
 
             .form-line
                 .header

tabby-settings/src/components/hotkeySettingsTab.component.pug

@@ -6,13 +6,13 @@ h3.mb-3(translate) Hotkeys
             i.fas.fa-fw.fa-search
     input.form-control(type='search', [placeholder]='"Search hotkeys"|translate', [(ngModel)]='hotkeyFilter')
 
-.form-group.hotkeys-table
+.mb-3.hotkeys-table
     ng-container(*ngFor='let hotkey of hotkeyDescriptions')
         .row.align-items-center(*ngIf='!hotkeyFilter || hotkeyFilterFn(hotkey, hotkeyFilter)')
             .col-8.py-2
                 span {{hotkey.name|translate}}
-                span.ml-2.text-muted ({{hotkey.id}})
-            .col-4.pr-5
+                span.ms-2.text-muted ({{hotkey.id}})
+            .col-4.pe-5
                 multi-hotkey-input(
                     [hotkeys]='getHotkeys(hotkey.id) || []',
                     (hotkeysChange)='setHotkeys(hotkey.id, $event)'

tabby-settings/src/components/profilesSettingsTab.component.pug

@@ -23,12 +23,11 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
 
             .d-flex.mb-3
                 .input-group
-                    .input-group-prepend
-                        .input-group-text
-                            i.fas.fa-fw.fa-search
+                    .input-group-text
+                        i.fas.fa-fw.fa-search
                     input.form-control(type='search', [placeholder]='"Filter"|translate', [(ngModel)]='filter')
 
-                button.btn.btn-primary.flex-shrink-0.ml-3((click)='newProfile()')
+                button.btn.btn-primary.flex-shrink-0.ms-3((click)='newProfile()')
                     i.fas.fa-fw.fa-plus
                     span(translate) New profile
 
@@ -40,20 +39,20 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                         )
                             .fa.fa-fw.fa-chevron-right(*ngIf='group.collapsed')
                             .fa.fa-fw.fa-chevron-down(*ngIf='!group.collapsed')
-                            span.ml-3.mr-auto {{group.name || ("Ungrouped"|translate)}}
-                            button.btn.btn-sm.btn-link.hover-reveal.ml-2(
+                            span.ms-3.me-auto {{group.name || ("Ungrouped"|translate)}}
+                            button.btn.btn-sm.btn-link.hover-reveal.ms-2(
                                 *ngIf='group.editable && group.name',
                                 (click)='$event.stopPropagation(); editGroup(group)'
                             )
                                 i.fas.fa-pencil-alt
-                            button.btn.btn-sm.btn-link.hover-reveal.ml-2(
+                            button.btn.btn-sm.btn-link.hover-reveal.ms-2(
                                 *ngIf='group.editable && group.name',
                                 (click)='$event.stopPropagation(); deleteGroup(group)'
                             )
                                 i.fas.fa-trash-alt
                         ng-container(*ngIf='!group.collapsed')
                             ng-container(*ngFor='let profile of group.profiles')
-                                .list-group-item.pl-5.d-flex.align-items-center(
+                                .list-group-item.ps-5.d-flex.align-items-center(
                                     *ngIf='isProfileVisible(profile)',
                                     [class.list-group-item-action]='!profile.isBuiltin',
                                     (click)='profile.isBuiltin ? null : editProfile(profile)'
@@ -64,23 +63,23 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                                     )
 
                                     .no-wrap {{profile.name}}
-                                    .text-muted.no-wrap.ml-2 {{getDescription(profile)}}
+                                    .text-muted.no-wrap.ms-2 {{getDescription(profile)}}
 
-                                    .mr-auto
+                                    .me-auto
 
-                                    button.btn.btn-link.hover-reveal.ml-1((click)='$event.stopPropagation(); launchProfile(profile)')
+                                    button.btn.btn-link.hover-reveal.ms-1((click)='$event.stopPropagation(); launchProfile(profile)')
                                         i.fas.fa-play
 
-                                    button.btn.btn-link.hover-reveal.ml-1((click)='$event.stopPropagation(); newProfile(profile)')
+                                    button.btn.btn-link.hover-reveal.ms-1((click)='$event.stopPropagation(); newProfile(profile)')
                                         i.fas.fa-copy
 
-                                    button.btn.btn-link.hover-reveal.ml-1(
+                                    button.btn.btn-link.hover-reveal.ms-1(
                                         *ngIf='!profile.isBuiltin',
                                         (click)='$event.stopPropagation(); deleteProfile(profile)'
                                     )
                                         i.fas.fa-trash-alt
 
-                                    .ml-1(class='badge badge-{{getTypeColorClass(profile)}}') {{getTypeLabel(profile)}}
+                                    .ms-1(class='badge text-bg-{{getTypeColorClass(profile)}}') {{getTypeLabel(profile)}}
 
     li(ngbNavItem)
         a(ngbNavLink, translate) Advanced

tabby-settings/src/components/settingsTab.component.pug

@@ -2,7 +2,7 @@
     ul.nav-pills(ngbNav, #nav='ngbNav', [activeId]='activeTab', orientation='vertical')
         li(ngbNavItem='application')
             a(ngbNavLink)
-                i.fas.fa-fw.fa-window-maximize.mr-2
+                i.fas.fa-fw.fa-window-maximize.me-2
                 span(translate) Application
             ng-template(ngbNavContent)
                 .content-box
@@ -71,7 +71,7 @@
                             .title(translate) Language
                             a.description((click)='homeBase.openTranslations()')
                                 span(translate) Help translate Tabby
-                                i.fas.fa-external-link-square-alt.ml-1
+                                i.fas.fa-external-link-square-alt.ms-1
                         select.form-control([(ngModel)]='config.store.language', (ngModelChange)='saveConfiguration(true)')
                             option([ngValue]='null', translate) Automatic
                             option(
@@ -117,7 +117,7 @@
         ng-container(*ngFor='let provider of settingsProviders')
             li(*ngIf='provider.prioritized', [ngbNavItem]='provider.id')
                 a.d-flex.align-items-center(ngbNavLink)
-                    i(class='fas fa-fw mr-2 fa-{{provider.icon}}')
+                    i(class='fas fa-fw me-2 fa-{{provider.icon}}')
                     span {{provider.title|translate}}
                 ng-template(ngbNavContent)
                     settings-tab-body([provider]='provider')
@@ -127,14 +127,14 @@
         ng-container(*ngFor='let provider of settingsProviders')
             li(*ngIf='!provider.prioritized', [ngbNavItem]='provider.id')
                 a.d-flex.align-items-center(ngbNavLink)
-                    i(class='fas fa-fw mr-2 fa-{{provider.icon || "puzzle-piece"}}')
+                    i(class='fas fa-fw me-2 fa-{{provider.icon || "puzzle-piece"}}')
                     span {{provider.title|translate}}
                 ng-template(ngbNavContent)
                     settings-tab-body([provider]='provider')
 
         li(ngbNavItem='config-file')
             a.d-flex.align-items-center(ngbNavLink)
-                i.fas.fa-fw.fa-code.mr-2
+                i.fas.fa-fw.fa-code.me-2
                 span(translate) Config file
             ng-template.test(ngbNavContent)
                 .d-flex.flex-column.w-100.h-100
@@ -152,20 +152,20 @@
                             )
                     .mt-3.d-flex
                         button.btn.btn-primary((click)='saveConfigFile()', *ngIf='isConfigFileValid()')
-                            i.fas.fa-check.mr-2
+                            i.fas.fa-check.me-2
                             span(translate) Save and apply
                         button.btn.btn-primary(disabled, *ngIf='!isConfigFileValid()')
-                            i.fas.fa-exclamation-triangle.mr-2
+                            i.fas.fa-exclamation-triangle.me-2
                             span(translate) Invalid syntax
-                        button.btn.btn-secondary.ml-auto(
+                        button.btn.btn-secondary.ms-auto(
                             (click)='showConfigDefaults = !showConfigDefaults',
                             translate
                         ) Show defaults
-                        button.btn.btn-secondary.ml-3(
+                        button.btn.btn-secondary.ms-3(
                             *ngIf='platform.getConfigPath()',
                             (click)='showConfigFile()'
                         )
-                            i.fas.fa-external-link-square-alt.mr-2
+                            i.fas.fa-external-link-square-alt.me-2
                             span(translate) Show config file
 
     div([ngbNavOutlet]='nav')

tabby-settings/src/components/vaultSettingsTab.component.pug

@@ -8,7 +8,7 @@
 div(*ngIf='vault.isEnabled()')
     .d-flex.align-items-center.mb-3
         h3.m-0(translate) Vault
-        .d-flex.ml-auto(ngbDropdown, *ngIf='vault.isEnabled()')
+        .d-flex.ms-auto(ngbDropdown, *ngIf='vault.isEnabled()')
             button.btn.btn-secondary(ngbDropdownToggle, translate) Options
             div(ngbDropdownMenu)
                 a(ngbDropdownItem, (click)='changePassphrase()')
@@ -24,9 +24,9 @@ div(*ngIf='vault.isEnabled()')
             h3.m-3(translate) Vault is empty
 
         .list-group
-            .list-group-item.d-flex.align-items-center.p-1.pl-3(*ngFor='let secret of vaultContents.secrets')
+            .list-group-item.d-flex.align-items-center.p-1.ps-3(*ngFor='let secret of vaultContents.secrets')
                 i.fas.fa-key
-                .mr-auto {{getSecretLabel(secret)}}
+                .me-auto {{getSecretLabel(secret)}}
 
                 .hover-reveal(ngbDropdown)
                     button.btn.btn-link(ngbDropdownToggle)

tabby-settings/src/components/windowSettingsTab.component.pug

@@ -146,7 +146,7 @@ h3.mt-4(translate) Docking
             )
             span(translate) Bottom
 
-.ml-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
+.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
     .header
         .title(translate) Display on
         .description(translate) Snaps the window to a side of the screen
@@ -171,7 +171,7 @@ h3.mt-4(translate) Docking
             )
             | {{screen.name}}
 
-.ml-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
+.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
     .header
         .title(translate) Dock always on top
         .description(translate) Keep docked terminal always on top
@@ -180,7 +180,7 @@ h3.mt-4(translate) Docking
         (ngModelChange)='saveConfiguration(); docking.dock()',
     )
 
-.ml-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
+.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
     .header
         .title(translate) Docked terminal size
         .description(translate) Window dimension away from the edge
@@ -193,7 +193,7 @@ h3.mt-4(translate) Docking
         step='0.01'
     )
 
-.ml-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
+.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
     .header
         .title(translate) Docked terminal space
         .description(translate) Window dimension along the edge
@@ -206,7 +206,7 @@ h3.mt-4(translate) Docking
         step='0.01'
     )
 
-.ml-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
+.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
     .header
         .title(translate) Hide window on focus loss
         .description(translate) Hides the docked terminal when you click away.

tabby-ssh/src/components/hostKeyPromptModal.component.pug

@@ -6,16 +6,16 @@
         strong(translate) Warning: remote host's key has suddenly changed!
         div(translate) You could be under a man-in-the-middle attack right now, or the host key could have just been changed.
 
-    .form-group(*ngIf='isMismatched')
+    .mb-3(*ngIf='isMismatched')
         .d-flex.align-items-center
             label(translate) Last known host key fingerprint
-            .badge.badge-danger.ml-auto {{ selector.type }}
+            .badge.text-bg-danger.ms-auto {{ selector.type }}
         code {{knownHost.digest}}
 
-    .form-group
+    .mb-3
         .d-flex.align-items-center
             label(translate) Current host key fingerprint
-            .badge.badge-success.ml-auto {{ selector.type }}
+            .badge.text-bg-success.ms-auto {{ selector.type }}
         code {{digest}}
 
 .modal-footer

tabby-ssh/src/components/keyboardInteractiveAuthPanel.component.pug

@@ -1,6 +1,6 @@
 .d-flex
     strong(translate) Keyboard-interactive auth
-    .ml-2 {{prompt.name}}
+    .ms-2 {{prompt.name}}
 
 .prompt-text {{prompt.prompts[step].prompt}}
 
@@ -18,7 +18,7 @@ input.form-control.mt-2(
         *ngIf='step > 0',
         (click)='previous()'
     )
-    .ml-auto
+    .ms-auto
     button.btn.btn-primary(
         (click)='next()'
     )

tabby-ssh/src/components/sftpCreateDirectoryModal.component.pug

@@ -1,6 +1,6 @@
 .modal-body
     label(translate) Name for the new directory
-    .form-group.w-100.mr-2
+    .mb-3.w-100.me-2
         input.form-control(
             type='text',
             [(ngModel)]='directoryName',

tabby-ssh/src/components/sftpPanel.component.pug

@@ -18,11 +18,11 @@
     .breadcrumb-spacer.flex-grow-1.h-100((dblclick)='editPath()')
 
     button.btn.btn-link.btn-sm.d-flex((click)='openCreateDirectoryModal()')
-        i.fas.fa-plus.mr-1
+        i.fas.fa-plus.me-1
         div(translate) Create directory
 
     button.btn.btn-link.btn-sm.d-flex((click)='upload()')
-        i.fas.fa-upload.mr-1
+        i.fas.fa-upload.me-1
         div(translate) Upload
 
     button.btn.btn-link.btn-close((click)='close()') !{require('../../../tabby-core/src/icons/times.svg')}
@@ -32,7 +32,7 @@
         *ngIf='shouldShowCWDTip && !cwdDetectionAvailable',
         (click)='platform.openExternal("https://tabby.sh/go/cwd-detection")'
     )
-        .mr-auto
+        .me-auto
             strong(translate) Working directory detection
             div(translate) Learn how to allow Tabby to detect remote shell's working directory.
         button.close((click)='dismissCWDTip()')
@@ -55,7 +55,7 @@
             )
                 i.fa-fw([class]='getIcon(item)')
                 div {{item.name}}
-                .mr-auto
+                .me-auto
                 .size(*ngIf='!item.isDirectory') {{item.size|filesize}}
                 .date {{item.modified|date:'medium'}}
                 .mode {{getModeString(item)}}

tabby-ssh/src/components/sshPortForwardingConfig.component.pug

@@ -5,12 +5,12 @@
                 strong(*ngIf='fw.type === PortForwardType.Local', translate) Local
                 strong(*ngIf='fw.type === PortForwardType.Remote', translate) Remote
                 strong(*ngIf='fw.type === PortForwardType.Dynamic', translate, translateContext='[Dynamic] port forwarding') id.port-forwarding.dynamic
-                .ml-3 {{fw.host}}:{{fw.port}}
-                .ml-2 →
-                .ml-2(*ngIf='fw.type !== PortForwardType.Dynamic') {{fw.targetAddress}}:{{fw.targetPort}}
-                .ml-2(*ngIf='fw.type === PortForwardType.Dynamic', translate) SOCKS proxy
+                .ms-3 {{fw.host}}:{{fw.port}}
+                .ms-2 →
+                .ms-2(*ngIf='fw.type !== PortForwardType.Dynamic') {{fw.targetAddress}}:{{fw.targetPort}}
+                .ms-2(*ngIf='fw.type === PortForwardType.Dynamic', translate) SOCKS proxy
             div {{fw.description}}
-        button.btn.btn-link.hover-reveal.ml-auto((click)='remove(fw)')
+        button.btn.btn-link.hover-reveal.ms-auto((click)='remove(fw)')
             i.fas.fa-trash-alt
 
 h5(translate) Add a port forward
@@ -40,7 +40,7 @@ h5(translate) Add a port forward
     input.form-control(type='text', placeholder='Description', [(ngModel)]='newForward.description')
 
 .d-flex
-    .btn-group.mr-auto(
+    .btn-group.me-auto(
         [(ngModel)]='newForward.type',
         ngbRadioGroup
     )
@@ -67,5 +67,5 @@ h5(translate) Add a port forward
             span(translate, translateContext='[Dynamic] port forwarding') id.port-forwarding.dynamic
 
     button.btn.btn-primary((click)='addForward()')
-        i.fas.fa-check.mr-2
+        i.fas.fa-check.me-2
         span(translate) Forward port

tabby-ssh/src/components/sshProfileSettings.component.pug

@@ -3,7 +3,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
         a(ngbNavLink, translate) General
         ng-template(ngbNavContent)
             .d-flex.w-100.mt-3
-                .form-group.mr-2(
+                .mb-3.me-2(
                     ngbDropdown
                 )
                     label(translate) Connection
@@ -35,21 +35,21 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                             div(translate) HTTP proxy
                             .text-muted(translate) Using CONNECT method
 
-                .form-group.w-100(*ngIf='connectionMode === "proxyCommand"')
+                .mb-3.w-100(*ngIf='connectionMode === "proxyCommand"')
                     label(translate) Proxy command
                     input.form-control(
                         type='text',
                         [(ngModel)]='profile.options.proxyCommand',
                     )
 
-                .form-group.w-100.mr-2(*ngIf='connectionMode !== "proxyCommand"')
+                .mb-3.w-100.me-2(*ngIf='connectionMode !== "proxyCommand"')
                     label(translate) Host
                     input.form-control(
                         type='text',
                         [(ngModel)]='profile.options.host',
                     )
 
-                .form-group(*ngIf='connectionMode !== "proxyCommand"')
+                .mb-3(*ngIf='connectionMode !== "proxyCommand"')
                     label(translate) Port
                     input.form-control(
                         type='number',
@@ -57,7 +57,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                         [(ngModel)]='profile.options.port',
                     )
 
-            .form-group(*ngIf='connectionMode === "jumpHost"')
+            .mb-3(*ngIf='connectionMode === "jumpHost"')
                 label(translate) Jump host
                 select.form-control([(ngModel)]='profile.options.jumpHost')
                     option([ngValue]='null', translate) Select
@@ -65,14 +65,14 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
 
 
             .d-flex.w-100(*ngIf='connectionMode === "socksProxy"')
-                .form-group.w-100.mr-2
+                .mb-3.w-100.me-2
                     label(translate) SOCKS proxy host
                     input.form-control(
                         type='text',
                         [(ngModel)]='profile.options.socksProxyHost',
                     )
 
-                .form-group
+                .mb-3
                     label(translate) SOCKS proxy port
                     input.form-control(
                         type='number',
@@ -81,14 +81,14 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                     )
 
             .d-flex.w-100(*ngIf='connectionMode === "httpProxy"')
-                .form-group.w-100.mr-2
+                .mb-3.w-100.me-2
                     label(translate) HTTP proxy host
                     input.form-control(
                         type='text',
                         [(ngModel)]='profile.options.httpProxyHost',
                     )
 
-                .form-group
+                .mb-3
                     label(translate) HTTP proxy port
                     input.form-control(
                         type='number',
@@ -96,7 +96,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                         [(ngModel)]='profile.options.httpProxyPort',
                     )
 
-            .form-group
+            .mb-3
                 label(translate) Username
                 input.form-control(
                     type='text',
@@ -104,7 +104,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                     [(ngModel)]='profile.options.user',
                 )
 
-            .form-group
+            .mb-3
                 label(translate) Authentication method
 
                 .btn-group.mt-1.w-100(
@@ -137,19 +137,19 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                     .title(translate) Password
                     .description(*ngIf='!hasSavedPassword', translate) Save a password in the keychain
                     .description(*ngIf='hasSavedPassword', translate) There is a saved password for this connection
-                button.btn.btn-success.ml-4(*ngIf='!hasSavedPassword', (click)='setPassword()')
+                button.btn.btn-success.ms-4(*ngIf='!hasSavedPassword', (click)='setPassword()')
                     i.fas.fa-key
                     span(translate) Set password
-                button.btn.btn-danger.ml-4(*ngIf='hasSavedPassword', (click)='clearSavedPassword()')
+                button.btn.btn-danger.ms-4(*ngIf='hasSavedPassword', (click)='clearSavedPassword()')
                     i.fas.fa-trash-alt
                     span(translate) Forget
 
-            .form-group(*ngIf='!profile.options.auth || profile.options.auth === "publicKey"')
+            .mb-3(*ngIf='!profile.options.auth || profile.options.auth === "publicKey"')
                 label(translate) Private keys
                 .list-group.mb-2
-                    .list-group-item.d-flex.align-items-center.p-1.pl-3(*ngFor='let path of profile.options.privateKeys')
+                    .list-group-item.d-flex.align-items-center.p-1.ps-3(*ngFor='let path of profile.options.privateKeys')
                         i.fas.fa-key
-                        .no-wrap.mr-auto {{path}}
+                        .no-wrap.me-auto {{path}}
                         button.btn.btn-link((click)='removePrivateKey(path)')
                             i.fas.fa-trash
                 button.btn.btn-secondary((click)='addPrivateKey()')

tabby-ssh/src/components/sshTab.component.pug

@@ -1,9 +1,9 @@
 terminal-toolbar([tab]='this')
-    i.fas.fa-xs.fa-circle.text-success.mr-2(*ngIf='session && session.open')
-    i.fas.fa-xs.fa-circle.text-danger.mr-2(*ngIf='!session || !session.open')
-    strong.mr-auto {{profile.options.user}}@{{profile.options.host}}:{{profile.options.port}}
+    i.fas.fa-xs.fa-circle.text-success.me-2(*ngIf='session && session.open')
+    i.fas.fa-xs.fa-circle.text-danger.me-2(*ngIf='!session || !session.open')
+    strong.me-auto {{profile.options.user}}@{{profile.options.host}}:{{profile.options.port}}
 
-    .mr-2(
+    .me-2(
         ngbDropdown,
         container='body',
         *ngIf='session && !session.supportsWorkingDirectory()',
@@ -13,16 +13,16 @@ terminal-toolbar([tab]='this')
             i.far.fa-lightbulb.text-primary
         .bg-dark(ngbDropdownMenu)
             a.d-flex.align-items-center(ngbDropdownItem, (click)='platform.openExternal("https://tabby.sh/go/cwd-detection")')
-                .mr-auto
+                .me-auto
                     strong(translate) Working directory detection
                     div(translate) Learn how to allow Tabby to detect remote shell's working directory.
-                i.fas.fa-arrow-right.ml-4
+                i.fas.fa-arrow-right.ms-4
 
-    button.btn.btn-sm.btn-link.mr-2((click)='reconnect()')
+    button.btn.btn-sm.btn-link.me-2((click)='reconnect()')
         i.fas.fa-redo
         span(translate) Reconnect
 
-    button.btn.btn-sm.btn-link.mr-2((click)='openSFTP()', *ngIf='session && session.open')
+    button.btn.btn-sm.btn-link.me-2((click)='openSFTP()', *ngIf='session && session.open')
         i.far.fa-folder-open
         span SFTP
 

tabby-telnet/src/components/telnetProfileSettings.component.pug

@@ -2,14 +2,14 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
     li(ngbNavItem)
         a(ngbNavLink, translate) General
         ng-template(ngbNavContent)
-            .form-group
+            .mb-3
                 label(translate) Host
                 input.form-control(
                     type='text',
                     [(ngModel)]='profile.options.host',
                 )
 
-            .form-group
+            .mb-3
                 label(translate) Port
                 input.form-control(
                     type='number',

tabby-telnet/src/components/telnetTab.component.pug

@@ -1,8 +1,8 @@
 terminal-toolbar([tab]='this')
-    i.fas.fa-xs.fa-circle.text-success.mr-2(*ngIf='session && session.open')
-    i.fas.fa-xs.fa-circle.text-danger.mr-2(*ngIf='!session || !session.open')
-    strong.mr-auto {{profile.options.host}}:{{profile.options.port}}
+    i.fas.fa-xs.fa-circle.text-success.me-2(*ngIf='session && session.open')
+    i.fas.fa-xs.fa-circle.text-danger.me-2(*ngIf='!session || !session.open')
+    strong.me-auto {{profile.options.host}}:{{profile.options.port}}
 
-    button.btn.btn-sm.btn-link.mr-2((click)='reconnect()')
+    button.btn.btn-sm.btn-link.me-2((click)='reconnect()')
         i.fas.fa-redo
         span(translate) Reconnect

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

tabby-web/src/components/messageBoxModal.component.pug

@@ -3,7 +3,7 @@
     small {{options.detail}}
 
 .modal-footer
-    .ml-auto
+    .ms-auto
     button.btn(
         *ngFor='let button of options.buttons; index as i',
         [autofocus]='i === options.defaultId',