refactor(footer): redesign (#1029)

* chore: wip

* chore: covert FaceLogo to ts

* chore(Footer): re-org items wip

* chore(Footer): adjust color

* refactor(footer): redesign digest view

* refactor(footer): re-org

* refactor(Footer): re-org breif view

* refactor(footer): re-design non-home community footer

Author: mydearxym

src/components/Buttons/ArrowLink.tsx

@@ -17,11 +17,11 @@ import { Wrapper, Text, RightIcon } from './styles/arrow_link'
 const log = buildLog('c:Buttons:ArrowLink')
 
 type TProps = {
-  className: string
+  className?: string
   children?: React.ReactNode
   size?: TSIZE
   href: string
-  target: '_blank' | ''
+  target?: '_blank' | ''
   color?: string
   hoverColor?: string
 }

src/components/CommunityFaceLogo/index.js

@@ -0,0 +1,49 @@
+/*
+ *
+ * CommunityFaceLogo
+ *
+ */
+
+import React from 'react'
+import { isEmpty } from 'ramda'
+
+import { HCN } from '@/constant'
+// import { ICON_BASE } from '@/config'
+import { buildLog } from '@/utils'
+
+import { Logo, HomeLogo } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:CommunityFaceLogo:index')
+
+type TProps = {
+  noFill?: boolean
+  src?: string
+  raw?: string
+  loading?: boolean | null
+  className?: string
+}
+
+const CommunityFaceLogo: React.FC<TProps> = ({
+  noFill = false,
+  src = '',
+  raw = HCN,
+  loading,
+  className = 'community-facelogo-class',
+}) => {
+  if (raw === HCN || isEmpty(src)) {
+    return (
+      <HomeLogo
+        // src={`${ICON_BASE}/site_logo.svg`}
+        src="https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/static/new-logo.jpg"
+        className={className}
+      />
+    )
+  }
+
+  return (
+    <Logo noFill={noFill} src={src} loading={loading} className={className} />
+  )
+}
+
+export default React.memo(CommunityFaceLogo)

src/components/CommunityFaceLogo/index.tsx

@@ -3,9 +3,11 @@ import styled from 'styled-components'
 import { theme } from '@/utils'
 import Img from '@/Img'
 
-export const Logo = styled(Img)<{ nonFill: boolean }>`
-  fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.desc'))};
+export const Logo = styled(Img)<{ noFill?: boolean }>`
+  fill: ${({ noFill }) => (noFill ? '' : theme('banner.desc'))};
   display: block;
 `
 
-export const holder = 1
+export const HomeLogo = styled(Logo)`
+  transform: rotate(20deg);
+`

src/components/CommunityFaceLogo/styles/index.ts

@@ -0,0 +1,24 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { ROUTE } from '@/constant'
+
+import {
+  Wrapper,
+  InnerWrapper,
+  BeianLink,
+  CompanyLink,
+} from '../styles/desktop_view/bottom_info'
+
+const BottomInfo: React.FC = () => (
+  <Wrapper>
+    <InnerWrapper>
+      <CompanyLink href={ROUTE.SPONSOR}>
+        Groupher @ 2021. 保留所有权利。
+      </CompanyLink>
+      <BeianLink href="http://beian.miit.gov.cn">蜀ICP备17043722号-4</BeianLink>
+    </InnerWrapper>
+  </Wrapper>
+)
+
+export default React.memo(BottomInfo)

src/containers/unit/Footer/DesktopView/BottomInfo.js

@@ -1,76 +1,72 @@
 import React from 'react'
 
-import { ISSUE_ADDR, ICON_CMD, API_SERVER_ADDR } from '@/config'
+import { ISSUE_ADDR, API_SERVER_ADDR } from '@/config'
+
+import TopInfo from './TopInfo'
+import BottomInfo from './BottomInfo'
 
 import {
   Wrapper,
   InnerWrapper,
   MainInfos,
   BaseInfo,
-  Divider,
   Item,
-  Support,
-  CenterLogosWrapper,
-  SiteLogo,
-  LogoDivider,
-  GithubLogo,
 } from '../styles/desktop_view/brief_view'
 
-import { toggleSponsorHelper, toggleBusBanner } from '../logic'
+type TProps = {
+  curView: string // todo
+  metric: string
+}
 
-const BriefView = ({ curView, metric }) => {
+const BriefView: React.FC<TProps> = ({ curView, metric }) => {
   return (
-    <Wrapper>
-      <InnerWrapper metric={metric}>
+    <Wrapper metric={metric}>
+      <InnerWrapper>
+        <TopInfo noBottomBorder />
         <MainInfos center={curView === 'BRIEF' || false}>
           <BaseInfo>
             <Item href="/home/post/1" rel="noopener noreferrer" target="_blank">
               关于
             </Item>
-            <Divider>|</Divider>
             <Item
               href="/cps-support/posts"
               rel="noopener noreferrer"
               target="_blank"
             >
-              使用指南
+              创建社区
             </Item>
-            <Divider>|</Divider>
             <Item
-              href={`${ISSUE_ADDR}`}
+              href="/cps-support/posts"
               rel="noopener noreferrer"
               target="_blank"
             >
-              反馈与建议
+              加入我们
             </Item>
-            <CenterLogosWrapper>
-              <SiteLogo />
-              <LogoDivider radius={4} space={10} />
-              <GithubLogo src={`${ICON_CMD}/github.svg`} />
-            </CenterLogosWrapper>
             <Item
               href={`${API_SERVER_ADDR}`}
               rel="noopener noreferrer"
               target="_blank"
             >
-              API
+              OpenSource
+            </Item>
+            <Item
+              href={`${API_SERVER_ADDR}`}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              特别感谢
             </Item>
-            <Divider>|</Divider>
-            <Item onClick={toggleBusBanner}>商务合作</Item>
-
-            <Divider>|</Divider>
-            <Support onClick={toggleSponsorHelper}>打赏</Support>
-            <Divider>|</Divider>
             <Item
-              href={`${ISSUE_ADDR}/269`}
+              href={`${ISSUE_ADDR}`}
               rel="noopener noreferrer"
               target="_blank"
             >
-              客户端
+              反馈与建议
             </Item>
           </BaseInfo>
         </MainInfos>
       </InnerWrapper>
+      <BottomInfo />
     </Wrapper>
   )
 }