From 0e5b8b07c99f3ab54c576a58ac3f59721d4f9904 Mon Sep 17 00:00:00 2001
From: Swishilicous <paige.git@gmail.com>
Date: Fri, 13 Jan 2023 17:25:24 -0600
Subject: make plugin cards prettier (#389)
Co-authored-by: Ven <vendicated@riseup.net>
---
src/components/PluginSettings/index.tsx | 7 ++-----
src/components/PluginSettings/styles.css | 19 ++++++++++++++++---
2 files changed, 18 insertions(+), 8 deletions(-)
(limited to 'src/components')
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 {
--
cgit