Make all modal keybindings off by default, fix contrast issues with inputs in light mode (#516)

* Make all modal keybindings opt in * Fix some contrast issues with inputs in light Mode
2025-01-31 23:11:28 +01:00 · 2024-03-27 16:02:43 -07:00 · 2024-03-27 16:02:43 -07:00 · d99102b8e3
commit d99102b8e3
parent abe6d6a6ba
14 changed files with 34 additions and 12 deletions
--- a/public/themes/default.css
+++ b/public/themes/default.css
@ -87,6 +87,7 @@
    --form-element-border-color: rgba(241, 246, 243, 0.15);
    --form-element-bg-color: var(--app-bg-color);
    --form-element-text-color: var(--app-text-primary-color);
+    --form-element-primary-text-color: var(--form-element-text-color);
    --form-element-label-color: var(--app-text-secondary-color);
    --form-element-primary-color: var(--app-accent-color);
    --form-element-secondary-color: rgba(255, 255, 255, 0.2);
--- a/public/themes/light.css
+++ b/public/themes/light.css
@ -42,6 +42,7 @@
    --form-element-border-color: rgba(0, 0, 0, 0.3);
    --form-element-bg-color: var(--app-bg-color);
    --form-element-text-color: var(--app-text-color);
+    --form-element-primary-text-color: var(--button-primary-color);
    --form-element-label-color: rgba(0, 0, 0, 0.6);
    --form-element-secondary-color: rgba(0, 0, 0, 0.09);
    --form-element-icon-color: rgb(0, 0, 0, 0.6);
--- a/src/app/common/elements/button.less
+++ b/src/app/common/elements/button.less
@ -20,7 +20,7 @@
    }

    &.primary {
-        color: var(--form-element-text-color);
+        color: var(--form-element-primary-text-color);
        background: var(--form-element-primary-color);
        i {
            fill: var(--form-element-text-color);
--- a/src/app/common/elements/datepicker.less
+++ b/src/app/common/elements/datepicker.less
@ -22,6 +22,7 @@
    display: flex;
    align-items: center;
    justify-content: center;
+    background-color: var(--form-element-bg-color);

    input {
        outline: none !important;
@ -29,6 +30,7 @@
        height: 100%;
        padding: 0 !important;
        cursor: default !important;
+        background-color: inherit !important;
    }

    .fa-calendar {
@ -99,6 +101,7 @@
            background-color: var(--datepicker-cell-hover-bg-color);
        }
        &.selected {
+            color: var(--form-element-primary-text-color);
            background-color: var(--form-element-primary-color);
            font-weight: bold;
        }
@ -157,6 +160,7 @@
        }

        &.selected {
+            color: var(--form-element-primary-text-color);
            background-color: var(--form-element-primary-color);
        }
    }
--- a/src/app/common/elements/modal.tsx
+++ b/src/app/common/elements/modal.tsx
@ -17,7 +17,7 @@ interface ModalHeaderProps {
    title: string;
 }

