mirror of
https://github.com/Equicord/Equicord.git
synced 2025-06-15 09:33:03 -04:00
components(PluginSettings): move css code to a file (#74)
* move disable all / reset all plugin options css to actual css files
This commit is contained in:
Creation's
GitHub
parent
20996959ff
commit
2b3465b27d
4 changed files with 148 additions and 32 deletions
|
|
@ -5,3 +5,73 @@
|
|||
.vc-plugin-modal-description {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* warning modal */
|
||||
|
||||
.vc-text-selectable {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vc-warning-info {
|
||||
gap: 15px;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vc-warning-info img {
|
||||
width: 70%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: auto auto 10px;
|
||||
}
|
||||
|
||||
.vc-warning-info strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vc-warning-info button.disable-warning {
|
||||
font-size: 0.8rem;
|
||||
background-color: transparent;
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.vc-warning-info button.disable-warning:hover {
|
||||
background-color: transparent;
|
||||
color: var(--text-danger);
|
||||
}
|
||||
|
||||
.vc-warning-info button.disable-warning:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--text-danger);
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-normal {
|
||||
color: var(--text-normal);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.text-normal.margin-bottom {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-danger-background {
|
||||
background-color: var(--button-danger-background);
|
||||
}
|
||||
|
||||
.button-danger-background-no-margin {
|
||||
background-color: var(--button-danger-background) !important;
|
||||
color: var(--header-primary);
|
||||
}
|
||||
|
||||
.vc-modal-close-button {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
|
@ -407,36 +407,27 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
|
|||
transitionState={warningModalProps.transitionState}
|
||||
>
|
||||
<ModalHeader separator={false}>
|
||||
<Text style={{ flexGrow: 1, color: "var(--text-danger)", fontSize: "1.4rem", fontWeight: "bold" }}>Warning: Dangerous Action</Text>
|
||||
<ModalCloseButton onClick={warningModalProps.onClose} />
|
||||
<Text className="text-danger">Warning: Dangerous Action</Text>
|
||||
<ModalCloseButton onClick={warningModalProps.onClose} className="vc-modal-close-button" />
|
||||
</ModalHeader>
|
||||
<ModalContent>
|
||||
<Forms.FormSection>
|
||||
<Flex className="vc-warning-info" style={{ gap: "15px", flexDirection: "column", userSelect: "none" }}>
|
||||
<Flex className="vc-warning-info">
|
||||
<img
|
||||
src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
|
||||
alt="Warning"
|
||||
style={{ width: "60%", height: "auto", marginBottom: "10px", display: "block", margin: "auto" }}
|
||||
/>
|
||||
<Text style={{ fontSize: "1.2rem", color: "var(--text-normal)" }}>
|
||||
<Text className="text-normal">
|
||||
You are about to reset all settings for <strong>{plugin.name}</strong> to their default values.
|
||||
</Text>
|
||||
<Text style={{ fontSize: "1.2rem", color: "var(--text-danger)", fontWeight: "bold" }}>
|
||||
<Text className="text-danger">
|
||||
This action is irreversible.
|
||||
</Text>
|
||||
<Text style={{ fontSize: "1.2rem", color: "var(--text-normal)", marginBottom: "10px" }}>
|
||||
<Text className="text-normal margin-bottom">
|
||||
If you are certain you want to proceed, click <strong>Confirm Reset</strong>. Otherwise, click <strong>Cancel</strong>.
|
||||
</Text>
|
||||
{!Settings.ignoreResetWarning && (
|
||||
<Button style={{
|
||||
fontSize: "0.8rem",
|
||||
backgroundColor: "transparent",
|
||||
color: "red",
|
||||
cursor: "pointer",
|
||||
margin: "0 auto",
|
||||
width: "fit-content",
|
||||
textDecoration: "underline"
|
||||
}} onClick={() => {
|
||||
<Button className="disable-warning" onClick={() => {
|
||||
Settings.ignoreResetWarning = true;
|
||||
}}>
|
||||
Disable this warning forever
|
||||
|
|
@ -466,7 +457,7 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
|
|||
}}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
style={{ marginLeft: "10px", backgroundColor: "var(--button-danger-background)" }}
|
||||
className="button-danger-background-no-margin"
|
||||
>
|
||||
Confirm Reset
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -429,35 +429,26 @@ export default function PluginSettings() {
|
|||
{enabledPlugins.length > 0 && (
|
||||
<Button
|
||||
size={Button.Sizes.SMALL}
|
||||
style={{ backgroundColor: "var(--button-danger-background)", margin: "20px 0" }}
|
||||
className="button-danger-background"
|
||||
onClick={() => {
|
||||
if (Settings.ignoreResetWarning) return resetCheckAndDo();
|
||||
|
||||
return Alerts.show({
|
||||
title: "Disable All Plugins",
|
||||
body: (
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<div className="alert-body">
|
||||
<img
|
||||
src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
|
||||
alt="Warning"
|
||||
style={{ width: "60%", height: "auto", marginBottom: "10px", display: "block", margin: "auto" }}
|
||||
/>
|
||||
<p style={{ fontSize: "1.2rem", color: "var(--text-danger)", fontWeight: "bold" }}>
|
||||
WARNING: You are about to disable <span style={{ textDecoration: "underline" }}>{enabledPlugins.length}</span> plugins!
|
||||
<p className="warning-text">
|
||||
WARNING: You are about to disable <span>{enabledPlugins.length}</span> plugins!
|
||||
</p>
|
||||
<p style={{ fontSize: "1rem" }}>
|
||||
<p>
|
||||
Are you absolutely sure you want to proceed? You can always enable them back later.
|
||||
</p>
|
||||
{!Settings.ignoreResetWarning && (
|
||||
<Button style={{
|
||||
fontSize: "0.8rem",
|
||||
backgroundColor: "transparent",
|
||||
color: "red",
|
||||
cursor: "pointer",
|
||||
margin: "0 auto",
|
||||
width: "fit-content",
|
||||
textDecoration: "underline"
|
||||
}} onClick={() => {
|
||||
<Button className="disable-warning" onClick={() => {
|
||||
Settings.ignoreResetWarning = true;
|
||||
}}>
|
||||
Disable this warning forever
|
||||
|
|
@ -466,6 +457,7 @@ export default function PluginSettings() {
|
|||
</div>
|
||||
),
|
||||
confirmText: "Disable All",
|
||||
confirmColor: "button-danger-background-no-margin",
|
||||
cancelText: "Cancel",
|
||||
onConfirm: () => {
|
||||
resetCheckAndDo();
|
||||
|
|
|
|||
|
|
@ -124,3 +124,66 @@
|
|||
height: 100%;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
/* disable all modal */
|
||||
|
||||
.button-danger-background {
|
||||
background-color: var(--button-danger-background) !important;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.button-danger-background-no-margin {
|
||||
background-color: var(--button-danger-background) !important;
|
||||
color: var(--header-primary);
|
||||
}
|
||||
|
||||
.button-danger-background:hover {
|
||||
background-color: var(--button-danger-background-hover);
|
||||
}
|
||||
|
||||
.alert-body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-body img {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: auto auto 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.alert-body p.warning-text {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-danger);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.alert-body p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.alert-body span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.disable-warning {
|
||||
font-size: 0.8rem;
|
||||
background-color: transparent !important;
|
||||
color: var(--text-danger) !important;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
text-decoration: underline;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.disable-warning:hover {
|
||||
color: var(--text-danger);
|
||||
background-color: transparent;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.disable-warning:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue