merge main

SSH UI Quick Fixes (#408 )
* fix: set golbal ssh config to correct path This adds the missing "etc" directory to the path for the global config file. * chore: update auth mode tooltip This just changes the text to be slightly more accurate to the current behavior. * feat: add box to disable waveshell install modal This hooks in to the existing don't show this again code that pops up when creating a modal. * refactor: remove install modal in remote creation There used to be a modal that popped up while installing a remote that informed the user that waveshell gets installed on their remote. Since we have a new modal that pops up at the time of install, the older modal can be removed. * fix: allow user to cancel ssh dial The new ssh code broke dial for invalid urls since the context did not cancel the dial or any associated user input. This change reconnects the context along with the context for installing waveshell. * style: widen the rconndetail modal The rconndetail modal is currently narrower than the xtermjs element which results in awkward scrolling if a line is long. This change makes the width auto so it can size itself as needed. * add a max-width for safety
2026-04-22 15:26:58 -07:00 · 2024-03-07 22:47:44 -08:00 · 2024-03-07 22:37:00 -08:00 · 2024-03-07 22:08:08 -08:00 · 2024-03-07 22:05:19 -08:00 · 2024-03-08 13:54:01 +08:00
45 changed files with 608 additions and 586 deletions
@@ -6,7 +6,7 @@
    },
    "productName": "Wave",
    "description": "An open-source, cross-platform, AI-integrated, modern terminal for seamless workflows.",
-    "version": "0.6.1",
+    "version": "0.7.0",
    "main": "dist/emain.js",
    "license": "Apache-2.0",
    "repository": {
@@ -101,4 +101,4 @@
    "scripts": {
        "postinstall": "electron-builder install-app-deps"
    }
-}
+}
@@ -1,6 +1,7 @@
 /* Copyright 2024, Command Line Inc.
   SPDX-License-Identifier: Apache-2.0 */

+@import url("./term-default.css");
@import url("./term-dark.css");

 :root {
@@ -47,9 +48,9 @@
    --app-bg-color: black;
    --app-accent-color: rgb(88, 193, 66);
    --app-accent-bg-color: rgba(88, 193, 66, 0.2);
-    --app-error-color: rgb(204, 0, 0);
-    --app-warning-color: rgb(255, 165, 0);
-    --app-success-color: rgb(38, 97, 26);
+    --app-error-color: rgb(229, 77, 46);
+    --app-warning-color: rgb(224, 185, 86);
+    --app-success-color: rgb(78, 154, 6);
    --app-text-color: rgb(211, 215, 207);
    --app-text-primary-color: rgb(255, 255, 255);
    --app-text-secondary-color: rgb(195, 200, 194);
@@ -70,9 +71,9 @@

    /* scrollbar colors */
    /* --scrollbar-background-color: rgba(21, 23, 21, 1); */
-    --scrollbar-background-color: #030303;
-    --scrollbar-thumb-color: #333;
-    --scrollbar-thumb-hover-color: rgb(211, 215, 207);
+    --scrollbar-background-color: var(--app-bg-color);
+    --scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+    --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);

    /* code color */
    --pre-bg-color: rgb(0, 0, 0);
@@ -91,44 +92,20 @@

    --form-element-border-color: rgba(241, 246, 243, 0.15);
    --form-element-bg-color: var(--app-bg-color);
