chore(face): brand title & footer naming, style

Author: mydearxym

src/components/BrandTitle/index.tsx

@@ -0,0 +1,43 @@
+/*
+ *
+ * BrandTitle
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils/logger'
+import { SpaceGrow } from '@/components/Common'
+
+import { Wrapper, Title, Desc, BrandText } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:BrandTitle:index')
+
+type TProps = {
+  testid?: string
+  title?: string
+  desc?: string
+  mBottom?: number
+  fontSize?: number
+}
+
+const BrandTitle: FC<TProps> = ({
+  testid = 'brand-title',
+  title = 'hello?',
+  desc = 'what for?',
+  mBottom = 10,
+  fontSize = 18,
+}) => {
+  return (
+    <Wrapper testid={testid} mBottom={mBottom}>
+      <Title>
+        <BrandText fontSize={fontSize}>{title}</BrandText>
+        <SpaceGrow />
+      </Title>
+      <Desc>{desc}</Desc>
+    </Wrapper>
+  )
+}
+
+export default memo(BrandTitle)

src/components/BrandTitle/styles/index.ts

@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+// import Img from '@/Img'
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+
+type TWrapper = TTestable & { mBottom: number }
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TWrapper>`
+  margin-bottom: ${({ mBottom }) => `${mBottom}px`};
+`
+export const Title = styled.div`
+  ${css.flex()};
+`
+export const Desc = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  margin-top: 15px;
+`
+type TBrandText = { fontSize: number }
+export const BrandText = styled.div<TBrandText>`
+  color: ${theme('thread.articleTitle')};
+  font-size: ${({ fontSize }) => `${fontSize}px`};
+  font-weight: bold;
+  padding: 0 4px;
+  border-radius: 3px;
+  letter-spacing: 1px;
+
+  background: linear-gradient(
+    to top,
+    #003b49 35%,
+    transparent 35%,
+    transparent 80%
+  );
+`

src/components/BrandTitle/tests/index.test.ts

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import BrandTitle from '../index'
+
+describe('TODO <BrandTitle />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})

src/components/Header/DesktopView/GeneralLayout.tsx

@@ -0,0 +1,64 @@
+/*
+ *
+ * Header
+ *
+ */
+
+import { FC, memo } from 'react'
+import { contains } from 'ramda'
+import dynamic from 'next/dynamic'
+
+import type { TMetric } from '@/spec'
+import { METRIC } from '@/constant'
+import { buildLog } from '@/utils/logger'
+
+import Navigator from '@/components/Navigator'
+
+import type { TProps } from '../index'
+import {
+  Wrapper,
+  InnerWrapper,
+  RouterWrapper,
+} from '../styles/desktop_view/general_layout'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:Header')
+
+// let MailBox
+const AddOns = dynamic(() => import('../AddOns'), { ssr: false })
+
+const hasNoBorder = (metric: TMetric): boolean =>
+  contains(metric, [
+    METRIC.DISCOVERY,
+    METRIC.SPONSOR,
+    METRIC.SUPPORT_US,
+    METRIC.SUBSCRIBE,
+    METRIC.ARTICLE,
+    METRIC.MEMBERSHIP,
+    METRIC.USER,
+    METRIC.COMMUNITY_EDITOR,
+    METRIC.HELP_CENTER,
+  ])
+
+const GeneralHeader: FC<TProps> = ({ metric, c11n, community }) => {
+  return (
+    <Wrapper
+      id="whereCallShowDoraemon"
+      testid="header"
+      noBorder={hasNoBorder(metric)}
+    >
+      <InnerWrapper metric={metric}>
+        <RouterWrapper>
+          <Navigator
+            community={community}
+            layout={c11n.bannerLayout}
+            metric={metric}
+          />
+        </RouterWrapper>
+        <AddOns />
+      </InnerWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(GeneralHeader)

src/components/Header/DesktopView/index.tsx

@@ -5,7 +5,8 @@ import { METRIC } from '@/constant'
 import type { TProps } from '../index'
 import CommunityLayout from './CommunityLayout'
 import ArticleLayout from './ArticleLayout'
-import WorksLayout from './WorksLayout'
+// import WorksLayout from './WorksLayout'
+import GeneralLayout from './GeneralLayout'
 // import ArticleEditorView from './ArticleEditorView'
 
 const DesktopView: FC<TProps> = (props) => {
@@ -17,14 +18,11 @@ const DesktopView: FC<TProps> = (props) => {
     case METRIC.WORKS_ARTICLE: {
       return <ArticleLayout {...props} />
     }
-    case METRIC.WORKS: {
-      return <WorksLayout {...props} />
+    case METRIC.COMMUNITY: {
+      return <CommunityLayout {...props} />
     }
-    // case METRIC.ARTICLE_EDITOR: {
-    //   return <ArticleEditorView metric={metric} />
-    // }
     default: {
-      return <CommunityLayout {...props} />
+      return <GeneralLayout {...props} />
     }
   }
 }

src/components/Header/styles/desktop_view/general_layout.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+import type { TTestable, TMetric } from '@/spec'
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+
+type TPos = {
+  noBorder: boolean
+}
+
+type IWrapper = TPos & TTestable
+
+export const Wrapper = styled.header.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<IWrapper>`
+  width: 100%;
+  height: 33px;
+  ${css.flex('justify-center')};
+  background: ${theme('header.bg')};
+  opacity: 1;
+  border-bottom: ${({ noBorder }) => (noBorder ? 'none' : '1px solid')};
+  border-bottom-color: ${theme('header.spliter')};
+  box-shadow: ${({ noBorder }) => (noBorder ? 'none' : theme('drawer.shadow'))};
+`
+
+type TInnerWrapper = { metric: TMetric }
+
+export const InnerWrapper = styled.div<TInnerWrapper>`
+  ${css.flex('align-center')};
+  width: 100%;
+  height: 33px;
+  ${({ metric }) => css.fitContentWidth(metric)};
+  padding-left: 0;
+  padding-right: 0;
+`
+export const RouterWrapper = styled.div`
+  ${css.flexGrow('align-center')};
+  height: 100%;
+`

src/components/NaviCatalog/index.tsx

@@ -18,7 +18,6 @@ import { getQueryFromUrl, markRoute } from '@/utils/route'
 import type { TMenuMode } from './spec'
 import { ROOT_MENU, CHILD_MENU } from './constant'
 
-import Button from '@/components/Buttons/Button'
 import Header from './Header'
 import Dashboard from './Dashboard'
 import List from './List'
@@ -196,16 +195,6 @@ const NaviCatalog: FC<TProps> = ({
         onReset={handleReset}
         viewPath={viewPath}
       />
-      <Button
-        ghost
-        size="small"
-        onClick={() => {
-          const ret = tags2Menu(tags)
-          console.log('ret =>: ', ret)
-        }}
-      >
-        test
-      </Button>
       <Dashboard viewPath={viewPath} goCatalog={handleGoCatalog} />
       <List
         menuMode={menuMode}

src/containers/content/CoolGuideContent/FilterBar.tsx

@@ -4,7 +4,7 @@ import { ICON_CMD } from '@/config'
 import { mockNaviCatalogTags } from '@/utils/mock'
 
 import Sticky from '@/components/Sticky'
-import NaviIntro from '@/components/NaviIntro'
+import BrandTitle from '@/components/BrandTitle'
 import NaviCatalog from '@/components/NaviCatalog'
 
 import {
@@ -28,11 +28,8 @@ const FilterBar: FC<TProps> = ({ topFilter, menuOnSelect }) => {
   return (
     <Wrapper testid="filter-bar">
       <TopFilter>
-        <NaviIntro
-          title="酷导航"
-          desc="the cool guide"
-          iconSrc={`${ICON_CMD}/navi/cool-guide-logo.svg`}
-        />
+        <BrandTitle title="酷导航" desc="实用指南，启发灵感，找到有趣" />
+        <Divider />
         {topFilter !== 'all' && (
           <Option onClick={() => topFilterOnChange('all')}>全部</Option>
         )}

src/containers/content/CoolGuideContent/index.tsx

@@ -21,8 +21,8 @@ import { useInit, menuOnSelect } from './logic'
 const log = buildLog('C:CoolGuideContent')
 
 type TProps = {
-  coolGuideContent: TStore
-  metric: TMetric
+  coolGuideContent?: TStore
+  metric?: TMetric
   testid?: string
 }
 

src/containers/content/MeetupsContent/FilterBar/index.tsx

@@ -1,24 +1,16 @@
 import { FC } from 'react'
 
 import type { TFiltersMenuItems } from '@/spec'
-import { ICON_CMD } from '@/config'
 
 import { mockFilterMenuTags } from '@/utils/mock'
 
-import { Br } from '@/components/Common'
+import BrandTitle from '@/components/BrandTitle'
 import Sticky from '@/components/Sticky'
 import Button from '@/components/Buttons/Button'
 import FiltersMenu from '@/components/FiltersMenu'
 import DotDivider from '@/components/DotDivider'
 
-import {
-  Wrapper,
-  MeetupIcon,
-  LogoDesc,
-  NaviFooter,
-  Terms,
-  TermItem,
-} from '../styles/filter_bar'
+import { Wrapper, NaviFooter, Terms, TermItem } from '../styles/filter_bar'
 
 type TProps = {
   filtersItems: TFiltersMenuItems
@@ -28,9 +20,12 @@ const FilterBar: FC<TProps> = ({ filtersItems }) => {
   return (
     <Wrapper>
       <Sticky offsetTop={30}>
-        <MeetupIcon src={`${ICON_CMD}/navi/meetup_logo.svg`} />
-        <LogoDesc>来和志同道合的朋友们一起聊聊?</LogoDesc>
-        <Br bottom={34} />
+        <BrandTitle
+          title="Meetup"
+          fontSize={23}
+          mBottom={30}
+          desc="来和志同道合的朋友们一起聊聊?"
+        />
         <FiltersMenu tags={mockFilterMenuTags()} revert />
         <NaviFooter>
           <Button type="primary" size="small" ghost>