[feature/frogend] modify local emoji (#1143)

* update danger button red

* emoji category and image modification

* debug bundles in dev

* fix linting error

2 files changed, 16 insertions, 9 deletions

diff --git a/web/source/settings/components/combo-box.jsx b/web/source/settings/components/combo-box.jsx
index 1e6293890..d69df55b1 100644
--- a/web/source/settings/components/combo-box.jsx
+++ b/web/source/settings/components/combo-box.jsx
@@ -26,16 +26,19 @@ const {
 	ComboboxPopover,
 } = require("ariakit/combobox");
 
-module.exports = function ComboBox({state, items, label, placeHolder}) {
+module.exports = function ComboBox({state, items, label, placeHolder, children}) {
 	return (
 		<div className="form-field combobox-wrapper">
 			<label>
 				{label}
-				<Combobox
-					state={state}
-					placeholder={placeHolder}
-					className="combobox input"
-				/>
+				<div className="row">
+					<Combobox
+						state={state}
+						placeholder={placeHolder}
+						className="combobox input"
+					/>
+					{children}
+				</div>
 			</label>
 			<ComboboxPopover state={state} className="popover">
 				{items.map(([key, value]) => (
diff --git a/web/source/settings/components/form/combobox.jsx b/web/source/settings/components/form/combobox.jsx
index 6ab235ed3..d21a8c3f3 100644
--- a/web/source/settings/components/form/combobox.jsx
+++ b/web/source/settings/components/form/combobox.jsx
@@ -20,11 +20,15 @@
 
 const { useComboboxState } = require("ariakit/combobox");
 
-module.exports = function useComboBoxInput({name, Name}, {validator} = {}) {
-	const state = useComboboxState({ gutter: 0, sameWidth: true });
+module.exports = function useComboBoxInput({name, Name}, {validator, defaultValue} = {}) {
+	const state = useComboboxState({
+		defaultValue,
+		gutter: 0,
+		sameWidth: true
+	});
 
 	function reset() {
-		state.value = "";
+		state.setValue("");
 	}
 
 	return [