From c2547b3eade15a34212258aa552ca866bef6f9b2 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:01:47 +0100 Subject: [PATCH] feat(@ui): migrate icon button --- src/components/common/ServerHeader.tsx | 2 +- src/components/common/UpdateIndicator.tsx | 4 +- .../common/messaging/MessageBox.tsx | 15 +---- .../attachments/AttachmentActions.tsx | 4 +- .../common/messaging/bars/ReplyBar.tsx | 4 +- .../messaging/embed/EmbedMediaActions.tsx | 2 +- src/components/common/user/UserHeader.tsx | 4 +- .../navigation/BottomNavigation.tsx | 3 +- .../navigation/items/ButtonItem.tsx | 7 +-- src/components/ui/IconButton.tsx | 58 ------------------- .../intermediate/popovers/UserProfile.tsx | 6 +- src/context/revoltjs/FileUploads.tsx | 4 +- src/lib/ContextMenus.tsx | 17 +----- src/pages/channels/actions/HeaderActions.tsx | 4 +- src/pages/friends/Friend.tsx | 5 +- src/pages/friends/Friends.tsx | 4 +- src/pages/settings/GenericSettings.tsx | 6 +- src/pages/settings/server/Bans.tsx | 4 +- src/pages/settings/server/Invites.tsx | 3 +- src/pages/settings/server/Members.tsx | 3 +- 20 files changed, 39 insertions(+), 120 deletions(-) delete mode 100644 src/components/ui/IconButton.tsx diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index db72bbad..0c5b3f0e 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -7,7 +7,7 @@ import styled, { css } from "styled-components/macro"; import { Text } from "preact-i18n"; -import IconButton from "../ui/IconButton"; +import { IconButton } from "@revoltchat/ui"; import Tooltip from "./Tooltip"; diff --git a/src/components/common/UpdateIndicator.tsx b/src/components/common/UpdateIndicator.tsx index cbd003dc..6151897a 100644 --- a/src/components/common/UpdateIndicator.tsx +++ b/src/components/common/UpdateIndicator.tsx @@ -3,12 +3,12 @@ import { Download, CloudDownload } from "@styled-icons/boxicons-regular"; import { useEffect, useState } from "preact/hooks"; +import { IconButton } from "@revoltchat/ui"; + import { internalSubscribe } from "../../lib/eventEmitter"; import { useApplicationState } from "../../mobx/State"; -import IconButton from "../ui/IconButton"; - import { updateSW } from "../../main"; import Tooltip from "./Tooltip"; diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index ce528b2a..68375d1e 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -1,22 +1,15 @@ import { Send, ShieldX } from "@styled-icons/boxicons-solid"; import Axios, { CancelTokenSource } from "axios"; -import Long from "long"; import { observer } from "mobx-react-lite"; -import { - Channel, - DEFAULT_PERMISSION_DIRECT_MESSAGE, - DEFAULT_PERMISSION_VIEW_ONLY, - Permission, - Server, - U32_MAX, - UserPermission, -} from "revolt.js"; +import { Channel } from "revolt.js"; import styled, { css } from "styled-components/macro"; import { ulid } from "ulid"; import { Text } from "preact-i18n"; import { useCallback, useContext, useEffect, useState } from "preact/hooks"; +import { IconButton } from "@revoltchat/ui"; + import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import { debounce } from "../../../lib/debounce"; import { defer } from "../../../lib/defer"; @@ -40,8 +33,6 @@ import { import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { takeError } from "../../../context/revoltjs/util"; -import IconButton from "../../ui/IconButton"; - import AutoComplete, { useAutoComplete } from "../AutoComplete"; import { PermissionTooltip } from "../Tooltip"; import FilePreview from "./bars/FilePreview"; diff --git a/src/components/common/messaging/attachments/AttachmentActions.tsx b/src/components/common/messaging/attachments/AttachmentActions.tsx index 4fa28985..f2d1781d 100644 --- a/src/components/common/messaging/attachments/AttachmentActions.tsx +++ b/src/components/common/messaging/attachments/AttachmentActions.tsx @@ -11,12 +11,12 @@ import styles from "./AttachmentActions.module.scss"; import classNames from "classnames"; import { useContext } from "preact/hooks"; +import { IconButton } from "@revoltchat/ui"; + import { determineFileSize } from "../../../../lib/fileSize"; import { AppContext } from "../../../../context/revoltjs/RevoltClient"; -import IconButton from "../../../ui/IconButton"; - interface Props { attachment: API.File; } diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx index aeb631a7..05eefa1c 100644 --- a/src/components/common/messaging/bars/ReplyBar.tsx +++ b/src/components/common/messaging/bars/ReplyBar.tsx @@ -7,6 +7,8 @@ import styled from "styled-components/macro"; import { Text } from "preact-i18n"; import { StateUpdater, useEffect } from "preact/hooks"; +import { IconButton } from "@revoltchat/ui"; + import { internalSubscribe } from "../../../../lib/eventEmitter"; import { useApplicationState } from "../../../../mobx/State"; @@ -14,8 +16,6 @@ import { SECTION_MENTION } from "../../../../mobx/stores/Layout"; import { Reply } from "../../../../mobx/stores/MessageQueue"; import Tooltip from "../../../common/Tooltip"; -import IconButton from "../../../ui/IconButton"; - import Markdown from "../../../markdown/Markdown"; import UserShort from "../../user/UserShort"; import { SystemMessage } from "../SystemMessage"; diff --git a/src/components/common/messaging/embed/EmbedMediaActions.tsx b/src/components/common/messaging/embed/EmbedMediaActions.tsx index 27f82c75..6f06b1dd 100644 --- a/src/components/common/messaging/embed/EmbedMediaActions.tsx +++ b/src/components/common/messaging/embed/EmbedMediaActions.tsx @@ -3,7 +3,7 @@ import { API } from "revolt.js"; import styles from "./Embed.module.scss"; -import IconButton from "../../../ui/IconButton"; +import { IconButton } from "@revoltchat/ui"; interface Props { embed: API.Image; diff --git a/src/components/common/user/UserHeader.tsx b/src/components/common/user/UserHeader.tsx index e3d207c6..e1572dd2 100644 --- a/src/components/common/user/UserHeader.tsx +++ b/src/components/common/user/UserHeader.tsx @@ -7,13 +7,13 @@ import styled from "styled-components/macro"; import { openContextMenu } from "preact-context-menu"; import { Text, Localizer } from "preact-i18n"; +import { IconButton } from "@revoltchat/ui"; + import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import Header from "../../ui/Header"; -import IconButton from "../../ui/IconButton"; - import Tooltip from "../Tooltip"; import UserStatus from "./UserStatus"; diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx index e0b5faf1..c7e527ba 100644 --- a/src/components/navigation/BottomNavigation.tsx +++ b/src/components/navigation/BottomNavigation.tsx @@ -3,6 +3,8 @@ import { observer } from "mobx-react-lite"; import { useHistory, useLocation } from "react-router"; import styled, { css } from "styled-components/macro"; +import { IconButton } from "@revoltchat/ui"; + import ConditionalLink from "../../lib/ConditionalLink"; import { useApplicationState } from "../../mobx/State"; @@ -10,7 +12,6 @@ import { useApplicationState } from "../../mobx/State"; import { useClient } from "../../context/revoltjs/RevoltClient"; import UserIcon from "../common/user/UserIcon"; -import IconButton from "../ui/IconButton"; const Base = styled.div` background: var(--secondary-background); diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx index 7d6a8467..a71f3183 100644 --- a/src/components/navigation/items/ButtonItem.tsx +++ b/src/components/navigation/items/ButtonItem.tsx @@ -5,23 +5,22 @@ import { User, Channel } from "revolt.js"; import styles from "./Item.module.scss"; import classNames from "classnames"; -import { Ref } from "preact"; import { useTriggerEvents } from "preact-context-menu"; import { Localizer, Text } from "preact-i18n"; +import { IconButton } from "@revoltchat/ui"; + import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { stopPropagation } from "../../../lib/stopPropagation"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; +import { Children } from "../../../types/Preact"; import ChannelIcon from "../../common/ChannelIcon"; import Tooltip from "../../common/Tooltip"; import UserIcon from "../../common/user/UserIcon"; import { Username } from "../../common/user/UserShort"; import UserStatus from "../../common/user/UserStatus"; -import IconButton from "../../ui/IconButton"; - -import { Children } from "../../../types/Preact"; type CommonProps = Omit< JSX.HTMLAttributes, diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx deleted file mode 100644 index 6127d5f0..00000000 --- a/src/components/ui/IconButton.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import styled, { css } from "styled-components/macro"; - -interface Props { - rotate?: string; - type?: "default" | "circle"; -} - -const normal = `var(--secondary-foreground)`; -const hover = `var(--foreground)`; - -export default styled.div` - z-index: 1; - display: grid; - cursor: pointer; - place-items: center; - - transition: 0.1s ease all; - - fill: ${normal}; - color: ${normal}; - - a { - color: ${normal}; - } - - svg { - transition: 0.2s ease transform; - } - - &:hover { - fill: ${hover}; - color: ${hover}; - - a { - color: ${hover}; - } - } - - ${(props) => - props.type === "circle" && - css` - padding: 4px; - border-radius: var(--border-radius-half); - background-color: var(--secondary-header); - - &:hover { - background-color: var(--primary-header); - } - `} - - ${(props) => - props.rotate && - css` - svg { - transform: rotateZ(${props.rotate}); - } - `} -`; diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx index 7c8810e2..a1d9088e 100644 --- a/src/context/intermediate/popovers/UserProfile.tsx +++ b/src/context/intermediate/popovers/UserProfile.tsx @@ -15,7 +15,7 @@ import styles from "./UserProfile.module.scss"; import { Localizer, Text } from "preact-i18n"; import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, IconButton } from "@revoltchat/ui"; import { noop } from "../../../lib/js"; @@ -26,12 +26,10 @@ import UserBadges from "../../../components/common/user/UserBadges"; import UserIcon from "../../../components/common/user/UserIcon"; import { Username } from "../../../components/common/user/UserShort"; import UserStatus from "../../../components/common/user/UserStatus"; -import IconButton from "../../../components/ui/IconButton"; +import Markdown from "../../../components/markdown/Markdown"; import Modal from "../../../components/ui/Modal"; import Overline from "../../../components/ui/Overline"; import Preloader from "../../../components/ui/Preloader"; - -import Markdown from "../../../components/markdown/Markdown"; import { ClientStatus, StatusContext, diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx index ee8291c5..c08ec266 100644 --- a/src/context/revoltjs/FileUploads.tsx +++ b/src/context/revoltjs/FileUploads.tsx @@ -7,11 +7,11 @@ import classNames from "classnames"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; +import { IconButton } from "@revoltchat/ui"; + import { determineFileSize } from "../../lib/fileSize"; -import IconButton from "../../components/ui/IconButton"; import Preloader from "../../components/ui/Preloader"; - import { useIntermediate } from "../intermediate/Intermediate"; import { AppContext } from "./RevoltClient"; import { takeError } from "./util"; diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx index 6c1f134c..32b37d4d 100644 --- a/src/lib/ContextMenus.tsx +++ b/src/lib/ContextMenus.tsx @@ -1,15 +1,4 @@ -import { - At, - Bell, - BellOff, - Check, - CheckSquare, - ChevronRight, - Block, - Square, - LeftArrowAlt, - Trash, -} from "@styled-icons/boxicons-regular"; +import { ChevronRight, Trash } from "@styled-icons/boxicons-regular"; import { Cog, UserVoice } from "@styled-icons/boxicons-solid"; import { isFirefox } from "react-device-detect"; import { useHistory } from "react-router-dom"; @@ -24,6 +13,8 @@ import { import { Text } from "preact-i18n"; import { useContext } from "preact/hooks"; +import { IconButton } from "@revoltchat/ui"; + import { useApplicationState } from "../mobx/State"; import { QueuedMessage } from "../mobx/stores/MessageQueue"; import { NotificationState } from "../mobx/stores/NotificationOptions"; @@ -39,9 +30,7 @@ import CMNotifications from "./contextmenu/CMNotifications"; import Tooltip from "../components/common/Tooltip"; import UserStatus from "../components/common/user/UserStatus"; -import IconButton from "../components/ui/IconButton"; import LineDivider from "../components/ui/LineDivider"; - import { Children } from "../types/Preact"; import { internalEmit } from "./eventEmitter"; import { getRenderer } from "./renderer/Singleton"; diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index 8323b355..c3bddff1 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/src/pages/channels/actions/HeaderActions.tsx @@ -11,6 +11,8 @@ import { observer } from "mobx-react-lite"; import { useHistory } from "react-router-dom"; import styled, { css } from "styled-components/macro"; +import { IconButton } from "@revoltchat/ui"; + import { chainedDefer, defer } from "../../../lib/defer"; import { internalEmit } from "../../../lib/eventEmitter"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; @@ -22,8 +24,6 @@ import { SIDEBAR_MEMBERS } from "../../../mobx/stores/Layout"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import UpdateIndicator from "../../../components/common/UpdateIndicator"; -import IconButton from "../../../components/ui/IconButton"; - import { ChannelHeaderProps } from "../ChannelHeader"; const Container = styled.div` diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx index 6393ace5..eb06fda1 100644 --- a/src/pages/friends/Friend.tsx +++ b/src/pages/friends/Friend.tsx @@ -6,10 +6,11 @@ import { User } from "revolt.js"; import styles from "./Friend.module.scss"; import classNames from "classnames"; -import { Ref } from "preact"; import { useTriggerEvents } from "preact-context-menu"; import { Text } from "preact-i18n"; +import { IconButton } from "@revoltchat/ui"; + import { stopPropagation } from "../../lib/stopPropagation"; import { voiceState } from "../../lib/vortex/VoiceState"; @@ -17,8 +18,6 @@ import { useIntermediate } from "../../context/intermediate/Intermediate"; import UserIcon from "../../components/common/user/UserIcon"; import UserStatus from "../../components/common/user/UserStatus"; -import IconButton from "../../components/ui/IconButton"; - import { Children } from "../../types/Preact"; interface Props { diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx index 1eefebb9..63ba7e21 100644 --- a/src/pages/friends/Friends.tsx +++ b/src/pages/friends/Friends.tsx @@ -7,6 +7,8 @@ import styles from "./Friend.module.scss"; import classNames from "classnames"; import { Text } from "preact-i18n"; +import { IconButton } from "@revoltchat/ui"; + import { TextReact } from "../../lib/i18n"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; @@ -17,8 +19,6 @@ import CollapsibleSection from "../../components/common/CollapsibleSection"; import Tooltip from "../../components/common/Tooltip"; import UserIcon from "../../components/common/user/UserIcon"; import { PageHeader } from "../../components/ui/Header"; -import IconButton from "../../components/ui/IconButton"; - import { Children } from "../../types/Preact"; import { Friend } from "./Friend"; diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx index dc665d30..c8b90d53 100644 --- a/src/pages/settings/GenericSettings.tsx +++ b/src/pages/settings/GenericSettings.tsx @@ -13,16 +13,16 @@ import { useState, } from "preact/hooks"; +import { IconButton } from "@revoltchat/ui"; + import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { useApplicationState } from "../../mobx/State"; +import ButtonItem from "../../components/navigation/items/ButtonItem"; import Category from "../../components/ui/Category"; import Header from "../../components/ui/Header"; -import IconButton from "../../components/ui/IconButton"; import LineDivider from "../../components/ui/LineDivider"; - -import ButtonItem from "../../components/navigation/items/ButtonItem"; import { Children } from "../../types/Preact"; interface Props { diff --git a/src/pages/settings/server/Bans.tsx b/src/pages/settings/server/Bans.tsx index a6fefeec..2613a194 100644 --- a/src/pages/settings/server/Bans.tsx +++ b/src/pages/settings/server/Bans.tsx @@ -8,10 +8,10 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useMemo, useState } from "preact/hooks"; +import { IconButton, InputBox } from "@revoltchat/ui"; + import UserIcon from "../../../components/common/user/UserIcon"; -import IconButton from "../../../components/ui/IconButton"; import Preloader from "../../../components/ui/Preloader"; -import { InputBox } from "@revoltchat/ui"; interface InnerProps { ban: API.ServerBan; diff --git a/src/pages/settings/server/Invites.tsx b/src/pages/settings/server/Invites.tsx index f4f64d1f..204c3a94 100644 --- a/src/pages/settings/server/Invites.tsx +++ b/src/pages/settings/server/Invites.tsx @@ -7,11 +7,12 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; +import { IconButton } from "@revoltchat/ui"; + import { getChannelName } from "../../../context/revoltjs/util"; import UserIcon from "../../../components/common/user/UserIcon"; import { Username } from "../../../components/common/user/UserShort"; -import IconButton from "../../../components/ui/IconButton"; import Preloader from "../../../components/ui/Preloader"; interface InnerProps { diff --git a/src/pages/settings/server/Members.tsx b/src/pages/settings/server/Members.tsx index 99e3e89b..7bf235ff 100644 --- a/src/pages/settings/server/Members.tsx +++ b/src/pages/settings/server/Members.tsx @@ -9,11 +9,10 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useMemo, useState } from "preact/hooks"; -import { Button, Checkbox, Preloader } from "@revoltchat/ui"; +import { Button, Checkbox, IconButton, Preloader } from "@revoltchat/ui"; import UserIcon from "../../../components/common/user/UserIcon"; import { Username } from "../../../components/common/user/UserShort"; -import IconButton from "../../../components/ui/IconButton"; import InputBox from "../../../components/ui/InputBox"; import Overline from "../../../components/ui/Overline";