-    --form-element-text-color: #ffffff;
-    --form-element-label-color: rgb(195, 200, 194);
-    --form-element-primary-color: rgb(78, 154, 6);
-    --form-element-secondary-color: rgba(255, 255, 255, 0.09);
-    --form-element-error-color: rgb(204, 0, 0);
-    --form-element-icon-color: #fff;
-
-    /* button colors */
-    /* todo: use --form-element-* directly in elements */
-    --button-text-color: var(--form-element-text-color);
-    --button-primary-bg-color: var(--form-element-primary-color);
-    --button-primary-color: var(--form-element-text-color);
-    --button-secondary-bg-color: var(--form-element-secondary-color);
-    --button-warning-bg-color: var(--form-element-error-color);
-
-    /* input colors */
-    /* todo: use --form-element-* directly in elements */
-    --checkbox-text-color: var(--form-element-text-color);
-    --checkbox-bg-color: var(--form-element-primary-color);
-    --checkbox-check-color: var(--form-element-text-color);
-
-    /* dropdown colors */
-    /* todo: use --form-element-* directly in elements */
-    --dropdown-text-color: var(--form-element-text-color);
-    --dropdown-label-color: var(--form-element-label-color);
-    --dropdown-error-color: var(--form-element-error-color);
-    --dropdown-focus-color: var(--form-element-primary-color);
-    --dropdown-bg-color: var(--form-element-bg-color);
-    --dropdown-border-color: var(--form-element-border-color);
+    --form-element-text-color: var(--app-text-primary-color);
+    --form-element-label-color: var(--app-text-secondary-color);
+    --form-element-primary-color: var(--app-accent-color);
+    --form-element-secondary-color: rgba(255, 255, 255, 0.2);
+    --form-element-error-color: var(--app-error-color);
+    --form-element-icon-color: var(--app-icon-hover-color);

    /* toggle colors */
-    --toggle-bg-color: rgb(51, 51, 51);
-    --toggle-thumb-color: rgb(211, 215, 207);
-    --toggle-checked-bg-color: var(--form-element-primary-color);
+    --toggle-bg-color: var(--app-border-color);
+    --toggle-thumb-color: var(--app-text-color);
+    --toggle-checked-bg-color: var(--app-accent-color);

    /* cmdstrcode colors */
-    --cmdstrcode-bg-color: rgb(0, 0, 0);
-    --cmdstrcode-text-color: rgb(211, 215, 207);
+    --cmdstrcode-text-color: var(--app-text-color);

    /* markdown colors */
    --markdown-bg-color: rgb(35, 35, 35);
@@ -136,29 +113,29 @@

    /* status(remote) colors */
    /* todo: all status colors must be unified */
-    --status-connected-color: rgb(70, 167, 88);
-    --status-connecting-color: rgb(245, 217, 10);
-    --status-error-color: rgb(229, 77, 46);
-    --status-disconnected-color: rgb(195, 200, 194);
+    --status-connected-color: var(--app-success-color);
+    --status-connecting-color: var(--app-warning-color);
+    --status-error-color: var(--app-error-color);
+    --status-disconnected-color: var(--app-text-secondary-color);

    /* status indicator colors */
    /* todo: all status colors must be unified */
-    --status-indicator-color: rgb(211, 215, 207);
-    --status-indicator-error: rgb(204, 0, 0);
-    --status-indicator-success: rgb(78, 154, 6);
+    --status-indicator-color: var(--app-text-color);
+    --status-indicator-error: var(--status-error-color);
+    --status-indicator-success: var(--status-connected-color);

    /* status(version) colors */
    /* todo: all status colors must be unified */
-    --status-outdated-color: rgb(196, 160, 0);
-    --status-updated-color: rgb(78, 154, 6);
+    --status-outdated-color: var(--status-connecting-color);
+    --status-updated-color: var(--status-connected-color);

    /* term status colors */
    /* todo: all status colors must be unified */
-    --term-error-color: rgb(204, 0, 0);
-    --term-warning-color: rgb(196, 160, 0);
+    --term-error-color: var(--status-error-color);
+    --term-warning-color: var(--status-connecting-color);

    /* hotkey colors */
-    --hotkey-text-color: rgb(195, 200, 194);
+    --hotkey-text-color: var(--app-text-secondary-color);

    /* sidebar colors */
    --sidebar-highlight-color: rgba(241, 246, 243, 0.08);
@@ -176,10 +153,10 @@
    --line-svg-hover-fill-color: #eceeec;
    --line-selected-border-color: rgb(193, 195, 193);
    --line-separator-color: rgb(126, 126, 126);
-    --line-error-color: #cc0000;
-    --line-warning-color: #ffa500;
+    --line-error-color: var(--app-error-color);
+    --line-warning-color: var(--app-warning-color);
    --line-base-soft-blue-color: #729fcf;
-    --line-active-border-color: rgb(97, 158, 72);
+    --line-active-border-color: var(--app-accent-color);
    --line-selected-bg-color: rgba(255, 255, 255, 0.05);
    --line-selected-border-left-color: #777777;
    --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
