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>

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>