From 74266d383b829b44055b2941cdde07b9f74a5987 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Mon, 7 Mar 2022 16:35:12 +0000 Subject: [PATCH 1/8] [DDW-927] Restore opacity for search icon in focus --- .../tokens/wallet-tokens-search/WalletTokensSearch.scss | 4 ++++ 1 file changed, 4 insertions(+) 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..6c7ef309c5 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 @@ -17,6 +17,10 @@ .focusSearchIcon { color: var(--rp-input-border-color-focus); + + svg { + opacity: 0.7; + } } input { From 8a97743c046bda337ac49429b401554d1f3584e1 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Mon, 7 Mar 2022 16:35:31 +0000 Subject: [PATCH 2/8] [DDW-927] update translations --- source/renderer/app/i18n/locales/defaultMessages.json | 4 ++-- source/renderer/app/i18n/locales/en-US.json | 2 +- source/renderer/app/i18n/locales/ja-JP.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json index 167de60e07..b2524bc504 100644 --- a/source/renderer/app/i18n/locales/defaultMessages.json +++ b/source/renderer/app/i18n/locales/defaultMessages.json @@ -4635,7 +4635,7 @@ } }, { - "defaultMessage": "!!!You are already delegating {selectedWalletName} wallet to [{selectedPoolTicker}] stake pool. If you wish to re-delegate your stake, please select a different pool.", + "defaultMessage": "!!!You are already delegating {selectedWalletName} wallet to [{selectedPoolTicker}] stake pool. If you wish to re-delegate your stake, please select a different pool.", "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.", "end": { "column": 5, @@ -4649,7 +4649,7 @@ } }, { - "defaultMessage": "!!!You are already pending delegation {selectedWalletName} wallet to [{selectedPoolTicker}] stake pool. If you wish to re-delegate your stake, please select a different pool.", + "defaultMessage": "!!!You are already pending delegation {selectedWalletName} wallet to [{selectedPoolTicker}] stake pool. If you wish to re-delegate your stake, please select a different pool.", "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.", "end": { "column": 5, diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json index 178e47ea36..cef8b9aa66 100755 --- a/source/renderer/app/i18n/locales/en-US.json +++ b/source/renderer/app/i18n/locales/en-US.json @@ -1298,4 +1298,4 @@ "wallet.transferFunds.dialog2.total.label": "Total", "widgets.itemsDropdown.syncingLabel": "Syncing", "widgets.itemsDropdown.syncingLabelProgress": "Syncing {syncingProgress}%" -} +} \ No newline at end of file diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json index da75e87abc..ada5a79944 100755 --- a/source/renderer/app/i18n/locales/ja-JP.json +++ b/source/renderer/app/i18n/locales/ja-JP.json @@ -1298,4 +1298,4 @@ "wallet.transferFunds.dialog2.total.label": "合計", "widgets.itemsDropdown.syncingLabel": "同期", "widgets.itemsDropdown.syncingLabelProgress": "同期中 {syncingProgress}%" -} +} \ No newline at end of file From 2e8ba538c82655be030b49c7c9ed311a6e9ba9f3 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Mon, 7 Mar 2022 17:12:49 +0000 Subject: [PATCH 3/8] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ef46d677f..5229a3c4e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ ### Fixes - Fixed discrete tooltip being clipped by loading overlay when stake pools are adjusted ([PR 2902](https://github.com/input-output-hk/daedalus/pull/2902)) +- Restored opacity for search icon when focused ([PR 2909](https://github.com/input-output-hk/daedalus/pull/2909)) ## 4.9.0 From d3618f547cd367fc3b8e3465a1f3c2262d3a7c74 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Tue, 8 Mar 2022 16:23:07 +0000 Subject: [PATCH 4/8] fix transparency issue in staking search bar --- .../staking/stake-pools/StakePoolsSearch.scss | 7 +++++- .../staking/stake-pools/StakePoolsSearch.tsx | 24 ++++++++++++++----- .../WalletTokensSearch.scss | 4 +--- .../renderer/app/themes/daedalus/cardano.ts | 2 +- 4 files changed, 26 insertions(+), 11 deletions(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss index a0ef299b8f..ae7305690d 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss @@ -18,7 +18,6 @@ bottom: 12.5px; color: var(--theme-staking-stake-pools-search-icon-color); left: 20px; - opacity: 0.3; position: absolute; z-index: 1; @@ -31,6 +30,12 @@ } } +.focusSearchIcon { + 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 0f877d1e4f..4a95aa21ce 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 [focus, setFocus] = useState(false); + + const autoSelectOnFocus = () => { searchInput?.current - ? searchInput?.current?.inputElement.current.select() + ? searchInput.current.inputElement?.current?.select() : false; + setFocus(true); + }; + const handleClearSearch = () => { onClearSearch(); - searchInput?.current?.inputElement.current.focus(); + setFocus(true); }; const hasSearchClearButton = () => { @@ -96,7 +101,13 @@ function StakePoolsSearchComponent({ {({ scrollElementRef }) => (
- + { searchInput.current = input; }} + onFocus={autoSelectOnFocus} + onBlur={() => setFocus(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 6c7ef309c5..bd62f632b1 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; @@ -16,8 +16,6 @@ } .focusSearchIcon { - color: var(--rp-input-border-color-focus); - svg { opacity: 0.7; } diff --git a/source/renderer/app/themes/daedalus/cardano.ts b/source/renderer/app/themes/daedalus/cardano.ts index 4e127f60c8..6ae639d40a 100644 --- a/source/renderer/app/themes/daedalus/cardano.ts +++ b/source/renderer/app/themes/daedalus/cardano.ts @@ -871,7 +871,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', From c896b311e7177d37e3678fa679fc88a4b0290d8c Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Wed, 9 Mar 2022 11:27:28 +0000 Subject: [PATCH 5/8] rename focus classes --- CHANGELOG.md | 2 +- .../staking/stake-pools/StakePoolsSearch.scss | 3 ++- .../staking/stake-pools/StakePoolsSearch.tsx | 10 +++++----- .../wallet-tokens-search/WalletTokensSearch.scss | 2 +- .../tokens/wallet-tokens-search/WalletTokensSearch.tsx | 9 +++++---- 5 files changed, 14 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 577eb9fe59..ef2a0e1ebc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,8 +15,8 @@ ### Fixes -- Fixed discrete tooltip being clipped by loading overlay when stake pools are adjusted ([PR 2902](https://github.com/input-output-hk/daedalus/pull/2902)) - Restored opacity for search icon when focused ([PR 2909](https://github.com/input-output-hk/daedalus/pull/2909)) +- Fixed discrete tooltip being clipped by loading overlay when stake pools are adjusted ([PR 2902](https://github.com/input-output-hk/daedalus/pull/2902)) ## 4.9.0 diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss index 7f0fd8c978..c37ab4404b 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss @@ -24,13 +24,14 @@ svg { opacity: 0.3; width: 15px; + g > g { fill: var(--theme-staking-stake-pools-search-icon-color); } } } -.focusSearchIcon { +.searchIconFocus { svg { opacity: 0.7; } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx index 91db168d48..83d71ce9cc 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx @@ -57,20 +57,20 @@ function StakePoolsSearchComponent({ null ); - const [focus, setFocus] = useState(false); + const [isSearchInputFocused, setSearchInputFocused] = useState(false); const autoSelectOnFocus = () => { searchInput?.current ? searchInput.current.inputElement?.current?.select() : false; - setFocus(true); + setSearchInputFocused(true); }; const handleClearSearch = () => { onClearSearch(); searchInput?.current?.inputElement.current.focus(); - setFocus(true); + setSearchInputFocused(true); }; const hasSearchClearButton = () => { @@ -105,7 +105,7 @@ function StakePoolsSearchComponent({ svg={searchIcon} className={classnames( styles.searchIcon, - focus && styles.focusSearchIcon + isSearchInputFocused && styles.searchIconFocus )} /> setFocus(false)} + onBlur={() => setSearchInputFocused(false)} placeholder={ placeholder || intl.formatMessage(messages.searchInputPlaceholder) 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 bd62f632b1..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 @@ -15,7 +15,7 @@ } } - .focusSearchIcon { + .searchIconFocus { svg { opacity: 0.7; } 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)} From bec36c21eb0c642939b0f16c45746d198331f250 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Thu, 10 Mar 2022 12:03:15 +0000 Subject: [PATCH 6/8] update search icon color for dark blue theme --- source/renderer/app/themes/daedalus/dark-blue.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/renderer/app/themes/daedalus/dark-blue.ts b/source/renderer/app/themes/daedalus/dark-blue.ts index e6bb89547d..6dcadb2040 100644 --- a/source/renderer/app/themes/daedalus/dark-blue.ts +++ b/source/renderer/app/themes/daedalus/dark-blue.ts @@ -874,7 +874,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': From 5f9405f07a9a141697a2db5f575e13d9ff9f9356 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Thu, 10 Mar 2022 12:40:29 +0000 Subject: [PATCH 7/8] Update light-blue.ts --- source/renderer/app/themes/daedalus/light-blue.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/renderer/app/themes/daedalus/light-blue.ts b/source/renderer/app/themes/daedalus/light-blue.ts index 69a7cf9a18..759e395e15 100644 --- a/source/renderer/app/themes/daedalus/light-blue.ts +++ b/source/renderer/app/themes/daedalus/light-blue.ts @@ -867,7 +867,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', From b4d7265b1ccd9018a9864692150eaeb5bdb2b78f Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Mon, 14 Mar 2022 13:44:55 +0000 Subject: [PATCH 8/8] extend fix to wallet settings --- .../app/components/settings/categories/WalletsSettings.scss | 6 ++++++ 1 file changed, 6 insertions(+) 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; + } + } }