bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SoapboxConfig: improve style of IconPicker

Browse source
This commit is contained in:
Alex Gleason 2022-05-05 17:29:24 -05:00
parent bec8f0fffe
commit 65beeedb59
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 4 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/soapbox/features/soapbox_config/components/icon-picker.tsx
View file

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

BIN
app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
View file

Binary file not shown.

2
app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
View file

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

22
app/styles/forms.scss
View file

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