diff options
| author | Swishilicous <paige.git@gmail.com> | 2023-01-13 17:25:24 -0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-01-14 00:25:24 +0100 |
| commit | 0e5b8b07c99f3ab54c576a58ac3f59721d4f9904 (patch) | |
| tree | 360f1a12a116f899c55cf4338f301e28353794a9 | |
| parent | 7582feb60352f19b7f8f6750c5be624bbf6baafa (diff) | |
| download | Vencord-0e5b8b07c99f3ab54c576a58ac3f59721d4f9904.tar.gz Vencord-0e5b8b07c99f3ab54c576a58ac3f59721d4f9904.tar.bz2 Vencord-0e5b8b07c99f3ab54c576a58ac3f59721d4f9904.zip | |
make plugin cards prettier (#389)
Co-authored-by: Ven <vendicated@riseup.net>
| -rw-r--r-- | src/components/PluginSettings/index.tsx | 7 | ||||
| -rw-r--r-- | src/components/PluginSettings/styles.css | 19 |
2 files changed, 18 insertions, 8 deletions
diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx index 687b9ee..3b283d0 100644 --- a/src/components/PluginSettings/index.tsx +++ b/src/components/PluginSettings/index.tsx @@ -152,14 +152,11 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe onChange={toggleEnabled} disabled={disabled} 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} > <Flex className={cl("flex")}> - <Text - variant="text-md/bold" - className={cl("name")} - > + <Text variant="text-md/bold" className={cl("name")}> {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />} </Text> <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}> diff --git a/src/components/PluginSettings/styles.css b/src/components/PluginSettings/styles.css index c48ce0c..fe8dc94 100644 --- a/src/components/PluginSettings/styles.css +++ b/src/components/PluginSettings/styles.css @@ -24,13 +24,21 @@ } .vc-plugins-card { - background-color: var(--background-modifier-selected); + background-color: var(--background-secondary-alt); color: var(--interactive-active); - border-radius: 3px; + border-radius: 8px; display: block; height: 100%; padding: 10px; 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 { @@ -41,6 +49,10 @@ margin-right: 8px; } +.vc-plugins-settings-button:hover { + color: var(--interactive-hover); +} + .vc-plugins-filter-controls { display: grid; height: 40px; @@ -61,7 +73,7 @@ } .vc-plugins-note { - height: 40px; + height: 36px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; @@ -77,6 +89,7 @@ align-items: center; flex-grow: 1; gap: 8px; + cursor: "default"; } .vc-plugins-flex { |