settings redesign

app/src/entry.ts

@@ -2,6 +2,8 @@ import 'zone.js'
 import 'core-js/es7/reflect'
 import 'core-js/core/delay'
 import 'rxjs'
+
+import './global.scss'
 import './toastr.scss'
 
 // Always land on the start view

app/src/global.scss

@@ -0,0 +1,87 @@
+body {
+    min-height: 100vh;
+    overflow: hidden;
+    background: #1D272D;
+}
+
+.modal-dialog, .modal-backdrop {
+  -webkit-app-region: no-drag;
+}
+
+[ngbradiogroup] input[type="radio"] {
+    display: none;
+}
+
+.form-line {
+    display: flex;
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    align-items: center;
+    padding: 10px 0;
+    margin: 0;
+    min-height: 64px;
+
+    .header {
+        margin-right: auto;
+
+        .title {
+        }
+
+        .description {
+            font-size: 13px;
+            opacity: .5;
+        }
+    }
+
+    &>.form-control, &>.input-group {
+        width: 33%;
+    }
+}
+
+input[type=range] {
+    -webkit-appearance: none;
+    background: transparent;
+    outline: none;
+    padding: 0;
+
+    &:focus {
+        border-color: transparent;
+    }
+
+    @mixin thumb() {
+        -webkit-appearance: none;
+        display: block;
+        height: 12px;
+        width: 12px;
+        background: #aaa;
+        border-radius: 6px;
+        cursor: pointer;
+        margin-top: -4px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
+        transition: 0.25s background;
+
+        &:hover {
+            background: #777;
+        }
+
+        &:active {
+            background: #666;
+        }
+    }
+
+    &::-webkit-slider-thumb { @include thumb(); }
+    &::-moz-range-thumb  { @include thumb(); }
+    &::-ms-thumb  { @include thumb(); }
+    &::thumb { @include thumb(); }
+
+    @mixin track() {
+        height: 4px;
+        background: #111;
+        margin: 3px 0 0;
+        box-sizing: border-box;
+    }
+
+    &::-webkit-slider-runnable-track { @include track(); }
+    &:focus::-webkit-slider-runnable-track { @include track(); }
+    &::-moz-range-track { @include track(); }
+    &::-ms-track { @include track(); }
+}

app/src/preload.scss

@@ -58,17 +58,3 @@
       color: #842fe0;
   }
 }
-
-.modal-dialog, .modal-backdrop {
-  -webkit-app-region: no-drag;
-}
-
-[ngbradiogroup] input[type="radio"] {
-    display: none;
-}
-
-body {
-    min-height: 100vh;
-    overflow: hidden;
-    background: #1D272D;
-}

terminus-core/src/components/checkbox.component.pug

@@ -1,4 +1,4 @@
-.icon((click)='click()', tabindex='0', [class.active]='model', (keyup.space)='click()')
+.icon(tabindex='0', [class.active]='model', (keyup.space)='click()')
     i.fa.fa-square-o.off
     i.fa.fa-check-square.on
-.text((click)='click()') {{text}}
+.text {{text}}

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

