ulysia/Vencord
1
0
Fork 0
Code Pull requests Activity

make plugin cards prettier (#389)

Browse source 
Co-authored-by: Ven <vendicated@riseup.net>
This commit is contained in:
Swishilicous 2023-01-13 17:25:24 -06:00 committed by GitHub
parent 7582feb603
commit 0e5b8b07c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/PluginSettings/index.tsx
View file

@ -152,14 +152,11 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
onChange={toggleEnabled} onChange={toggleEnabled}
disabled={disabled} disabled={disabled}
value={isEnabled()} value={isEnabled()}
note={<Text className={cl("note")} variant="text-md/normal">{plugin.description}</Text>} note={<Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>}
hideBorder={true} hideBorder={true}
> >
<Flex className={cl("flex")}> <Flex className={cl("flex")}>
<Text <Text variant="text-md/bold" className={cl("name")}>
variant="text-md/bold"
className={cl("name")}
>
{plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />} {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
</Text> </Text>
<button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}> <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>

19
src/components/PluginSettings/styles.css
View file

@ -24,13 +24,21 @@
} }
.vc-plugins-card { .vc-plugins-card {
background-color: var(--background-modifier-selected); background-color: var(--background-secondary-alt);
color: var(--interactive-active); color: var(--interactive-active);
border-radius: 3px; border-radius: 8px;
display: block; display: block;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
transition: 0.1s ease-out;
transition-property: box-shadow, transform, background, opacity;
}
.vc-plugins-card:hover {
background-color: var(--background-tertiary);
transform: translateY(-1px);
box-shadow: var(--elevation-high);
} }
.vc-plugins-info-button { .vc-plugins-info-button {
@ -41,6 +49,10 @@
margin-right: 8px; margin-right: 8px;
} }
.vc-plugins-settings-button:hover {
color: var(--interactive-hover);
}
.vc-plugins-filter-controls { .vc-plugins-filter-controls {
display: grid; display: grid;
height: 40px; height: 40px;
@ -61,7 +73,7 @@
} }
.vc-plugins-note { .vc-plugins-note {
height: 40px; height: 36px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
@ -77,6 +89,7 @@
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
gap: 8px; gap: 8px;
cursor: "default";
} }
.vc-plugins-flex { .vc-plugins-flex {