From 056845c62138e476d5541f2a3bbd650a620d291f Mon Sep 17 00:00:00 2001
From: Tropical <42101043+Tropix126@users.noreply.github.com>
Date: Tue, 3 Nov 2020 00:57:13 -0600
Subject: [PATCH] Improves cards (#487)

* card improvements

* damn linter

* linter is shit
---
 src/styles/ui/addonlist.css   | 88 +++++++++++------------------------
 src/ui/settings/addoncard.jsx |  8 ++--
 2 files changed, 32 insertions(+), 64 deletions(-)

diff --git a/src/styles/ui/addonlist.css b/src/styles/ui/addonlist.css
index 7f0e9bc8..7a8dd332 100644
--- a/src/styles/ui/addonlist.css
+++ b/src/styles/ui/addonlist.css
@@ -30,16 +30,7 @@
     padding: 12px;
     border-radius: 5px;
     overflow: hidden;
-}
-
-.theme-dark .bd-addon-list .bd-addon-card {
-    background-color: rgba(32, 34, 37, 0.6);
-    color: #f6f6f7;
-}
-
-.theme-light .bd-addon-list .bd-addon-card {
-    background-color: #f8f9f9;
-    color: #4f545c;
+    background: var(--background-secondary-alt);
 }
 
 .bd-addon-list .bd-addon-card.settings-open {
@@ -48,37 +39,25 @@
 }
 
 .bd-addon-list .bd-addon-header {
+    color: var(--header-primary);
     font-size: 14px;
-    font-weight: 700;
+    line-height: 20px;
+    font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: space-between;
     overflow: hidden;
 }
 
-.theme-dark .bd-addon-list .bd-addon-header {
-    color: #f6f6f7;
-}
-
-.theme-light .bd-addon-list .bd-addon-header {
-    color: #4f545c;
-}
-
 .bd-addon-list .bd-description {
     word-break: break-word;
-    max-height: 100px;
-    margin: 5px 0;
+    margin-bottom: 5px;
     padding: 5px 0;
     overflow-y: auto;
-    line-height: 1.125em;
-}
-
-.theme-dark .bd-addon-list .bd-description {
-    color: #b9bbbe;
-}
-
-.theme-light .bd-addon-list .bd-description {
-    color: #72767d;
+    font-size: 14px;
+    line-height: 18px;
+    -webkit-line-clamp: 3;
+    color: var(--header-secondary);
 }
 
 .bd-addon-list .scroller::-webkit-scrollbar-track-piece,
@@ -88,32 +67,14 @@
 }
 
 .bd-addon-list .bd-footer {
-    font-size: 12px;
-    font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 8px;
-    border-top: 1px solid transparent;
+    border-top: thin solid var(--background-modifier-accent);
     overflow: hidden;
 }
 
-.theme-dark .bd-addon-list .bd-footer {
-    border-top-color: rgba(114, 118, 125, 0.3);
-}
-
-.theme-light .bd-addon-list .bd-footer {
-    border-top-color: rgba(185, 187, 190, 0.3);
-}
-
-.bd-addon-list .bd-footer a {
-    color: #3e82e5;
-}
-
-.bd-addon-list .bd-footer a:hover {
-    text-decoration: underline;
-}
-
 .bd-controls > .bd-addon-button {
     border-radius: 0;
 }
@@ -127,11 +88,11 @@
 }
 
 .bd-controls > .bd-addon-button:first-of-type {
-    border-radius: 5px 0 0 5px;
+    border-radius: 3px 0 0 3px;
 }
 
 .bd-controls > .bd-addon-button:last-of-type {
-    border-radius: 0 5px 5px 0;
+    border-radius: 0 3px 3px 0;
 }
 
 .bd-addon-list .bd-footer .bd-links,
@@ -141,6 +102,22 @@
     align-items: center;
 }
 
+.bd-addon-list .bd-footer .bd-link {
+    color: var(--interactive-normal);
+}
+
+.bd-addon-list .bd-footer .bd-link:hover {
+    color: var(--interactive-hover);
+}
+
+.bd-addon-list .bd-footer .bd-link:active {
+    color: var(--interactive-active);
+}
+
+.bd-addon-list .bd-footer .bd-link svg {
+    fill: currentColor;
+}
+
 .bd-addon-list .bd-footer .bd-links .bd-addon-button {
     height: 24px;
 }
@@ -149,15 +126,6 @@
     margin-top: 10px;
 }
 
-.bd-links .bd-addon-button svg {
-    opacity: 0.7;
-}
-
-.bd-links .bd-addon-button:active svg,
-.bd-links .bd-addon-button:hover svg {
-    opacity: 1;
-}
-
 .bd-addon-controls {
     display: flex;
     align-items: center;
diff --git a/src/ui/settings/addoncard.jsx b/src/ui/settings/addoncard.jsx
index b368b2f2..6b051b65 100644
--- a/src/ui/settings/addoncard.jsx
+++ b/src/ui/settings/addoncard.jsx
@@ -97,10 +97,10 @@ export default class AddonCard extends React.Component {
 
     get controls() { // {this.props.hasSettings && <button onClick={this.showSettings} className="bd-button bd-button-addon-settings" disabled={!this.props.enabled}>{Strings.Addons.addonSettings}</button>}
         return <div className="bd-controls">
-                    {this.props.hasSettings && this.makeControlButton(Strings.Addons.addonSettings, <CogIcon size={"24px"} />, this.showSettings, {disabled: !this.props.enabled})}
-                    {this.props.showReloadIcon && this.makeControlButton(Strings.Addons.reload, <ReloadIcon />, this.reload)}
-                    {this.props.editAddon && this.makeControlButton(Strings.Addons.editAddon, <EditIcon />, this.props.editAddon)}
-                    {this.props.deleteAddon && this.makeControlButton(Strings.Addons.deleteAddon, <DeleteIcon />, this.props.deleteAddon, {danger: true})}
+                    {this.props.hasSettings && this.makeControlButton(Strings.Addons.addonSettings, <CogIcon size={"20px"} />, this.showSettings, {disabled: !this.props.enabled})}
+                    {this.props.showReloadIcon && this.makeControlButton(Strings.Addons.reload, <ReloadIcon size={"20px"} />, this.reload)}
+                    {this.props.editAddon && this.makeControlButton(Strings.Addons.editAddon, <EditIcon size={"20px"} />, this.props.editAddon)}
+                    {this.props.deleteAddon && this.makeControlButton(Strings.Addons.deleteAddon, <DeleteIcon size={"20px"} />, this.props.deleteAddon, {danger: true})}
                 </div>;
     }