From 1d243d476287421d2df5ddfc214b5939db7bfbe2 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:26:16 +0100 Subject: [PATCH] feat(@ui): migrate input box --- .../common/messaging/MessageBox.tsx | 4 +- src/components/navigation/right/Search.tsx | 4 +- .../settings/appearance/ThemeOverrides.tsx | 4 +- src/components/ui/InputBox.tsx | 41 ----------- src/context/intermediate/modals/Input.tsx | 5 +- src/context/intermediate/modals/Prompt.tsx | 4 +- .../popovers/ServerIdentityModal.tsx | 4 +- src/pages/login/FormField.tsx | 72 ++++++++++--------- src/pages/settings/channel/Overview.tsx | 6 +- src/pages/settings/panes/MyBots.tsx | 4 +- src/pages/settings/server/Members.tsx | 11 ++- src/pages/settings/server/Overview.tsx | 6 +- src/pages/settings/server/Roles.tsx | 6 +- 13 files changed, 66 insertions(+), 105 deletions(-) delete mode 100644 src/components/ui/InputBox.tsx diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 68375d1e..53cb1e77 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/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; diff --git a/src/components/navigation/right/Search.tsx b/src/components/navigation/right/Search.tsx index f6924e60..94576ff9 100644 --- a/src/components/navigation/right/Search.tsx +++ b/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 = diff --git a/src/components/settings/appearance/ThemeOverrides.tsx b/src/components/settings/appearance/ThemeOverrides.tsx index 572a19e7..bb5c2cc9 100644 --- a/src/components/settings/appearance/ThemeOverrides.tsx +++ b/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; diff --git a/src/components/ui/InputBox.tsx b/src/components/ui/InputBox.tsx deleted file mode 100644 index ed48fdff..00000000 --- a/src/components/ui/InputBox.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import styled, { css } from "styled-components/macro"; - -interface Props { - readonly contrast?: boolean; -} - -export default styled.input` - 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); - } - `} -`; diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx index ed10b4a0..767bfa8e 100644 --- a/src/context/intermediate/modals/Input.tsx +++ b/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"; diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx index 1a47b285..6d0d8966 100644 --- a/src/context/intermediate/modals/Prompt.tsx +++ b/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"; diff --git a/src/context/intermediate/popovers/ServerIdentityModal.tsx b/src/context/intermediate/popovers/ServerIdentityModal.tsx index 3bf4188b..00b2f8aa 100644 --- a/src/context/intermediate/popovers/ServerIdentityModal.tsx +++ b/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"; diff --git a/src/pages/login/FormField.tsx b/src/pages/login/FormField.tsx index 06b2eea2..32b42fd6 100644 --- a/src/pages/login/FormField.tsx +++ b/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, "children" | "as"> & { type: FieldType; @@ -13,7 +19,7 @@ type Props = Omit, "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} /> diff --git a/src/pages/settings/channel/Overview.tsx b/src/pages/settings/channel/Overview.tsx index 49815d0d..8b2dae96 100644 --- a/src/pages/settings/channel/Overview.tsx +++ b/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) => { )} { diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx index cd786d63..10756648 100644 --- a/src/pages/settings/panes/MyBots.tsx +++ b/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) { { placeholder="Search for a specific user..." value={query} onChange={(e) => setQuery(e.currentTarget.value)} - contrast + palette="secondary" />
{data?.length ?? 0} Members
{members ? ( diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx index f750b275..4a333bab 100644 --- a/src/pages/settings/server/Overview.tsx +++ b/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) => { { setName(e.currentTarget.value); if (!changed) setChanged(true); diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx index 11c27253..8aada1f6 100644 --- a/src/pages/settings/server/Roles.tsx +++ b/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" />

@@ -205,7 +205,7 @@ export const Roles = observer(({ server }: Props) => { ), }) } - contrast + palette="secondary" />