diff --git a/CHANGELOG.md b/CHANGELOG.md index a4f3f2b7c3..8bdca52f9e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Fixes +- Restored opacity for search icon when focused ([PR 2909](https://github.com/input-output-hk/daedalus/pull/2909)) - Fixed styling of the incentivized testnet rewards wallet dropdown ([PR 2907](https://github.com/input-output-hk/daedalus/pull/2907)) - Fix warning sign displayed when recommend decimals is zero ([PR 2905](https://github.com/input-output-hk/daedalus/pull/2905)) - Fixed discrete tooltip being clipped by loading overlay when stake pools are adjusted ([PR 2902](https://github.com/input-output-hk/daedalus/pull/2902)) diff --git a/source/renderer/app/components/settings/categories/WalletsSettings.scss b/source/renderer/app/components/settings/categories/WalletsSettings.scss index 12a71bf0e3..09a0c23650 100644 --- a/source/renderer/app/components/settings/categories/WalletsSettings.scss +++ b/source/renderer/app/components/settings/categories/WalletsSettings.scss @@ -72,4 +72,10 @@ height: 1px; margin: 15px 0; } + + :global { + .SimpleOptions_search:before { + opacity: 1; + } + } } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss index 29b6fdd46a..c37ab4404b 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss @@ -18,19 +18,25 @@ bottom: 12.5px; color: var(--theme-staking-stake-pools-search-icon-color); left: 20px; - opacity: 0.3; position: absolute; z-index: 1; svg { opacity: 0.3; width: 15px; + g > g { fill: var(--theme-staking-stake-pools-search-icon-color); } } } +.searchIconFocus { + svg { + opacity: 0.7; + } +} + .searchInput { input { border-radius: 4px; diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx index 378087bb56..83d71ce9cc 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import SVGInline from 'react-svg-inline'; import { injectIntl } from 'react-intl'; import { Input } from 'react-polymorph/lib/components/Input'; @@ -57,15 +57,20 @@ function StakePoolsSearchComponent({ null ); - const autoSelectOnFocus = () => + const [isSearchInputFocused, setSearchInputFocused] = useState(false); + + const autoSelectOnFocus = () => { searchInput?.current - ? searchInput?.current?.inputElement.current.select() + ? searchInput.current.inputElement?.current?.select() : false; + setSearchInputFocused(true); + }; + const handleClearSearch = () => { onClearSearch(); - searchInput?.current?.inputElement.current.focus(); + setSearchInputFocused(true); }; const hasSearchClearButton = () => { @@ -96,7 +101,13 @@ function StakePoolsSearchComponent({ {({ scrollElementRef }) => (