diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index ecd4e7999f73a94e857ac925a7e2bdcbe798cf52..2b72e4ef768adaa724002a62d92b6066f95c2fb7 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -6,6 +6,8 @@ interface Props {
readonly error?: boolean;
}
+export type ButtonProps = Props & Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'as'>;
+
export default styled.button<Props>`
z-index: 1;
display: flex;
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 15f47e823c2c94a5f4b7f3f9f2005263caa2ec16..df77a07a11338db3af1b9e35ee52e4ac66e902e4 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -1,10 +1,9 @@
import styled, { css, keyframes } from "styled-components";
-import classNames from "classnames";
import { createPortal, useEffect } from "preact/compat";
import { Children } from "../../types/Preact";
-import Button from "./Button";
+import Button, { ButtonProps } from "./Button";
const open = keyframes`
0% {opacity: 0;}
@@ -100,12 +99,9 @@ const ModalActions = styled.div`
background: var(--secondary-background);
`;
-export interface Action {
- text: Children;
- onClick: () => void;
+export type Action = Omit<ButtonProps, 'onClick'> & {
confirmation?: boolean;
- contrast?: boolean;
- error?: boolean;
+ onClick: () => void;
}
interface Props {
@@ -181,15 +177,9 @@ export default function Modal(props: Props) {
{content}
{props.actions && (
<ModalActions>
- {props.actions.map((x) => (
- <Button
- contrast={x.contrast ?? true}
- error={x.error ?? false}
- onClick={x.onClick}
- disabled={props.disabled}>
- {x.text}
- </Button>
- ))}
+ {props.actions.map((x) =>
+ <Button {...x} disabled={props.disabled} />
+ )}
</ModalActions>
)}
</ModalContainer>
diff --git a/src/context/intermediate/modals/Clipboard.tsx b/src/context/intermediate/modals/Clipboard.tsx
index d84c43d347da500c87091c51c10fee8fcfea596c..03a7e0be8a806fdff4323fb10a1640edc32113a1 100644
--- a/src/context/intermediate/modals/Clipboard.tsx
+++ b/src/context/intermediate/modals/Clipboard.tsx
@@ -17,7 +17,7 @@ export function ClipboardModal({ onClose, text }: Props) {
{
onClick: onClose,
confirmation: true,
- text: <Text id="app.special.modals.actions.close" />,
+ children: <Text id="app.special.modals.actions.close" />,
},
]}>
{location.protocol !== "https:" && (
diff --git a/src/context/intermediate/modals/Error.tsx b/src/context/intermediate/modals/Error.tsx
index 64cadebcddb7dc15c6fb780bd44aec48a0925639..bef27eb7bef0dd47b515ee4e0dde3cd2acf34d84 100644
--- a/src/context/intermediate/modals/Error.tsx
+++ b/src/context/intermediate/modals/Error.tsx
@@ -17,11 +17,11 @@ export function ErrorModal({ onClose, error }: Props) {
{
onClick: onClose,
confirmation: true,
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
},
{
onClick: () => location.reload(),
- text: <Text id="app.special.modals.actions.reload" />,
+ children: <Text id="app.special.modals.actions.reload" />,
},
]}>
<Text id={`error.${error}`}>{error}</Text>
diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx
index 9f2b37a71d6afa7a4c4c5e94cf5c519f0096128b..0af0163b865f07a1f0ed2a48002295ca7320ae1c 100644
--- a/src/context/intermediate/modals/Input.tsx
+++ b/src/context/intermediate/modals/Input.tsx
@@ -39,7 +39,7 @@ export function InputModal({
actions={[
{
confirmation: true,
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
onClick: () => {
setProcessing(true);
callback(value)
@@ -51,7 +51,7 @@ export function InputModal({
},
},
{
- text: <Text id="app.special.modals.actions.cancel" />,
+ children: <Text id="app.special.modals.actions.cancel" />,
onClick: onClose,
},
]}
@@ -155,7 +155,7 @@ export function SpecialInputModal(props: SpecialProps) {
status: {
...client.user?.status,
text: text.trim().length > 0 ? text : undefined,
- },
+ }
})
}
/>
diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx
index c09e1bb7408926c956f3448ae30c289f74006d01..de7adfd6bb508cc9dd8f61ca7d38ea5781a907bc 100644
--- a/src/context/intermediate/modals/Prompt.tsx
+++ b/src/context/intermediate/modals/Prompt.tsx
@@ -122,7 +122,7 @@ export function SpecialPromptModal(props: SpecialProps) {
confirmation: true,
contrast: true,
error: true,
- text: (
+ children: (
<Text
id={`app.special.modals.actions.${event[1]}`}
/>
@@ -165,7 +165,7 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
@@ -192,7 +192,7 @@ export function SpecialPromptModal(props: SpecialProps) {
confirmation: true,
contrast: true,
error: true,
- text: (
+ children: (
<Text id="app.special.modals.actions.delete" />
),
onClick: async () => {
@@ -212,10 +212,11 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
+ plain: true,
},
]}
content={
@@ -255,12 +256,12 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.create_invite`} />}
actions={[
{
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
confirmation: true,
onClick: onClose,
},
{
- text: <Text id="app.context_menu.copy_link" />,
+ children: <Text id="app.context_menu.copy_link" />,
onClick: () =>
writeClipboard(
`${window.location.protocol}//${window.location.host}/invite/${code}`,
@@ -291,7 +292,7 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.kick_member`} />}
actions={[
{
- text: <Text id="app.special.modals.actions.kick" />,
+ children: <Text id="app.special.modals.actions.kick" />,
contrast: true,
error: true,
confirmation: true,
@@ -311,7 +312,7 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
@@ -341,7 +342,7 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.ban_member`} />}
actions={[
{
- text: <Text id="app.special.modals.actions.ban" />,
+ children: <Text id="app.special.modals.actions.ban" />,
contrast: true,
error: true,
confirmation: true,
@@ -362,7 +363,7 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
@@ -404,7 +405,7 @@ export function SpecialPromptModal(props: SpecialProps) {
{
confirmation: true,
contrast: true,
- text: (
+ children: (
<Text id="app.special.modals.actions.create" />
),
onClick: async () => {
@@ -432,7 +433,7 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
diff --git a/src/context/intermediate/modals/SignedOut.tsx b/src/context/intermediate/modals/SignedOut.tsx
index 7c7f357737279667fe58dedd07685101f9e1e325..7b4979f6f81e30d43c3baf5fa5a518790f43f6c6 100644
--- a/src/context/intermediate/modals/SignedOut.tsx
+++ b/src/context/intermediate/modals/SignedOut.tsx
@@ -16,7 +16,7 @@ export function SignedOutModal({ onClose }: Props) {
{
onClick: onClose,
confirmation: true,
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
},
]}
/>
diff --git a/src/context/intermediate/popovers/ModifyAccount.tsx b/src/context/intermediate/popovers/ModifyAccount.tsx
index 2b8aaf2bf36603f81af165034478bc0dd16827e6..f07e23eb75e8ec0a04d45fb9bfa629beeea0a16c 100644
--- a/src/context/intermediate/popovers/ModifyAccount.tsx
+++ b/src/context/intermediate/popovers/ModifyAccount.tsx
@@ -71,7 +71,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
{
confirmation: true,
onClick: handleSubmit(onSubmit),
- text:
+ children:
field === "email" ? (
<Text id="app.special.modals.actions.send_email" />
) : (
@@ -80,7 +80,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
},
{
onClick: onClose,
- text: <Text id="app.special.modals.actions.close" />,
+ children: <Text id="app.special.modals.actions.close" />,
},
]}>
{/* Preact / React typing incompatabilities */}
diff --git a/src/context/intermediate/popovers/UserPicker.tsx b/src/context/intermediate/popovers/UserPicker.tsx
index 0dc0792a2ef4fe790b9b23e51d130c6d63849e20..748bdc0fb97ec877c235b2eef7ba71cff27cf19d 100644
--- a/src/context/intermediate/popovers/UserPicker.tsx
+++ b/src/context/intermediate/popovers/UserPicker.tsx
@@ -28,7 +28,7 @@ export function UserPicker(props: Props) {
onClose={props.onClose}
actions={[
{
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
onClick: () => props.callback(selected).then(props.onClose),
},
]}>