Fix modnotes footer control styles (#1009)

extension/data/components/Window.module.css

@@ -82,8 +82,3 @@
 .footer :not(input):empty {
     display: none;
 }
-
-/* Adjust controls to work nicely together in footers */
-.footer .tb-input {
-    border-color: #72869A;
-}

extension/data/components/controls/ActionButton.tsx

@@ -1,16 +1,24 @@
-import {type ComponentPropsWithoutRef} from 'react';
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './ActionButton.module.css';
 
-export const ActionButton = ({
+export const ActionButton = forwardRef<
+    HTMLButtonElement,
+    ComponentPropsWithoutRef<'button'> & {
+        inline?: boolean;
+    }
+>(({
     inline,
     className,
     ...props
-}: ComponentPropsWithoutRef<'button'> & {
-    inline?: boolean;
-}) => (
+}, ref) => (
     <button
-        className={classes(css.actionButton, inline && css.inline, className)}
+        className={classes(
+            css.actionButton,
+            inline && css.inline,
+            className,
+        )}
         {...props}
+        ref={ref}
     />
-);
+));

extension/data/components/controls/ActionSelect.module.css

@@ -0,0 +1,29 @@
+.actionSelect {
+    display: inline-block;
+    vertical-align: bottom;
+    padding: 5px 6px 4px 5px;
+    font-family: verdana,arial,helvetica,sans-serif;
+    font-size: 12px;
+    line-height: 14px;
+    background-color: #F7FAFD;
+    border-radius: 1px;
+    border-width: 1px 1px 2px 2px;
+    border-color: #72869A;
+    border-style: solid;
+    color: #17324E;
+    outline: none !important;
+}
+
+.actionSelect:active {
+    border-width: 1px;
+    border-color: #9FBAD6;
+    padding: 5px 6px;
+    outline: none !important;
+}
+
+.actionSelect.inline {
+    padding: 3px 3px 2px 2px;
+}
+.actionSelect.inline:active {
+    padding: 3px;
+}

extension/data/components/controls/ActionSelect.tsx

@@ -0,0 +1,24 @@
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
+import {classes} from '../../util/ui_interop';
+import css from './ActionSelect.module.css';
+
+export const ActionSelect = forwardRef<
+    HTMLSelectElement,
+    ComponentPropsWithoutRef<'select'> & {
+        inline?: boolean;
+    }
+>(({
+    inline,
+    className,
+    ...props
+}, ref) => (
+    <select
+        className={classes(
+            css.actionSelect,
+            inline && css.inline,
+            className,
+        )}
+        {...props}
+        ref={ref}
+    />
+));

extension/data/components/controls/BracketButton.tsx

@@ -1,16 +1,20 @@
-import {type ComponentPropsWithoutRef} from 'react';
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './BracketButton.module.css';
 
-export const BracketButton = ({
+export const BracketButton = forwardRef<
+    HTMLButtonElement,
+    ComponentPropsWithoutRef<'button'> & {
+        inline?: boolean;
+    }
+>(({
     inline,
     className,
     ...props
-}: ComponentPropsWithoutRef<'button'> & {
-    inline?: boolean;
-}) => (
+}, ref) => (
     <button
         className={classes(css.bracketButton, className)}
         {...props}
+        ref={ref}
     />
-);
+));

extension/data/components/controls/GeneralButton.tsx

@@ -1,16 +1,20 @@
-import {type ComponentPropsWithoutRef} from 'react';
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './GeneralButton.module.css';
 
-export const GeneralButton = ({
+export const GeneralButton = forwardRef<
+    HTMLButtonElement,
+    ComponentPropsWithoutRef<'button'> & {
+        inline?: boolean;
+    }
+>(({
     inline,
     className,
     ...props
-}: ComponentPropsWithoutRef<'button'> & {
-    inline?: boolean;
-}) => (
+}, ref) => (
     <button
         className={classes(css.generalButton, className)}
         {...props}
+        ref={ref}
     />
-);
+));

extension/data/components/controls/NormalInput.module.css

@@ -0,0 +1,27 @@
+.normalInput {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    border: solid 1px #c7d6e7;
+    font-size: 1em;
+    padding: 5px 6px;
+    height: 14px;
+    line-height: 14px;
+    background-color: #fff;
+    color: #000;
+    color-scheme: none;
+}
+
+.normalInput:focus-visible {
+    outline-color: #9fbad7;
+    border-color: #9fbad7;
+    color-scheme: none;
+}
+
+.normalInput.inWindowContent {
+    width: calc(100% - 16px); /* 16px = margin + border + padding */
+}
+
+/* Adjust controls to work nicely together in footers */
+.normalInput.inWindowFooter {
+    border-color: #72869A;
+}

extension/data/components/controls/NormalInput.tsx

@@ -0,0 +1,25 @@
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
+import {classes} from '../../util/ui_interop';
+import css from './NormalInput.module.css';
+
+// TODO: this is a terrible name
+export const NormalInput = forwardRef<
+    HTMLInputElement,
+    ComponentPropsWithoutRef<'input'> & {
+        inFooter?: boolean;
+    }
+>(({
+    inFooter,
+    className,
+    ...props
+}, ref) => (
+    <input
+        className={classes(
+            css.normalInput,
+            inFooter && css.inWindowFooter,
+            className,
+        )}
+        {...props}
+        ref={ref}
+    />
+));

extension/data/components/controls/index.ts

@@ -1,4 +1,7 @@
 export * from './ActionButton';
+export * from './ActionSelect';
+export * from './BracketButton';
 export * from './GeneralButton';
 export * from './Icon';
+export * from './NormalInput';
 export * from './RelativeTime';

extension/data/modules/modnotes.jsx

@@ -1,6 +1,6 @@
-import $ from 'jquery';
-
 import {map, page, pipeAsync} from 'iter-ops';
+import $ from 'jquery';
+import {useEffect, useRef, useState} from 'react';
 
 import {useFetched, useSetting} from '../hooks.ts';
 import * as TBApi from '../tbapi.ts';
@@ -11,17 +11,19 @@ import TBLog from '../tblog.ts';
 import {Module} from '../tbmodule.jsx';
 import {setSettingAsync} from '../tbstorage.js';
 import {drawPosition, textFeedback, TextFeedbackKind} from '../tbui.js';
+import {createBodyShadowPortal, reactRenderer} from '../util/ui_interop.tsx';
 
-import {useEffect, useRef, useState} from 'react';
-
-import {ActionButton} from '../components/controls/ActionButton.tsx';
-import {BracketButton} from '../components/controls/BracketButton.tsx';
-import {Icon} from '../components/controls/Icon.tsx';
-import {RelativeTime} from '../components/controls/RelativeTime.tsx';
+import {
+    ActionButton,
+    ActionSelect,
+    BracketButton,
+    Icon,
+    NormalInput,
+    RelativeTime,
+} from '../components/controls/index.ts';
 import {Pager} from '../components/Pager.tsx';
 import {Window} from '../components/Window.tsx';
 import {WindowTabs} from '../components/WindowTabs.tsx';
-import {createBodyShadowPortal, reactRenderer} from '../util/ui_interop.tsx';
 
 import css from './modnotes.module.css';
 
@@ -438,21 +440,20 @@ function ModNotesPopup ({
 
     const popupFooter = (
         <form className={css.modnoteCreateForm} onSubmit={handleNewNoteSubmit}>
-            <select
+            <ActionSelect
                 name='label'
-                className='tb-action-button tb-modnote-label-select'
                 defaultValue={defaultNoteLabelValueToLabelType[defaultNoteLabel]}
             >
                 <option value=''>(no label)</option>
                 {Object.entries(labelNames).reverse().map(([value, name]) => (
                     <option key={value} value={value}>{name}</option>
                 ))}
-            </select>
-            <input
+            </ActionSelect>
+            <NormalInput
                 ref={noteInputRef}
                 type='text'
                 name='note'
-                className='tb-modnote-text-input tb-input'
+                inFooter
                 placeholder='Add a note...'
             />
             <ActionButton type='submit'>
@@ -531,7 +532,6 @@ function NoteTableRow ({note, onDelete}) {
             <td>
                 {note.type === 'NOTE' && (
                     <a
-                        className='tb-modnote-delete-button'
                         role='button'
                         title='Delete note'
                         data-note-id={escapeHTML(note.id)}