chore: migrate Button to @revoltchat/ui (#617)

* chore: start moving Button over * fix: convert ServerIdentityModal * fix: modal button styling * fix: popover styles * fix: clean up references to ui/*.* * fix: button sizing Co-authored-by: Ed L <beartechtalks@gmail.com>
2026-03-06 17:11:55 +00:00 · 2022-05-23 21:21:29 +01:00
parent 6fdd701b38
commit be12c6da20
34 changed files with 156 additions and 361 deletions
--- a/src/pages/channels/voice/VoiceHeader.tsx
+++ b/src/pages/channels/voice/VoiceHeader.tsx
@@ -6,14 +6,14 @@ import {
    VolumeFull,
    VolumeMute,
 } from "@styled-icons/boxicons-solid";
-import { Hashnode, Speakerdeck, Teamspeak } from "@styled-icons/simple-icons";
 import { observer } from "mobx-react-lite";
 import styled from "styled-components/macro";

 import { Text } from "preact-i18n";
 import { useMemo } from "preact/hooks";

-import VoiceClient from "../../../lib/vortex/VoiceClient";
+import { Button } from "@revoltchat/ui";
+
 import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";

 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -21,7 +21,6 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";

 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
-import Button from "../../../components/ui/Button";

 interface Props {
    id: string;
@@ -145,7 +144,7 @@ export default observer(({ id }: Props) => {
            </div>
            <div className="actions">
                <Tooltip content={"Leave call"} placement={"top"}>
-                    <Button error onClick={voiceState.disconnect}>
+                    <Button palette="error" onClick={voiceState.disconnect}>
                        <PhoneOff width={20} />
                    </Button>
                </Tooltip>
--- a/src/pages/invite/Invite.tsx
+++ b/src/pages/invite/Invite.tsx
@@ -7,6 +7,8 @@ import styles from "./Invite.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";

+import { Button } from "@revoltchat/ui";
+
 import { defer } from "../../lib/defer";
 import { TextReact } from "../../lib/i18n";

@@ -22,7 +24,6 @@ import { takeError } from "../../context/revoltjs/util";

 import ServerIcon from "../../components/common/ServerIcon";
 import UserIcon from "../../components/common/user/UserIcon";
-import Button from "../../components/ui/Button";
 import Overline from "../../components/ui/Overline";
 import Preloader from "../../components/ui/Preloader";

@@ -71,7 +72,7 @@ export default function Invite() {
                                    <Text id="app.special.invite.invalid_desc" />
                                </h2>
                                <div style="cursor: pointer;">
-                                    <Button contrast>
+                                    <Button palette="secondary">
                                        <ArrowBack
                                            size={32}
                                            onClick={() =>
@@ -152,7 +153,7 @@ export default function Invite() {
                        </h3>
                        <Overline type="error" error={error} />
                        <Button
-                            contrast
+                            palette="secondary"
                            onClick={async () => {
                                if (status === ClientStatus.READY) {
                                    return history.push("/");
--- a/src/pages/invite/InviteBot.tsx
+++ b/src/pages/invite/InviteBot.tsx
@@ -1,13 +1,14 @@
 import { useParams } from "react-router-dom";
-import { API, Permission } from "revolt.js";
+import { API } from "revolt.js";
 import styled from "styled-components/macro";

 import { useEffect, useState } from "preact/hooks";

+import { Button } from "@revoltchat/ui";
+
 import { useClient } from "../../context/revoltjs/RevoltClient";

 import UserIcon from "../../components/common/user/UserIcon";
-import Button from "../../components/ui/Button";
 import ComboBox from "../../components/ui/ComboBox";
 import Overline from "../../components/ui/Overline";
 import Preloader from "../../components/ui/Preloader";
@@ -78,7 +79,7 @@ export default function InviteBot() {
                                ))}
                        </ComboBox>
                        <Button
-                            contrast
+                            palette="secondary"
                            onClick={() =>
                                server !== "none" &&
                                client.bots.invite(data._id, { server })
@@ -103,7 +104,7 @@ export default function InviteBot() {
                                ))}
                        </ComboBox>
                        <Button
-                            contrast
+                            palette="secondary"
                            onClick={() =>
                                group !== "none" &&
                                client.bots.invite(data._id, { group })
--- a/src/pages/login/forms/Form.tsx
+++ b/src/pages/login/forms/Form.tsx
@@ -1,18 +1,17 @@
-import { CheckCircle, Envelope } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
 import { Link } from "react-router-dom";

 import styles from "../Login.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
+
+import { Button } from "@revoltchat/ui";

 import { useApplicationState } from "../../../mobx/State";

-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { takeError } from "../../../context/revoltjs/util";

-import Button from "../../../components/ui/Button";
 import Overline from "../../../components/ui/Overline";
 import Preloader from "../../../components/ui/Preloader";
 import WaveSVG from "../../settings/assets/wave.svg";
@@ -146,10 +145,22 @@ export const Form = observer(({ page, callback }: Props) => {
            <div className={styles.welcome}>
                <div className={styles.title}>
                    <img src={WaveSVG} draggable={false} />
-                    <Text id={page === "create" ? "login.welcome2" : "login.welcome"} />
+                    <Text
+                        id={
+                            page === "create"
+                                ? "login.welcome2"
+                                : "login.welcome"
+                        }
+                    />
                </div>
                <div className={styles.subtitle}>
-                    <Text id={page === "create" ? "login.subtitle2" : "login.subtitle"} />
+                    <Text
+                        id={
+                            page === "create"
+                                ? "login.subtitle2"
+                                : "login.subtitle"
+                        }
+                    />
                    <div>(app.revolt.chat)</div>
                </div>
            </div>
--- a/src/pages/login/forms/MailProvider.tsx
+++ b/src/pages/login/forms/MailProvider.tsx
@@ -1,7 +1,7 @@
 import styles from "../Login.module.scss";
 import { Text } from "preact-i18n";

-import Button from "../../../components/ui/Button";
+import { Button } from "@revoltchat/ui";

 interface Props {
    email?: string;
--- a/src/pages/settings/channel/Overview.tsx
+++ b/src/pages/settings/channel/Overview.tsx
@@ -5,11 +5,12 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

+import { Button } from "@revoltchat/ui";
+
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";

 import { FileUploader } from "../../../context/revoltjs/FileUploads";

-import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
 import InputBox from "../../../components/ui/InputBox";

@@ -129,7 +130,7 @@ export default observer(({ channel }: Props) => {
                </Checkbox>
            )}
            <p>
-                <Button onClick={save} contrast disabled={!changed}>
+                <Button onClick={save} palette="secondary" disabled={!changed}>
                    <Text id="app.special.modals.actions.save" />
                </Button>
            </p>
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -14,6 +14,8 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";

+import { Button } from "@revoltchat/ui";
+
 import { stopPropagation } from "../../../lib/stopPropagation";

 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -25,7 +27,6 @@ import {

 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
-import Button from "../../../components/ui/Button";
 import Tip from "../../../components/ui/Tip";
 import CategoryButton from "../../../components/ui/fluent/CategoryButton";

@@ -101,7 +102,9 @@ export const Account = observer(() => {
                    </div>
                </div>

-                <Button onClick={() => switchPage("profile")} contrast>
+                <Button
+                    onClick={() => switchPage("profile")}
+                    palette="secondary">
                    <Text id="app.settings.pages.profile.edit_profile" />
                </Button>
            </div>
--- a/src/pages/settings/panes/Audio.tsx
+++ b/src/pages/settings/panes/Audio.tsx
@@ -2,11 +2,11 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

-import { TextReact } from "../../../lib/i18n";
+import { Button } from "@revoltchat/ui";
+
 import { stopPropagation } from "../../../lib/stopPropagation";
 import { voiceState } from "../../../lib/vortex/VoiceState";

-import Button from "../../../components/ui/Button";
 import ComboBox from "../../../components/ui/ComboBox";
 import Overline from "../../../components/ui/Overline";
 import Tip from "../../../components/ui/Tip";
@@ -162,8 +162,10 @@ export function Audio() {
                            {!permission && (
                                <Button
                                    compact
-                                    onClick={(e) => handleAskForPermission(e)}
-                                    error>
+                                    onClick={(e: any) =>
+                                        handleAskForPermission(e)
+                                    }
+                                    palette="error">
                                    <Text id="app.settings.pages.audio.button_grant" />
                                </Button>
                            )}
--- a/src/pages/settings/panes/MyBots.tsx
+++ b/src/pages/settings/panes/MyBots.tsx
@@ -11,6 +11,8 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useCallback, useEffect, useState } from "preact/hooks";

+import { Button } from "@revoltchat/ui";
+
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { internalEmit } from "../../../lib/eventEmitter";
 import { useTranslation } from "../../../lib/i18n";
@@ -26,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 Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
 import InputBox from "../../../components/ui/InputBox";
 import Tip from "../../../components/ui/Tip";
@@ -343,7 +344,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                            setEditMode(false);
                        } else setEditMode(true);
                    }}
-                    contrast>
+                    palette="secondary">
                    <Text
                        id={`app.special.modals.actions.${
                            editMode ? "cancel" : "edit"
@@ -479,7 +480,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                            <Text id="app.special.modals.actions.save" />
                        </Button>
                        <Button
-                            error
+                            palette="error"
                            onClick={async () => {
                                setSaving(true);
                                openScreen({
--- a/src/pages/settings/panes/Native.tsx
+++ b/src/pages/settings/panes/Native.tsx
@@ -2,7 +2,8 @@ import { Refresh } from "@styled-icons/boxicons-regular";

 import { useEffect, useState } from "preact/hooks";

-import Button from "../../../components/ui/Button";
+import { Button } from "@revoltchat/ui";
+
 import Checkbox from "../../../components/ui/Checkbox";
 import Tip from "../../../components/ui/Tip";
 import CategoryButton from "../../../components/ui/fluent/CategoryButton";
@@ -129,14 +130,14 @@ export function Native() {
            </Checkbox>
            <p style={{ display: "flex", gap: "8px" }}>
                <Button
-                    contrast
+                    palette="secondary"
                    compact
                    disabled={!hintReload}
                    onClick={window.native.reload}>
                    Reload Page
                </Button>
                <Button
-                    contrast
+                    palette="secondary"
                    compact
                    disabled={!hintRelaunch}
                    onClick={window.native.relaunch}>
@@ -148,7 +149,7 @@ export function Native() {
                <>
                    <h5>Development mode is currently on.</h5>
                    <Button
-                        contrast
+                        palette="secondary"
                        compact
                        onClick={() => {
                            window.native.set("build", "stable");
@@ -182,7 +183,7 @@ export function Native() {
                    </Checkbox>
                    <p>
                        <Button
-                            error
+                            palette="error"
                            compact
                            disabled={!confirmDev}
                            onClick={() => {
--- a/src/pages/settings/panes/Plugins.tsx
+++ b/src/pages/settings/panes/Plugins.tsx
@@ -5,9 +5,10 @@ import styled from "styled-components";
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";

+import { Button } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../../mobx/State";

-import Button from "../../../components/ui/Button";
 import { CheckboxBase, Checkmark } from "../../../components/ui/Checkbox";
 import Tip from "../../../components/ui/Tip";

@@ -88,7 +89,7 @@ function PluginCard({ plugin }: CardProps) {
                </div>
                <div className={styles.buttonRow}>
                    <Button
-                        error
+                        palette="error"
                        onClick={() =>
                            plugins.remove(plugin.namespace, plugin.id)
                        }>
--- a/src/pages/settings/panes/Profile.tsx
+++ b/src/pages/settings/panes/Profile.tsx
@@ -7,6 +7,8 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";

+import { Button } from "@revoltchat/ui";
+
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useTranslation } from "../../../lib/i18n";

@@ -21,7 +23,6 @@ import {
 import AutoComplete, {
    useAutoComplete,
 } from "../../../components/common/AutoComplete";
-import Button from "../../../components/ui/Button";
 import Tip from "../../../components/ui/Tip";

 export const Profile = observer(() => {
@@ -191,7 +192,7 @@ export const Profile = observer(() => {
            </div>
            <p>
                <Button
-                    contrast
+                    palette="secondary"
                    onClick={() => {
                        setChanged(false);
                        client.users.edit({
--- a/src/pages/settings/panes/Sessions.tsx
+++ b/src/pages/settings/panes/Sessions.tsx
@@ -18,11 +18,12 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";

-import { dayjs } from "../../../context/Locale";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { Button } from "@revoltchat/ui";
+
+import { dayjs } from "../../../context/Locale";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";

-import Button from "../../../components/ui/Button";
 import Preloader from "../../../components/ui/Preloader";
 import Tip from "../../../components/ui/Tip";
 import CategoryButton from "../../../components/ui/fluent/CategoryButton";
@@ -229,12 +230,16 @@ export function Sessions() {
                            setDelete(del);

                            for (const id of del) {
-                                await client.api.delete(`/auth/session/${id as ""}`);
+                                await client.api.delete(
+                                    `/auth/session/${id as ""}`,
+                                );
                            }

-                            setSessions(sessions.filter((x) => x._id === deviceId));
-                        }
-                    })
+                            setSessions(
+                                sessions.filter((x) => x._id === deviceId),
+                            );
+                        },
+                    });
                }}
                icon={<LogOut size={24} color={"var(--error)"} />}
                action={"chevron"}
@@ -255,4 +260,3 @@ export function Sessions() {
        </div>
    );
 }
-
--- a/src/pages/settings/server/Members.tsx
+++ b/src/pages/settings/server/Members.tsx
@@ -9,14 +9,14 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useMemo, useState } from "preact/hooks";

+import { Button, Preloader } from "@revoltchat/ui";
+
 import UserIcon from "../../../components/common/user/UserIcon";
 import { Username } from "../../../components/common/user/UserShort";
-import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
 import IconButton from "../../../components/ui/IconButton";
 import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
-import { Preloader } from "@revoltchat/ui";

 interface InnerProps {
    member: Member;
@@ -74,7 +74,7 @@ const Inner = observer(({ member }: InnerProps) => {
                        );
                    })}
                    <Button
-                        compact
+                        palette="secondary"
                        disabled={isEqual(member.roles ?? [], roles)}
                        onClick={() =>
                            member.edit({
--- a/src/pages/settings/server/Overview.tsx
+++ b/src/pages/settings/server/Overview.tsx
@@ -7,13 +7,14 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

+import { Button } from "@revoltchat/ui";
+
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { noop } from "../../../lib/js";

 import { FileUploader } from "../../../context/revoltjs/FileUploads";
 import { getChannelName } from "../../../context/revoltjs/util";

-import Button from "../../../components/ui/Button";
 import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";

@@ -182,7 +183,7 @@ export const Overview = observer(({ server }: Props) => {
            ))}

            <p>
-                <Button onClick={save} contrast disabled={!changed}>
+                <Button onClick={save} palette="secondary" disabled={!changed}>
                    <Text id="app.special.modals.actions.save" />
                </Button>
            </p>