feat: selected proxy, make it more pop

3 files changed, 35 insertions, 18 deletions

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 9762d8f..0e0269c 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,10 +1,12 @@
 import debounce from 'lodash-es/debounce';
 import React, { useCallback, useMemo, useState } from 'react';
 import { Search as SearchIcon } from 'react-feather';
+import { useTranslation } from 'react-i18next';
 
 import s0 from './Search.module.scss';
 
 function RuleSearch({ dispatch, searchText, updateSearchText }) {
+  const { t } = useTranslation();
   const [text, setText] = useState(searchText);
   const updateSearchTextInternal = useCallback(
     (v) => {
@@ -25,7 +27,13 @@ function RuleSearch({ dispatch, searchText, updateSearchText }) {
     <div className={s0.RuleSearch}>
       <div className={s0.RuleSearchContainer}>
         <div className={s0.inputWrapper}>
-          <input type="text" value={text} onChange={onChange} className={s0.input} />
+          <input
+            type="text"
+            value={text}
+            onChange={onChange}
+            className={s0.input}
+            placeholder={t('Search')}
+          />
         </div>
         <div className={s0.iconWrapper}>
           <SearchIcon size={20} />
diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index 96127ae..a4ac16c 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -11,9 +11,10 @@
   justify-content: space-between;
 
   outline: none;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
+
   &:focus {
-    border: 1px solid var(--color-focus-blue);
+    border-color: var(--color-focus-blue);
   }
 
   @media (--breakpoint-not-small) {
@@ -22,10 +23,12 @@
   }
 
   background-color: var(--color-bg-proxy);
+
   &.now {
     background-color: var(--color-focus-blue);
     color: #ddd;
   }
+
   &.error {
     opacity: 0.5;
   }
@@ -72,13 +75,22 @@
 }
 
 .proxySmall {
-  width: 11px;
-  height: 11px;
+  position: relative;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
-  border: 1px solid var(--color-background);
 
-  &.now {
-    border-color: var(--color-text-secondary);
+  .now {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 50%;
+    background-color: white;
   }
 
   &.selectable {
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index d559744..00f7c6b 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -77,13 +77,6 @@ function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: Pr
     isSelectable && onClick && onClick(name);
   }, [name, onClick, isSelectable]);
 
-  const className = useMemo(() => {
-    return cx(s0.proxySmall, {
-      [s0.now]: now,
-      [s0.selectable]: isSelectable,
-    });
-  }, [isSelectable, now]);
-
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent) => {
       if (e.keyCode === keyCodes.Enter) {
@@ -96,12 +89,16 @@ function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: Pr
   return (
     <div
       title={title}
-      className={className}
-      style={{ background: color }}
+      className={cx(s0.proxySmall, {
+        [s0.selectable]: isSelectable,
+      })}
+      style={{ background: color, scale: now ? '1.6' : '1' }}
       onClick={doSelect}
       onKeyDown={handleKeyDown}
       role={isSelectable ? 'menuitem' : ''}
-    />
+    >
+      {now && <div className={s0.now} />}
+    </div>
   );
 }