mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
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:
parent
e95934e2df
commit
ebf356417d
@ -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;
|
||||
}
|
||||
|
@ -247,7 +247,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button.is-prompt-green {
|
||||
.button.is-wave-green {
|
||||
background-color: #222;
|
||||
color: @term-white;
|
||||
|
||||
|
@ -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" />
|
||||
|
@ -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
|
||||
<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}>
|
||||
|
@ -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>
|
||||
|
@ -7,7 +7,7 @@
|
||||
vertical-align: middle;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
fill: @prompt-green;
|
||||
fill: @wave-green;
|
||||
}
|
||||
|
||||
.term-prompt-branch {
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -130,7 +130,7 @@ class CmdInput extends React.Component<{}, {}> {
|
||||
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
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user