From 65beeedb5944ef082a45711e0ce81ca1dc034f8d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 17:29:24 -0500
Subject: [PATCH] SoapboxConfig: improve style of IconPicker

---
 .../soapbox_config/components/icon-picker.tsx | 12 +++-------
 .../components/icon_picker_dropdown.js        | 14 ++++++++++--
 .../components/promo-panel-input.tsx          |  2 +-
 app/styles/forms.scss                         | 22 -------------------
 4 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/components/icon-picker.tsx b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
index 7fa060b54..2531eca0a 100644
--- a/app/soapbox/features/soapbox_config/components/icon-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
@@ -3,20 +3,14 @@ import React from 'react';
 import IconPickerDropdown from './icon_picker_dropdown';
 
 interface IIconPicker {
-  label?: React.ReactNode,
   value: string,
   onChange: React.ChangeEventHandler,
 }
 
-const IconPicker: React.FC<IIconPicker> = ({ onChange, value, label }) => {
+const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
   return (
-    <div className='input with_label font_icon_picker'>
-      <div className='label_input__font_icon_picker'>
-        {label && (<label>{label}</label>)}
-        <div className='label_input_wrapper'>
-          <IconPickerDropdown value={value} onPickEmoji={onChange} />
-        </div>
-      </div>
+    <div className='mt-1 relative rounded-md shadow-sm dark:bg-slate-800 border border-solid border-gray-300 dark:border-gray-600 rounded-md'>
+      <IconPickerDropdown value={value} onPickEmoji={onChange} />
     </div>
   );
 };
diff --git a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
index 56258f5ad..8c2bdf473 100644
--- a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
+++ b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
@@ -215,8 +215,18 @@ class IconPickerDropdown extends React.PureComponent {
     const forkAwesomeIcons = require('../forkawesome.json');
 
     return (
-      <div className='font-icon-picker-dropdown' onKeyDown={this.handleKeyDown}>
-        <div ref={this.setTargetRef} className='font-icon-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
+      <div onKeyDown={this.handleKeyDown}>
+        <div
+          ref={this.setTargetRef}
+          className='h-[38px] w-[38px] text-lg flex items-center justify-center cursor-pointer'
+          title={title}
+          aria-label={title}
+          aria-expanded={active}
+          role='button'
+          onClick={this.onToggle}
+          onKeyDown={this.onToggle}
+          tabIndex={0}
+        >
           <Icon id={value} />
         </div>
 
diff --git a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
index d48370e7a..3bda1f1d8 100644
--- a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
@@ -28,7 +28,7 @@ const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange
   };
 
   return (
-    <HStack space={2} grow>
+    <HStack space={2} alignItems='center' grow>
       <IconPicker
         value={value.icon}
         onChange={handleIconChange}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 901853323..6c0625572 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -542,28 +542,6 @@ code {
       }
     }
 
-    &__font_icon_picker {
-      font-size: 14px;
-
-      .font-icon-button {
-        padding: 9px;
-        border: 1px solid var(--highlight-text-color);
-        border-radius: 4px;
-        cursor: pointer;
-        outline: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 38px;
-        box-sizing: border-box;
-
-        .fa {
-          font-size: 18px;
-          color: var(--primary-text-color);
-        }
-      }
-    }
-
     &__wrapper {
       position: relative;
     }