@@ -190,12 +167,12 @@
    --line-meta-user-color: rgba(140, 184, 232);
    --line-svg-color: rgba(236, 238, 236, 0.6);
    --line-svg-hover-color: rgba(236, 238, 236, 1);
-    --line-status-success-fill: rgb(88, 193, 66);
-    --line-status-error-fill: #cc0000;
-    --line-status-warning-fill: #ffa500;
+    --line-status-success-fill: var(--app-success-color);
+    --line-status-error-fill: var(--app-error-color);
+    --line-status-warning-fill: var(--app-warning-color);
    --line-actions-inactive-color: rgba(255, 255, 255, 0.5);
    --line-actions-active-color: rgba(255, 255, 255, 1);
-    --line-actions-bg-color: rgba(21, 23, 21, 1);
+    --line-actions-bg-color: rgba(255, 255, 255, 0.15);

    /* view colors */
    /* todo: bookmarks is a view, colors must be unified with --view* colors */
@@ -205,13 +182,13 @@
    --bookmarks-control-hover-color: rgb(255, 255, 255);

    /* view colors */
-    --view-error-color: rgb(204, 0, 0);
-    --view-text-color: rgb(195, 200, 194);
+    --view-error-color: var(--app-error-color);
+    --view-text-color: var(--app-text-color);

    /* table colors */
    --table-border-color: rgba(241, 246, 243, 0.15);
    --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
-    --table-thead-border-bottom-color: var(--table-border-color);
+    --table-thead-bright-border-color: #ccc;
    --table-thead-bg-color: rgba(250, 250, 250, 0.02);
    --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
    --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
@@ -2,10 +2,13 @@
   SPDX-License-Identifier: Apache-2.0 */

@import "./default.css";
+@import "./term-default.css";
@import "./term-light.css";

 :root {
    --app-bg-color: #fefefe;
+    --app-accent-color: rgb(75, 166, 57);
+    --app-accent-bg-color: rgba(75, 166, 57, 0.2);
    --app-text-color: #000;
    --app-text-primary-color: rgb(0, 0, 0, 0.9);
    --app-text-secondary-color: rgb(0, 0, 0, 0.7);
@@ -42,8 +45,10 @@
    --form-element-bg-color: var(--app-bg-color);
    --form-element-text-color: var(--app-text-color);
    --form-element-label-color: rgba(0, 0, 0, 0.6);
-    --form-element-secondary-color: rgba(255, 255, 255, 0.09);
+    --form-element-secondary-color: rgba(0, 0, 0, 0.09);
    --form-element-icon-color: rgb(0, 0, 0, 0.6);
+    --form-element-disabled-text-color: #b7b7b7;
+    --form-element-placeholder-color: #b7b7b7;

    /* modal colors */
    --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
@@ -53,16 +58,17 @@
    --cmdinput-textarea-border-color: var(--form-element-border-color);

    /* scroll colors */
-    --scrollbar-background-color: rgba(0, 0, 0, 0.3);
-    --scrollbar-thumb-color: rgba(0, 0, 0, 0.4);
-    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.5);
-
-    /* cmdstrcode colors */
-    --cmdstrcode-bg-color: var(--term-black);
-    --cmdstrcode-text-color: var(--term-white);
+    --scrollbar-background-color: var(--app-bg-color);
+    --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
+    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4);

    /* line color */
-    --line-actions-bg-color: rgba(0, 0, 0, 0.4);
+    --line-actions-bg-color: rgba(0, 0, 0, 0.1);
+    --line-actions-inactive-color: rgba(0, 0, 0, 0.3);
+    --line-actions-active-color: rgba(0, 0, 0, 1);
+
+    /* toggle colors */
+    --toggle-thumb-color: var(--app-bg-color);

    --logo-button-hover-bg-color: #f0f0f0;

@@ -11,9 +11,9 @@
    --term-green: #4e9a06;
    --term-yellow: #c4a000;
    --term-blue: #3465a4;
-    --term-magenta: #75507b;
+    --term-magenta: #bc3fbc;
    --term-cyan: #06989a;
-    --term-white: #d3d7cf;
+    --term-white: #d0d0d0;
    --term-bright-black: #555753;
    --term-bright-red: #ef2929;
    --term-bright-green: #58c142;
