minor style changes for gradient edit button in configuration panel

Author: hvianna

src/index.js

@@ -2921,7 +2921,7 @@ function populateEnabledGradients() {
 		elEnabledGradients.innerHTML +=
 			`<label>
 				<input type="checkbox" class="enabledGradient" data-grad="${key}" ${gradients[ key ].disabled ? '' : 'checked'}>
-				${gradients[ key ].name}<a href="#" data-grad="${key}" class="grad-edit-link">Edit</a>
+				${gradients[ key ].name}<a href="#" data-grad="${key}" class="grad-edit-link" title="edit"></a>
 			</label>`;
 	});
 

src/styles.css

@@ -1665,19 +1665,25 @@ button.grad-add-stop:hover {
 	display: block;
 }
 .grad-edit-link {
-	background: var(--accent-color);
+	background: #aaa;
 	border-radius: 4px;
 	color: #fff;
 	display: none;
-	font-size: .9em;
-	padding: .7em 1.4em;
+	font-family: var(--icon-font);
+	font-size: 24px;
+	padding: .2em .6em;
 	position: absolute;
 	right: 0;
 	text-decoration: none;
-	text-transform: uppercase;
 	top: 50%;
 	transform: translateY(-50%);
 }
+.grad-edit-link:before {
+	content: 'edit';
+}
+.grad-edit-link:hover {
+	background: var(--accent-color);
+}
 
 /**
  * Warp Tunnel effect