feat(@ui): migrate icon button

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";
 

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";
 

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 {
+import { Channel } from "revolt.js";
-    Channel,
-    DEFAULT_PERMISSION_DIRECT_MESSAGE,
-    DEFAULT_PERMISSION_VIEW_ONLY,
-    Permission,
-    Server,
-    U32_MAX,
-    UserPermission,
-} 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";

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;
 }

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";

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;

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";
 

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);

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<HTMLDivElement>,

src/components/ui/IconButton.tsx

@@ -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<Props>`
-    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});
-            }
-        `}
-`;

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,

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";

src/lib/ContextMenus.tsx

@@ -1,15 +1,4 @@
-import {
+import { ChevronRight, Trash } from "@styled-icons/boxicons-regular";
-    At,
-    Bell,
-    BellOff,
-    Check,
-    CheckSquare,
-    ChevronRight,
-    Block,
-    Square,
-    LeftArrowAlt,
-    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";

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`

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 {

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";
 

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 {

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;

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 {

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";