diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx
index 7e4568dd..737dba5f 100644
--- a/src/components/settings/AppearanceShims.tsx
+++ b/src/components/settings/AppearanceShims.tsx
@@ -6,7 +6,7 @@ import pSBC from "shade-blend-color";
import { Text } from "preact-i18n";
-import { Checkbox, ColourSwatches, ComboBox } from "@revoltchat/ui";
+import { Checkbox, ColourSwatches, ComboBox, Radio } from "@revoltchat/ui";
import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
@@ -21,7 +21,6 @@ import {
MONOSPACE_FONT_KEYS,
} from "../../context/Theme";
-import Radio from "../ui/Radio";
import CategoryButton from "../ui/fluent/CategoryButton";
import { EmojiSelector } from "./appearance/EmojiSelector";
import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
@@ -117,19 +116,24 @@ export const DisplayCompactShim = () => {
+ }
description={
}
- checked>
-
-
+ value={true}
+ />
+ }
description={
}
- disabled>
-
-
+ value={false}
+ disabled
+ />
>
);
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
deleted file mode 100644
index 5681ec0c..00000000
--- a/src/components/ui/Radio.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Circle } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../types/Preact";
-
-interface Props {
- children: Children;
- description?: Children;
-
- checked?: boolean;
- disabled?: boolean;
- onSelect?: () => void;
-}
-
-interface BaseProps {
- selected: boolean;
-}
-
-const RadioBase = styled.label`
- gap: 4px;
- z-index: 1;
- padding: 4px;
- display: flex;
- cursor: pointer;
- align-items: center;
-
- font-size: 1rem;
- font-weight: 600;
- user-select: none;
- transition: 0.2s ease all;
- border-radius: var(--border-radius);
-
- &:hover {
- background: var(--hover);
- }
-
- > input {
- display: none;
- }
-
- > div {
- margin: 4px;
- width: 24px;
- height: 24px;
- display: grid;
- place-items: center;
- background: var(--foreground);
- border-radius: var(--border-radius-half);
-
- svg {
- color: var(--foreground);
- /*stroke-width: 2;*/
- }
- }
-
- ${(props) =>
- props.selected &&
- css`
- color: white;
- cursor: default;
- background: var(--accent);
-
- > div {
- background: white;
- }
-
- > div svg {
- color: var(--accent);
- }
-
- &:hover {
- background: var(--accent);
- }
- `}
-`;
-
-const RadioDescription = styled.span`
- font-size: 0.8em;
- font-weight: 400;
- color: var(--secondary-foreground);
-
- ${(props) =>
- props.selected &&
- css`
- color: white;
- `}
-`;
-
-export default function Radio(props: Props) {
- const selected = props.checked ?? false;
- return (
-
- !props.disabled && props.onSelect && props.onSelect()
- }>
-
-
-
-
-
- {props.children}
- {props.description && (
-
- {props.description}
-
- )}
-
-
- );
-}
diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx
index 6d0d8966..74c11b98 100644
--- a/src/context/intermediate/modals/Prompt.tsx
+++ b/src/context/intermediate/modals/Prompt.tsx
@@ -7,7 +7,7 @@ import styles from "./Prompt.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
-import { InputBox } from "@revoltchat/ui";
+import { InputBox, Radio } from "@revoltchat/ui";
import { TextReact } from "../../../lib/i18n";
@@ -15,7 +15,6 @@ import Message from "../../../components/common/messaging/Message";
import UserIcon from "../../../components/common/user/UserIcon";
import Modal, { Action } from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
-import Radio from "../../../components/ui/Radio";
import { Children } from "../../../types/Preact";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
@@ -457,15 +456,19 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
setType("Text")}>
-
-
+ title={
+
+ }
+ value={type === "Text"}
+ onSelect={() => setType("Text")}
+ />
setType("Voice")}>
-
-
+ title={
+
+ }
+ value={type === "Voice"}
+ onSelect={() => setType("Voice")}
+ />