diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx index 959a4d01e..371c3082c 100644 --- a/src/components/PluginSettings/index.tsx +++ b/src/components/PluginSettings/index.tsx @@ -69,7 +69,7 @@ function ReloadRequiredCard({ required }: { required: boolean; }) { Restart now to apply new plugins and their settings - @@ -158,8 +158,8 @@ export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, on className={classes(ButtonClasses.button, cl("info-button"))} > {plugin.options && !isObjectEmpty(plugin.options) - ? - : } + ? + : } } /> diff --git a/src/components/PluginSettings/styles.css b/src/components/PluginSettings/styles.css index d3d182e58..a4f9aeee1 100644 --- a/src/components/PluginSettings/styles.css +++ b/src/components/PluginSettings/styles.css @@ -63,10 +63,7 @@ height: 8em; display: flex; flex-direction: column; -} - -.vc-plugins-info-card div { - line-height: 32px; + gap: 0.25em; } .vc-plugins-restart-card { @@ -76,11 +73,11 @@ color: var(--info-warning-text); } -.vc-plugins-restart-card button { +.vc-plugins-restart-button { margin-top: 0.5em; background: var(--info-warning-foreground) !important; } -.vc-plugins-info-button svg:not(:hover, :focus) { +.vc-plugins-info-icon:not(:hover, :focus) { color: var(--text-muted); } diff --git a/src/plugins/clientTheme/clientTheme.css b/src/plugins/clientTheme/clientTheme.css index 64aefdcf5..795b5457e 100644 --- a/src/plugins/clientTheme/clientTheme.css +++ b/src/plugins/clientTheme/clientTheme.css @@ -1,29 +1,29 @@ -.client-theme-settings { +.vc-clientTheme-settings { display: flex; flex-direction: column; } -.client-theme-container { +.vc-clientTheme-container { display: flex; flex-direction: row; justify-content: space-between; } -.client-theme-settings-labels { +.vc-clientTheme-labels { display: flex; flex-direction: column; justify-content: flex-start; } -.client-theme-container > [class^="colorSwatch"] > [class^="swatch"] { +.vc-clientTheme-container [class^="swatch"] { border: thin solid var(--background-modifier-accent) !important; } -.client-theme-warning * { +.vc-clientTheme-warning-text { color: var(--text-danger); } -.client-theme-contrast-warning { +.vc-clientTheme-contrast-warning { background-color: var(--background-primary); padding: 0.5rem; border-radius: .5rem; diff --git a/src/plugins/clientTheme/index.tsx b/src/plugins/clientTheme/index.tsx index 2dc7ccf6c..dd6cc734b 100644 --- a/src/plugins/clientTheme/index.tsx +++ b/src/plugins/clientTheme/index.tsx @@ -7,6 +7,7 @@ import "./clientTheme.css"; import { definePluginSettings } from "@api/Settings"; +import { classNameFactory } from "@api/Styles"; import { Devs } from "@utils/constants"; import { Margins } from "@utils/margins"; import { classes } from "@utils/misc"; @@ -14,6 +15,8 @@ import definePlugin, { OptionType, StartAt } from "@utils/types"; import { findByCodeLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack"; import { Button, Forms, ThemeStore, useStateFromStores } from "@webpack/common"; +const cl = classNameFactory("vc-clientTheme-"); + const ColorPicker = findComponentByCodeLazy("#{intl::USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR}", ".BACKGROUND_PRIMARY)"); const colorPresets = [ @@ -60,9 +63,9 @@ function ThemeSettings() { } return ( -
-
-
+
+
+
Theme Color Add a color to your Discord client theme
@@ -76,10 +79,10 @@ function ThemeSettings() { {(contrastWarning || nitroThemeEnabled) && (<>
-
- Warning, your theme won't look good: - {contrastWarning && Selected color won't contrast well with text} - {nitroThemeEnabled && Nitro themes aren't supported} +
+ Warning, your theme won't look good: + {contrastWarning && Selected color won't contrast well with text} + {nitroThemeEnabled && Nitro themes aren't supported}
{(contrastWarning && fixableContrast) && } {(nitroThemeEnabled) && } diff --git a/src/plugins/dearrow/index.tsx b/src/plugins/dearrow/index.tsx index b7e90e096..7cb60384e 100644 --- a/src/plugins/dearrow/index.tsx +++ b/src/plugins/dearrow/index.tsx @@ -121,6 +121,7 @@ function DearrowButton({ component }: { component: Component; }) { height="24px" viewBox="0 0 36 36" aria-label="Toggle Dearrow" + className="vc-dearrow-icon" > )} - + { permission.type === PermissionType.Role ? role?.name ?? "Unknown Role" diff --git a/src/plugins/permissionsViewer/styles.css b/src/plugins/permissionsViewer/styles.css index b7e420964..2ca61025d 100644 --- a/src/plugins/permissionsViewer/styles.css +++ b/src/plugins/permissionsViewer/styles.css @@ -73,7 +73,7 @@ background-color: var(--background-modifier-selected); } -.vc-permviewer-modal-list-item > div { +.vc-permviewer-modal-list-item-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/src/plugins/reviewDB/components/BlockedUserModal.tsx b/src/plugins/reviewDB/components/BlockedUserModal.tsx index 43c81eb52..8b8271746 100644 --- a/src/plugins/reviewDB/components/BlockedUserModal.tsx +++ b/src/plugins/reviewDB/components/BlockedUserModal.tsx @@ -39,7 +39,7 @@ function BlockedUser({ user, isBusy, setIsBusy }: { user: ReviewDBUser; isBusy: return (
- + {user.username} { diff --git a/src/plugins/reviewDB/components/ReviewModal.tsx b/src/plugins/reviewDB/components/ReviewModal.tsx index 71ac021f0..1485022da 100644 --- a/src/plugins/reviewDB/components/ReviewModal.tsx +++ b/src/plugins/reviewDB/components/ReviewModal.tsx @@ -65,7 +65,7 @@ function Modal({ modalProps, modalKey, discordId, name, type }: { modalProps: an -
+
{ownReview && ( div { +.vc-rdb-modal-footer-wrapper { width: 100%; margin: 6px 16px; } @@ -117,13 +117,13 @@ align-items: center; } -.vc-rdb-block-modal-row img { +.vc-rdb-block-modal-avatar { border-radius: 50%; height: 2em; width: 2em; } -.vc-rdb-block-modal img::before { +.vc-rdb-block-modal-avatar::before { content: ""; display: block; width: 100%; diff --git a/src/plugins/sendTimestamps/index.tsx b/src/plugins/sendTimestamps/index.tsx index 437df1a58..92562939a 100644 --- a/src/plugins/sendTimestamps/index.tsx +++ b/src/plugins/sendTimestamps/index.tsx @@ -68,15 +68,16 @@ function PickerModal({ rootProps, close }: { rootProps: ModalProps, close(): voi return ( - + Timestamp Picker - + setValue(e.currentTarget.value)} diff --git a/src/plugins/sendTimestamps/styles.css b/src/plugins/sendTimestamps/styles.css index 033d5c9d5..143fd0388 100644 --- a/src/plugins/sendTimestamps/styles.css +++ b/src/plugins/sendTimestamps/styles.css @@ -1,4 +1,4 @@ -.vc-st-modal-content input { +.vc-st-date-picker { background-color: var(--input-background); color: var(--text-normal); width: 95%; @@ -29,18 +29,14 @@ place-content: center space-between; } -.vc-st-modal-header h1 { +.vc-st-modal-title { margin: 0; } -.vc-st-modal-header button { +.vc-st-modal-close-button { padding: 0; } .vc-st-preview-text { margin-bottom: 1em; } - -.vc-st-button svg { - transform: scale(1.1) translateY(1px); -} diff --git a/src/plugins/serverInfo/GuildInfoModal.tsx b/src/plugins/serverInfo/GuildInfoModal.tsx index 14b7e1dc8..9f2d3008d 100644 --- a/src/plugins/serverInfo/GuildInfoModal.tsx +++ b/src/plugins/serverInfo/GuildInfoModal.tsx @@ -94,6 +94,7 @@ function GuildInfoModal({ guild }: GuildProps) {
{iconUrl ? openImageModal({ @@ -170,6 +171,7 @@ function Owner(guildId: string, owner: User) { return (
openImageModal({ diff --git a/src/plugins/serverInfo/styles.css b/src/plugins/serverInfo/styles.css index 8c88e4f40..274b7d138 100644 --- a/src/plugins/serverInfo/styles.css +++ b/src/plugins/serverInfo/styles.css @@ -21,7 +21,7 @@ margin: 0.5em; } -.vc-gp-header img { +.vc-gp-icon { width: 48px; height: 48px; cursor: pointer; @@ -82,7 +82,7 @@ gap: 0.2em; } -.vc-gp-owner img { +.vc-gp-owner-avatar { height: 20px; border-radius: 50%; cursor: pointer; diff --git a/src/plugins/shikiCodeblocks.desktop/components/Code.tsx b/src/plugins/shikiCodeblocks.desktop/components/Code.tsx index 8deca5882..2794234df 100644 --- a/src/plugins/shikiCodeblocks.desktop/components/Code.tsx +++ b/src/plugins/shikiCodeblocks.desktop/components/Code.tsx @@ -84,9 +84,9 @@ export const Code = ({ } const codeTableRows = lines.map((line, i) => ( - - {i + 1} - {line} + + {i + 1} + {line} )); diff --git a/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx b/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx index dd1401939..2d62af6e1 100644 --- a/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx +++ b/src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx @@ -102,7 +102,7 @@ export const Highlighter = ({ color: themeBase.plainColor, }} > - +
); } diff --git a/src/plugins/showConnections/index.tsx b/src/plugins/showConnections/index.tsx index 46629c770..f99c0be96 100644 --- a/src/plugins/showConnections/index.tsx +++ b/src/plugins/showConnections/index.tsx @@ -125,7 +125,7 @@ function CompactConnectionComponent({ connection, theme }: { connection: Connect {connection.name} {connection.verified && } - + } key={connection.id} diff --git a/src/plugins/showConnections/styles.css b/src/plugins/showConnections/styles.css index cead5201c..5bb16e0fd 100644 --- a/src/plugins/showConnections/styles.css +++ b/src/plugins/showConnections/styles.css @@ -14,6 +14,6 @@ word-break: break-all; } -.vc-sc-tooltip svg { +.vc-sc-tooltip-icon { min-width: 16px; } diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx index d708c279f..333753cd3 100644 --- a/src/plugins/spotifyControls/PlayerComponent.tsx +++ b/src/plugins/spotifyControls/PlayerComponent.tsx @@ -19,6 +19,7 @@ import "./spotifyStyles.css"; import { Settings } from "@api/Settings"; +import { classNameFactory } from "@api/Styles"; import { Flex } from "@components/Flex"; import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons"; import { debounce } from "@shared/debounce"; @@ -28,7 +29,7 @@ import { ContextMenuApi, FluxDispatcher, Forms, Menu, React, useEffect, useState import { SpotifyStore, Track } from "./SpotifyStore"; -const cl = (className: string) => `vc-spotify-${className}`; +const cl = classNameFactory("vc-spotify-"); function msToHuman(ms: number) { const minutes = ms / 1000 / 60; @@ -40,7 +41,7 @@ function msToHuman(ms: number) { function Svg(path: string, label: string) { return () => ( ); - if (coverExpanded && img) return ( -
- {i} -
- ); + if (coverExpanded && img) + return ( +
+ {i} +
+ ); return (
diff --git a/src/plugins/spotifyControls/spotifyStyles.css b/src/plugins/spotifyControls/spotifyStyles.css index 893dc8175..e5cff9a7d 100644 --- a/src/plugins/spotifyControls/spotifyStyles.css +++ b/src/plugins/spotifyControls/spotifyStyles.css @@ -30,22 +30,17 @@ background-color: var(--background-modifier-selected); } -.vc-spotify-button svg { +.vc-spotify-button-icon { height: 24px; width: 24px; } -[class*="vc-spotify-shuffle"] > svg, -[class*="vc-spotify-repeat"] > svg { +[class*="vc-spotify-shuffle"] .vc-spotify-button-icon, +[class*="vc-spotify-repeat"] .vc-spotify-button-icon { width: 22px; height: 22px; } -.vc-spotify-button svg path { - width: 100%; - height: 100%; -} - /* .vc-spotify-button:hover { filter: brightness(1.3); } */ @@ -87,12 +82,19 @@ gap: 0.5em; } -#vc-spotify-info-wrapper img { +#vc-spotify-album-image { height: 90%; object-fit: contain; + border-radius: 3px; + transition: filter 0.2s; } -#vc-spotify-album-expanded-wrapper img { +#vc-spotify-album-image:hover { + filter: brightness(1.2); + cursor: pointer; +} + +#vc-spotify-album-expanded-wrapper #vc-spotify-album-image { width: 100%; object-fit: contain; } @@ -137,16 +139,6 @@ cursor: pointer; } -#vc-spotify-album-image { - border-radius: 3px; - transition: filter 0.2s; -} - -#vc-spotify-album-image:hover { - filter: brightness(1.2); - cursor: pointer; -} - #vc-spotify-progress-bar { position: relative; color: var(--text-normal); diff --git a/src/plugins/translate/TranslateModal.tsx b/src/plugins/translate/TranslateModal.tsx index 7a32d1b75..786f81054 100644 --- a/src/plugins/translate/TranslateModal.tsx +++ b/src/plugins/translate/TranslateModal.tsx @@ -76,7 +76,7 @@ export function TranslateModal({ rootProps }: { rootProps: ModalProps; }) { return ( - + Translate diff --git a/src/plugins/translate/TranslationAccessory.tsx b/src/plugins/translate/TranslationAccessory.tsx index 8e8f4c174..9b6393cc9 100644 --- a/src/plugins/translate/TranslationAccessory.tsx +++ b/src/plugins/translate/TranslationAccessory.tsx @@ -55,7 +55,7 @@ export function TranslationAccessory({ message }: { message: Message; }) { return ( - + {Parser.parse(translation.text)} {" "} (translated from {translation.sourceLanguage} - setTranslation(undefined)} />) diff --git a/src/plugins/translate/styles.css b/src/plugins/translate/styles.css index 64b6c9b9f..c07c9e362 100644 --- a/src/plugins/translate/styles.css +++ b/src/plugins/translate/styles.css @@ -6,7 +6,7 @@ place-content: center space-between; } -.vc-trans-modal-header h1 { +.vc-trans-modal-title { margin: 0; } @@ -17,7 +17,7 @@ font-weight: 400; } -.vc-trans-accessory svg { +.vc-trans-accessory-icon { margin-right: 0.25em; } diff --git a/src/plugins/vencordToolbox/index.css b/src/plugins/vencordToolbox/index.css index a1c85ad50..642375b4a 100644 --- a/src/plugins/vencordToolbox/index.css +++ b/src/plugins/vencordToolbox/index.css @@ -1,16 +1,16 @@ .vc-toolbox-btn, -.vc-toolbox-btn>svg { +.vc-toolbox-icon { -webkit-app-region: no-drag; } -.vc-toolbox-btn>svg { +.vc-toolbox-icon { color: var(--interactive-normal); } -.vc-toolbox-btn[class*="selected"]>svg { +.vc-toolbox-btn[class*="selected"] .vc-toolbox-icon { color: var(--interactive-active); } -.vc-toolbox-btn:hover>svg { +.vc-toolbox-btn:hover .vc-toolbox-icon { color: var(--interactive-hover); } diff --git a/src/plugins/vencordToolbox/index.tsx b/src/plugins/vencordToolbox/index.tsx index f840ef9dc..c59df00a5 100644 --- a/src/plugins/vencordToolbox/index.tsx +++ b/src/plugins/vencordToolbox/index.tsx @@ -88,7 +88,7 @@ function VencordPopout(onClose: () => void) { function VencordPopoutIcon(isShown: boolean) { return ( - + ); diff --git a/src/plugins/voiceMessages/styles.css b/src/plugins/voiceMessages/styles.css index 1e2b1433a..4f2e1d57e 100644 --- a/src/plugins/voiceMessages/styles.css +++ b/src/plugins/voiceMessages/styles.css @@ -9,10 +9,6 @@ margin-bottom: 1em; } -.vc-vmsg-modal audio { - width: 100%; -} - .vc-vmsg-preview { color: var(--text-normal); border-radius: 24px;