chore(header): rm-jobs, adjust tooltip style (#1060)

Author: mydearxym

src/components/Navigator/MainEntries/DesktopView.js renamed to src/components/Navigator/MainEntries/DesktopView.tsx

@@ -13,7 +13,11 @@ import { Wrapper, DotDivider, SiteLink, Icon } from '../styles/main_entries'
 
 const splitMargin = 7
 
-const DesktopView = ({ type }) => {
+type TProps = {
+  type: string
+}
+
+const DesktopView: React.FC<TProps> = ({ type }) => {
   const router = useRouter()
   const mainPath = getRouteMainPath(router.asPath)
 
@@ -27,18 +31,11 @@ const DesktopView = ({ type }) => {
           发现
         </SiteLink>
       </Link>
-      {/* <DotDivider space={splitMargin} />
-      <SiteLink>专栏</SiteLink> */}
-      {/* <Tooltip
-        placement="bottom"
-        trigger="click"
-        content={<DiscussLinker title="专栏" addr={`${ISSUE_ADDR}/265`} />}
-      >
-        <SiteLink>专栏</SiteLink>
-      </Tooltip> */}
       <DotDivider space={splitMargin} />
       <Link href={`/${ROUTE.WORKS}`} passHref>
-        <SiteLink active={mainPath === ROUTE.WORKS}>作品集市</SiteLink>
+        <SiteLink active={mainPath === ROUTE.WORKS} testid="header-works-link">
+          作品集市
+        </SiteLink>
       </Link>
       <DotDivider space={splitMargin} />
       <Link href={`/${ROUTE.COOL_GUIDE}`} passHref>
@@ -50,12 +47,13 @@ const DesktopView = ({ type }) => {
         </SiteLink>
       </Link>
       <DotDivider space={splitMargin} />
-      <Link href={`/${ROUTE.HAVE_A_DRINK}`} passHref>
-        <SiteLink>工作</SiteLink>
-      </Link>
-      <DotDivider space={splitMargin} />
       <Link href={`/${ROUTE.MEETUPS}`} passHref>
-        <SiteLink active={mainPath === ROUTE.MEETUPS}>活动</SiteLink>
+        <SiteLink
+          active={mainPath === ROUTE.MEETUPS}
+          testid="header-meetups-link"
+        >
+          活动
+        </SiteLink>
       </Link>
       <DotDivider space={splitMargin} />
       <Link href={`/${ROUTE.HAVE_A_DRINK}`} passHref>
@@ -73,20 +71,12 @@ const DesktopView = ({ type }) => {
         hideOnClick={false}
         noPadding
       >
-        <SiteLink>
+        <SiteLink testid="header-more-link">
           更多 <Icon src={`${ICON_CMD}/arrow_down.svg`} />
         </SiteLink>
       </Tooltip>
     </Wrapper>
   )
 }
 
-DesktopView.propTypes = {
-  type: T.oneOfType([T.string, T.instanceOf(null)]),
-}
-
-DesktopView.defaultProps = {
-  type: null,
-}
-
 export default React.memo(DesktopView)

src/components/Navigator/MainEntries/MobileView.js renamed to src/components/Navigator/MainEntries/MobileView.tsx

@@ -8,30 +8,22 @@ import { send } from '@/utils'
 // import MorePanel from '../MorePanel'
 import { Wrapper, SiteLink, MobileIcon } from '../styles/main_entries'
 
-export const openMobileNaviMenu = () => {
+export const openMobileNaviMenu = (): void => {
   send(EVENT.DRAWER.OPEN, {
     type: TYPE.DRAWER.MODELINE_MENU,
     data: TYPE.MM_TYPE.GLOBAL_MENU,
     options: { direction: 'top' },
   })
 }
 
-const MainEntries = () => {
+const MainEntries: React.FC = () => {
   return (
-    <Wrapper onClick={openMobileNaviMenu}>
-      <SiteLink as="span">
+    <Wrapper type="todo" onClick={openMobileNaviMenu}>
+      <SiteLink as="span" testid="header-mobile">
         <MobileIcon src={`${ICON}/shape/more-3.svg`} />
       </SiteLink>
     </Wrapper>
   )
 }
 
-MainEntries.propTypes = {
-  // type: T.oneOfType([T.string, T.instanceOf(null)]),
-}
-
-MainEntries.defaultProps = {
-  // type: null,
-}
-
 export default React.memo(MainEntries)

src/components/Navigator/MainEntries/index.js renamed to src/components/Navigator/MainEntries/index.tsx

@@ -20,9 +20,10 @@ export const DotDivider = styled(DotDividerBase)`
   width: 4px;
   height: 4px;
 `
+type TSiteLink = TTestable & TActive
 export const SiteLink = styled.a.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
-}))<TTestable & TActive>`
+}))<TSiteLink>`
   ${css.flex('align-center')};
   color: ${({ active }) =>
     active ? theme('banner.title') : theme('banner.desc')};

src/components/Navigator/styles/main_entries.ts

@@ -11,6 +11,7 @@ export const StyledTippy = styled(Tippy)`
   color: ${theme('thread.articleDigest')};
   box-shadow: ${theme('popover.boxShadow')};
   outline: none;
+  max-width: 480px !important;
 
   border-radius: 5px;
   padding: 10px;
@@ -21,6 +22,9 @@ export const StyledTippy = styled(Tippy)`
 `
 export const NoPaddingStyledTippy = styled(StyledTippy)`
   padding: 0;
+  .tippy-content {
+    padding: 0;
+  }
 `
 export const ContentWrapper = styled.div<{ contentHeight: string }>`
   position: relative;