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.
This commit is contained in:
Sylvie Crowe 2023-11-29 00:27:54 -08:00 committed by GitHub
parent e95934e2df
commit ebf356417d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 45 additions and 57 deletions

View File

@ -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;
}

View File

@ -247,7 +247,7 @@
}
}
.button.is-prompt-green {
.button.is-wave-green {
background-color: #222;
color: @term-white;

View File

@ -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" />

View File

@ -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}>

View File

@ -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>

View File

@ -7,7 +7,7 @@
vertical-align: middle;
width: 1.2em;
height: 1.2em;
fill: @prompt-green;
fill: @wave-green;
}
.term-prompt-branch {

View File

@ -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);

View File

@ -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>

View File

@ -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 {

View File

@ -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;

View File

@ -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 {

View File

@ -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

View File

@ -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>

View File

@ -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 {