Replace old buttons with Button element (#466)

* init

* model

* pass model

* increase snap threshold

* move saving of state to model. backend implementation

* fix wrong clientdata prop

* right header space for right sidebar toggles

* button component refactor

* set default classname to primary

* remove debugging code

* hide trigger for now

* refactor Button. replace old buttons with Button element

* fix issue with closing alert modal

* make small button a little more round

* hide right sidebar toggle in prod

src/app/common/elements/button.less

@@ -1,8 +1,6 @@
 .wave-button {
     background: none;
-    color: inherit;
     border: none;
-    font: inherit;
     cursor: pointer;
     outline: inherit;
     display: flex;
@@ -12,64 +10,64 @@
     border-radius: 6px;
     height: auto;
     line-height: 1.5;
+    display: block;
+    white-space: nowrap;
+
+    color: var(--form-element-text-color);
+    background: var(--form-element-primary-color);
+    i {
+        fill: var(--form-element-text-color);
+    }
 
     &.primary {
         color: var(--form-element-text-color);
         background: var(--form-element-primary-color);
+        i {
+            fill: var(--form-element-text-color);
+        }
+    }
+
+    &.primary.outlined {
+        background: none;
+        border: 1px solid var(--form-element-primary-color);
 
         i {
             fill: var(--form-element-primary-color);
         }
+    }
 
-        &.solid {
-            color: var(--form-element-text-color);
-            background: var(--form-element-primary-color);
-
-            i {
-                fill: var(--form-element-text-color);
-            }
-        }
-
-        &.outlined {
-            background: none;
-            border: 1px solid var(--form-element-primary-color);
-        }
-
-        &.ghost {
-            background: none;
-        }
-
-        &:hover {
-            color: var(--form-element-text-color);
+    &.primary.ghost {
+        background: none;
+        i {
+            fill: var(--form-element-primary-color);
         }
     }
 
     &.secondary {
-        color: var(--form-element-text-color);
-        background: none;
         color: var(--form-element-text-color);
         background: var(--form-element-secondary-color);
-        box-shadow: none;
-
-        &.solid {
-            color: var(--form-element-text-color);
-            background: var(--form-element-secondary-color);
-            box-shadow: none;
+        i {
+            fill: var(--form-element-text-color);
         }
+    }
 
-        &.outlined {
-            background: none;
-            border: 1px solid var(--form-element-secondary-color);
-        }
+    &.secondary.outlined {
+        background: none;
+        border: 1px solid var(--form-element-text-color);
+    }
 
-        &.ghost {
-            background: none;
-            padding: 6px 10px;
+    &.secondary.ghost {
+        background: none;
+    }
 
-            i {
-                fill: var(--form-element-primary-color);
-            }
-        }
+    &.secondary.danger {
+        color: var(--app-error-color);
+    }
+
+    &.small {
+        padding: 4px 8px;
+        font-size: 12px;
+        border-radius: 3.6px;
     }
 
     &.term-inline {

src/app/common/modals/alert.tsx

@@ -14,7 +14,7 @@ import "./alert.less";
 class AlertModal extends React.Component<{}, {}> {
     @boundMethod
     closeModal(): void {
-        GlobalModel.cancelAlert();
+        GlobalModel.modalsModel.popModal(() => GlobalModel.cancelAlert());
     }
 
     @boundMethod

src/app/common/modals/screensettings.tsx

@@ -10,7 +10,7 @@ import cn from "classnames";
 import { GlobalModel, GlobalCommandRunner, Screen } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Dropdown, Tooltip } from "@/elements";
 import * as util from "@/util/util";
-import { TabIcon } from "@/common/elements/tabicon";
+import { TabIcon, Button } from "@/elements";
 import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
 import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
 import * as appconst from "@/app/appconst";
@@ -334,12 +334,9 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                             </Tooltip>
                         </div>
                         <div className="settings-input">
-                            <div
-                                onClick={this.handleDeleteScreen}
-                                className="button is-prompt-danger is-outlined is-small"
-                            >
+                            <Button onClick={this.handleDeleteScreen} className="secondary small danger">
                                 Delete Tab
-                            </div>
+                            </Button>
                         </div>
                     </div>
                     <SettingsError errorMessage={this.errorMessage} />

src/app/common/modals/sessionsettings.tsx

@@ -6,6 +6,7 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { GlobalModel, GlobalCommandRunner, Session } from "@/models";
+import { Button } from "@/elements";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Tooltip } from "@/elements";
 import * as util from "@/util/util";
 
@@ -133,12 +134,9 @@ class SessionSettingsModal extends React.Component<{}, {}> {
                             </Tooltip>
                         </div>
                         <div className="settings-input">
-                            <div
-                                onClick={this.handleDeleteSession}
-                                className="button is-prompt-danger is-outlined is-small"
-                            >
+                            <Button onClick={this.handleDeleteSession} className="secondary small danger">
                                 Delete Workspace
-                            </div>
+                            </Button>
                         </div>
                     </div>
                     <SettingsError errorMessage={this.errorMessage} />

src/app/common/modals/viewremoteconndetail.tsx

@@ -192,7 +192,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
             </Button>
         );
         let archiveButton = (
-            <Button className="secondary" onClick={() => this.clickArchive()}>
+            <Button className="secondary danger" onClick={() => this.clickArchive()}>
                 Delete
             </Button>
         );
@@ -207,7 +207,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
         }
         if (remote.sshconfigsrc == "sshconfig-import") {
             archiveButton = (
-                <Button className="secondary" onClick={() => this.clickArchive()}>
+                <Button className="secondary danger" onClick={() => this.clickArchive()}>
                     Delete
                     <Tooltip
                         message={

src/app/workspace/cmdinput/cmdinput.less

@@ -138,7 +138,7 @@
         color: var(--app-warning-color);
         align-items: center;
 
-        .button {
+        .wave-button {
             margin-left: 10px;
         }
     }

src/app/workspace/cmdinput/cmdinput.tsx

@@ -10,7 +10,7 @@ import cn from "classnames";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel, GlobalCommandRunner, Screen } from "@/models";
-import { renderCmdText } from "@/elements";
+import { Button } from "@/elements";
 import { TextAreaInput } from "./textareainput";
 import { InfoMsg } from "./infomsg";
 import { HistoryInfo } from "./historyinfo";
@@ -188,12 +188,12 @@ class CmdInput extends React.Component<{}, {}> {
                         <span className="remote-name">[{GlobalModel.resolveRemoteIdToFullRef(remote.remoteid)}]</span>
                         &nbsp;is {remote.status}
                         <If condition={remote.status != "connecting"}>
-                            <div
-                                className="button is-wave-green is-outlined is-small"
+                            <Button
+                                className="secondary small connect"
                                 onClick={() => this.clickConnectRemote(remote.remoteid)}
                             >
                                 connect now
-                            </div>
+                            </Button>
                         </If>
                     </div>
                 </If>

src/models/rightsidebar.ts

@@ -70,10 +70,6 @@ class RightSidebarModel implements SidebarModel {
     }
 
     getCollapsed(): boolean {
-        // disable right sidebar in production
-        if (!this.globalModel.isDev) {
-            return true;
-        }
         const clientData = this.globalModel.clientData.get();
         const collapsed = clientData?.clientopts?.rightsidebar?.collapsed;
         if (this.isDragging.get()) {