PluginsTab: Dont Use Discord's CL

This commit is contained in:
thororen1234 2025-09-13 00:53:03 -04:00
parent 479bc354aa
commit 7ea2824dd3
No known key found for this signature in database
3 changed files with 51 additions and 83 deletions

View file

@ -214,7 +214,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
<Tooltip text="Reset to default settings" shouldShow={!isObjectEmpty(pluginSettings)}>
{({ onMouseEnter, onMouseLeave }) => (
<Button
className="button-danger-background"
className={cl("disable-warning")}
size={Button.Sizes.SMALL}
color={Button.Colors.BRAND}
onClick={handleResetClick}
@ -312,10 +312,6 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
<ModalContent>
<Forms.FormSection>
<Flex className="vc-warning-info">
<img
src="https://media.tenor.com/hapjxf8y50YAAAAi/stop-sign.gif"
alt="Warning"
/>
<Text className="text-normal">
You are about to reset all settings for <strong>{plugin.name}</strong> to their default values.
</Text>
@ -330,19 +326,19 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
</ModalContent>
<ModalFooter className="modal-footer">
<Flex className="button-container">
<Button
size={Button.Sizes.SMALL}
color={Button.Colors.PRIMARY}
onClick={warningModalProps.onClose}
look={Button.Looks.LINK}
>
Cancel
</Button>
<Flex className="button-group">
<Button
size={Button.Sizes.SMALL}
color={Button.Colors.PRIMARY}
onClick={warningModalProps.onClose}
look={Button.Looks.FILLED}
>
Cancel
</Button>
{!Settings.ignoreResetWarning && (
<Button
size={Button.Sizes.SMALL}
className="button-danger-background"
className={cl("disable-warning")}
onClick={() => {
Settings.ignoreResetWarning = true;
}}
@ -350,21 +346,15 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
Disable Warning Forever
</Button>
)}
<Tooltip text="This action cannot be undone. Are you sure?" shouldShow={true}>
{({ onMouseEnter, onMouseLeave }) => (
<Button
size={Button.Sizes.SMALL}
onClick={() => {
resetSettings(plugin, pluginModalProps, pluginModalProps, onRestartNeeded);
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className="button-danger-background-no-margin"
>
Confirm Reset
</Button>
)}
</Tooltip>
<Button
size={Button.Sizes.SMALL}
onClick={() => {
resetSettings(plugin, pluginModalProps, pluginModalProps, onRestartNeeded);
}}
className={cl("confirm-reset")}
>
Confirm Reset
</Button>
</Flex>
</Flex>
</ModalFooter>

View file

@ -82,7 +82,7 @@ function ReloadRequiredCard({ required, enabledPlugins, openDisablePluginsModal,
{enabledPlugins.length > 0 && !required && (
<Button
size={Button.Sizes.SMALL}
className="button-danger-background disable-all-button"
className={cl("disable-warning")}
onClick={() => {
if (Settings.ignoreResetWarning) return resetCheckAndDo();
@ -337,19 +337,18 @@ export default function PluginSettings() {
</ModalContent>
<ModalFooter className="modal-footer">
<Flex className="button-container">
<Button
size={Button.Sizes.SMALL}
color={Button.Colors.PRIMARY}
onClick={warningModalProps.onClose}
look={Button.Looks.LINK}
>
Cancel
</Button>
<Flex className="button-group">
<Button
size={Button.Sizes.SMALL}
color={Button.Colors.PRIMARY}
onClick={warningModalProps.onClose}
>
Cancel
</Button>
{!Settings.ignoreResetWarning && (
<Button
size={Button.Sizes.SMALL}
className="button-danger-background"
className={cl("disable-warning")}
onClick={() => {
Settings.ignoreResetWarning = true;
}}
@ -357,19 +356,14 @@ export default function PluginSettings() {
Disable Warning Forever
</Button>
)}
<Tooltip text="This action cannot be undone. Are you sure?" shouldShow={true}>
{({ onMouseEnter, onMouseLeave }) => (
<Button
size={Button.Sizes.SMALL}
className="button-danger-background-no-margin"
onClick={resetCheckAndDo}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
Disable All
</Button>
)}
</Tooltip>
<Button
size={Button.Sizes.SMALL}
className={cl("confirm-reset")}
onClick={resetCheckAndDo}
>
Disable All
</Button>
</Flex>
</Flex>
</ModalFooter>

View file

@ -166,33 +166,32 @@
margin-bottom: 10px;
}
.button-danger-background {
background-color: var(--background-color) !important;
.vc-plugins-disable-warning,
.vc-plugin-modal-disable-warning {
background-color: color-mix(in srgb, var(--button-danger-background) 10%, transparent) !important;
border-style: solid !important;
border-width: .1rem !important;
border-color: var(--button-outline-danger-border) !important;
border-color: color-mix(in srgb, var(--button-danger-background) 80%, transparent) !important;
border-radius: 5px !important;
color: color-mix(in srgb, var(--button-danger-background) 100%, transparent) !important;
align-self: flex-end !important;
}
.button-danger-background.top-margin {
margin-top: 10px;
.vc-plugins-disable-warning:hover,
.vc-plugin-modal-disable-warning:hover {
background-color: color-mix(in srgb, var(--button-danger-background-hover) 40%, transparent) !important;
}
.button-danger-background:hover {
background-color: var(--button-outline-danger-background-hover) !important;
border-style: solid;
border-width: .1rem;
border-color: var(--button-outline-danger-border) !important;
}
.button-danger-background-no-margin {
.vc-plugins-confirm-reset,
.vc-plugin-modal-confirm-reset {
background-color: var(--button-danger-background) !important;
color: var(--header-primary);
}
.button-danger-background-no-margin:hover {
.vc-plugins-confirm-reset:hover,
.vc-plugin-modal-confirm-reset:hover {
background-color: var(--button-danger-background-hover) !important;
filter: saturate(75%);
filter: saturate(80%);
}
.vc-modal-close-button {
@ -207,17 +206,10 @@
}
.modal-footer .button-container {
display: flex !important;
justify-content: space-between;
align-items: center;
width: 100%;
}
.button-group {
display: flex !important;
gap: 10px;
align-items: center;
justify-content: end !important;
justify-content: space-between !important;
}
/* Specific to disable all modal */
@ -232,13 +224,6 @@
text-decoration: underline;
}
.disable-all-button {
color: var(--header-primary);
width: 150px;
margin-left: auto;
margin-right: 4.5px !important;
}
.visual-refresh .button-danger-background {
font-size: 16px;
background-color: rgb(240 71 71 / 10%) !important;
@ -248,7 +233,6 @@
font-weight: 500;
padding: 6px 10px;
text-align: center;
margin-top: 10px;
}
.visual-refresh .button-danger-background:hover {