diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index a5bda5fe..cd376ef5 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -104,6 +104,11 @@ const ModalContent = styled.div<
}
}
+ .description {
+ color: var(--tertiary-foreground);
+ font-size: 90%;
+ }
+
${(props) =>
!props.noBackground &&
css`
@@ -174,6 +179,7 @@ export default function Modal(props: Props) {
border={props.border}
padding={props.padding ?? !props.dontModal}>
{props.title &&
{props.title}
}
+
{props.description && {props.description}
}
{props.children}
diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx
index 17db47a7..ff190184 100644
--- a/src/context/intermediate/modals/Input.tsx
+++ b/src/context/intermediate/modals/Input.tsx
@@ -17,6 +17,7 @@ interface Props {
onClose: () => void;
question: Children;
field?: Children;
+ description?: Children;
defaultValue?: string;
callback: (value: string) => Promise;
}
@@ -25,6 +26,7 @@ export function InputModal({
onClose,
question,
field,
+ description,
defaultValue,
callback,
}: Props) {
@@ -36,6 +38,7 @@ export function InputModal({
}
field={}
+ description={
+
+ }
callback={async (name) => {
const server = await client.servers.createServer({
name,