@@ -1,4 +1,4 @@
-import { NgZone, Component, Input } from '@angular/core'
+import { NgZone, Component, Input, HostBinding, HostListener } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 
 @Component({
@@ -10,12 +10,12 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
     ]
 })
 export class CheckboxComponent implements ControlValueAccessor {
-    @Input() model: boolean
+    @HostBinding('class.active') @Input() model: boolean
     @Input() disabled: boolean
     @Input() text: string
     private changed = new Array<(val: boolean) => void>()
 
-    click () {
+    @HostListener('click') click () {
         NgZone.assertInAngularZone()
         if (this.disabled) {
             return

terminus-core/src/components/toggle.component.scss

@@ -0,0 +1,70 @@
+:host {
+    flex: none;
+    $toggle-size: 18px;
+    $height: 30px;
+    $padding: 2px;
+    cursor: pointer;
+    display: inline-flex;
+    overflow: visible;
+    border-radius: 3px;
+    line-height: $height;
+    height: $height;
+    transition: 0.25s opacity;
+    align-items: center;
+    overflow: hidden;
+    padding-right: 10px;
+    padding-left: 10px;
+    margin-left: -10px;
+
+    &:focus {
+        background: rgba(255,255,255,.05);
+        border-radius: 5px;
+    }
+
+    &[disabled] {
+        opacity: 0.5;
+    }
+
+    .body {
+        $border-width: 2px;
+        border-radius: 5px;
+        border: $border-width solid rgba(255, 255, 255, .2);
+        padding: $padding;
+        height: $toggle-size + $border-width * 2 + $padding * 2;
+        width: $toggle-size * 2 + $border-width * 2 + $padding * 2;
+
+        position: relative;
+
+        .toggle {
+            position: absolute;
+            border-radius: 2px;
+            width: $toggle-size;
+            height: $toggle-size;
+            background: #475158;
+            top: $padding;
+            left: $padding;
+            transition: 0.25s left;
+            line-height: 19px;
+            text-align: center;
+            font-size: 10px;
+
+            i {
+                opacity: 0;
+                transition: 0.25s opacity;
+            }
+        }
+    }
+
+    &.active .body .toggle {
+        left: $toggle-size + $padding;
+
+        i {
+            color: white;
+            opacity: 1;
+        }
+    }
+
+    &:active {
+        background: rgba(255,255,255,.1);
+    }
+}

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

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { CheckboxComponent } from './checkbox.component'
+
+@Component({
+    selector: 'toggle',
+    template: `
+      <div class="switch">
+        <div class="body">
+          <div class="toggle" [class.bg-primary]='model'>
+            <i class="fa fa-check"></i>
+          </div>
+        </div>
+      </div>
+    `,
+    styles: [require('./toggle.component.scss')],
+    providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true },
+    ]
+})
+export class ToggleComponent extends CheckboxComponent {
+}

terminus-core/src/index.ts

@@ -25,6 +25,7 @@ import { SafeModeModalComponent } from './components/safeModeModal.component'
 import { StartPageComponent } from './components/startPage.component'
 import { TabHeaderComponent } from './components/tabHeader.component'
 import { TitleBarComponent } from './components/titleBar.component'
+import { ToggleComponent } from './components/toggle.component'
 import { WindowControlsComponent } from './components/windowControls.component'
 import { RenameTabModalComponent } from './components/renameTabModal.component'
 
@@ -73,6 +74,7 @@ const PROVIDERS = [
         TabBodyComponent,
         TabHeaderComponent,
         TitleBarComponent,
+        ToggleComponent,
         WindowControlsComponent,
         RenameTabModalComponent,
         SafeModeModalComponent,
@@ -82,7 +84,8 @@ const PROVIDERS = [
         SafeModeModalComponent,
     ],
     exports: [
-        CheckboxComponent
+        CheckboxComponent,
+        ToggleComponent,
     ]
 })
 export default class AppModule {

terminus-core/src/theme.scss

@@ -350,5 +350,9 @@ select.form-control {
 }
 
 checkbox i.on {
-  color: $blue;
+    color: $blue;
+}
+
+toggle.active .body .toggle {
+    background: $blue;
 }

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

@@ -6,199 +6,204 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
             | Application
         ng-template(ngbTabContent)
             h3.mb-3 Application
-            .row
+            .form-line
-                .col.col-lg-6
+                .header
-                    .form-group
+                    .title Theme
-                        label Theme
+                select.form-control(
-                        select.form-control(
+                    [(ngModel)]='config.store.appearance.theme',
-                            '[(ngModel)]'='config.store.appearance.theme',
+                    (ngModelChange)='config.save()',
-                            (ngModelChange)='config.save()',
+                )
-                        )
+                    option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
-                            option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
 
-                    .form-group
+            .form-line
-                        label Show tabs
+                .header
-                        br
+                    .title Tabs location
-                        .btn-group(
+                .btn-group(
-                            '[(ngModel)]'='config.store.appearance.tabsLocation',
+                    [(ngModel)]='config.store.appearance.tabsLocation',
-                            (ngModelChange)='config.save()',
+                    (ngModelChange)='config.save()',
-                            ngbRadioGroup
+                    ngbRadioGroup
-                        )
+                )
-                            label.btn.btn-secondary(ngbButtonLabel)
+                    label.btn.btn-secondary(ngbButtonLabel)
-                                input(
-                                    type='radio',
-                                    ngbButton,
-                                    [value]='"top"'
-                                )
-                                | On the top
-                            label.btn.btn-secondary(ngbButtonLabel)
-                                input(
-                                    type='radio',
-                                    ngbButton,
-                                    [value]='"bottom"'
-                                )
-                                | At the bottom
-
-                    .form-group(*ngIf='hostApp.platform !== Platform.Linux')
-                        label Vibrancy
-                        br
-                        .btn-group(
-                            '[(ngModel)]'='config.store.appearance.vibrancy'
-                            '(ngModelChange)'='config.save(); (hostApp.platform === Platform.Windows && config.requestRestart())'
-                            ngbRadioGroup
-                        )
-                            label.btn.btn-secondary(ngbButtonLabel)
-                                input(
-                                    type='radio',
-                                    ngbButton,
-                                    [value]='true'
-                                )
-                                | Enable
-                            label.btn.btn-secondary(ngbButtonLabel)
-                                input(
-                                    type='radio',
-                                    ngbButton,
-                                    [value]='false'
-                                )
-                                | Disable
-
-                    .form-group(*ngIf='hostApp.platform !== Platform.Linux')
-                        label Opacity
-                        br
                         input(
-                            type='range',
+                            type='radio',
-                            '[(ngModel)]'='config.store.appearance.opacity',
+                            ngbButton,
-                            '(ngModelChange)'='config.save()',
+                            [value]='"top"'
-                            min='0.05',
-                            max='1',
-                            step='0.01'
                         )
-
+                        | On the top
-                .col.col-lg-6
+                    label.btn.btn-secondary(ngbButtonLabel)
-                    .form-group
+                        input(
-                        label Window frame
+                            type='radio',
-                        br
+                            ngbButton,
-                        .btn-group(
+                            [value]='"bottom"'
-                            '[(ngModel)]'='config.store.appearance.frame'
-                            '(ngModelChange)'='config.save(); config.requestRestart()'
-                            ngbRadioGroup
                         )
-                            label.btn.btn-secondary(ngbButtonLabel)
+                        | At the bottom
-                                input(
-                                    type='radio',
-                                    ngbButton,
-                                    [value]='"native"'
-                                )
-                                | Native
-                            label.btn.btn-secondary(ngbButtonLabel)
-                                input(
-                                    type='radio',
-                                    ngbButton,
-                                    [value]='"thin"'
-                                )
-                                | Thin
-                            label.btn.btn-secondary(ngbButtonLabel)
-                                input(
-                                    type='radio',
-                                    ngbButton,
-                                    [value]='"full"'
-                                )
-                                | Full
-                        small.form-text.text-muted Whether a custom window or an OS native window should be used
 
-                    .row
+            .form-line(*ngIf='hostApp.platform !== Platform.Linux')
-                        .col.col-auto
+                .header
-                            .form-group
+                    .title Vibrancy
-                                label Dock the terminal
+                    .description Gives the window a blurred transparent background
-                                br
-                                .btn-group(
-                                    '[(ngModel)]'='config.store.appearance.dock'
-                                    '(ngModelChange)'='config.save(); docking.dock()'
-                                    ngbRadioGroup
-                                )
-                                    label.btn.btn-secondary(ngbButtonLabel)
-                                        input(
-                                            type='radio',
-                                            ngbButton,
-                                            [value]='"off"'
-                                        )
-                                        | Off
-                                    label.btn.btn-secondary(ngbButtonLabel)
-                                        input(
-                                            type='radio',
-                                            ngbButton,
-                                            [value]='"top"'
-                                        )
-                                        | Top
-                                    label.btn.btn-secondary(ngbButtonLabel)
-                                        input(
-                                            type='radio',
-                                            ngbButton,
-                                            [value]='"left"'
-                                        )
-                                        | Left
-                                    label.btn.btn-secondary(ngbButtonLabel)
-                                        input(
-                                            type='radio',
-                                            ngbButton,
-                                            [value]='"right"'
-                                        )
-                                        | Right
-                                    label.btn.btn-secondary(ngbButtonLabel)
-                                        input(
-                                            type='radio',
-                                            ngbButton,
-                                            [value]='"bottom"'
-                                        )
-                                        | Bottom
 
-                            .form-group(*ngIf='config.store.appearance.dock != "off"')
+                .btn-group(
-                                label Display on
+                    [(ngModel)]='config.store.appearance.vibrancy',
-                                br
+                    (ngModelChange)='config.save(); (hostApp.platform === Platform.Windows && config.requestRestart())',
-                                div(
+                    ngbRadioGroup
-                                    [(ngModel)]='config.store.appearance.dockScreen',
+                )
-                                    (ngModelChange)='config.save(); docking.dock()',
+                    label.btn.btn-secondary(ngbButtonLabel)
-                                    ngbRadioGroup
+                        input(
-                                )
+                            type='radio',
-                                    label.btn.btn-secondary(ngbButtonLabel)
+                            ngbButton,
-                                        input(
+                            [value]='true'
-                                            type='radio',
+                        )
-                                            ngbButton,
+                        | Enable
-                                            value='current'
+                    label.btn.btn-secondary(ngbButtonLabel)
-                                        )
+                        input(
-                                        | Current
+                            type='radio',
-                                    label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel)
+                            ngbButton,
-                                        input(
+                            [value]='false'
-                                            type='radio',
+                        )
-                                            ngbButton,
+                        | Disable
-                                            [value]='screen.id'
-                                        )
-                                        | {{screen.name}}
-                        .col.col-auto
-                            .form-group(*ngIf='config.store.appearance.dock != "off"')
-                                label Docked terminal size
-                                br
-                                input(
-                                    type='range',
-                                    '[(ngModel)]'='config.store.appearance.dockFill',
-                                    '(mouseup)'='config.save(); docking.dock()',
-                                    min='0.05',
-                                    max='1',
-                                    step='0.01'
-                                )
 
-                    .form-group
+            .form-line(*ngIf='hostApp.platform !== Platform.Linux')
-                        label Debugging
+                .header
-                        div
+                    .title Window opacity
-                            button.btn.btn-secondary((click)='hostApp.openDevTools()')
+                input(
-                                i.fa.fa-bug
+                    type='range',
-                                span Open DevTools
+                    [(ngModel)]='config.store.appearance.opacity',
+                    (ngModelChange)='config.save()',
+                    min='0.05',
+                    max='1',
+                    step='0.01'
+                )
 
-            .form-group
+            .form-line
-                label Custom CSS
+                .header
+                    .title Window frame
+                    .description Whether a custom window or an OS native window should be used
+
+                .btn-group(
+                    [(ngModel)]='config.store.appearance.frame',
+                    (ngModelChange)='config.save(); config.requestRestart()',
+                    ngbRadioGroup
+                )
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"native"'
+                        )
+                        | Native
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"thin"'
+                        )
+                        | Thin
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"full"'
+                        )
+                        | Full
+
+            .form-line
+                .header
+                    .title Dock the terminal
+                    .description Snaps the window to a side of the screen
+
+                .btn-group(
+                    [(ngModel)]='config.store.appearance.dock',
+                    (ngModelChange)='config.save(); docking.dock()',
+                    ngbRadioGroup
+                )
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"off"'
+                        )
+                        | Off
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"top"'
+                        )
+                        | Top
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"left"'
+                        )
+                        | Left
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"right"'
+                        )
+                        | Right
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"bottom"'
+                        )
+                        | Bottom
+
+            .form-line(*ngIf='config.store.appearance.dock != "off"')
+                .header
+                    .title Display on
+                    .description Snaps the window to a side of the screen
+
+                div(
+                    [(ngModel)]='config.store.appearance.dockScreen',
+                    (ngModelChange)='config.save(); docking.dock()',
+                    ngbRadioGroup
+                )
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            value='current'
+                        )
+                        | Current
+                    label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='screen.id'
+                        )
+                        | {{screen.name}}
+
+            .form-line(*ngIf='config.store.appearance.dock != "off"')
+                .header
+                    .title Docked terminal size
+                input(
+                    type='range',
+                    [(ngModel)]='config.store.appearance.dockFill',
+                    (mouseup)='config.save(); docking.dock()',
+                    min='0.05',
+                    max='1',
+                    step='0.01'
+                )
+
+            .form-line
+                .header
+                    .title Debugging
+
+                button.btn.btn-secondary((click)='hostApp.openDevTools()')
+                    i.fa.fa-bug
+                    span Open DevTools
+
+            .form-line
+                .header
+                    .title Custom CSS
                 textarea.form-control(
                     [(ngModel)]='config.store.appearance.css',
-                    '(ngModelChange)'='config.save()',
+                    (ngModelChange)='config.save()',
                 )
 
     ngb-tab(id='hotkeys')

