theme updates

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

@@ -29,3 +29,4 @@
                 )
                 .title.mr-2 {{getOptionText(option)}}
                 .description.no-wrap.text-muted {{option.description}}
+                .no-wrap.badge.badge-secondary.text-muted.ml-auto(*ngIf='selectedIndex == i') Enter

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

@@ -7,6 +7,7 @@
     overflow: auto;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+    padding: 0 15px;
 }
 
 .group-header {
@@ -30,4 +31,5 @@
 
 input {
     border-radius: 0;
+    border: none;
 }

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

@@ -3,7 +3,7 @@ div
     h1.tabby-title Tabby
         sup α
 
-    .list-group.list-group-light.mb-4
+    .list-group.mb-4
         a.list-group-item.list-group-item-action.d-flex(
             *ngFor='let button of getButtons(); trackBy: buttonsTrackBy',
             (click)='button.click()',

tabby-core/src/services/homeBase.service.ts

@@ -27,6 +27,10 @@ export class HomeBaseService {
         this.platform.openExternal('https://github.com/Eugeny/tabby')
     }
 
+    openDiscussions (): void {
+        this.platform.openExternal('https://github.com/Eugeny/tabby/discussions')
+    }
+
     reportBug (): void {
         let body = `Version: ${this.appVersion}\n`
         body += `Platform: ${this.hostApp.platform} ${process.arch} ${this.platform.getOSRelease()}\n`

tabby-core/src/theme.scss

@@ -223,7 +223,7 @@ hotkey-input-modal {
 }
 
 .list-group-item {
-    transition: 0.0625s background;
+    // transition: 0.0625s background ease;
 
     i + * {
         margin-left: 10px;
@@ -232,7 +232,7 @@ hotkey-input-modal {
 
 .list-group.list-group-flush .list-group-item {
     background: transparent;
-    border-color: rgba(0, 0, 0, 0.2);
+    border: none;
 
     &:not(:last-child) {
         border-bottom: none;
@@ -247,11 +247,16 @@ hotkey-input-modal {
 
 .list-group-light {
     .list-group-item {
-        border: none;
+        border: none !important;
+        outline: none !important;
+        background: transparent;
+        border-radius: $border-radius;
+        margin: 0 !important;
 
         &.list-group-item-action {
             &:hover, &.active {
-                background: $list-group-hover-bg;
+                background: $component-active-bg;
+                color: $component-active-color;
             }
         }
     }

tabby-core/src/theme.vars.scss

@@ -78,11 +78,11 @@ $link-color: $gray-400;
 $link-hover-color: $white;
 $link-hover-decoration: none;
 
-$component-active-color: $white;
-$component-active-bg: #2f3a42;
+$component-active-color: #4fadff;
+$component-active-bg: #0059a559;
 
 $list-group-bg: $table-bg;
-$list-group-border-color: $table-border-color;
+$list-group-border-color: transparent;
 
 $list-group-item-padding-y: 0.8rem;
 $list-group-item-padding-x: 1rem;
@@ -197,3 +197,5 @@ $progress-height: 3px;
 $alert-bg-level: 9;
 $alert-border-level: 5;
 $alert-color-level: -5;
+
+$text-muted: rgba(255, 255, 255, 0.5);

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

@@ -32,7 +32,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                     i.fas.fa-fw.fa-plus
                     | New profile
 
-            .list-group.list-group-light.mt-3.mb-3
+            .list-group.mt-3.mb-3
                 ng-container(*ngFor='let group of profileGroups')
                     ng-container(*ngIf='isGroupVisible(group)')
                         .list-group-item.list-group-item-action.d-flex.align-items-center(
@@ -118,7 +118,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                     .title Default profile settings
                     .description These apply to all profiles of a given type
 
-            .list-group.list-group-light.mt-3.mb-3
+            .list-group.mt-3.mb-3
                 a.list-group-item.list-group-item-action(
                     (click)='editDefaults(provider)',
                     *ngFor='let provider of profileProviders'

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

@@ -6,45 +6,60 @@
                 | Application
             ng-template(ngbNavContent)
                 .content-box
-                    .tabby-logo.mt-3
-                    h1.tabby-title Tabby
-                        sup α
-
-                    .text-center
-                        .text-muted {{homeBase.appVersion}}
-
-                        .mb-5.mt-3
-                            button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.openGitHub()')
-                                i.fab.fa-github
-                                span GitHub
-
-                            button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.reportBug()')
-                                i.fas.fa-bug
-                                span Report a problem
-
-                            button.btn.btn-secondary.mr-3.mb-2(
-                                (click)='showReleaseNotes()',
-                            )
-                                i.fas.fa-book
-                                span What's new
-
-                            button.btn.btn-secondary.mr-3.mb-2(
-                                *ngIf='!updateAvailable && hostApp.platform !== Platform.Web',
-                                (click)='checkForUpdates()',
-                                [disabled]='checkingForUpdate'
-                            )
-                                i.fas.fa-sync(
-                                    [class.fa-spin]='checkingForUpdate'
+                    .row
+                        .col-12.col-md-6
+                            .logo-area
+                                .tabby-logo.mt-3
+
+                                h1.tabby-title Tabby
+                                    sup α
+                                .text-muted {{homeBase.appVersion}}
+
+                                button.btn.btn-secondary.mt-3.mb-2(
+                                    *ngIf='!updateAvailable && hostApp.platform !== Platform.Web',
+                                    (click)='checkForUpdates()',
+                                    [disabled]='checkingForUpdate'
                                 )
-                                span Check for updates
-
-                            button.btn.btn-info.mr-3.mb-2(
-                                *ngIf='updateAvailable',
-                                (click)='updater.update()',
-                            )
-                                i.fas.fa-sync
-                                span Update
-
+                                    i.fas.fa-sync(
+                                        [class.fa-spin]='checkingForUpdate'
+                                    )
+                                    span Check for updates
+
+                                button.btn.btn-info.mt-3.mb-2(
+                                    *ngIf='updateAvailable',
+                                    (click)='updater.update()',
+                                )
+                                    i.fas.fa-sync
+                                    span Update
+
+                        .col-12.col-md-6
+                            .list-group.list-group-light.mb-5
+                                button.list-group-item.list-group-item-action.link-card((click)='homeBase.reportBug()')
+                                    i.fas.fa-fw.fa-bug
+                                    div
+                                        div Report a problem
+                                        small.text-muted Generate a pre-filled GitHub issue
+
+                                button.list-group-item.list-group-item-action.link-card((click)='homeBase.openDiscussions()')
+                                    i.fas.fa-fw.fa-comments
+                                    div
+                                        div Ask a question
+                                        small.text-muted On GitHub Discussions
+
+                                button.list-group-item.list-group-item-action.link-card((click)='homeBase.openGitHub()')
+                                    i.fab.fa-fw.fa-github
+                                    div
+                                        div GitHub
+                                        small.text-muted Source code
+
+                                button.list-group-item.list-group-item-action.link-card((click)='showReleaseNotes()')
+                                    i.fas.fa-fw.fa-book
+                                    div
+                                        div What's new
+                                        small.text-muted Show release notes
+
+
+                    h3 Application settings
                     .form-line(*ngIf='platform.isShellIntegrationSupported()')
                         .header
                             .title Shell integration

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

@@ -9,6 +9,24 @@
         flex: none;
     }
 
+    .logo-area {
+        .tabby-logo {
+            margin: 0 0 0 -8px;
+            width: 60px;
+            height: 60px;
+        }
+
+        .tabby-title {
+            text-align: left;
+        }
+    }
+
+    .link-card {
+        display: flex;
+        line-height: 1;
+        align-items: center;
+    }
+
     > .content {
         display: flex;
         min-height: 0;

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

@@ -16,7 +16,7 @@
     div(*ngIf='!sftp') Connecting
     div(*ngIf='sftp')
         div(*ngIf='fileList === null') Loading
-        .list-group.list-group-flush(*ngIf='fileList !== null')
+        .list-group.list-group-light(*ngIf='fileList !== null')
             .list-group-item.list-group-item-action.d-flex.align-items-center(
                 *ngIf='path !== "/"',
                 (click)='goUp()'