Merge pull request input-output-hk#2909 from input-output-hk/fix/ddw-…

…927-fix-search-icon-transparencies-for-different-states
fstoqnov-iohk · Mar 17, 2022 · 00372b5 · 00372b5
2 parents 3c981a7 + b4d7265
commit 00372b5
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }) => (
         <div className={styles.component}>
           <div className={styles.container}>
-            <SVGInline svg={searchIcon} className={styles.searchIcon} />
+            <SVGInline
+              svg={searchIcon}
+              className={classnames(
+                styles.searchIcon,
+                isSearchInputFocused && styles.searchIconFocus
+              )}
+            />
             <Input
               autoFocus
               label={label || null}
@@ -105,14 +116,15 @@ function StakePoolsSearchComponent({
               ref={(input) => {
                 searchInput.current = input;
               }}
+              onFocus={autoSelectOnFocus}
+              onBlur={() => setSearchInputFocused(false)}
               placeholder={
                 placeholder ||
                 intl.formatMessage(messages.searchInputPlaceholder)
               }
               skin={InputSkin}
               value={search}
               maxLength={150}
-              onFocus={autoSelectOnFocus}
             />
             {hasSearchClearButton && (
               <div className={clearSearchClasses}>

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
@@ -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
@@ -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 (
     <div className={styles.component}>
       <SVGInline
         svg={searchIcon}
         className={classNames(
           styles.searchIcon,
-          focus && styles.focusSearchIcon
+          isSearchInputFocused && styles.searchIconFocus
         )}
       />
       <Input
-        onFocus={() => 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
@@ -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
@@ -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
@@ -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',