@@ -21,7 +21,7 @@
    --term-bright-blue: #32afff;
    --term-bright-magenta: #ad7fa8;
    --term-bright-cyan: #34e2e2;
-    --term-bright-white: #ffffff;
+    --term-bright-white: #e7e7e7;

    --term-gray: #8b918a; /* not an official terminal color */
    --term-cmdtext: #ffffff;
@@ -5,7 +5,5 @@
    /* term colors */
    --term-foreground: #000000;
    --term-background: #fefefe;
-    --term-black: #fefefe;
-    --term-white: #000000;
    --term-cmdtext: #000000;
 }
@@ -12,7 +12,7 @@ body {

 body {
    &.is-dev .sidebar {
-        background-color: var(--app-panel-bg-color-dev);
+        --app-panel-bg-color: var(--app-panel-bg-color-dev);
    }
 }

@@ -210,10 +210,10 @@ svg.icon {
 .dropdown,
 .button {
    display: inline-block;
-    border: 1px solid var(--button-secondary-bg-color) !important;
+    border: 1px solid var(--form-element-secondary-color) !important;
    border-radius: 5px;
    cursor: pointer;
-    background-color: var(--button-secondary-bg-color) !important;
+    background-color: var(--form-element-secondary-color) !important;
    color: var(--app-accent-color);
    .hoverEffect;
    &:hover {
@@ -221,7 +221,7 @@ svg.icon {
    }
    &.disabled {
        color: var(--app-text-color);
-        background: var(--button-secondary-bg-color);
+        background: var(--form-element-secondary-color);
        opacity: 0.5;
        cursor: initial;
    }
@@ -382,9 +382,9 @@ a.a-block {
    }

    &.connect-button {
-        color: var(--button-primary-bg-color);
+        color: var(--form-element-primary-color);
        &:hover {
-            color: var(--button-primary-bg-color);
+            color: var(--form-element-primary-color);
        }
    }

@@ -396,9 +396,9 @@ a.a-block {
    }

    &.success-button {
-        color: var(--button-primary-bg-color);
+        color: var(--form-element-primary-color);
        &:hover {
-            color: var(--button-primary-bg-color);
+            color: var(--form-element-primary-color);
        }
    }

@@ -111,11 +111,12 @@ class App extends React.Component<{}, {}> {
        // used to force a full reload of the application
        const renderVersion = GlobalModel.renderVersion.get();
        const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
+        const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
        return (
            <div
                key={"version-" + renderVersion}
                id="main"
-                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed })}
+                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed }, lightDarkClass)}
                onContextMenu={this.handleContextMenu}
            >
                <If condition={sidebarCollapsed}>
