fix(modals): finally fixed width

This commit is contained in:
trashtemp 2022-01-15 22:19:29 +01:00
parent cc458453d3
commit 2bef311f9a
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
3 changed files with 20 additions and 5 deletions

View file

@ -80,7 +80,16 @@ const ModalContent = styled.div<
h3 { h3 {
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
margin-top: 0; margin: 0;
margin-bottom: 10px;
color: var(--foreground);
}
h5 {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--secondary-foreground);
} }
form { form {
@ -105,6 +114,7 @@ const ModalContent = styled.div<
props.padding && props.padding &&
css` css`
padding: 1rem; padding: 1rem;
min-width: 450px;
`} `}
${(props) => ${(props) =>
@ -138,6 +148,7 @@ export type Action = Omit<ButtonProps, "onClick"> & {
interface Props { interface Props {
children?: Children; children?: Children;
title?: Children; title?: Children;
description?: Children;
disallowClosing?: boolean; disallowClosing?: boolean;
noBackground?: boolean; noBackground?: boolean;
@ -163,6 +174,7 @@ export default function Modal(props: Props) {
border={props.border} border={props.border}
padding={props.padding ?? !props.dontModal}> padding={props.padding ?? !props.dontModal}>
{props.title && <h3>{props.title}</h3>} {props.title && <h3>{props.title}</h3>}
{props.description && <h5>{props.description}</h5>}
{props.children} {props.children}
</ModalContent> </ModalContent>
); );

View file

@ -228,9 +228,11 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
]} ]}
content={ content={
<> <>
<Text <h5>
id={`app.special.modals.prompt.confirm_delete_message_long`} <Text
/> id={`app.special.modals.prompt.confirm_delete_message_long`}
/>
</h5>
<Message <Message
message={props.target} message={props.target}
head={true} head={true}

View file

@ -87,7 +87,8 @@ export function ModifyAccountModal({ onClose, field }: Props) {
}, },
{ {
onClick: onClose, onClick: onClose,
children: <Text id="app.special.modals.actions.close" />, children: <Text id="app.special.modals.actions.cancel" />,
plain: true,
}, },
]}> ]}>
{/* Preact / React typing incompatabilities */} {/* Preact / React typing incompatabilities */}