From ebf356417d9df84a6062d28d30a04a51594e7dbf Mon Sep 17 00:00:00 2001
From: Sylvie Crowe <107814465+oneirocosm@users.noreply.github.com>
Date: Wed, 29 Nov 2023 00:27:54 -0800
Subject: [PATCH] add link to terms of service (#105)

* add link to terms of service

The welcome page previously referenced the terms of service without
providing a link to them. This change adds a hyperlink which allows
users to easily navigate to them.

* remove the tos checkbox

Additionally, small cleanups have been made to the formatting of the
source code.

* update color name from prompt-green to wave-green

Previously, the name prompt-green was used for the green color
associated with the branding. It has now been changed to wave-green.
This is in response to the terminal being renamed from prompt to
waveterm.

As a part of this, change the css class is-prompt-green has also been
changed. It is renamed to is-wave-green.

* update anchor tags to use wave-green color

Previously, anchor tags used the blue color that comes as default with
bulma css. They are now changed to be the wave-green color that matches
the rest of the branding.

This also involved updating the hover text to be the same color.
Note that hover links had to be specified but focus links did not. I
imagine this is because of bulma css defaults. Regardless, the previous
.content overwrite that we used for hovering hyperlinks was removed as
it is no longer necessary.
---
 src/app/app.less                              | 19 +++++++-----
 src/app/common/common.less                    |  2 +-
 src/app/common/common.tsx                     |  4 +--
 src/app/common/modals/modals.tsx              | 31 +++++--------------
 src/app/common/modals/settings.tsx            |  8 ++---
 src/app/common/prompt/prompt.less             |  2 +-
 src/app/common/themes/themes.less             |  2 +-
 .../connections_deprecated/connections.tsx    | 12 +++----
 src/app/line/lines.less                       |  4 +--
 src/app/pluginsview/pluginsview.less          |  2 +-
 src/app/workspace/cmdinput/cmdinput.less      |  4 +--
 src/app/workspace/cmdinput/cmdinput.tsx       |  2 +-
 src/app/workspace/screen/screenview.tsx       |  4 +--
 src/plugins/code/code.less                    |  6 ++--
 14 files changed, 45 insertions(+), 57 deletions(-)

diff --git a/src/app/app.less b/src/app/app.less
index 18b7d9d4..aab2875f 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -88,6 +88,15 @@ textarea {
     height: 16px;
 }
 
+body a {
+    color: @wave-green;
+    cursor: pointer;
+    text-decoration: none;
+    &:hover {
+        color: @wave-green;
+    }
+}
+
 body code {
     font-family: @terminal-font;
 }
@@ -156,10 +165,10 @@ svg.icon {
     border-radius: 5px;
     cursor: pointer;
     background-color: @button-background !important;
-    color: @prompt-green;
+    color: @wave-green;
     .hoverEffect;
     &:hover {
-        color: @prompt-green;
+        color: @wave-green;
     }
     &.disabled {
         color: fade(@disabled-color, 60%);
@@ -184,12 +193,6 @@ svg.icon {
     left: 0;
 }
 
-.content {
-    a:hover {
-        color: #485fc7;
-    }
-}
-
 input[type="checkbox"] {
     cursor: pointer;
 }
diff --git a/src/app/common/common.less b/src/app/common/common.less
index 2c92d6cb..2f45b7bd 100644
--- a/src/app/common/common.less
+++ b/src/app/common/common.less
@@ -247,7 +247,7 @@
     }
 }
 
-.button.is-prompt-green {
+.button.is-wave-green {
     background-color: #222;
     color: @term-white;
 
diff --git a/src/app/common/common.tsx b/src/app/common/common.tsx
index c26574a0..4c272e2a 100644
--- a/src/app/common/common.tsx
+++ b/src/app/common/common.tsx
@@ -99,7 +99,7 @@ class Toggle extends React.Component<{ checked: boolean; onChange: (value: boole
 }
 
 class Checkbox extends React.Component<
-    { checked: boolean; onChange: (value: boolean) => void; label: string; id: string },
+    { checked: boolean; onChange: (value: boolean) => void; label: React.ReactNode; id: string },
     {}
 > {
     render() {
@@ -750,7 +750,7 @@ class InlineSettingsTextEdit extends React.Component<
                             <div
                                 onClick={this.confirmChange}
                                 title="Confirm (Enter)"
-                                className="button is-prompt-green is-outlined is-small"
+                                className="button is-wave-green is-outlined is-small"
                             >
                                 <span className="icon is-small">
                                     <i className="fa-sharp fa-solid fa-check" />
diff --git a/src/app/common/modals/modals.tsx b/src/app/common/modals/modals.tsx
index 7a16be5c..5ca5b31d 100644
--- a/src/app/common/modals/modals.tsx
+++ b/src/app/common/modals/modals.tsx
@@ -219,12 +219,12 @@ class AlertModal extends React.Component<{}, {}> {
                             <div onClick={this.closeModal} className="button is-prompt-cancel is-outlined is-small">
                                 Cancel
                             </div>
-                            <div onClick={this.handleOK} className="button is-prompt-green is-outlined is-small">
+                            <div onClick={this.handleOK} className="button is-wave-green is-outlined is-small">
                                 OK
                             </div>
                         </If>
                         <If condition={!isConfirm}>
-                            <div onClick={this.handleOK} className="button is-prompt-green is-small">
+                            <div onClick={this.handleOK} className="button is-wave-green is-small">
                                 OK
                             </div>
                         </If>
@@ -237,15 +237,6 @@ class AlertModal extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class TosModal extends React.Component<{}, {}> {
-    state = {
-        isChecked: false,
-    };
-
-    @boundMethod
-    handleCheckboxChange(checked: boolean): void {
-        this.setState({ isChecked: checked });
-    }
-
     @boundMethod
     acceptTos(): void {
         GlobalCommandRunner.clientAcceptTos();
@@ -331,18 +322,12 @@ class TosModal extends React.Component<{}, {}> {
                             </div>
                         </div>
                         <footer className="unselectable">
-                            <div>
-                                <Checkbox
-                                    checked={this.state.isChecked}
-                                    label="I accept the Terms of Service"
-                                    id="accept-tos"
-                                    onChange={this.handleCheckboxChange}
-                                />
+                            <div className="item-text">
+                                By continuing, I accept the&nbsp;
+                                <a href="https://www.waveterm.dev/tos">Terms of Service</a>
                             </div>
                             <div className="button-wrapper">
-                                <Button onClick={this.acceptTos} disabled={!this.state.isChecked}>
-                                    Continue
-                                </Button>
+                                <Button onClick={this.acceptTos}>Continue</Button>
                             </div>
                         </footer>
                     </div>
@@ -462,7 +447,7 @@ class AboutModal extends React.Component<{}, {}> {
                                 <a
                                     className="wave-button wave-button-link color-standard"
                                     href={util.makeExternLink(
-                                        "https://github.com/wavetermdev/waveterm/blob/main/LICENSE"
+                                        "https://github.com/wavetermdev/waveterm/blob/main/LICENSE",
                                     )}
                                     target="_blank"
                                 >
@@ -1107,7 +1092,7 @@ class ViewRemoteConnDetailModal extends React.Component<{ model: RemotesModel; r
                                     className={cn(
                                         "terminal-wrapper",
                                         { focus: isTermFocused },
-                                        remote != null ? "status-" + remote.status : null
+                                        remote != null ? "status-" + remote.status : null,
                                     )}
                                 >
                                     <If condition={!isTermFocused}>
diff --git a/src/app/common/modals/settings.tsx b/src/app/common/modals/settings.tsx
index 4e5d973b..4acdf281 100644
--- a/src/app/common/modals/settings.tsx
+++ b/src/app/common/modals/settings.tsx
@@ -299,7 +299,7 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
                         <SettingsError errorMessage={this.errorMessage} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                        <div onClick={this.closeModal} className="button is-wave-green is-outlined is-small">
                             Close
                         </div>
                     </footer>
@@ -439,7 +439,7 @@ class SessionSettingsModal extends React.Component<{ sessionId: string }, {}> {
                         <SettingsError errorMessage={this.errorMessage} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                        <div onClick={this.closeModal} className="button is-wave-green is-outlined is-small">
                             Close
                         </div>
                     </footer>
@@ -575,7 +575,7 @@ class LineSettingsModal extends React.Component<{ linenum: number }, {}> {
                         <div style={{ height: 50 }} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                        <div onClick={this.closeModal} className="button is-wave-green is-outlined is-small">
                             Close
                         </div>
                     </footer>
@@ -773,7 +773,7 @@ class ClientSettingsModal extends React.Component<{}, {}> {
                         <SettingsError errorMessage={this.errorMessage} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                        <div onClick={this.closeModal} className="button is-wave-green is-outlined is-small">
                             Close
                         </div>
                     </footer>
diff --git a/src/app/common/prompt/prompt.less b/src/app/common/prompt/prompt.less
index 7c377590..f0e5eedd 100644
--- a/src/app/common/prompt/prompt.less
+++ b/src/app/common/prompt/prompt.less
@@ -7,7 +7,7 @@
         vertical-align: middle;
         width: 1.2em;
         height: 1.2em;
-        fill: @prompt-green;
+        fill: @wave-green;
     }
 
     .term-prompt-branch {
diff --git a/src/app/common/themes/themes.less b/src/app/common/themes/themes.less
index 5a993b89..709c4cd6 100644
--- a/src/app/common/themes/themes.less
+++ b/src/app/common/themes/themes.less
@@ -6,7 +6,7 @@
 @background-session: rgba(13, 13, 13, 0.85);
 @background-session-components: rgba(48, 49, 48, 0.6);
 @background-session-components-solid: rgb(33, 34, 33);
-@prompt-green: rgb(88, 193, 66);
+@wave-green: rgb(88, 193, 66);
 @disabled-background: rgba(76, 81, 75, 1);
 @disabled-color: #adadad;
 @scrollbar-background: rgba(21, 23, 21, 1);
diff --git a/src/app/connections_deprecated/connections.tsx b/src/app/connections_deprecated/connections.tsx
index d86d056d..f5748439 100644
--- a/src/app/connections_deprecated/connections.tsx
+++ b/src/app/connections_deprecated/connections.tsx
@@ -444,7 +444,7 @@ class CreateRemote extends React.Component<{ model: RemotesModalModel; remoteEdi
                     <div
                         style={{ marginLeft: 10, marginRight: 20 }}
                         onClick={this.submitRemote}
-                        className="button is-prompt-green is-outlined is-small"
+                        className="button is-wave-green is-outlined is-small"
                     >
                         Create Remote
                     </div>
@@ -756,7 +756,7 @@ class EditRemoteSettings extends React.Component<
                     <div
                         style={{ marginLeft: 10, marginRight: 20 }}
                         onClick={this.submitRemote}
-                        className="button is-prompt-green is-outlined is-small"
+                        className="button is-wave-green is-outlined is-small"
                     >
                         Submit
                     </div>
@@ -875,7 +875,7 @@ class RemoteDetailView extends React.Component<{ model: RemotesModalModel; remot
                 key="connect"
                 style={{ marginLeft: 10 }}
                 onClick={() => this.connectRemote(remote.remoteid)}
-                className="button is-prompt-green is-outlined is-small"
+                className="button is-wave-green is-outlined is-small"
             >
                 Connect Now
             </div>
@@ -885,7 +885,7 @@ class RemoteDetailView extends React.Component<{ model: RemotesModalModel; remot
                 key="tryreconnect"
                 style={{ marginLeft: 10 }}
                 onClick={() => this.connectRemote(remote.remoteid)}
-                className="button is-prompt-green is-outlined is-small"
+                className="button is-wave-green is-outlined is-small"
             >
                 Try Reconnect
             </div>
@@ -915,7 +915,7 @@ class RemoteDetailView extends React.Component<{ model: RemotesModalModel; remot
                 key="installnow"
                 style={{ marginLeft: 10 }}
                 onClick={() => this.installRemote(remote.remoteid)}
-                className="button is-prompt-green is-outlined is-small"
+                className="button is-wave-green is-outlined is-small"
             >
                 Install Now
             </div>
@@ -1017,7 +1017,7 @@ class RemoteDetailView extends React.Component<{ model: RemotesModalModel; remot
                     <div className="settings-input">
                         <div
                             onClick={() => this.editAuthSettings()}
-                            className="button is-prompt-green is-outlined is-small is-inline-height"
+                            className="button is-wave-green is-outlined is-small is-inline-height"
                         >
                             Edit Connection Settings
                         </div>
diff --git a/src/app/line/lines.less b/src/app/line/lines.less
index 15c47bea..1e165a66 100644
--- a/src/app/line/lines.less
+++ b/src/app/line/lines.less
@@ -188,7 +188,7 @@
     }
 
     &.active {
-        border: 1px solid rgba(@prompt-green, 0.8) !important;
+        border: 1px solid rgba(@wave-green, 0.8) !important;
         box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
     }
 
@@ -234,7 +234,7 @@
         }
 
         .success {
-            fill: @prompt-green;
+            fill: @wave-green;
         }
 
         .fail {
diff --git a/src/app/pluginsview/pluginsview.less b/src/app/pluginsview/pluginsview.less
index e8233ee5..4ea715c0 100644
--- a/src/app/pluginsview/pluginsview.less
+++ b/src/app/pluginsview/pluginsview.less
@@ -45,7 +45,7 @@
                 margin-bottom: 1em;
                 border: 1px solid transparent;
                 &.selected {
-                    border-color: @prompt-green;
+                    border-color: @wave-green;
                 }
                 .plugin-summary-header {
                     display: flex;
diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less
index 3c9224a8..1d888853 100644
--- a/src/app/workspace/cmdinput/cmdinput.less
+++ b/src/app/workspace/cmdinput/cmdinput.less
@@ -19,7 +19,7 @@
     border: 1px solid transparent;
 
     &.active {
-        border: 1px solid rgba(@prompt-green, 0.8) !important;
+        border: 1px solid rgba(@wave-green, 0.8) !important;
         box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
     }
 
@@ -139,7 +139,7 @@
                 height: 2.5em;
                 cursor: pointer;
                 border-radius: 50%;
-                fill: @prompt-green;
+                fill: @wave-green;
                 padding: 0.25em;
             }
             .icon.disabled {
diff --git a/src/app/workspace/cmdinput/cmdinput.tsx b/src/app/workspace/cmdinput/cmdinput.tsx
index f4d1630a..2891d81b 100644
--- a/src/app/workspace/cmdinput/cmdinput.tsx
+++ b/src/app/workspace/cmdinput/cmdinput.tsx
@@ -130,7 +130,7 @@ class CmdInput extends React.Component<{}, {}> {
                         &nbsp;is {remote.status}
                         <If condition={remote.status != "connecting"}>
                             <div
-                                className="button is-prompt-green is-outlined is-small"
+                                className="button is-wave-green is-outlined is-small"
                                 onClick={() => this.clickConnectRemote(remote.remoteid)}
                             >
                                 connect now
diff --git a/src/app/workspace/screen/screenview.tsx b/src/app/workspace/screen/screenview.tsx
index df853c59..dcdbeedb 100644
--- a/src/app/workspace/screen/screenview.tsx
+++ b/src/app/workspace/screen/screenview.tsx
@@ -395,14 +395,14 @@ class ScreenWindowView extends React.Component<{ session: Session; screen: Scree
                             <i title="archived" className="fa-sharp fa-solid fa-share-nodes" /> web shared
                         </div>
                         <div className="share-tag-link">
-                            <div className="button is-prompt-green is-outlined is-small" onClick={this.copyShareLink}>
+                            <div className="button is-wave-green is-outlined is-small" onClick={this.copyShareLink}>
                                 <span>copy link</span>
                                 <span className="icon">
                                     <i className="fa-sharp fa-solid fa-copy" />
                                 </span>
                             </div>
                             <div
-                                className="button is-prompt-green is-outlined is-small"
+                                className="button is-wave-green is-outlined is-small"
                                 onClick={this.openScreenSettings}
                             >
                                 <span>open settings</span>
diff --git a/src/plugins/code/code.less b/src/plugins/code/code.less
index 83aaeb5a..a0dc746c 100644
--- a/src/plugins/code/code.less
+++ b/src/plugins/code/code.less
@@ -97,7 +97,7 @@
     .gutter {
         flex-shrink: 0;
         flex-grow: 0;
-        background: fade(@prompt-green, 40%);
+        background: fade(@wave-green, 40%);
         max-width: 3px;
     }
     .gutter-horizontal {
@@ -107,10 +107,10 @@
         cursor: row-resize;
     }
     .gutter:hover {
-        background: @prompt-green;
+        background: @wave-green;
     }
     .gutter-dragging:hover {
-        background: @prompt-green;
+        background: @wave-green;
     }
 
     .pane {