@@ -1,5 +1,6 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="globe">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M5.51561 7.24988C5.58926 5.49464 5.91878 3.94637 6.3934 2.81642C6.66453 2.17096 6.96822 1.69729 7.26714 1.39629C7.56327 1.0981 7.81035 1.00977 8.00003 1.00977C8.1897 1.00977 8.43678 1.0981 8.73291 1.39629C9.03183 1.69729 9.33553 2.17096 9.60665 2.81642C10.0813 3.94637 10.4108 5.49464 10.4844 7.24988H5.51561ZM4.01441 7.24988H1.03973C1.31693 4.64752 3.02019 2.47128 5.35297 1.51768C5.22994 1.74443 5.1158 1.98471 5.01045 2.23552C4.44737 3.57606 4.0887 5.32893 4.01441 7.24988ZM10.6471 1.51768C10.7701 1.74443 10.8842 1.98471 10.9896 2.23552C11.5527 3.57606 11.9114 5.32893 11.9856 7.24988H14.9603C14.6831 4.64752 12.9799 2.47128 10.6471 1.51768ZM10.4842 8.74988C10.4101 10.5028 10.0808 12.049 9.60665 13.1777C9.33553 13.8232 9.03183 14.2968 8.73291 14.5978C8.43678 14.896 8.1897 14.9844 8.00003 14.9844C7.81035 14.9844 7.56327 14.896 7.26714 14.5978C6.96822 14.2968 6.66453 13.8232 6.3934 13.1777C5.91928 12.049 5.58997 10.5028 5.51585 8.74988H10.4842ZM11.9854 8.74988H14.9603C14.683 11.3537 12.978 13.5309 10.6432 14.4837C10.7677 14.2548 10.8831 14.0121 10.9896 13.7586C11.5521 12.4194 11.9107 10.6686 11.9854 8.74988ZM5.35689 14.4837C3.0221 13.5309 1.31708 11.3537 1.03973 8.74988H4.01463C4.0894 10.6686 4.44792 12.4194 5.01045 13.7586C5.11692 14.0121 5.23237 14.2548 5.35689 14.4837Z" fill="#C3C8C2"/>
-</g>
-</svg>
+    <g id="globe">
+        <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
+            d="M5.51561 7.24988C5.58926 5.49464 5.91878 3.94637 6.3934 2.81642C6.66453 2.17096 6.96822 1.69729 7.26714 1.39629C7.56327 1.0981 7.81035 1.00977 8.00003 1.00977C8.1897 1.00977 8.43678 1.0981 8.73291 1.39629C9.03183 1.69729 9.33553 2.17096 9.60665 2.81642C10.0813 3.94637 10.4108 5.49464 10.4844 7.24988H5.51561ZM4.01441 7.24988H1.03973C1.31693 4.64752 3.02019 2.47128 5.35297 1.51768C5.22994 1.74443 5.1158 1.98471 5.01045 2.23552C4.44737 3.57606 4.0887 5.32893 4.01441 7.24988ZM10.6471 1.51768C10.7701 1.74443 10.8842 1.98471 10.9896 2.23552C11.5527 3.57606 11.9114 5.32893 11.9856 7.24988H14.9603C14.6831 4.64752 12.9799 2.47128 10.6471 1.51768ZM10.4842 8.74988C10.4101 10.5028 10.0808 12.049 9.60665 13.1777C9.33553 13.8232 9.03183 14.2968 8.73291 14.5978C8.43678 14.896 8.1897 14.9844 8.00003 14.9844C7.81035 14.9844 7.56327 14.896 7.26714 14.5978C6.96822 14.2968 6.66453 13.8232 6.3934 13.1777C5.91928 12.049 5.58997 10.5028 5.51585 8.74988H10.4842ZM11.9854 8.74988H14.9603C14.683 11.3537 12.978 13.5309 10.6432 14.4837C10.7677 14.2548 10.8831 14.0121 10.9896 13.7586C11.5521 12.4194 11.9107 10.6686 11.9854 8.74988ZM5.35689 14.4837C3.0221 13.5309 1.31708 11.3537 1.03973 8.74988H4.01463C4.0894 10.6686 4.44792 12.4194 5.01045 13.7586C5.11692 14.0121 5.23237 14.2548 5.35689 14.4837Z" />
+    </g>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8L44.8 181.4C55.6 150.7 73.2 122 97.6 97.6c87.5-87.5 229.3-87.5 316.8 0l0 0L472 40l24 24V224H336l-24-24 57.1-57.1 0 0c-62.5-62.5-163.8-62.5-226.3 0zm0 226.3c62.5 62.5 163.8 62.5 226.3 0c17.5-17.5 30.1-38 37.8-59.8l60.4 21.3c-10.8 30.6-28.4 59.3-52.9 83.7c-87.5 87.5-229.3 87.5-316.7 0l0 0L40 472 16 448V288H176l24 24-57.1 57.1z"/></svg>
@@ -5,8 +5,6 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { If } from "tsx-control-statements/components";
-import cn from "classnames";
 import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
