feat(@ui): migrate input box

src/pages/login/FormField.tsx

@@ -2,10 +2,16 @@ import { UseFormMethods } from "react-hook-form";
 
 import { Text, Localizer } from "preact-i18n";
 
-import InputBox from "../../components/ui/InputBox";
+import { InputBox } from "@revoltchat/ui";
+
 import Overline from "../../components/ui/Overline";
 
-type FieldType = "email" | "username" | "password" | "invite" | "current_password";
+type FieldType =
+    | "email"
+    | "username"
+    | "password"
+    | "invite"
+    | "current_password";
 
 type Props = Omit<JSX.HTMLAttributes<HTMLInputElement>, "children" | "as"> & {
     type: FieldType;
@@ -13,7 +19,7 @@ type Props = Omit<JSX.HTMLAttributes<HTMLInputElement>, "children" | "as"> & {
     register: UseFormMethods["register"];
     error?: string;
     name?: string;
-}
+};
 
 export default function FormField({
     type,
@@ -44,43 +50,43 @@ export default function FormField({
                         type === "invite" || type === "username"
                             ? "text"
                             : type === "current_password"
-                                ? "password"
-                                : type
+                            ? "password"
+                            : type
                     }
                     // See https://github.com/mozilla/contain-facebook/issues/783
                     className="fbc-has-badge"
                     ref={register(
                         type === "password" || type === "current_password"
                             ? {
-                                validate: (value: string) =>
-                                    value.length === 0
-                                        ? "RequiredField"
-                                        : value.length < 8
-                                            ? "TooShort"
-                                            : value.length > 1024
-                                                ? "TooLong"
-                                                : undefined,
-                            }
+                                  validate: (value: string) =>
+                                      value.length === 0
+                                          ? "RequiredField"
+                                          : value.length < 8
+                                          ? "TooShort"
+                                          : value.length > 1024
+                                          ? "TooLong"
+                                          : undefined,
+                              }
                             : type === "email"
-                                ? {
-                                    required: "RequiredField",
-                                    pattern: {
-                                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                                        message: "InvalidEmail",
-                                    },
-                                }
-                                : type === "username"
-                                    ? {
-                                        validate: (value: string) =>
-                                            value.length === 0
-                                                ? "RequiredField"
-                                                : value.length < 2
-                                                    ? "TooShort"
-                                                    : value.length > 32
-                                                        ? "TooLong"
-                                                        : undefined,
-                                    }
-                                    : { required: "RequiredField" },
+                            ? {
+                                  required: "RequiredField",
+                                  pattern: {
+                                      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                                      message: "InvalidEmail",
+                                  },
+                              }
+                            : type === "username"
+                            ? {
+                                  validate: (value: string) =>
+                                      value.length === 0
+                                          ? "RequiredField"
+                                          : value.length < 2
+                                          ? "TooShort"
+                                          : value.length > 32
+                                          ? "TooLong"
+                                          : undefined,
+                              }
+                            : { required: "RequiredField" },
                     )}
                     {...props}
                 />

src/pages/settings/channel/Overview.tsx

@@ -5,14 +5,12 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, Checkbox } from "@revoltchat/ui";
+import { Button, Checkbox, InputBox } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
 
-import InputBox from "../../../components/ui/InputBox";
-
 interface Props {
     channel: Channel;
 }
@@ -85,7 +83,7 @@ export default observer(({ channel }: Props) => {
                         )}
                     </h3>
                     <InputBox
-                        contrast
+                        palette="secondary"
                         value={name}
                         maxLength={32}
                         onChange={(e) => {

src/pages/settings/panes/MyBots.tsx

@@ -11,7 +11,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useCallback, useEffect, useState } from "preact/hooks";
 
-import { Button, Checkbox } from "@revoltchat/ui";
+import { Button, Checkbox, InputBox } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -28,7 +28,6 @@ import AutoComplete, {
 import CollapsibleSection from "../../../components/common/CollapsibleSection";
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
-import InputBox from "../../../components/ui/InputBox";
 import Tip from "../../../components/ui/Tip";
 import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
@@ -450,6 +449,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                         <Text id="app.settings.pages.bots.reserved" />
                     </h5>
                     <InputBox
+                        palette="secondary"
                         ref={setInteractionsRef}
                         value={data.interactions_url}
                         disabled={saving}

src/pages/settings/server/Members.tsx

@@ -9,11 +9,16 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
-import { Button, Checkbox, IconButton, Preloader } from "@revoltchat/ui";
+import {
+    Button,
+    Checkbox,
+    IconButton,
+    InputBox,
+    Preloader,
+} from "@revoltchat/ui";
 
 import UserIcon from "../../../components/common/user/UserIcon";
 import { Username } from "../../../components/common/user/UserShort";
-import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
 
 interface InnerProps {
@@ -122,7 +127,7 @@ export const Members = ({ server }: Props) => {
                 placeholder="Search for a specific user..."
                 value={query}
                 onChange={(e) => setQuery(e.currentTarget.value)}
-                contrast
+                palette="secondary"
             />
             <div className={styles.subtitle}>{data?.length ?? 0} Members</div>
             {members ? (

src/pages/settings/server/Overview.tsx

@@ -7,7 +7,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, ComboBox } from "@revoltchat/ui";
+import { Button, ComboBox, InputBox } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { noop } from "../../../lib/js";
@@ -15,8 +15,6 @@ import { noop } from "../../../lib/js";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
 import { getChannelName } from "../../../context/revoltjs/util";
 
-import InputBox from "../../../components/ui/InputBox";
-
 interface Props {
     server: Server;
 }
@@ -70,9 +68,9 @@ export const Overview = observer(({ server }: Props) => {
                         <Text id="app.main.servers.name" />
                     </h3>
                     <InputBox
-                        contrast
                         value={name}
                         maxLength={32}
+                        palette="secondary"
                         onChange={(e) => {
                             setName(e.currentTarget.value);
                             if (!changed) setChanged(true);

src/pages/settings/server/Roles.tsx

@@ -12,13 +12,13 @@ import {
     H1,
     Checkbox,
     ColourSwatches,
+    InputBox,
 } from "@revoltchat/ui";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import { PermissionList } from "../../../components/settings/roles/PermissionList";
 import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection";
-import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
 
 interface Props {
@@ -148,7 +148,7 @@ export const Roles = observer(({ server }: Props) => {
                                                     name: e.currentTarget.value,
                                                 })
                                             }
-                                            contrast
+                                            palette="secondary"
                                         />
                                     </p>
                                 </section>
@@ -205,7 +205,7 @@ export const Roles = observer(({ server }: Props) => {
                                                     ),
                                                 })
                                             }
-                                            contrast
+                                            palette="secondary"
                                         />
                                     </p>
                                 </section>