feat(@ui): migrate input box

src/components/common/messaging/MessageBox.tsx

@@ -95,7 +95,7 @@ const Blocked = styled.div`
 `;
 
 const Action = styled.div`
-    > div {
+    > a {
         height: 48px;
         width: 48px;
         display: flex;
@@ -118,7 +118,7 @@ const Action = styled.div`
 `;
 
 const FileAction = styled.div`
-    > div {
+    > a {
         height: 48px;
         width: 62px;
         display: flex;

src/components/navigation/right/Search.tsx

@@ -5,15 +5,13 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, InputBox } from "@revoltchat/ui";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../common/messaging/Message";
-import InputBox from "../../ui/InputBox";
 import Overline from "../../ui/Overline";
 import Preloader from "../../ui/Preloader";
-
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 
 type SearchState =

src/components/settings/appearance/ThemeOverrides.tsx

@@ -2,14 +2,14 @@ import { Pencil } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import styled from "styled-components/macro";
 
+import { InputBox } from "@revoltchat/ui";
+
 import { useDebounceCallback } from "../../../lib/debounce";
 
 import { useApplicationState } from "../../../mobx/State";
 
 import { Variables } from "../../../context/Theme";
 
-import InputBox from "../../ui/InputBox";
-
 const Container = styled.div`
     row-gap: 8px;
     display: grid;

src/components/ui/InputBox.tsx

@@ -1,41 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-interface Props {
-    readonly contrast?: boolean;
-}
-
-export default styled.input<Props>`
-    z-index: 1;
-    font-size: 1rem;
-    padding: 8px 16px;
-    border-radius: var(--border-radius);
-
-    font-family: inherit;
-    color: var(--foreground);
-    background: var(--primary-background);
-    transition: 0.2s ease background-color;
-
-    border: none;
-    outline: 2px solid transparent;
-    transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow 0.2s ease-in-out;
-
-    &:hover {
-        background: var(--secondary-background);
-    }
-
-    &:focus {
-        box-shadow: 0 0 0 1.5pt var(--accent);
-    }
-
-    ${(props) =>
-        props.contrast &&
-        css`
-            color: var(--secondary-foreground);
-            background: var(--secondary-background);
-
-            &:hover {
-                background: var(--hover);
-            }
-        `}
-`;

src/context/intermediate/modals/Input.tsx

@@ -1,14 +1,13 @@
 import { useHistory } from "react-router";
 import { Server } from "revolt.js";
-import { ulid } from "ulid";
 
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import InputBox from "../../../components/ui/InputBox";
+import { InputBox } from "@revoltchat/ui";
+
 import Modal from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
-
 import { Children } from "../../../types/Preact";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";

src/context/intermediate/modals/Prompt.tsx

@@ -7,15 +7,15 @@ import styles from "./Prompt.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { InputBox } from "@revoltchat/ui";
+
 import { TextReact } from "../../../lib/i18n";
 
 import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
-import InputBox from "../../../components/ui/InputBox";
 import Modal, { Action } from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
 import Radio from "../../../components/ui/Radio";
-
 import { Children } from "../../../types/Preact";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";

src/context/intermediate/popovers/ServerIdentityModal.tsx

@@ -5,14 +5,12 @@ import styles from "./ServerIdentityModal.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, InputBox } from "@revoltchat/ui";
 
 import { noop } from "../../../lib/js";
 
-import InputBox from "../../../components/ui/InputBox";
 import Modal from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
-
 import { FileUploader } from "../../revoltjs/FileUploads";
 import { useClient } from "../../revoltjs/RevoltClient";
 

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"
+                            ? "password"
-                                : type
+                            : type
                     }
                     // See https://github.com/mozilla/contain-facebook/issues/783
                     className="fbc-has-badge"
                     ref={register(
                         type === "password" || type === "current_password"
                             ? {
-                                validate: (value: string) =>
+                                  validate: (value: string) =>
-                                    value.length === 0
+                                      value.length === 0
-                                        ? "RequiredField"
+                                          ? "RequiredField"
-                                        : value.length < 8
+                                          : value.length < 8
-                                            ? "TooShort"
+                                          ? "TooShort"
-                                            : value.length > 1024
+                                          : value.length > 1024
-                                                ? "TooLong"
+                                          ? "TooLong"
-                                                : undefined,
+                                          : undefined,
-                            }
+                              }
                             : type === "email"
-                                ? {
+                            ? {
-                                    required: "RequiredField",
+                                  required: "RequiredField",
-                                    pattern: {
+                                  pattern: {
-                                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                                      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                                        message: "InvalidEmail",
+                                      message: "InvalidEmail",
-                                    },
+                                  },
-                                }
+                              }
-                                : type === "username"
+                            : type === "username"
-                                    ? {
+                            ? {
-                                        validate: (value: string) =>
+                                  validate: (value: string) =>
-                                            value.length === 0
+                                      value.length === 0
-                                                ? "RequiredField"
+                                          ? "RequiredField"
-                                                : value.length < 2
+                                          : value.length < 2
-                                                    ? "TooShort"
+                                          ? "TooShort"
-                                                    : value.length > 32
+                                          : value.length > 32
-                                                        ? "TooLong"
+                                          ? "TooLong"
-                                                        : undefined,
+                                          : undefined,
-                                    }
+                              }
-                                    : { required: "RequiredField" },
+                            : { 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>