make plugin cards prettier (#389)

Co-authored-by: Ven <vendicated@riseup.net>

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"))}>

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 {