chore: migrate Button to @revoltchat/ui (revoltchat#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 <[email protected]>
EmeraldSysDev · May 23, 2022 · be12c6d · be12c6d
1 parent 6fdd701
commit be12c6d
Show file tree

Hide file tree

Showing 34 changed files with 154 additions and 359 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -4,6 +4,7 @@ module.exports = {
     jsxBracketSameLine: true,
     importOrder: [
         "preact|classnames|.scss$",
+        "^@revoltchat",
         "/(lib)",
         "/(redux|mobx)",
         "/(context)",

diff --git a/src/components/common/AgeGate.tsx b/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)
                     }>

diff --git a/src/components/common/messaging/embed/EmbedInvite.tsx b/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";
 

diff --git a/src/components/navigation/right/Search.tsx b/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()}`}

diff --git a/src/components/settings/appearance/ThemeTools.tsx b/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();

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
diff --git a/src/components/ui/Modal.tsx b/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}

diff --git a/src/context/intermediate/modals/ExternalLinkPrompt.tsx b/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" />
                     ),

diff --git a/src/context/intermediate/modals/Onboarding.tsx b/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";