@@ -168,7 +166,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
        const curTheme = GlobalModel.getTheme();

        return (
-            <MainView viewName="clientsettings" title="Client Settings" onClose={this.handleClose}>
+            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
                <div className="content">
                    <div className="settings-field">
                        <div className="settings-label">Term Font Size</div>
@@ -192,19 +190,17 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                            />
                        </div>
                    </div>
-                    <If condition={GlobalModel.isDev}>
-                        <div className="settings-field">
-                            <div className="settings-label">Theme</div>
-                            <div className="settings-input">
-                                <Dropdown
-                                    className="theme-dropdown"
-                                    options={this.getThemes()}
-                                    defaultValue={curTheme}
-                                    onChange={this.handleChangeTheme}
-                                />
-                            </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Theme</div>
+                        <div className="settings-input">
+                            <Dropdown
+                                className="theme-dropdown"
+                                options={this.getThemes()}
+                                defaultValue={curTheme}
+                                onChange={this.handleChangeTheme}
+                            />
                        </div>
-                    </If>
+                    </div>
                    <div className="settings-field">
                        <div className="settings-label">Client ID</div>
                        <div className="settings-input">{cdata.clientid}</div>
@@ -18,20 +18,20 @@
        background: none;

        i {
-            fill: var(--button-primary-bg-color);
+            fill: var(--form-element-primary-color);
        }

        &.solid {
-            color: var(--button-primary-color);
-            background: var(--button-primary-bg-color);
+            color: var(--form-element-text-color);
+            background: var(--form-element-primary-color);

            i {
-                fill: var(--button-primary-color);
+                fill: var(--form-element-text-color);
            }
        }

        &.outlined {
-            border: 1px solid var(--button-primary-bg-color);
+            border: 1px solid var(--form-element-primary-color);
        }

        &.ghost {
@@ -39,29 +39,29 @@
        }

        &:hover {
-            color: var(--button-primary-color);
+            color: var(--form-element-text-color);
        }
    }

    &.secondary {
-        color: var(--button-text-color);
+        color: var(--form-element-text-color);
        background: none;

        &.solid {
-            color: var(--button-text-color);
-            background: var(--button-secondary-bg-color);
+            color: var(--form-element-text-color);
+            background: var(--form-element-secondary-color);
            box-shadow: none;
        }

        &.outlined {
-            border: 1px solid var(--button-secondary-bg-color);
+            border: 1px solid var(--form-element-secondary-color);
        }

        &.ghost {
            padding: 6px 10px;

            i {
-                fill: var(--button-primary-bg-color);
+                fill: var(--form-element-primary-color);
            }
        }
    }
@@ -10,7 +10,7 @@
        position: relative;
        display: flex;
        align-items: center;
-        color: var(--checkbox-bg-color);
+        color: var(--form-element-primary-color);
        transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
    }
    input[type="checkbox"] + label > span {
@@ -36,7 +36,7 @@
    }

    input[type="checkbox"]:checked + label > span {
-        border: 10px solid var(--button-primary-bg-color);
+        border: 10px solid var(--form-element-primary-color);
    }
    input[type="checkbox"]:checked + label > span:before {
        content: "";
@@ -45,8 +45,8 @@
        left: 3px;
        width: 7px;
        height: 12px;
-        border-right: 2px solid var(--checkbox-check-color);
-        border-bottom: 2px solid var(--checkbox-check-color);
+        border-right: 2px solid var(--form-element-text-color);
+        border-bottom: 2px solid var(--form-element-text-color);
        transform: rotate(45deg);
        transform-origin: 0% 100%;
        animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1);
