Aug 13, 2021 · Aug 13, 2021
diff --git a/src/components/Switcher/Tabs/DesktopView.tsx b/src/components/Switcher/Tabs/DesktopView.tsx

  const navRef = useRef(null)

  console.log('--> layout: ', layout)
  // set initial slipbar with of active item
  // 给 slipbar 设置一个初始宽度
  useEffect(() => {
diff --git a/src/components/Switcher/Tabs/TabItem.tsx b/src/components/Switcher/Tabs/TabItem.tsx
    setItemWidth?.(index, width)
  }, [setItemWidth, index])

  const handleWrapperClick = useCallback(() =>{
    clickableRef.current.click()
 }, [clickableRef])
  const handleWrapperClick = useCallback(() =>clickableRef.current.click(), [
    clickableRef,
  ])

  const handleLabelClick = useCallback(
    (e) => {
diff --git a/src/components/Switcher/styles/tabs/tab_icon.ts b/src/components/Switcher/styles/tabs/tab_icon.ts

 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;
    active ? theme('tabs.headerActive') : theme('tabs.header')};

  ${css.size(15)};
  margin-right: 5px;

  ${css.media.mobile`
    ${css.size(13)};
diff --git a/utils/themes/skins/solarized_dark.ts b/utils/themes/skins/solarized_dark.ts
  },
  tabs: {
    headerActive: primaryColor,
    header: darken(0.1, primaryColor),
    header: darken(0.05, primaryColor),
    contentBg: '#0F4553',
    headerBg: '#0d3a49',
    headerActiveTop: primaryColor,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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(() => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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) => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Expand All		@@ -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)};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand Down