wip

src/components/configModal.component.pug

@@ -3,7 +3,7 @@
 
 .modal-body
     .header(*ngIf='configService.activeConfig')
-        .d-flex.align-items-center.py-2.px-4
+        .d-flex.align-items-center.py-2
             .me-auto
                 label Active config
                 .title
@@ -16,7 +16,7 @@
             button.btn.btn-semi((click)='deleteConfig()')
                 fa-icon([icon]='_deleteIcon', [fixedWidth]='true')
 
-        .d-flex.align-items-center.py-2.px-4(*ngIf='configService.activeVersion')
+        .d-flex.align-items-center.py-2(*ngIf='configService.activeVersion')
             .me-auto App version:
             div(ngbDropdown)
                 button.btn.btn-semi(ngbDropdownToggle) {{configService.activeVersion.version}}
@@ -28,7 +28,7 @@
                         (click)='selectVersion(version)'
                     ) {{version.version}}
 
-    .px-4.pt-3(*ngIf='configService.configs.length > 1')
+    .pt-3(*ngIf='configService.configs.length > 1')
         h5 Other configs
 
         .list-group.list-group-light
@@ -40,7 +40,7 @@
                     fa-icon([icon]='_configIcon')
                     span Config created at {{config.created_at|date:"medium"}}
 
-    .py-3.px-4
+    .py-3
         button.btn.btn-semi.w-100((click)='createNewConfig()')
             fa-icon([icon]='_addIcon', [fixedWidth]='true')
             span New config

src/components/home.component.pug

@@ -48,9 +48,9 @@
     .section.section-a
         .container
             .row
-                .col-12.col-xl-4
+                .col-12.col-xl-6
                     img.screenshot([src]='screenshots.window')
-                .col-12.col-xl-8
+                .col-12.col-xl-6
                     h1 The important stuff
                     ul
                         li Runs on #[strong Windows, Mac and Linux]
@@ -68,7 +68,7 @@
     .section.section-b
         .container
             .row
-                .col-12.col-xl-8
+                .col-12.col-xl-6
                     h1 Terminal features
                     ul
                         li Multiple #[strong nested panes]
@@ -78,15 +78,15 @@
                         li Optional #[strong quake mode] (terminal docked to a side of the screen)
                         li Optional #[strong global hotkey] to focus/hide the terminal
                         li Bracketed paste
-                .col-12.col-xl-4
+                .col-12.col-xl-6
                     img.screenshot([src]='screenshots.tabs')
 
     .section.section-a
         .container
             .row
-                .col-12.col-xl-4
+                .col-12.col-xl-6
                     img.screenshot([src]='screenshots.ssh')
-                .col-12.col-xl-8
+                .col-12.col-xl-6
                     h1 SSH Client
                     ul
                         li SSH2 client with a connection manager
@@ -101,7 +101,7 @@
     .section.section-b
         .container
             .row
-                .col-12.col-xl-8
+                .col-12.col-xl-6
                     h1 Windows, but nice
                     ul
                         li Support for #[strong different shells] in the same window
@@ -109,15 +109,15 @@
                         li Explorer menu integration
                         li Optional #[strong portable mode]
                         li Current directory detection that works
-                .col-12.col-xl-4
+                .col-12.col-xl-6
                     img.screenshot([src]='screenshots.win')
 
     .section.section-a
         .container
             .row
-                .col-12.col-xl-4
+                .col-12.col-xl-6
                     img.screenshot([src]='screenshots.serial')
-                .col-12.col-xl-8
+                .col-12.col-xl-6
                     h1 Serial Terminal
                     ul
                         li Multiple #[strong connection profiles]

src/components/settingsModal.component.pug

@@ -10,23 +10,31 @@
             )
             label(class='form-check-label') Use custom connection gateway
 
-    .mb-3(*ngIf='customGatewayEnabled')
+        small.text-muted This allows you to securely route connections through your own hosted gateway. See #[a(href='https://github.com/Eugeny/tabby-connection-gateway#readme', target='_blank') tabby-connection-gateway] for setup instructions.
-        .form-floating
-            input.form-control(
-                type='text',
-                [(ngModel)]='user.custom_connection_gateway',
-                placeholder='wss://1.2.3.4'
-            )
-            label Gateway address
 
-    .mb-3(*ngIf='customGatewayEnabled')
+    form
-        .form-floating
+        input.d-none(type='text', name='fakeusername')
-            input.form-control(
+        input.d-none(type='password', name='fakepassword')
-                type='password',
+
-                [(ngModel)]='user.custom_connection_gateway_token',
+        .mb-3(*ngIf='customGatewayEnabled')
-                placeholder='123'
+            .form-floating
-            )
+                input.form-control(
-            label Gateway authentication token
+                    type='text',
+                    [(ngModel)]='user.custom_connection_gateway',
+                    placeholder='wss://1.2.3.4',
+                    autocomplete='off'
+                )
+                label Gateway address
+
+        .mb-3(*ngIf='customGatewayEnabled')
+            .form-floating
+                input.form-control(
+                    type='password',
+                    [(ngModel)]='user.custom_connection_gateway_token',
+                    placeholder='123',
+                    autocomplete='new-password'
+                )
+                label Gateway authentication token
 
     div(*ngIf='appConnector.sockets.length')
         h5 Active connections

src/theme/index.scss

@@ -63,6 +63,10 @@
   box-shadow: $dropdown-box-shadow;
 }
 
+.modal-header, .modal-body {
+  padding: $modal-inner-padding $modal-inner-padding * 2;
+}
+
 .modal-footer {
   background: #00000030;
 }