@@ -36,7 +36,6 @@
    }

    .code-div {
-        background-color: var(--cmdstrcode-bg-color);
        display: flex;
        flex-direction: row;
        min-width: 100px;
@@ -49,7 +48,6 @@
            color: var(--cmdstrcode-text-color);
            white-space: pre;
            padding: 2px 8px 2px 8px;
-            background-color: var(--cmdstrcode-bg-color);
            font-size: var(--termfontsize);
            font-family: var(--termfontfamily);
            line-height: var(--termlineheight);
@@ -3,9 +3,10 @@
    height: 44px;
    min-width: 150px;
    width: 100%;
-    border: 1px solid var(--dropdown-border-color);
+    border: 2px solid var(--form-element-border-color);
    border-radius: 6px;
-    background: var(--dropdown-bg-color);
+    line-height: 22px;
+    background: var(--form-element-bg-color);

    &.no-label {
        height: 34px;
@@ -17,7 +18,7 @@
        top: 16px;
        font-size: 12.5px;
        transition: all 0.3s;
-        color: var(--dropdown-label-color);
+        color: var(--form-element-label-color);
        line-height: 10px;

        &.float {
@@ -88,11 +89,15 @@
    }

    &-error {
-        border-color: var(--dropdown-error-color);
+        border-color: var(--form-element-error-color);
    }

    &:focus {
-        border-color: var(--dropdown-focus-color);
+        border-color: var(--form-element-primary-color);
+    }
+
+    .lefticon {
+        color: var(--app-text-color);
    }
 }

@@ -109,13 +114,13 @@
    align-items: flex-start;
    gap: 4px;
    border-radius: 6px;
-    border: 1px solid var(--dropdown-border-color);
-    background: var(--dropdown-bg-color);
+    border: 2px solid var(--form-element-border-color);
+    background: var(--form-element-bg-color);
    // box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 8px 0px rgba(0, 0, 0, 0.35), 0px 0px 0.5px 0px #fff inset,
    // 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
    animation-fill-mode: forwards;
    z-index: 1000;
-    color: var(--dropdown-text-color);
+    color: var(--form-element-text-color);
 }

 .wave-dropdown-menu-close {
@@ -13,7 +13,6 @@ export { NumberField } from "./numberfield";
 export { PasswordField } from "./passwordfield";
 export { ResizableSidebar } from "./resizablesidebar";
 export { SettingsError } from "./settingserror";
-export { ShowWaveShellInstallPrompt } from "./showwaveshellinstallprompt";
 export { Status } from "./status";
 export { TextField } from "./textfield";
 export { Toggle } from "./toggle";
@@ -25,7 +25,7 @@
            padding: 0 10px;
            vertical-align: middle;
            line-height: var(--screentabs-height);
-            color: var(--term-white);
+            color: var(--app-text-color);
            margin: 0;
        }

@@ -10,17 +10,17 @@ import "./mainview.less";