-const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, keybindings = true, title }) => (
+const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, keybindings, title }) => (
    <div className="wave-modal-header">
        <If condition={keybindings && onClose}>
            <ModalKeybindings onCancel={onClose}></ModalKeybindings>
@ -80,7 +80,7 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
    onOk,
    cancelLabel = "Cancel",
    okLabel = "Ok",
-    keybindings = true,
+    keybindings,
 }) => (
    <div className="wave-modal-footer">
        <If condition={keybindings}>
--- a/src/app/common/modals/about.tsx
+++ b/src/app/common/modals/about.tsx
@ -61,7 +61,7 @@ class AboutModal extends React.Component<{}, {}> {
        const currentDate = new Date();
        return (
            <Modal className="about-modal">
-                <Modal.Header onClose={this.closeModal} title="About" />
+                <Modal.Header onClose={this.closeModal} title="About" keybindings={true} />
                <div className="wave-modal-body">
                    <div className="about-section">
                        <div className="logo-wrapper">
--- a/src/app/common/modals/alert.tsx
+++ b/src/app/common/modals/alert.tsx
@ -39,7 +39,7 @@ class AlertModal extends React.Component<{}, {}> {

        return (
            <Modal className="alert-modal">
-                <Modal.Header onClose={this.closeModal} title={title} />
+                <Modal.Header onClose={this.closeModal} title={title} keybindings={true} />
                <div className="wave-modal-body">
                    <If condition={message?.markdown}>
                        <Markdown text={message?.message ?? ""} extraClassName="bottom-margin" />
--- a/src/app/common/modals/createremoteconn.tsx
+++ b/src/app/common/modals/createremoteconn.tsx
@ -363,7 +363,12 @@ class CreateRemoteConnModal extends React.Component<{}, {}> {
                        <div className="settings-field settings-error">Error: {this.getErrorStr()}</div>
                    </If>
                </div>
-                <Modal.Footer onCancel={this.model.closeModal} onOk={this.handleSubmitRemote} okLabel="Connect" />
+                <Modal.Footer
+                    onCancel={this.model.closeModal}
+                    onOk={this.handleSubmitRemote}
+                    okLabel="Connect"
+                    keybindings={true}
+                />
            </Modal>
        );
    }
--- a/src/app/common/modals/editremoteconn.tsx
+++ b/src/app/common/modals/editremoteconn.tsx
@ -383,7 +383,12 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
                        <div className="settings-field settings-error">Error: {this.remoteEdit?.errorstr}</div>
                    </If>
                </div>
-                <Modal.Footer onOk={this.submitRemote} onCancel={this.model.closeModal} okLabel="Save" />
+                <Modal.Footer
+                    onOk={this.submitRemote}
+                    onCancel={this.model.closeModal}
+                    okLabel="Save"
+                    keybindings={true}
+                />
            </Modal>
        );
    }
--- a/src/app/common/modals/linesettings.tsx
+++ b/src/app/common/modals/linesettings.tsx
@ -139,7 +139,7 @@ class LineSettingsModal extends React.Component<{}, {}> {
                    <SettingsError errorMessage={this.errorMessage} />
                    <div style={{ height: 50 }} />
                </div>
-                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} />
+                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} keybindings={true} />
            </Modal>
        );
    }
--- a/src/app/common/modals/screensettings.tsx
+++ b/src/app/common/modals/screensettings.tsx
@ -205,7 +205,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                    </div>
                    <SettingsError errorMessage={this.errorMessage} />
                </div>
-                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} />
+                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} keybindings={true} />
            </Modal>
        );
    }
--- a/src/app/common/modals/sessionsettings.tsx
+++ b/src/app/common/modals/sessionsettings.tsx
@ -139,7 +139,7 @@ class SessionSettingsModal extends React.Component<{}, {}> {
                    </div>
                    <SettingsError errorMessage={this.errorMessage} />
                </div>
-                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} />
+                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} keybindings={true} />
            </Modal>
        );
    }
--- a/src/app/common/modals/userinput.tsx
+++ b/src/app/common/modals/userinput.tsx
@ -97,7 +97,12 @@ export const UserInputModal = (userInputRequest: UserInputRequest) => {
            </div>
            <Choose>
                <When condition={userInputRequest.responsetype == "text"}>
-                    <Modal.Footer onCancel={handleSendCancel} onOk={handleSendText} okLabel="Continue" />
+                    <Modal.Footer
+                        onCancel={handleSendCancel}
+                        onOk={handleSendText}
+                        okLabel="Continue"
+                        keybindings={true}
+                    />
                </When>
                <When condition={userInputRequest.responsetype == "confirm"}>
                    <Modal.Footer
@ -105,6 +110,7 @@ export const UserInputModal = (userInputRequest: UserInputRequest) => {
                        onOk={() => handleSendConfirm(true)}
                        okLabel="Yes"
                        cancelLabel="No"
+                        keybindings={true}
                    />
                </When>
            </Choose>
--- a/src/app/history/history.tsx
+++ b/src/app/history/history.tsx
@ -8,7 +8,7 @@ import { If, For } from "tsx-control-statements/components";
 import { sprintf } from "sprintf-js";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner, Cmd } from "@/models";
+import { GlobalModel, GlobalCommandRunner } from "@/models";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";