diff --git a/src/components/Form/Settings/Dropdown/Dropdown.jsx b/src/components/Form/Settings/Dropdown/Dropdown.jsx index 243b8e46..d4585d45 100644 --- a/src/components/Form/Settings/Dropdown/Dropdown.jsx +++ b/src/components/Form/Settings/Dropdown/Dropdown.jsx @@ -1,6 +1,7 @@ import variables from 'config/variables'; import { memo, useState, useCallback, useRef, useEffect } from 'react'; -import { MdExpandMore, MdCheck } from 'react-icons/md'; +import { MdExpandMore, MdCheck, MdRefresh } from 'react-icons/md'; +import { toast } from 'react-toastify'; import EventBus from 'utils/eventbus'; @@ -103,13 +104,27 @@ const Dropdown = memo((props) => { [onChange], ); + const resetItem = useCallback(() => { + const defaultValue = props.default || props.items[0]?.value; + onChange(defaultValue); + toast(variables.getMessage('toasts.reset')); + }, [onChange, props.default, props.items]); + const id = 'dropdown' + props.name; const label = props.label || ''; const selectedItem = props.items.find((item) => item?.value === value); return (
- {label && } + {label && ( +
+ + + + {variables.getMessage('modals.main.settings.buttons.reset')} + +
+ )}
!props.disabled && setIsOpen(!isOpen)} diff --git a/src/components/Form/Settings/Dropdown/Dropdown.scss b/src/components/Form/Settings/Dropdown/Dropdown.scss index e0874aa7..e60f85f6 100644 --- a/src/components/Form/Settings/Dropdown/Dropdown.scss +++ b/src/components/Form/Settings/Dropdown/Dropdown.scss @@ -24,9 +24,14 @@ pointer-events: none; } - .dropdown-label { - display: block; + .dropdown-header { + display: flex; + align-items: center; + justify-content: space-between; margin-bottom: 8px; + } + + .dropdown-label { font-size: 12px; font-weight: 500; text-transform: uppercase; @@ -37,6 +42,29 @@ } } + .dropdown-reset { + display: flex; + align-items: center; + gap: 5px; + cursor: pointer; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + + @include themed { + color: t($link); + } + + &:hover { + opacity: 0.8; + } + + svg { + font-size: 12px; + } + } + .dropdown-control { display: flex; align-items: center;