From b7f6e23fffefa358889f222f0d33bb6e0f1c0829 Mon Sep 17 00:00:00 2001 From: prism Date: Tue, 27 Jan 2026 15:21:12 +0100 Subject: [PATCH] update and add components (#691) * update: switch * add: notice * update: link * add: badge * update heading * update: basetext * update: card * fix: heading * components-dev: fix * lint * update: margins --- src/components/Badge.css | 54 +++++++ src/components/Badge.tsx | 40 ++++++ src/components/BaseText.css | 26 +++- src/components/BaseText.tsx | 45 ++++-- src/components/Card.css | 59 ++++++-- src/components/Card.tsx | 7 +- src/components/Heading.css | 51 +++---- src/components/Heading.tsx | 2 +- src/components/Link.css | 24 +++- src/components/Link.tsx | 27 +++- src/components/Notice.css | 114 +++++++++++++++ src/components/Notice.tsx | 135 ++++++++++-------- src/components/Switch.css | 14 +- src/components/Switch.tsx | 1 + src/components/margins.ts | 10 +- src/components/settings/AddonCard.tsx | 4 +- src/components/settings/OnlineThemeCard.tsx | 4 +- src/components/settings/PluginBadge.tsx | 29 ---- src/components/settings/index.ts | 2 +- .../settings/tabs/plugins/styles.css | 15 +- .../components/tabs/CardTab.tsx | 12 +- .../components.dev/constants.ts | 2 +- src/plugins/fixImagesQuality/index.tsx | 2 +- 23 files changed, 490 insertions(+), 189 deletions(-) create mode 100644 src/components/Badge.css create mode 100644 src/components/Badge.tsx create mode 100644 src/components/Notice.css delete mode 100644 src/components/settings/PluginBadge.tsx diff --git a/src/components/Badge.css b/src/components/Badge.css new file mode 100644 index 000000000..be4c3eb7a --- /dev/null +++ b/src/components/Badge.css @@ -0,0 +1,54 @@ +.vc-badge-base { + display: inline-flex; + align-items: center; + align-self: center; + gap: var(--space-4, 4px); + padding: 0 var(--space-8, 8px); + border-radius: var(--radius-round, 9999px); + box-sizing: border-box; + font-family: var(--font-display); + font-size: 12px; + font-weight: 700; + line-height: 1.3333; + letter-spacing: 0.02em; + text-align: center; + text-transform: uppercase; +} + +.vc-badge-icon { + width: 12px; + height: 12px; + flex-shrink: 0; +} + +/* Discord variants */ +.vc-badge-default { + background-color: var(--badge-background-brand); + color: var(--badge-text-brand); +} + +.vc-badge-expressive { + background-color: var(--badge-expressive-background-default); + color: var(--badge-expressive-text-default); +} + +/* Equicord variants */ +.vc-badge-danger { + background-color: var(--status-danger); + color: var(--white); +} + +.vc-badge-positive { + background-color: var(--status-positive); + color: var(--white); +} + +.vc-badge-warning { + background-color: var(--status-warning); + color: var(--black); +} + +.vc-badge-premium { + background-color: var(--premium-tier-2-purple-for-gradients); + color: var(--white); +} diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx new file mode 100644 index 000000000..0ba577451 --- /dev/null +++ b/src/components/Badge.tsx @@ -0,0 +1,40 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2026 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import "./Badge.css"; + +import { classNameFactory } from "@utils/css"; +import { classes } from "@utils/misc"; +import type { ComponentPropsWithoutRef, ComponentType, CSSProperties, ReactNode, SVGProps } from "react"; + +const cl = classNameFactory("vc-badge-"); + +export const BadgeVariants = ["default", "expressive", "danger", "positive", "warning", "premium"] as const; + +export type BadgeVariant = typeof BadgeVariants[number]; + +export type BadgeProps = Omit, "children"> & { + text: ReactNode; + variant?: BadgeVariant; + icon?: ComponentType & { size?: string; }>; + color?: string; + backgroundColor?: string; +}; + +export function Badge({ text, variant = "default", icon: Icon, className, color, backgroundColor, style, ...restProps }: BadgeProps) { + const customStyle: CSSProperties | undefined = (color || backgroundColor) ? { + ...style, + ...(color && { color }), + ...(backgroundColor && { backgroundColor }) + } : style; + + return ( +
+ {Icon && } + {text} +
+ ); +} diff --git a/src/components/BaseText.css b/src/components/BaseText.css index d322a5679..ebaba6455 100644 --- a/src/components/BaseText.css +++ b/src/components/BaseText.css @@ -1,8 +1,26 @@ .vc-text-base { font-family: var(--font-primary); color: var(--text-default); - line-height: normal; - - /* Discord puts an insane default margin on p tags, so reset that here */ margin: 0; -} \ No newline at end of file +} + +.vc-text-selectable { + user-select: text; +} + +.vc-text-line-clamp-1 { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.vc-text-line-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.vc-text-tabular-numbers { + font-variant-numeric: tabular-nums; +} diff --git a/src/components/BaseText.tsx b/src/components/BaseText.tsx index 78b961ea9..49a81b05c 100644 --- a/src/components/BaseText.tsx +++ b/src/components/BaseText.tsx @@ -14,13 +14,13 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react"; const textCls = classNameFactory("vc-text-"); export const TextSizes = { - xxs: "0.625rem", - xs: "0.75rem", - sm: "0.875rem", - md: "1rem", - lg: "1.25rem", - xl: "1.5rem", - xxl: "2rem" + xxs: { fontSize: "10px", lineHeight: "1.2" }, + xs: { fontSize: "12px", lineHeight: "1.33333" }, + sm: { fontSize: "14px", lineHeight: "1.28571" }, + md: { fontSize: "16px", lineHeight: "1.25" }, + lg: { fontSize: "20px", lineHeight: "1.2" }, + xl: { fontSize: "24px", lineHeight: "1.25" }, + xxl: { fontSize: "32px", lineHeight: "1.25" }, } as const; export const TextWeights = { @@ -42,6 +42,15 @@ export const TextColors = { "text-brand": "var(--text-brand)", "text-strong": "var(--text-strong)", "text-subtle": "var(--text-subtle)", + "text-invert": "var(--text-invert)", + "text-feedback-critical": "var(--text-feedback-critical)", + "text-feedback-info": "var(--text-feedback-info)", + "text-feedback-positive": "var(--text-feedback-positive)", + "text-feedback-warning": "var(--text-feedback-warning)", + "text-status-dnd": "var(--text-status-dnd)", + "text-status-idle": "var(--text-status-idle)", + "text-status-offline": "var(--text-status-offline)", + "text-status-online": "var(--text-status-online)", "control-text-critical": "var(--control-text-critical-secondary-default)", "control-text-primary": "var(--control-text-primary-default)", } as const; @@ -49,8 +58,8 @@ export const TextColors = { export function generateTextCss() { let css = ""; - for (const [size, value] of Object.entries(TextSizes)) { - css += `.${textCls(size)}{font-size:${value};}`; + for (const [size, { fontSize, lineHeight }] of Object.entries(TextSizes)) { + css += `.${textCls(size)}{font-size:${fontSize};line-height:${lineHeight};}`; } for (const [weight, value] of Object.entries(TextWeights)) { @@ -70,6 +79,9 @@ export type BaseTextProps = ComponentPropsWithoutRe weight?: TextWeight; color?: TextColor; tag?: Tag; + selectable?: boolean; + lineClamp?: number; + tabularNumbers?: boolean; }; export function BaseText(props: BaseTextProps): ReactNode { @@ -78,6 +90,9 @@ export function BaseText(props: BaseTextProps): Re weight = "normal", color, tag: Tag = "div", + selectable = false, + lineClamp, + tabularNumbers = false, children, className, style, @@ -86,10 +101,18 @@ export function BaseText(props: BaseTextProps): Re return ( 1 && textCls("line-clamp"), + tabularNumbers && textCls("tabular-numbers"), + className + )} style={{ ...style, - ...(color && { color: TextColors[color] }) + ...(color && { color: TextColors[color] }), + ...(lineClamp && lineClamp > 1 && { WebkitLineClamp: lineClamp }) }} {...restProps} > diff --git a/src/components/Card.css b/src/components/Card.css index 97e36ed84..bdd9ec7b0 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -1,20 +1,59 @@ .vc-card-base { - background: var(--card-background-default); - border-radius: var(--radius-sm, 8px) + border-style: solid; + border-width: 1px; + border-radius: var(--radius-sm); + position: relative; } -.vc-card-normal { - border: 1px solid var(--border-subtle); -} - -.vc-card-warning { - border: 1px solid var(--icon-status-idle); +.vc-card-primary { + background-color: var(--card-background-default); + border-color: var(--border-subtle); + color: var(--text-default); } .vc-card-danger { - border: 1px solid var(--icon-status-dnd); + background-color: var(--background-feedback-critical); + border-color: var(--background-feedback-critical); + color: var(--text-feedback-critical); +} + +.vc-card-warning { + background-color: var(--background-feedback-warning); + border-color: var(--background-feedback-warning); + color: var(--text-feedback-warning); +} + +.vc-card-success { + background-color: var(--background-feedback-positive); + border-color: var(--background-feedback-positive); + color: var(--text-feedback-positive); +} + +.vc-card-brand { + background-color: var(--brand-500); + border-color: var(--brand-500); +} + +.vc-card-outline { + background-color: transparent; +} + +.vc-card-base a { + color: var(--text-link); +} + +.vc-card-danger a, +.vc-card-warning a, +.vc-card-success a, +.vc-card-brand a { + color: var(--white); + font-weight: var(--font-weight-bold); +} + +.vc-card-base a:hover { + text-decoration: underline; } .vc-card-defaultPadding { padding: 1em; -} \ No newline at end of file +} diff --git a/src/components/Card.tsx b/src/components/Card.tsx index dfa6caaa0..930afa9f5 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -13,18 +13,19 @@ import { ComponentPropsWithRef } from "react"; const cl = classNameFactory("vc-card-"); export interface CardProps extends ComponentPropsWithRef<"div"> { - variant?: "normal" | "warning" | "danger"; + variant?: "primary" | "warning" | "danger" | "success" | "brand"; + outline?: boolean; /** Add a default padding of 1em to the card. This is implied if no className prop is passed */ defaultPadding?: boolean; } -export function Card({ variant = "normal", defaultPadding, children, className, ...restProps }: CardProps) { +export function Card({ variant = "primary", outline = false, defaultPadding, children, className, ...restProps }: CardProps) { const addDefaultPadding = defaultPadding != null ? defaultPadding : !className; return ( -
+
{children}
); diff --git a/src/components/Heading.css b/src/components/Heading.css index c15fee0d6..aa516d368 100644 --- a/src/components/Heading.css +++ b/src/components/Heading.css @@ -1,51 +1,40 @@ .vc-h1, -.vc-h2 { - color: var(--text-strong); - font-weight: 600; -} - +.vc-h2, .vc-h3, .vc-h4, .vc-h5 { color: var(--text-strong); + font-family: var(--font-display); } .vc-h1 { font-size: 20px; - line-height: 24px + font-weight: 600; + line-height: 1.2; } .vc-h2 { font-size: 16px; - line-height: 20px + font-weight: 600; + line-height: 1.25; } .vc-h3 { - font-weight: 500; - line-height: 24px -} - -.vc-h3, -.vc-h4 { - font-size: 16px -} - -.vc-h4 { - font-weight: 600; - letter-spacing: .3px -} - -.vc-h4, -.vc-h5 { - line-height: 20px -} - -.vc-h5 { - color: var(--text-strong); font-size: 16px; font-weight: 500; - margin-bottom: 8px; - text-transform: unset + line-height: 1.25; +} + +.vc-h4 { + font-size: 16px; + font-weight: 600; + line-height: 1.25; +} + +.vc-h5 { + font-size: 16px; + font-weight: 500; + line-height: 1.25; } .vc-h1-defaultMargin, @@ -62,4 +51,4 @@ .vc-h3-defaultMargin, .vc-h5-defaultMargin { margin-bottom: 8px -} \ No newline at end of file +} diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx index 23fda424e..8c474b3e6 100644 --- a/src/components/Heading.tsx +++ b/src/components/Heading.tsx @@ -29,7 +29,7 @@ export function Heading(props: HeadingProps) { } = props; return ( - + {children} ); diff --git a/src/components/Link.css b/src/components/Link.css index e222316e5..86db022d4 100644 --- a/src/components/Link.css +++ b/src/components/Link.css @@ -1,10 +1,9 @@ .vc-link { color: var(--text-link); - text-decoration: none; - cursor: pointer; + text-decoration: var(--link-decoration); } -.vc-link:hover { +.vc-link-underline-on-hover:hover { text-decoration: underline; } @@ -12,3 +11,22 @@ pointer-events: none; opacity: 0.5; } + +/* Forced colors mode (high contrast accessibility) */ +.enable-forced-colors .vc-link, +.enable-forced-colors .vc-link-underline-on-hover { + background-color: canvas; + text-decoration: underline; + color: linktext !important; +} + +.enable-forced-colors .vc-link svg, +.enable-forced-colors .vc-link-underline-on-hover svg { + color: currentcolor; +} + +.enable-forced-colors .vc-link:not([href]), +.enable-forced-colors .vc-link-underline-on-hover:not([href]) { + background-color: buttonface; + color: buttontext !important; +} diff --git a/src/components/Link.tsx b/src/components/Link.tsx index cbcbe5573..cad60bb6e 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -11,15 +11,34 @@ import type { AnchorHTMLAttributes, PropsWithChildren } from "react"; export interface LinkProps extends AnchorHTMLAttributes { disabled?: boolean; + useDefaultUnderlineStyles?: boolean; } -export function Link({ disabled, className, children, ...restProps }: PropsWithChildren) { +export function Link({ + disabled, + useDefaultUnderlineStyles = true, + href, + rel, + target, + className, + children, + ...restProps +}: PropsWithChildren) { + const isInternal = href && /^(?:discord:\/)?\/[a-zA-Z0-9_-]/.test(href); + const needsSafeAttrs = href && !isInternal; + return ( diff --git a/src/components/Notice.css b/src/components/Notice.css new file mode 100644 index 000000000..7554b4eff --- /dev/null +++ b/src/components/Notice.css @@ -0,0 +1,114 @@ +.vc-notice-container { + border-radius: var(--radius-sm, 8px); + box-sizing: border-box; + display: grid; + font-weight: 500; + grid-template-rows: 1fr; + padding: 8px; + width: 100%; + transition-duration: var(--expand-structural-duration, 0.2s); + transition-property: grid-template-rows, padding-bottom, padding-top, border-width; + transition-timing-function: var(--expand-easing-function, ease); +} + +.vc-notice-hidden { + border-width: 0; + grid-template-rows: 0fr; + padding-bottom: 0; + padding-top: 0; + transition-delay: var(--collapse-fade-duration, 0.1s); + transition-duration: var(--collapse-structural-duration, 0.2s); + transition-timing-function: var(--collapse-easing-function, ease); +} + +.vc-notice-inner { + display: flex; + min-height: 0; + opacity: 1; + overflow: hidden; + transition: opacity var(--expand-fade-duration, 0.1s) var(--expand-easing-function, ease) var(--expand-structural-duration, 0.2s); +} + +.vc-notice-hidden .vc-notice-inner { + opacity: 0; + transition-delay: 0s; + transition-duration: var(--collapse-fade-duration, 0.1s); + transition-timing-function: var(--collapse-easing-function, ease); +} + +.vc-notice-icon-wrapper { + display: flex; +} + +.vc-notice-icon { + flex-shrink: 0; + width: 20px; + height: 20px; +} + +.vc-notice-text { + align-self: center; + flex: 1 1 0%; + margin-left: var(--space-8, 8px); + font-family: var(--font-primary); + font-size: 14px; + font-weight: 500; + line-height: 1.2857; + color: var(--text-default); +} + +.vc-notice-text p { + margin: 0; +} + +.vc-notice-text p~p { + margin-top: 8px; +} + +.vc-notice-action { + margin: auto 0 auto 16px; +} + +/* Info variant */ +.vc-notice-info { + background: var(--background-feedback-info); + border: 1px solid var(--icon-feedback-info); + color: var(--text-feedback-info); +} + +.vc-notice-info .vc-notice-icon { + color: var(--icon-feedback-info); +} + +/* Warning variant */ +.vc-notice-warning { + background: var(--background-feedback-warning); + border: 1px solid var(--icon-feedback-warning); + color: var(--text-feedback-warning); +} + +.vc-notice-warning .vc-notice-icon { + color: var(--icon-feedback-warning); +} + +/* Danger variant */ +.vc-notice-danger { + background: var(--background-feedback-critical); + border: 1px solid var(--icon-feedback-critical); + color: var(--text-feedback-critical); +} + +.vc-notice-danger .vc-notice-icon { + color: var(--icon-feedback-critical); +} + +/* Positive variant */ +.vc-notice-positive { + background: var(--background-feedback-positive); + border: 1px solid var(--icon-feedback-positive); + color: var(--text-feedback-positive); +} + +.vc-notice-positive .vc-notice-icon { + color: var(--icon-feedback-positive); +} diff --git a/src/components/Notice.tsx b/src/components/Notice.tsx index 296bd7b7f..052597bbb 100644 --- a/src/components/Notice.tsx +++ b/src/components/Notice.tsx @@ -4,69 +4,88 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import { filters, mapMangledModuleLazy } from "@webpack"; -import type { ComponentType, CSSProperties, ReactNode } from "react"; +import "./Notice.css"; -export type NoticeType = "warn" | "info" | "danger" | "positive" | "preview"; +import { classNameFactory } from "@utils/css"; +import { classes } from "@utils/misc"; +import type { ComponentPropsWithoutRef, ComponentType, ReactNode, SVGProps } from "react"; -export const NoticeTypes: Record<"WARNING" | "INFO" | "ERROR" | "POSITIVE" | "PREVIEW", NoticeType> = { - WARNING: "warn", - INFO: "info", - ERROR: "danger", - POSITIVE: "positive", - PREVIEW: "preview" -}; +const cl = classNameFactory("vc-notice-"); -const { HelpMessage } = mapMangledModuleLazy('POSITIVE="positive"', { - HelpMessage: filters.byCode("messageType:") -}); +export const NoticeVariants = ["info", "warning", "danger", "positive"] as const; -export interface NoticeProps { +export type NoticeVariant = typeof NoticeVariants[number]; + +export type NoticeProps = Omit, "children"> & { children: ReactNode; - className?: string; - style?: CSSProperties; - icon?: ComponentType<{ className?: string; color?: string; }>; + variant?: NoticeVariant; + icon?: ComponentType>; action?: ReactNode; - textColor?: string; - textVariant?: string; hidden?: boolean; -} - -function Warning({ children, className, style, icon, action, textColor, textVariant, hidden }: NoticeProps) { - return ( - - ); -} - -function Info({ children, className, style, icon, action, textColor, textVariant, hidden }: NoticeProps) { - return ( - - ); -} - -function Error({ children, className, style, icon, action, textColor, textVariant, hidden }: NoticeProps) { - return ( - - ); -} - -function Positive({ children, className, style, icon, action, textColor, textVariant, hidden }: NoticeProps) { - return ( - - ); -} - -export const Notice = { - Warning, - Info, - Error, - Positive }; + +function InfoIcon(props: SVGProps) { + return ( + + ); +} + +function WarningIcon(props: SVGProps) { + return ( + + ); +} + +function DangerIcon(props: SVGProps) { + return ( + + ); +} + +function PositiveIcon(props: SVGProps) { + return ( + + ); +} + +const DefaultIcons: Record>> = { + info: InfoIcon, + warning: WarningIcon, + danger: DangerIcon, + positive: PositiveIcon +}; + +export function Notice({ children, variant = "info", icon, action, hidden = false, className, ...restProps }: NoticeProps) { + const Icon = icon ?? DefaultIcons[variant]; + + return ( + + ); +} + +Notice.Info = (props: Omit) => ; +Notice.Warning = (props: Omit) => ; +Notice.Danger = (props: Omit) => ; +Notice.Positive = (props: Omit) => ; diff --git a/src/components/Switch.css b/src/components/Switch.css index e019962c4..afc964a19 100644 --- a/src/components/Switch.css +++ b/src/components/Switch.css @@ -16,6 +16,11 @@ transition: background-color 200ms ease, border-color 200ms ease; } +.vc-switch-checked .vc-switch-indicator { + background: var(--switch-background-selected-default); + border-color: var(--switch-border-selected-default); +} + .vc-switch-disabled { cursor: not-allowed; opacity: 0.5; @@ -29,17 +34,12 @@ box-shadow: 0 0 0 2px var(--border-focus, #00a8fc); } -.vc-switch-indicator:hover { +.vc-switch-container:hover .vc-switch-indicator { background: var(--switch-background-hover); border-color: var(--switch-border-hover); } -.vc-switch-checked .vc-switch-indicator { - background: var(--switch-background-selected-default); - border-color: var(--switch-border-selected-default); -} - -.vc-switch-checked .vc-switch-indicator:hover { +.vc-switch-checked:hover .vc-switch-indicator { background: var(--switch-background-selected-hover); border-color: var(--switch-border-selected-hover); } diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx index e0283879e..f3fe0e3e5 100644 --- a/src/components/Switch.tsx +++ b/src/components/Switch.tsx @@ -29,6 +29,7 @@ export interface SwitchProps { onChange: (checked: boolean) => void; disabled?: boolean; id?: string; + // checkmark/x icon in thumb hasIcon?: boolean; innerRef?: Ref; "aria-describedby"?: string; diff --git a/src/components/margins.ts b/src/components/margins.ts index 1ac7aceb4..9a1bcf03f 100644 --- a/src/components/margins.ts +++ b/src/components/margins.ts @@ -21,12 +21,12 @@ import { classNameFactory } from "@utils/css"; const marginCls = classNameFactory("vc-margin-"); const Directions = ["top", "bottom", "left", "right"] as const; -const Sizes = [8, 16, 20] as const; +const Sizes = [4, 8, 16, 20, 24, 40, 60] as const; export type MarginDirection = (typeof Directions)[number]; export type MarginSize = (typeof Sizes)[number]; -export const Margins: Record<`${MarginDirection}${MarginSize}`, string> = {} as any; +export const Margins = {} as Record<`${MarginDirection}${MarginSize}` | "reset" | "centerHorz", string>; export function generateMarginCss() { let css = ""; @@ -39,5 +39,11 @@ export function generateMarginCss() { } } + Margins.reset = marginCls("reset"); + css += `.${Margins.reset}{margin:0;}`; + + Margins.centerHorz = marginCls("center-horz"); + css += `.${Margins.centerHorz}{margin-left:auto;margin-right:auto;}`; + return css; } diff --git a/src/components/settings/AddonCard.tsx b/src/components/settings/AddonCard.tsx index c99452252..b17b62207 100644 --- a/src/components/settings/AddonCard.tsx +++ b/src/components/settings/AddonCard.tsx @@ -18,8 +18,8 @@ import "./AddonCard.css"; +import { Badge } from "@components/Badge"; import { BaseText } from "@components/BaseText"; -import { AddonBadge } from "@components/settings/PluginBadge"; import { Switch } from "@components/Switch"; import { classNameFactory } from "@utils/css"; import { Tooltip, useRef } from "@webpack/common"; @@ -72,7 +72,7 @@ export function AddonCard({ disabled, isNew, sourceBadge, tooltip, name, infoBut {name}
- {isNew && } + {isNew && } {!!author && ( diff --git a/src/components/settings/OnlineThemeCard.tsx b/src/components/settings/OnlineThemeCard.tsx index 62dbc297e..cb7ac2d96 100644 --- a/src/components/settings/OnlineThemeCard.tsx +++ b/src/components/settings/OnlineThemeCard.tsx @@ -18,9 +18,9 @@ import "./AddonCard.css"; +import { Badge } from "@components/Badge"; import { BaseText } from "@components/BaseText"; import { Switch } from "@components/settings"; -import { AddonBadge } from "@components/settings/PluginBadge"; import { classNameFactory } from "@utils/css"; import { useRef } from "@webpack/common"; import type { MouseEventHandler, ReactNode } from "react"; @@ -101,7 +101,7 @@ export function OnlineThemeCard({ )} - {isNew && } + {isNew && } {!!author && ( diff --git a/src/components/settings/PluginBadge.tsx b/src/components/settings/PluginBadge.tsx deleted file mode 100644 index 5208fdea9..000000000 --- a/src/components/settings/PluginBadge.tsx +++ /dev/null @@ -1,29 +0,0 @@ -/* - * Vencord, a modification for Discord's desktop app - * Copyright (c) 2022 Vendicated and contributors - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . -*/ - -export function AddonBadge({ text, color }) { - return ( -
- {text} -
- ); -} diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts index 647721219..1ef7ea7b6 100644 --- a/src/components/settings/index.ts +++ b/src/components/settings/index.ts @@ -4,10 +4,10 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +export * from "../Badge"; export * from "../Switch"; export * from "./AddonCard"; export * from "./DonateButton"; -export * from "./PluginBadge"; export * from "./QuickAction"; export * from "./SpecialCard"; export * from "./tabs"; diff --git a/src/components/settings/tabs/plugins/styles.css b/src/components/settings/tabs/plugins/styles.css index 8db3a3fae..27e512395 100644 --- a/src/components/settings/tabs/plugins/styles.css +++ b/src/components/settings/tabs/plugins/styles.css @@ -48,19 +48,6 @@ grid-template-columns: 1fr 150px; } -.vc-addon-badge { - padding: 0 6px; - font-family: var(--font-display); - font-weight: 500; - border-radius: 8px; - height: 16px; - font-size: 12px; - line-height: 16px; - color: var(--white-500); - text-align: center; - margin-right: 8px; -} - .vc-plugins-dep-name { margin: 0 auto; } @@ -298,4 +285,4 @@ .vc-plugins-ui-elements { margin-top: 16px; -} \ No newline at end of file +} diff --git a/src/equicordplugins/components.dev/components/tabs/CardTab.tsx b/src/equicordplugins/components.dev/components/tabs/CardTab.tsx index 8ff0485db..bc3029103 100644 --- a/src/equicordplugins/components.dev/components/tabs/CardTab.tsx +++ b/src/equicordplugins/components.dev/components/tabs/CardTab.tsx @@ -22,9 +22,11 @@ export default function CardTab() { This is a {variant} card variant. Use for { - variant === "normal" ? "general content" : + variant === "primary" ? "general content" : variant === "warning" ? "cautionary messages" : - "error or destructive actions" + variant === "danger" ? "error or destructive actions" : + variant === "success" ? "positive feedback" : + "branded content" }. @@ -60,7 +62,7 @@ export default function CardTab() { Cards can be nested for complex layouts. - + Outer Card Nested warning card @@ -76,7 +78,7 @@ export default function CardTab() { Cards accept custom className and style props. - • variant - "normal" | "warning" | "danger" (default: "normal") + • variant - "primary" | "warning" | "danger" | "success" | "brand" (default: "primary") • defaultPadding - Add 1em padding (default: true if no className) • className - Custom CSS class • style - Inline styles diff --git a/src/equicordplugins/components.dev/constants.ts b/src/equicordplugins/components.dev/constants.ts index 85e9348ca..6577cfc0a 100644 --- a/src/equicordplugins/components.dev/constants.ts +++ b/src/equicordplugins/components.dev/constants.ts @@ -22,7 +22,7 @@ export type AvatarStatus = typeof AvatarStatuses[number]; export const GuildIconSizes = [16, 20, 24, 32, 40, 48, 56, 80, 96] as const; export type GuildIconSize = typeof GuildIconSizes[number]; -export const CardVariants = ["normal", "warning", "danger"] as const; +export const CardVariants = ["primary", "warning", "danger", "success", "brand"] as const; export type CardVariant = typeof CardVariants[number]; export const SpinnerTypes = ["wanderingCubes", "chasingDots", "pulsingEllipsis", "spinningCircle", "spinningCircleSimple", "lowMotion"] as const; diff --git a/src/plugins/fixImagesQuality/index.tsx b/src/plugins/fixImagesQuality/index.tsx index 98945c933..5215b68e9 100644 --- a/src/plugins/fixImagesQuality/index.tsx +++ b/src/plugins/fixImagesQuality/index.tsx @@ -39,7 +39,7 @@ export default definePlugin({ settingsAboutComponent() { return ( - + The default behaviour is the following: