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 18b7d9d4c..aab2875f7 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 2c92d6cbe..2f45b7bd9 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 c26574a0a..4c272e2a8 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 7a16be5cb..5ca5b31d2 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 4e5d973b6..4acdf281b 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 7c3775900..f0e5eeddb 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 5a993b89b..709c4cd6a 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 d86d056dc..f57484390 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 15c47bea5..1e165a66f 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 e8233ee55..4ea715c06 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 3c9224a88..1d8888533 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 f4d1630ad..2891d81b5 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 df853c59e..dcdbeedb9 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 83aaeb5a7..a0dc746c5 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 {