feat(@ui): migrate input box

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>