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/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>