terminus-terminal/src/components/colorPicker.component.pug

@@ -1,4 +1,4 @@
-template(#content)
+ng-template(#content)
     .preview(
         [style.width]='"100%"',
         [style.background]='model',

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

@@ -1,33 +1,36 @@
 h3.mb-3 Appearance
 .row
     .col-md-6
-        .form-group
+        .form-line
-            label Font
+            .header
-            .row
+                .title Font
-                .col-8
-                    input.form-control(
-                        type='text',
-                        [ngbTypeahead]='fontAutocomplete',
-                        [(ngModel)]='config.store.terminal.font',
-                        (ngModelChange)='config.save()',
-                    )
-                .col-4
-                    input.form-control(
-                        type='number',
-                        [(ngModel)]='config.store.terminal.fontSize',
-                        (ngModelChange)='config.save()',
-                    )
 
-            div
+            .d-flex.w-50
-                checkbox(
+                input.form-control(
-                    text='Enable font ligatures',
+                    type='text',
-                    [(ngModel)]='config.store.terminal.ligatures', 
+                    [ngbTypeahead]='fontAutocomplete',
+                    [(ngModel)]='config.store.terminal.font',
+                    (ngModelChange)='config.save()',
+                )
+                input.form-control(
+                    type='number',
+                    [(ngModel)]='config.store.terminal.fontSize',
                     (ngModelChange)='config.save()',
                 )
 
-        .form-group(*ngIf='!editingColorScheme')
+        .form-line
-            label Color scheme
+            .header
-            .input-group
+                .title Enable font ligatures
+            toggle(
+                [(ngModel)]='config.store.terminal.ligatures', 
+                (ngModelChange)='config.save()',
+            )
+
+        .form-line(*ngIf='!editingColorScheme')
+            .header
+                .title Color scheme
+
+            .input-group.w-50
                 select.form-control(
                     [compareWith]='equalComparator',
                     [(ngModel)]='config.store.terminal.colorScheme',
@@ -53,7 +56,6 @@ h3.mb-3 Appearance
                 .input-group-btn
                     button.btn.btn-secondary((click)='cancelEditing()') Cancel
 
-
         .form-group(*ngIf='editingColorScheme')
             color-picker(
                 '[(model)]'='editingColorScheme.foreground',
@@ -77,9 +79,10 @@ h3.mb-3 Appearance
                 [title]='idx',
             )
 
-        .form-group
+        .form-line
-            label Terminal background
+            .header
-            br
+                .title Terminal background
+
             .btn-group(
                 [(ngModel)]='config.store.terminal.background',
                 (ngModelChange)='config.save()',
@@ -100,59 +103,6 @@ h3.mb-3 Appearance
                     )
                     | From colors
 
-        .d-flex
-            .form-group.mr-3
-                label Cursor shape
-                br
-                .btn-group(
-                    [(ngModel)]='config.store.terminal.cursor',
-                    (ngModelChange)='config.save()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"block"'
-                        )
-                        | █
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"beam"'
-                        )
-                        | |
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"underline"'
-                        )
-                        | ▁
-                    
-            .form-group
-                label Blink cursor
-                br
-                .btn-group(
-                    [(ngModel)]='config.store.terminal.cursorBlink',
-                    (ngModelChange)='config.save()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='false'
-                        )
-                        | Off
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='true'
-                        )
-                        | On    
     .col-md-6
         .form-group
             .appearance-preview(
@@ -240,55 +190,101 @@ h3.mb-3 Appearance
                     span  rm -rf /
                     span([style.background-color]='config.store.terminal.colorScheme.cursor')  
 
+.form-line
+    .header
+        .title Cursor shape
+
+    .btn-group(
+        [(ngModel)]='config.store.terminal.cursor',
+        (ngModelChange)='config.save()',
+        ngbRadioGroup
+    )
+        label.btn.btn-secondary(ngbButtonLabel)
+            input(
+                type='radio',
+                ngbButton,
+                [value]='"block"'
+            )
+            | █
+        label.btn.btn-secondary(ngbButtonLabel)
+            input(
+                type='radio',
+                ngbButton,
+                [value]='"beam"'
+            )
+            | |
+        label.btn.btn-secondary(ngbButtonLabel)
+            input(
+                type='radio',
+                ngbButton,
+                [value]='"underline"'
+            )
+            | ▁
+    
+.form-line
+    .header
+        .title Blink cursor
+
+    toggle(
+        [(ngModel)]='config.store.terminal.cursorBlink',
+        (ngModelChange)='config.save()',
+    )
+
 h3.mt-3.mb-3 Shell
 
-.d-flex
+.form-line
-    .form-group.mr-3
+    .header
-        label Shell
+        .title Shell
-        select.form-control(
+        .description Default shell for new tabs
-            [(ngModel)]='config.store.terminal.shell',
+
-            (ngModelChange)='config.save()',
+    select.form-control(
-        )
+        [(ngModel)]='config.store.terminal.shell',
-            option(
+        (ngModelChange)='config.save()',
-                *ngFor='let shell of shells',
+    )
-                [ngValue]='shell.id'
+        option(
-            ) {{shell.name}}
+            *ngFor='let shell of shells',
+            [ngValue]='shell.id'
+        ) {{shell.name}}
+
+.form-line(*ngIf='config.store.terminal.shell == "custom"')
+    .header
+        .title Custom shell
 
-    .form-group.mr-3(*ngIf='persistenceProviders.length > 0')
-        label Session persistence
-        select.form-control(
-            [(ngModel)]='config.store.terminal.persistence',
-            (ngModelChange)='config.save()',
-        )
-            option([ngValue]='null') Off
-            option(
-                *ngFor='let provider of persistenceProviders',
-                [ngValue]='provider.id'
-            ) {{provider.displayName}}
-                    
-    .form-group
-        label Working directory
-        input.form-control(
-            type='text',
-            placeholder='Home directory',
-            [(ngModel)]='config.store.terminal.workingDirectory',
-            (ngModelChange)='config.save()',
-        )
-            
-.form-group(*ngIf='config.store.terminal.shell == "custom"')
-    label Custom shell
     input.form-control(
         type='text',
         [(ngModel)]='config.store.terminal.customShell',
         (ngModelChange)='config.save()',
     )
-            
+
+.form-line(*ngIf='persistenceProviders.length > 0')
+    .header
+        .title Session persistence
+        .description Restores tabs when Terminus is restarted
+    select.form-control(
+        [(ngModel)]='config.store.terminal.persistence',
+        (ngModelChange)='config.save()',
+    )
+        option([ngValue]='null') Off
+        option(
+            *ngFor='let provider of persistenceProviders',
+            [ngValue]='provider.id'
+        ) {{provider.displayName}}
+
+.form-line
+    .header
+        .title Working directory
+    input.form-control(
+        type='text',
+        placeholder='Home directory',
+        [(ngModel)]='config.store.terminal.workingDirectory',
+        (ngModelChange)='config.save()',
+    )            
 
 h3.mt-3.mb-3 Behaviour
 
-.form-group
+.form-line
-    label Terminal bell
+    .header
-    br
+        .title Terminal bell
     .btn-group(
         [(ngModel)]='config.store.terminal.bell',
         (ngModelChange)='config.save()',
@@ -315,10 +311,10 @@ h3.mt-3.mb-3 Behaviour
                 [value]='"audible"'
             )
             | Audible
-    
+
-.form-group
+.form-line
-    label Right click
+    .header
-    br
+        .title Right click
     .btn-group(
         [(ngModel)]='config.store.terminal.rightClick',
         (ngModelChange)='config.save()',
@@ -339,28 +335,37 @@ h3.mt-3.mb-3 Behaviour
             )
             | Paste
             
+.form-line
+    .header
+        .title Auto-open a terminal on app start
             
-.form-group
+    toggle(
-    checkbox(
         [(ngModel)]='config.store.terminal.autoOpen',
         (ngModelChange)='config.save()',
-        text='Auto-open a terminal on app start',
     )
-    
+
-    checkbox(
+.form-line
+    .header
+        .title Bracketed paste (requires shell support)
+        .description Prevents accidental execution of pasted commands
+    toggle(
         [(ngModel)]='config.store.terminal.bracketedPaste',
         (ngModelChange)='config.save()',
-        text='Bracketed paste (requires shell support)',
     )
-    
+
-    checkbox(
+.form-line
+    .header
+        .title Copy on select
+    toggle(
         [(ngModel)]='config.store.terminal.copyOnSelect',
         (ngModelChange)='config.save()',
-        text='Copy on select',
     )
     
-    checkbox(
+.form-line
+    .header
+        .title Use Alt key as the Meta key
+        .description Lets the shell handle Meta key instead of OS
+    toggle(
         [(ngModel)]='config.store.terminal.altIsMeta',
         (ngModelChange)='config.save()',
-        text='Use Alt key as the Meta key',
     )