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 }) => (
- + { searchInput.current = input; }} + onFocus={autoSelectOnFocus} + onBlur={() => setSearchInputFocused(false)} placeholder={ placeholder || intl.formatMessage(messages.searchInputPlaceholder) @@ -112,7 +125,6 @@ function StakePoolsSearchComponent({ skin={InputSkin} value={search} maxLength={150} - onFocus={autoSelectOnFocus} /> {hasSearchClearButton && (
diff --git a/source/renderer/app/components/wallet/tokens/wallet-tokens-search/WalletTokensSearch.scss b/source/renderer/app/components/wallet/tokens/wallet-tokens-search/WalletTokensSearch.scss index d89cb72c3e..37ecb52512 100644 --- a/source/renderer/app/components/wallet/tokens/wallet-tokens-search/WalletTokensSearch.scss +++ b/source/renderer/app/components/wallet/tokens/wallet-tokens-search/WalletTokensSearch.scss @@ -2,7 +2,7 @@ position: relative; .searchIcon { - color: var(--rp-input-border-color); + color: var(--theme-staking-stake-pools-search-icon-color); left: 20px; position: absolute; top: 19px; @@ -15,8 +15,10 @@ } } - .focusSearchIcon { - color: var(--rp-input-border-color-focus); + .searchIconFocus { + svg { + opacity: 0.7; + } } input { diff --git a/source/renderer/app/components/wallet/tokens/wallet-tokens-search/WalletTokensSearch.tsx b/source/renderer/app/components/wallet/tokens/wallet-tokens-search/WalletTokensSearch.tsx index cae436fe8a..55204752a6 100644 --- a/source/renderer/app/components/wallet/tokens/wallet-tokens-search/WalletTokensSearch.tsx +++ b/source/renderer/app/components/wallet/tokens/wallet-tokens-search/WalletTokensSearch.tsx @@ -25,19 +25,20 @@ type Props = { const WalletTokensSearch = (props: Props) => { const { searchValue, onSearch, intl } = props; - const [focus, setFocus] = useState(false); + const [isSearchInputFocused, setSearchInputFocused] = useState(false); + return (
setFocus(true)} - onBlur={() => setFocus(false)} + onFocus={() => setSearchInputFocused(true)} + onBlur={() => setSearchInputFocused(false)} onChange={onSearch} value={searchValue} placeholder={intl.formatMessage(messages.placeholder)} diff --git a/source/renderer/app/themes/daedalus/cardano.ts b/source/renderer/app/themes/daedalus/cardano.ts index f81f15091d..ba3d02ee9a 100644 --- a/source/renderer/app/themes/daedalus/cardano.ts +++ b/source/renderer/app/themes/daedalus/cardano.ts @@ -873,7 +873,7 @@ export const CARDANO_THEME_OUTPUT = { '--theme-staking-stake-pool-tooltip-table-title-color': '#5e6066', '--theme-staking-stake-pool-tooltip-text-color': '#5e6066', '--theme-staking-stake-pools-search-button-color': '#5e6066', - '--theme-staking-stake-pools-search-icon-color': 'rgba(94, 96, 102, 1)', + '--theme-staking-stake-pools-search-icon-color': '#5e6066', '--theme-staking-stake-pools-search-clear-button-background-color': 'rgba(32, 34, 37, 0.1)', '--theme-staking-stake-pools-search-clear-button-color': '#5e6066', diff --git a/source/renderer/app/themes/daedalus/dark-blue.ts b/source/renderer/app/themes/daedalus/dark-blue.ts index d7227f6019..00f43cff9c 100644 --- a/source/renderer/app/themes/daedalus/dark-blue.ts +++ b/source/renderer/app/themes/daedalus/dark-blue.ts @@ -876,7 +876,7 @@ export const DARK_BLUE_THEME_OUTPUT = { '--theme-staking-stake-pool-tooltip-table-title-color': '#e9f4fe', '--theme-staking-stake-pool-tooltip-text-color': '#e9f4fe', '--theme-staking-stake-pools-search-button-color': '#e9f4fe', - '--theme-staking-stake-pools-search-icon-color': '#8793a1', + '--theme-staking-stake-pools-search-icon-color': '#e9f4fe', '--theme-staking-stake-pools-search-clear-button-background-color': 'rgba(233, 244, 254, 0.1)', '--theme-staking-stake-pools-search-clear-button-color': diff --git a/source/renderer/app/themes/daedalus/light-blue.ts b/source/renderer/app/themes/daedalus/light-blue.ts index 29ae485f59..71c3abf722 100644 --- a/source/renderer/app/themes/daedalus/light-blue.ts +++ b/source/renderer/app/themes/daedalus/light-blue.ts @@ -869,7 +869,7 @@ export const LIGHT_BLUE_THEME_OUTPUT = { '--theme-staking-stake-pool-tooltip-table-title-color': '#5e6066', '--theme-staking-stake-pool-tooltip-text-color': '#5e6066', '--theme-staking-stake-pools-search-button-color': '#5e6066', - '--theme-staking-stake-pools-search-icon-color': 'rgba(94, 96, 102, 1)', + '--theme-staking-stake-pools-search-icon-color': '#5e6066', '--theme-staking-stake-pools-search-clear-button-background-color': 'rgba(68, 91, 124, 0.1)', '--theme-staking-stake-pools-search-clear-button-color': '#5e6066',