SoapboxConfig: improve style of IconPicker

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='mt-1 relative rounded-md shadow-sm dark:bg-slate-800 border border-solid border-gray-300 dark:border-gray-600 rounded-md'>
-      <div className='label_input__font_icon_picker'>
+      <IconPickerDropdown value={value} onPickEmoji={onChange} />
-        {label && (<label>{label}</label>)}
-        <div className='label_input_wrapper'>
-          <IconPickerDropdown value={value} onPickEmoji={onChange} />
-        </div>
-      </div>
     </div>
   );
 };

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 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
+          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>
 

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}

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;
     }