web: fix themes tab (#1756)

This commit is contained in:
TheKodeToad 2023-09-26 20:47:12 +01:00 committed by GitHub
parent 608a67c9ae
commit 837d1fc083
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 13 deletions

View file

@ -236,3 +236,22 @@ export function ReplyIcon(props: IconProps) {
</Icon> </Icon>
); );
} }
export function DeleteIcon(props: IconProps) {
return (
<Icon
{...props}
className={classes(props.className, "vc-delete-icon")}
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z"
/>
<path
fill="currentColor"
d="M5 6.99902V18.999C5 20.101 5.897 20.999 7 20.999H17C18.103 20.999 19 20.101 19 18.999V6.99902H5ZM11 17H9V11H11V17ZM15 17H13V11H15V17Z"
/>
</Icon>
);
}

View file

@ -20,6 +20,7 @@ import { useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles"; import { classNameFactory } from "@api/Styles";
import { ErrorCard } from "@components/ErrorCard"; import { ErrorCard } from "@components/ErrorCard";
import { Flex } from "@components/Flex"; import { Flex } from "@components/Flex";
import { DeleteIcon } from "@components/Icons";
import { Link } from "@components/Link"; import { Link } from "@components/Link";
import { IsFirefox } from "@utils/constants"; import { IsFirefox } from "@utils/constants";
import { Margins } from "@utils/margins"; import { Margins } from "@utils/margins";
@ -42,7 +43,6 @@ type FileInput = ComponentType<{
}>; }>;
const InviteActions = findByPropsLazy("resolveInvite"); const InviteActions = findByPropsLazy("resolveInvite");
const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999");
const FileInput: FileInput = findByCodeLazy("activateUploadDialogue="); const FileInput: FileInput = findByCodeLazy("activateUploadDialogue=");
const TextAreaProps = findLazy(m => typeof m.textarea === "string"); const TextAreaProps = findLazy(m => typeof m.textarea === "string");
@ -114,7 +114,7 @@ function ThemeCard({ theme, enabled, onChange, onDelete }: ThemeCardProps) {
infoButton={ infoButton={
IS_WEB && ( IS_WEB && (
<div style={{ cursor: "pointer", color: "var(--status-danger" }} onClick={onDelete}> <div style={{ cursor: "pointer", color: "var(--status-danger" }} onClick={onDelete}>
<TrashIcon /> <DeleteIcon />
</div> </div>
) )
} }

View file

@ -16,6 +16,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { DeleteIcon } from "@components/Icons";
import { classes } from "@utils/misc"; import { classes } from "@utils/misc";
import { findByPropsLazy } from "@webpack"; import { findByPropsLazy } from "@webpack";
import { Tooltip } from "@webpack/common"; import { Tooltip } from "@webpack/common";
@ -31,10 +32,7 @@ export function DeleteButton({ onClick }: { onClick(): void; }) {
className={classes(iconClasses.button, iconClasses.dangerous)} className={classes(iconClasses.button, iconClasses.dangerous)}
onClick={onClick} onClick={onClick}
> >
<svg width="16" height="16" viewBox="0 0 20 20"> <DeleteIcon width="20" height="20" />
<path fill="currentColor" d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z" />
<path fill="currentColor" d="M5 6.99902V18.999C5 20.101 5.897 20.999 7 20.999H17C18.103 20.999 19 20.101 19 18.999V6.99902H5ZM11 17H9V11H11V17ZM15 17H13V11H15V17Z" />
</svg>
</div> </div>
)} )}
</Tooltip> </Tooltip>
@ -50,8 +48,11 @@ export function ReportButton({ onClick }: { onClick(): void; }) {
className={iconClasses.button} className={iconClasses.button}
onClick={onClick} onClick={onClick}
> >
<svg width="16" height="16" viewBox="0 0 20 20"> <svg width="20" height="20" viewBox="0 0 24 24">
<path fill="currentColor" d="M20,6.002H14V3.002C14,2.45 13.553,2.002 13,2.002H4C3.447,2.002 3,2.45 3,3.002V22.002H5V14.002H10.586L8.293,16.295C8.007,16.581 7.922,17.011 8.076,17.385C8.23,17.759 8.596,18.002 9,18.002H20C20.553,18.002 21,17.554 21,17.002V7.002C21,6.45 20.553,6.002 20,6.002Z" /> <path
fill="currentColor"
d="M20,6.002H14V3.002C14,2.45 13.553,2.002 13,2.002H4C3.447,2.002 3,2.45 3,3.002V22.002H5V14.002H10.586L8.293,16.295C8.007,16.581 7.922,17.011 8.076,17.385C8.23,17.759 8.596,18.002 9,18.002H20C20.553,18.002 21,17.554 21,17.002V7.002C21,6.45 20.553,6.002 20,6.002Z"
/>
</svg> </svg>
</div> </div>
)} )}

View file

@ -20,6 +20,7 @@ import { DataStore } from "@api/index";
import { addPreSendListener, removePreSendListener } from "@api/MessageEvents"; import { addPreSendListener, removePreSendListener } from "@api/MessageEvents";
import { definePluginSettings } from "@api/Settings"; import { definePluginSettings } from "@api/Settings";
import { Flex } from "@components/Flex"; import { Flex } from "@components/Flex";
import { DeleteIcon } from "@components/Icons";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import { Logger } from "@utils/Logger"; import { Logger } from "@utils/Logger";
import { useForceUpdater } from "@utils/react"; import { useForceUpdater } from "@utils/react";
@ -173,6 +174,7 @@ function TextReplace({ title, rulesArray, rulesKey, update }: TextReplaceProps)
onClick={() => onClickRemove(index)} onClick={() => onClickRemove(index)}
style={{ style={{
background: "none", background: "none",
color: "var(--status-danger)",
...(index === rulesArray.length - 1 ...(index === rulesArray.length - 1
? { ? {
visibility: "hidden", visibility: "hidden",
@ -182,11 +184,7 @@ function TextReplace({ title, rulesArray, rulesKey, update }: TextReplaceProps)
) )
}} }}
> >
<svg width="24" height="24" viewBox="0 0 24 24"> <DeleteIcon />
<title>Delete Rule</title>
<path fill="var(--status-danger)" d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z" />
<path fill="var(--status-danger)" d="M5 6.99902V18.999C5 20.101 5.897 20.999 7 20.999H17C18.103 20.999 19 20.101 19 18.999V6.99902H5ZM11 17H9V11H11V17ZM15 17H13V11H15V17Z" />
</svg>
</Button> </Button>
</Flex> </Flex>
{isRegexRules && renderFindError(rule.find)} {isRegexRules && renderFindError(rule.find)}