@mobxReact.observer
 class MainView extends React.Component<{
-    viewName: string;
    title: string;
    onClose: () => void;
    children: React.ReactNode;
+    className?: string;
 }> {
    render() {
        const sidebarModel = GlobalModel.mainSidebarModel;
        const maxWidthSubtractor = sidebarModel.getCollapsed() ? 0 : sidebarModel.getWidth();
        return (
            <div
-                className={cn("mainview", `${this.props.viewName}-view`)}
+                className={cn("mainview", this.props.className)}
                style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
            >
                <div className="header-container bottom-border">
@@ -1,28 +0,0 @@
-// Copyright 2023, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import { GlobalModel } from "@/models";
-import * as appconst from "@/app/appconst";
-
-function ShowWaveShellInstallPrompt(callbackFn: () => void) {
-    let message: string = `
-In order to use Wave's advanced features like unified history and persistent sessions, Wave installs a small, open-source helper program called WaveShell on your remote machine.  WaveShell does not open any external ports and only communicates with your *local* Wave terminal instance over ssh.  For more information please see [the docs](https://docs.waveterm.dev/reference/waveshell).        
-        `;
-    message = message.trim();
-    let prtn = GlobalModel.showAlert({
-        message: message,
-        confirm: true,
-        markdown: true,
-        confirmflag: appconst.ConfirmKey_HideShellPrompt,
-    });
-    prtn.then((confirm) => {
-        if (!confirm) {
-            return;
-        }
-        if (callbackFn) {
-            callbackFn();
-        }
-    });
-}
-
-export { ShowWaveShellInstallPrompt };
@@ -3,10 +3,10 @@
    align-items: center;
    border-radius: 6px;
    position: relative;
-    height: 44px;
+    min-height: 44px;
    min-width: 412px;
    gap: 6px;
-    border: 1px solid var(--form-element-border-color);
+    border: 2px solid var(--form-element-border-color);
    background: var(--form-element-bg-color);

    &:hover {
@@ -27,15 +27,14 @@

    &-inner {
        display: flex;
-        align-items: flex-end;
-        height: 100%;
+        flex-direction: column;
        position: relative;
        flex-grow: 1;
+        --inner-padding: 5px 0 5px 16px;

        &-label {
-            position: absolute;
-            left: 16px;
-            top: 16px;
+            padding: var(--inner-padding);
+            margin-bottom: -10px;
            font-size: 12.5px;
            transition: all 0.3s;
            color: var(--form-element-label-color);
@@ -55,7 +54,7 @@
            width: 100%;
            height: 30px;
            border: none;
-            padding: 5px 0 5px 16px;
+            padding: var(--inner-padding);
            font-size: 16px;
            outline: none;
            background-color: transparent;
@@ -65,6 +64,10 @@
            &.offset-left {
                padding: 5px 16px 5px 0;
            }
+
+            input::placeholder {
+                color: var(--form-element-placeholder-color);
+            }
        }
    }

@@ -15,7 +15,7 @@
    i {
        display: inline;
        font-size: 13px;
-        fill: var(--checkbox-text-color);
+        fill: var(--form-element-text-color);
        padding-top: 0.2em;
    }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sawka	371f3d87c1	merge main	2024-03-07 22:47:44 -08:00
Sylvie Crowe	2a5857bc3d	SSH UI Quick Fixes (#408 ) * fix: set golbal ssh config to correct path This adds the missing "etc" directory to the path for the global config file. * chore: update auth mode tooltip This just changes the text to be slightly more accurate to the current behavior. * feat: add box to disable waveshell install modal This hooks in to the existing don't show this again code that pops up when creating a modal. * refactor: remove install modal in remote creation There used to be a modal that popped up while installing a remote that informed the user that waveshell gets installed on their remote. Since we have a new modal that pops up at the time of install, the older modal can be removed. * fix: allow user to cancel ssh dial The new ssh code broke dial for invalid urls since the context did not cancel the dial or any associated user input. This change reconnects the context along with the context for installing waveshell. * style: widen the rconndetail modal The rconndetail modal is currently narrower than the xtermjs element which results in awkward scrolling if a line is long. This change makes the width auto so it can size itself as needed. * add a max-width for safety	2024-03-07 22:37:00 -08:00
Mike Sawka	0b9834171d	poll for clientdata every 200ms (instead of every second) to improve startup speed. also only show window after ready-to-show. (#410 )	2024-03-07 22:08:08 -08:00
sawka	c9b2c4b24c	poll for clientdata every 200ms (instead of every second) to improve startup speed. also only show window after ready-to-show.	2024-03-07 22:05:19 -08:00
Red Adaya	717c4489e0	change overflow-x to auto	2024-03-08 13:54:01 +08:00
Red Adaya	5a6d6ef1b2	put back input styles	2024-03-08 13:33:14 +08:00
Evan Simkowitz	d6124c27b6	Unify color definitions and clean up light mode (#405 ) * Unify color definitions and clean up light mode * consolidate form colors * increase border thickness on dropdown and text * remove dev conditional for theme * fix secondary form element color * increase dropdown border thickness * fix history textinput * make warning a bit darker * attempt to fix rotate icons * fix line actions bg * fix terminal colors * fix broken history colors * fix textinput label padding * fix bottom negative margin * updates for prompt colors. darken magenta, grey out the whites slightly, and sneak in a change for git co. * clean up prompt.tsx * fixing wobbly icons * center svg icon, simplify meta-line1	2024-03-07 21:32:48 -08:00
Red Adaya	3584fec406	fix textfield placeholder color	2024-03-08 13:31:57 +08:00
Red Adaya	a306ca2ef0	use css variables	2024-03-08 13:26:09 +08:00
sawka	a5d4ae04af	more history UI updates. copy/use controls, change font, fix scroll area	2024-03-07 20:05:41 -08:00
Red Adaya	e54d76ebe0	remove comment	2024-03-08 09:48:52 +08:00
Red Adaya	a3a08bb367	convert table to div	2024-03-08 09:31:16 +08:00
Evan Simkowitz	662172db31	Bump version to 0.7.0 (#406 )	2024-03-07 14:54:03 -08:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8L44.8 181.4C55.6 150.7 73.2 122 97.6 97.6c87.5-87.5 229.3-87.5 316.8 0l0 0L472 40l24 24V224H336l-24-24 57.1-57.1 0 0c-62.5-62.5-163.8-62.5-226.3 0zm0 226.3c62.5 62.5 163.8 62.5 226.3 0c17.5-17.5 30.1-38 37.8-59.8l60.4 21.3c-10.8 30.6-28.4 59.3-52.9 83.7c-87.5 87.5-229.3 87.5-316.7 0l0 0L40 472 16 448V288H176l24 24-57.1 57.1z"/></svg>