fix(tags): icon hold with mistake (#1147)

Author: mydearxym

src/components/Switcher/Tabs/DesktopView.tsx

@@ -76,6 +76,7 @@ const Tabs: FC<TProps> = ({
 
   const navRef = useRef(null)
 
+  console.log('--> layout: ', layout)
   // set initial slipbar with of active item
   // 给 slipbar 设置一个初始宽度
   useEffect(() => {

src/components/Switcher/Tabs/TabItem.tsx

@@ -57,9 +57,9 @@ const TabItem: FC<TProps> = ({
     setItemWidth?.(index, width)
   }, [setItemWidth, index])
 
-  const handleWrapperClick = useCallback(() => {
-    clickableRef.current.click()
-  }, [clickableRef])
+  const handleWrapperClick = useCallback(() => clickableRef.current.click(), [
+    clickableRef,
+  ])
 
   const handleLabelClick = useCallback(
     (e) => {

src/components/Switcher/styles/tabs/tab_icon.ts

@@ -7,6 +7,9 @@ import css from '@/utils/css'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
+  /* NOTE: the width and height here is a MUST, to hold the icon place, otherwise the width-calc will fail  */
+  width: 20px;
+  height: 15px;
 
   ${css.media.mobile`
     display: none;
@@ -17,7 +20,6 @@ export const Icon = styled(Img)<TActive>`
     active ? theme('tabs.headerActive') : theme('tabs.header')};
 
   ${css.size(15)};
-  margin-right: 5px;
 
   ${css.media.mobile`
     ${css.size(13)};

utils/themes/skins/solarized_dark.ts

@@ -290,7 +290,7 @@ const solarizedDark = {
   },
   tabs: {
     headerActive: primaryColor,
-    header: darken(0.1, primaryColor),
+    header: darken(0.05, primaryColor),
     contentBg: '#0F4553',
     headerBg: '#0d3a49',
     headerActiveTop: primaryColor,