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