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>

.prettierrc.js

@@ -4,6 +4,7 @@ module.exports = {
     jsxBracketSameLine: true,
     importOrder: [
         "preact|classnames|.scss$",
+        "^@revoltchat",
         "/(lib)",
         "/(redux|mobx)",
         "/(context)",

src/components/common/AgeGate.tsx

@@ -6,10 +6,11 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
+import { Button } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../mobx/State";
 import { SECTION_NSFW } from "../../mobx/stores/Layout";
 
-import Button from "../ui/Button";
 import Checkbox from "../ui/Checkbox";
 
 import { Children } from "../../types/Preact";
@@ -85,11 +86,11 @@ export default observer((props: Props) => {
                 <Text id="app.main.channel.nsfw.confirm" />
             </Checkbox>
             <div className="actions">
-                <Button contrast onClick={() => history.goBack()}>
+                <Button palette="secondary" onClick={() => history.goBack()}>
                     <Text id="app.special.modals.actions.back" />
                 </Button>
                 <Button
-                    contrast
+                    palette="secondary"
                     onClick={() =>
                         layout.getSectionState(SECTION_NSFW) && setAgeGate(true)
                     }>

src/components/common/messaging/embed/EmbedInvite.tsx

@@ -7,6 +7,8 @@ import styled, { css } from "styled-components/macro";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Button } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 
 import {
@@ -17,7 +19,6 @@ import {
 import { takeError } from "../../../../context/revoltjs/util";
 
 import ServerIcon from "../../../../components/common/ServerIcon";
-import Button from "../../../../components/ui/Button";
 import Overline from "../../../ui/Overline";
 import Preloader from "../../../ui/Preloader";
 

src/components/navigation/right/Search.tsx

@@ -5,10 +5,11 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
+import { Button } from "@revoltchat/ui";
+
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../common/messaging/Message";
-import Button from "../../ui/Button";
 import InputBox from "../../ui/InputBox";
 import Overline from "../../ui/Overline";
 import Preloader from "../../ui/Preloader";
@@ -118,7 +119,7 @@ export function SearchSidebar({ close }: Props) {
                             <Button
                                 key={key}
                                 compact
-                                accent={sort === key}
+                                palette={sort === key ? "accent" : "primary"}
                                 onClick={() => setSort(key as Sort)}>
                                 <Text
                                     id={`app.main.channel.search.sort.${key.toLowerCase()}`}

src/components/settings/appearance/ThemeTools.tsx

@@ -3,12 +3,13 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
+import { Button } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../../mobx/State";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import Tooltip from "../../common/Tooltip";
-import Button from "../../ui/Button";
 
 const Actions = styled.div`
     gap: 8px;
@@ -46,7 +47,10 @@ export default function ThemeTools() {
                 content={
                     <Text id="app.settings.pages.appearance.reset_overrides" />
                 }>
-                <Button contrast iconbutton onClick={theme.reset}>
+                <Button
+                    palette="secondary"
+                    compact="icon"
+                    onClick={theme.reset}>
                     <Reset size={22} />
                 </Button>
             </Tooltip>
@@ -61,8 +65,8 @@ export default function ThemeTools() {
             <Tooltip
                 content={<Text id="app.settings.pages.appearance.import" />}>
                 <Button
-                    contrast
-                    iconbutton
+                    palette="secondary"
+                    compact="icon"
                     onClick={async () => {
                         try {
                             const text = await navigator.clipboard.readText();

src/components/ui/Button.tsx

@@ -1,148 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-interface Props {
-    readonly compact?: boolean;
-    readonly accent?: boolean;
-    readonly contrast?: boolean;
-    readonly plain?: boolean;
-    readonly error?: boolean;
-    readonly gold?: boolean;
-    readonly iconbutton?: boolean;
-}
-
-export type ButtonProps = Props &
-    Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
-
-export default styled.button<Props>`
-    //z-index: 1;
-    display: flex;
-    height: 38px;
-    min-width: 96px;
-    align-items: center;
-    justify-content: center;
-    padding: 2px 16px;
-    font-size: 0.8125rem;
-    font-family: inherit;
-    font-weight: 500;
-    flex-shrink: 0;
-
-    transition: 0.2s ease opacity;
-    transition: 0.2s ease background-color;
-
-    background: var(--primary-background);
-    color: var(--foreground);
-
-    border-radius: var(--border-radius);
-    cursor: pointer;
-    border: none;
-
-    &:hover {
-        background: var(--secondary-header);
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        background: var(--primary-background);
-    }
-
-    &:active {
-        background: var(--secondary-background);
-    }
-
-    ${(props) =>
-        props.compact &&
-        css`
-            height: 32px !important;
-            padding: 2px 12px !important;
-            font-size: 13px;
-        `}
-
-    ${(props) =>
-        props.iconbutton &&
-        css`
-            height: 38px !important;
-            width: 38px !important;
-            min-width: unset !important;
-        `}
-
-    ${(props) =>
-        props.accent &&
-        css`
-            background: var(--accent) !important;
-        `}
-
-    ${(props) =>
-        props.plain &&
-        css`
-            background: transparent !important;
-
-            &:hover {
-                text-decoration: underline;
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                opacity: 0.5;
-            }
-
-            &:active {
-                background: var(--secondary-background);
-            }
-        `}
-
-    ${(props) =>
-        props.contrast &&
-        css`
-            padding: 4px 8px;
-            background: var(--secondary-header);
-
-            &:hover {
-                background: var(--primary-header);
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                background: var(--secondary-header);
-            }
-
-            &:active {
-                background: var(--secondary-background);
-            }
-        `}
-
-    ${(props) =>
-        props.error &&
-        css`
-            color: white;
-            font-weight: 600;
-            background: var(--error);
-
-            &:hover {
-                filter: brightness(1.2);
-                background: var(--error);
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                background: var(--error);
-            }
-        `}
-    
-    ${(props) =>
-        props.gold &&
-        css`
-            color: black;
-            font-weight: 600;
-            background: goldenrod;
-
-            &:hover {
-                filter: brightness(1.2);
-                background: goldenrod;
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                background: goldenrod;
-            }
-        `}
-`;

src/components/ui/Modal.tsx

@@ -3,10 +3,12 @@ import styled, { css, keyframes } from "styled-components/macro";
 
 import { createPortal, useCallback, useEffect, useState } from "preact/compat";
 
+import { Button } from "@revoltchat/ui";
+import { Props as ButtonProps } from "@revoltchat/ui/esm/components/design/atoms/inputs/Button";
+
 import { internalSubscribe } from "../../lib/eventEmitter";
 
 import { Children } from "../../types/Preact";
-import Button, { ButtonProps } from "./Button";
 
 const open = keyframes`
     0% {opacity: 0;}
@@ -145,7 +147,11 @@ const ModalActions = styled.div`
     border-radius: 0 0 var(--border-radius) var(--border-radius);
 `;
 
-export type Action = Omit<ButtonProps, "onClick"> & {
+export type Action = Omit<
+    JSX.HTMLAttributes<HTMLButtonElement>,
+    "as" | "onClick"
+> & {
+    palette?: ButtonProps["palette"];
     confirmation?: boolean;
     onClick: () => void;
 };
@@ -163,6 +169,7 @@ interface Props {
     onClose?: () => void;
     actions?: Action[];
     disabled?: boolean;
+    palette?: ButtonProps["palette"];
     border?: boolean;
     visible: boolean;
 }
@@ -241,6 +248,7 @@ export default function Modal(props: Props) {
                     <ModalActions>
                         {props.actions.map((x, index) => (
                             <Button
+                                palette={props.palette}
                                 key={index}
                                 {...x}
                                 disabled={props.disabled}

src/context/intermediate/modals/ExternalLinkPrompt.tsx

@@ -27,8 +27,7 @@ export function ExternalLinkModal({ onClose, link }: Props) {
                         onClose();
                     },
                     confirmation: true,
-                    contrast: true,
-                    accent: true,
+                    palette: "accent",
                     children: "Continue",
                 },
                 {
@@ -46,7 +45,7 @@ export function ExternalLinkModal({ onClose, link }: Props) {
                         openLink(link, true);
                         onClose();
                     },
-                    plain: true,
+                    palette: "plain",
                     children: (
                         <Text id="app.special.modals.external_links.trust_domain" />
                     ),

src/context/intermediate/modals/Onboarding.tsx

@@ -4,7 +4,8 @@ import styles from "./Onboarding.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import Button from "../../../components/ui/Button";
+import { Button } from "@revoltchat/ui";
+
 import Preloader from "../../../components/ui/Preloader";
 import wideSVG from "/assets/wide.svg";
 

src/context/intermediate/modals/Prompt.tsx

@@ -135,8 +135,7 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                     actions={[
                         {
                             confirmation: true,
-                            contrast: true,
-                            error: true,
+                            palette: "error",
                             children: (
                                 <Text
                                     id={`app.special.modals.actions.${event[1]}`}
@@ -201,8 +200,7 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                     actions={[
                         {
                             confirmation: true,
-                            contrast: true,
-                            error: true,
+                            palette: "error",
                             children: (
                                 <Text id="app.special.modals.actions.delete" />
                             ),
@@ -223,7 +221,7 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 <Text id="app.special.modals.actions.cancel" />
                             ),
                             onClick: onClose,
-                            plain: true,
+                            palette: "plain",
                         },
                     ]}
                     content={
@@ -304,8 +302,7 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                             children: (
                                 <Text id="app.special.modals.actions.kick" />
                             ),
-                            contrast: true,
-                            error: true,
+                            palette: "error",
                             confirmation: true,
                             onClick: async () => {
                                 setProcessing(true);
@@ -358,8 +355,8 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                             children: (
                                 <Text id="app.special.modals.actions.ban" />
                             ),
-                            contrast: true,
-                            error: true,
+                            palette: "error",
+
                             confirmation: true,
                             onClick: async () => {
                                 setProcessing(true);
@@ -417,7 +414,8 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                     actions={[
                         {
                             confirmation: true,
-                            contrast: true,
+                            palette: "secondary",
+
                             children: (
                                 <Text id="app.special.modals.actions.create" />
                             ),
@@ -492,7 +490,7 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                     actions={[
                         {
                             confirmation: true,
-                            contrast: true,
+                            palette: "secondary",
                             children: (
                                 <Text id="app.special.modals.actions.create" />
                             ),

src/context/intermediate/modals/SessionsPrompt.tsx

@@ -7,32 +7,31 @@ interface Props {
     confirm: () => void;
 }
 
-export function SessionsModal({ onClose, confirm}: Props) {
+export function SessionsModal({ onClose, confirm }: Props) {
     return (
         <Modal
-        visible={true}
-        onClose={onClose}
-        title={<Text id={"app.special.modals.sessions.title"} />}
-        actions={[
-            {
-                onClick: () => {
-                    onClose()
+            visible={true}
+            onClose={onClose}
+            title={<Text id={"app.special.modals.sessions.title"} />}
+            actions={[
+                {
+                    onClick: () => {
+                        onClose();
+                    },
+                    confirmation: true,
+                    palette: "accent",
+                    children: <Text id="app.special.modals.actions.back" />,
                 },
-                confirmation: true,
-                contrast: true,
-                accent: true,
-                children: <Text id="app.special.modals.actions.back"/>
-            },
-            {
-                onClick: () => {
-                    confirm()
-                    onClose()
+                {
+                    onClick: () => {
+                        confirm();
+                        onClose();
+                    },
+                    confirmation: true,
+                    children: <Text id="app.special.modals.sessions.accept" />,
                 },
-                confirmation: true,
-                children: <Text id="app.special.modals.sessions.accept"/>
-            }
-        ]}>
-        <Text id="app.special.modals.sessions.short" /> <br />
+            ]}>
+            <Text id="app.special.modals.sessions.short" /> <br />
         </Modal>
-    )   
+    );
 }

src/context/intermediate/popovers/CreateBot.tsx

@@ -43,13 +43,12 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
             actions={[
                 {
                     confirmation: true,
-                    contrast: true,
-                    accent: true,
+                    palette: "accent",
                     onClick: handleSubmit(onSubmit),
                     children: <Text id="app.special.modals.actions.create" />,
                 },
                 {
-                    plain: true,
+                    palette: "plain",
                     onClick: onClose,
                     children: <Text id="app.special.modals.actions.cancel" />,
                 },

src/context/intermediate/popovers/ModifyAccount.tsx

@@ -88,7 +88,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                 {
                     onClick: onClose,
                     children: <Text id="app.special.modals.actions.cancel" />,
-                    plain: true,
+                    palette: "plain",
                 },
             ]}>
             {/* Preact / React typing incompatabilities */}

src/context/intermediate/popovers/ServerIdentityModal.tsx

@@ -5,9 +5,10 @@ import styles from "./ServerIdentityModal.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
+import { Button } from "@revoltchat/ui";
+
 import { noop } from "../../../lib/js";
 
-import Button from "../../../components/ui/Button";
 import InputBox from "../../../components/ui/InputBox";
 import Modal from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
@@ -95,7 +96,7 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
                         </Button>
                         {currentNickname !== "" && (
                             <Button
-                                plain
+                                palette="plain"
                                 onClick={() =>
                                     member.edit({ remove: ["Nickname"] })
                                 }>

src/context/intermediate/popovers/UserProfile.tsx

@@ -15,6 +15,8 @@ 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 { noop } from "../../../lib/js";
 
 import ChannelIcon from "../../../components/common/ChannelIcon";
@@ -24,7 +26,6 @@ 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 Button from "../../../components/ui/Button";
 import IconButton from "../../../components/ui/IconButton";
 import Modal from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
@@ -195,7 +196,10 @@ export const UserProfile = observer(
                         </div>
                         {isPublicBot && (
                             <Link to={`/bot/${user._id}`}>
-                                <Button accent compact onClick={onClose}>
+                                <Button
+                                    palette="accent"
+                                    compact
+                                    onClick={onClose}>
                                     Add to server
                                 </Button>
                             </Link>

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>

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("/");

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

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>

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;

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>

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>

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

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({

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={() => {

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

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({

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

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({

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>

tsconfig.json

@@ -19,5 +19,5 @@
         "types": ["vite-plugin-pwa/client"],
         "experimentalDecorators": true
     },
-    "include": ["src", "ui/ui.tsx", "external/lang/Languages.ts"]
+    "include": ["src", "external/lang/Languages.ts"]
 }

ui/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Revolt UI</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/ui/ui.tsx"></script>
-  </body>
-</html>

ui/ui.tsx

@@ -1,87 +0,0 @@
-import styled from "styled-components/macro";
-
-import "../src/styles/index.scss";
-import { render } from "preact";
-import { useState } from "preact/hooks";
-
-import Theme from "../src/context/Theme";
-
-import Banner from "../src/components/ui/Banner";
-import Button from "../src/components/ui/Button";
-import Checkbox from "../src/components/ui/Checkbox";
-import ColourSwatches from "../src/components/ui/ColourSwatches";
-import ComboBox from "../src/components/ui/ComboBox";
-import InputBox from "../src/components/ui/InputBox";
-import Overline from "../src/components/ui/Overline";
-import Radio from "../src/components/ui/Radio";
-import Tip from "../src/components/ui/Tip";
-
-export const UIDemo = styled.div`
-    gap: 12px;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-`;
-
-export function UI() {
-    let [checked, setChecked] = useState(false);
-    let [colour, setColour] = useState("#FD6671");
-    let [selected, setSelected] = useState<"a" | "b" | "c">("a");
-
-    return (
-        <>
-            <Button>Button (normal)</Button>
-            <Button contrast>Button (contrast)</Button>
-            <Button error>Button (error)</Button>
-            <Button contrast error>
-                Button (contrast + error)
-            </Button>
-            <Banner>I am a banner!</Banner>
-            <Checkbox
-                checked={checked}
-                onChange={setChecked}
-                description="ok gamer">
-                Do you want thing??
-            </Checkbox>
-            <ComboBox>
-                <option>Select an option.</option>
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-            </ComboBox>
-            <InputBox placeholder="Normal input box..." />
-            <InputBox placeholder="Contrast input box..." contrast />
-            <InputBox value="Input box with value" />
-            <InputBox value="Contrast with value" contrast />
-            <ColourSwatches value={colour} onChange={(v) => setColour(v)} />
-            <Tip hideSeparator>I am a tip! I provide valuable information.</Tip>
-            <Radio checked={selected === "a"} onSelect={() => setSelected("a")}>
-                First option
-            </Radio>
-            <Radio checked={selected === "b"} onSelect={() => setSelected("b")}>
-                Second option
-            </Radio>
-            <Radio checked={selected === "c"} onSelect={() => setSelected("c")}>
-                Last option
-            </Radio>
-            <Overline>Normal overline</Overline>
-            <Overline type="subtle">Subtle overline</Overline>
-            <Overline type="error">Error overline</Overline>
-            <Overline error="with error">Normal overline</Overline>
-            <Overline type="subtle" error="with error">
-                Subtle overline
-            </Overline>
-        </>
-    );
-}
-
-render(
-    <>
-        <UIDemo>
-            <UI />
-        </UIDemo>
-        <Theme />
-    </>,
-    document.getElementById("app")!,
-);

vite.config.ts

@@ -119,7 +119,6 @@ export default defineConfig({
         rollupOptions: {
             input: {
                 main: resolve(__dirname, "index.html"),
-                ui: resolve(__dirname, "ui/index.html"),
             },
         },
     },