From e1a86d4e1c1c3f45b85bbaef1984d37e740726c3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 23 Aug 2020 23:55:03 -0500
Subject: [PATCH] SoapboxConfig: Improve style of delete icons

---
 app/soapbox/features/soapbox_config/index.js | 6 +++---
 app/styles/forms.scss                        | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index 68f88f862..b20d47a2f 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -271,7 +271,7 @@ class SoapboxConfig extends ImmutablePureComponent {
                           value={field.get('url')}
                           onChange={this.handlePromoItemChange(i, 'url', field)}
                         />
-                        <a onClick={this.handleDeleteItem(['promoPanel', 'items', i])}>Delete</a>
+                        <Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
                       </div>
                     ))
                   }
@@ -302,7 +302,7 @@ class SoapboxConfig extends ImmutablePureComponent {
                           value={field.get('url')}
                           onChange={this.handleHomeFooterItemChange(i, 'url', field)}
                         />
-                        <a onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])}>Delete</a>
+                        <Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
                       </div>
                     ))
                   }
@@ -328,7 +328,7 @@ class SoapboxConfig extends ImmutablePureComponent {
                         value={field}
                         onChange={this.handleChange(['customCss', i], (e) => e.target.value)}
                       />
-                      <a onClick={this.handleDeleteItem(['customCss', i])}>Delete</a>
+                      <Icon id='times-circle' onClick={this.handleDeleteItem(['customCss', i])} />
                     </div>
                   ))
                 }
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 8799838f3..5471f9778 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -999,3 +999,10 @@ code {
   border-color: $error-red !important;
   color: $error-red;
 }
+
+.input .row .fa-times-circle {
+  position: absolute;
+  right: 7px;
+  cursor: pointer;
+  color: $error-red;
+}