Fix: swage extension config button (#4551)

* add configure class to the slide-opener link

* better cog color

* cog color of extension configure

4 files changed, 33 insertions, 4 deletions

diff --git a/app/views/helpers/extension/details.phtml b/app/views/helpers/extension/details.phtml
index 08226e86c..f200ce0d8 100644
--- a/app/views/helpers/extension/details.phtml
+++ b/app/views/helpers/extension/details.phtml
@@ -16,7 +16,7 @@
 	}
 	if ($this->ext_details->getType() === 'user' || FreshRSS_Auth::hasAccess('admin')) {?>
 	<button class="switch<?= $button_class ?>" form="form-extension" formaction="<?= _url('extension', $action, 'e', $name_encoded) ?>" title="<?= _t('gen.action.enable') ?>"></button>
-	<a class="open-slider" title="<?= _t('gen.action.manage') ?>" href="<?= _url('extension', 'configure', 'e', $name_encoded) ?>"><?= _i('configure') ?></a>
+	<a class="open-slider configure" title="<?= _t('gen.action.manage') ?>" href="<?= _url('extension', 'configure', 'e', $name_encoded) ?>"><?= _i('configure') ?></a>
 	<span class="ext_name<?= $name_class ?>"><?= $this->ext_details->getName() ?></span>
 <?php } else { ?>
 	<button class="switch<?= $button_class ?>" title="<?= _t('admin.extensions.system.no_rights') ?>" disabled="disabled"></button>
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 1dd6cadc9..7535bbc0e 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -273,6 +273,14 @@ form th {
 	background: #f95c20 !important;
 }
 
+.manage-list .configure .icon {
+	filter: brightness(0.4);
+	vertical-align: sub;
+}
+.manage-list .configure:hover {
+	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+}
+
 .switch.active {
 	background-color: #0062be;
 }
@@ -542,7 +550,7 @@ form th {
 }
 .box .box-content .item .configure .icon {
 	vertical-align: middle;
-	filter: invert(1);
+	filter: brightness(0.4);
 }
 .box .box-content .item .configure .icon:hover {
 	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index e23c19cb7..15418f2cf 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -273,6 +273,14 @@ form th {
 	background: #f95c20 !important;
 }
 
+.manage-list .configure .icon {
+	filter: brightness(0.4);
+	vertical-align: sub;
+}
+.manage-list .configure:hover {
+	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+}
+
 .switch.active {
 	background-color: #0062be;
 }
@@ -542,7 +550,7 @@ form th {
 }
 .box .box-content .item .configure .icon {
 	vertical-align: middle;
-	filter: invert(1);
+	filter: brightness(0.4);
 }
 .box .box-content .item .configure .icon:hover {
 	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index a2afea81e..0a3b66e74 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -343,6 +343,19 @@ form {
 	}
 }
 
+.manage-list {
+	.configure {
+		.icon {
+			filter: brightness(0.4);
+			vertical-align: sub;
+		}
+
+		&:hover {
+			filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
+		}
+	}
+}
+
 .switch.active {
 	background-color: #0062be;
 
@@ -680,7 +693,7 @@ form {
 			.configure {
 				.icon {
 					vertical-align: middle;
-					filter: invert(1);
+					filter: brightness(0.4);
 
 					&:hover {
 						filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);