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