style(report): redesign sub panel

src/components/Buttons/styles/yes_or_no_buttons.ts

@@ -10,6 +10,14 @@ export const Wrapper = styled.div<TWrapper>`
     align === 'center' ? 'center' : 'flex-end'};
 `
 export const CancelBtn = styled.div`
+  opacity: 0.8;
   color: ${theme('button.primary')};
   font-size: 14px;
+
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+
+  transition: opacity 0.2s;
 `

src/containers/tool/AbuseReport/Footer.tsx

@@ -3,6 +3,7 @@ import { FC } from 'react'
 import { YesOrNoButtons } from '@/components/Buttons'
 
 import { Wrapper } from './styles/footer'
+import { goBack } from './logic'
 
 type TProps = {
   view: 'main' | 'detail'
@@ -14,7 +15,11 @@ const Footer: FC<TProps> = ({ view }) => {
   return (
     <Wrapper>
       {/* <Note>举报后社区志愿者会在第一时间【处理】。</Note> */}
-      <YesOrNoButtons confirmText="举报" />
+      <YesOrNoButtons
+        cancelText="上一步"
+        confirmText="举报"
+        onCancel={goBack}
+      />
     </Wrapper>
   )
 }

src/containers/tool/AbuseReport/Header.tsx

@@ -1,7 +1,9 @@
-import { FC } from 'react'
+import { FC, memo } from 'react'
 
 import { REPORT_TYPE } from '@/constant'
 import { ICON } from '@/config'
+
+import type { TREPORT_ITEM } from './spec'
 import { Wrapper, ReportIcon, Text, ContentTitle } from './styles/header'
 
 const getCustomTitle = (type: string): string => {
@@ -23,16 +25,22 @@ const getCustomTitle = (type: string): string => {
 
 type TProps = {
   type: string
+  view: 'main' | 'detail'
+  activeItem: TREPORT_ITEM
 }
 
-const Header: FC<TProps> = ({ type }) => {
+const Header: FC<TProps> = ({ type, view, activeItem }) => {
   return (
-    <Wrapper>
+    <Wrapper showShadow={view === 'detail'}>
       <ReportIcon src={`${ICON}/article/report-solid.svg`} />
-      <Text>举报{getCustomTitle(type)}</Text>
+      {view === 'detail' ? (
+        <Text>{activeItem.title}</Text>
+      ) : (
+        <Text>举报{getCustomTitle(type)}</Text>
+      )}
       <ContentTitle>这是一首简单的小情歌</ContentTitle>
     </Wrapper>
   )
 }
 
-export default Header
+export default memo(Header)

src/containers/tool/AbuseReport/ReportContent/Detail.tsx

@@ -2,11 +2,9 @@ import { FC } from 'react'
 
 import Input from '@/components/Input'
 import { Br } from '@/components/Common'
-import { ArrowButton } from '@/components/Buttons'
 
 import type { TREPORT_ITEM } from '../spec'
 import { Wrapper, DetailDesc } from '../styles/report_content/detail'
-import { goBack } from '../logic'
 
 type TProps = {
   activeItem: TREPORT_ITEM
@@ -15,15 +13,6 @@ type TProps = {
 const Detail: FC<TProps> = ({ activeItem }) => {
   return (
     <Wrapper>
-      <ArrowButton
-        size="small"
-        direction="left"
-        arrowStyle="simple"
-        onClick={() => goBack()}
-      >
-        {activeItem.title}
-      </ArrowButton>
-      <Br bottom={10} />
       <DetailDesc>{activeItem.detail}</DetailDesc>
       <Br bottom={25} />
       <Input

src/containers/tool/AbuseReport/ReportContent/Main.tsx

@@ -1,11 +1,18 @@
-import { FC, Fragment } from 'react'
+import { FC } from 'react'
 
 import { SpaceGrow } from '@/components/Common'
 import Checker from '@/components/Checker'
 
 import type { TREPORT_ITEM } from '../spec'
 
-import { Option, SelectWrapper, Title } from '../styles/report_content/main'
+import {
+  Wrapper,
+  OptionsWrapper,
+  Option,
+  SelectWrapper,
+  Title,
+  Panel,
+} from '../styles/report_content/main'
 import { selectItem } from '../logic'
 
 type TProps = {
@@ -15,18 +22,21 @@ type TProps = {
 
 const Main: FC<TProps> = ({ items, activeItem }) => {
   return (
-    <Fragment>
-      {items &&
-        items.map((item) => (
-          <Option key={item.raw}>
-            <SelectWrapper onClick={() => selectItem(item.raw)}>
-              <Checker checked={item.raw === activeItem.raw} />
-              <Title active={item.raw === activeItem.raw}>{item.title}</Title>
-            </SelectWrapper>
-            <SpaceGrow />
-          </Option>
-        ))}
-    </Fragment>
+    <Wrapper>
+      <OptionsWrapper>
+        {items &&
+          items.map((item) => (
+            <Option key={item.raw}>
+              <SelectWrapper onClick={() => selectItem(item.raw)}>
+                <Checker checked={item.raw === activeItem.raw} />
+                <Title active={item.raw === activeItem.raw}>{item.title}</Title>
+              </SelectWrapper>
+              <SpaceGrow />
+            </Option>
+          ))}
+      </OptionsWrapper>
+      <Panel>感谢你用实际行动为社区净化作出贡献。</Panel>
+    </Wrapper>
   )
 }
 

src/containers/tool/AbuseReport/index.tsx

@@ -37,7 +37,7 @@ const AbuseReportContainer: FC<TProps> = ({
   return (
     <Modal width="500px" show={show} showCloseBtn onClose={() => close()}>
       <Wrapper testid={testid}>
-        <Header type={type} />
+        <Header type={type} view={view} activeItem={activeItem} />
         <ReportContent view={view} items={itemsData} activeItem={activeItem} />
         <Footer view={view} />
       </Wrapper>

src/containers/tool/AbuseReport/styles/footer.ts

@@ -3,7 +3,8 @@ import styled from 'styled-components'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div`
-  margin-top: 35px;
+  background: ${theme('modal.subPanel')};
+  height: 50px;
 `
 export const Note = styled.div`
   color: ${theme('thread.articleDigest')};

src/containers/tool/AbuseReport/styles/header.ts

@@ -3,17 +3,23 @@ import styled from 'styled-components'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ showShadow: boolean }>`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
-  margin-bottom: 20px;
+  background: ${theme('modal.bg')};
+  padding: 20px 38px;
+  filter: ${({ showShadow }) =>
+    showShadow ? theme('modal.subPanelShadow') : ''};
+  /* filter: ${theme('modal.subPanelShadow')}; */
+  z-index: 1;
 `
 export const ReportIcon = styled(Img)`
   ${css.size(16)};
   fill: ${theme('baseColor.red')};
 `
 export const Text = styled.div`
   color: ${theme('thread.articleTitle')};
+  font-weight: bold;
   margin-left: 8px;
   margin-right: 6px;
 `

src/containers/tool/AbuseReport/styles/index.ts

@@ -1,12 +1,13 @@
 import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
-import { theme } from '@/utils'
+import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  padding: 25px 40px;
   color: ${theme('thread.articleDigest')};
+  ${css.flexColumn()};
+  min-height: 320px;
 `
 export const ContentWrapper = styled.div``

src/containers/tool/AbuseReport/styles/report_content/detail.tsx

@@ -1,9 +1,14 @@
 import styled from 'styled-components'
 
-import { css } from '@/utils'
+import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
+  flex-grow: 1;
+  /* border: 1px solid tomato; */
+  padding: 20px 30px;
+  padding-top: 30px;
+  background: ${theme('modal.subPanel')};
 `
 export const Title = styled.div`
   ${css.flexColumn()};

src/containers/tool/AbuseReport/styles/report_content/main.ts

@@ -5,6 +5,23 @@ import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
+  height: 100%;
+`
+export const OptionsWrapper = styled.div`
+  padding: 0 35px;
+  padding-right: 20px;
+  background: ${theme('modal.bg')};
+  filter: ${theme('modal.subPanelShadow')};
+`
+export const Panel = styled.div`
+  ${css.flex('align-center')};
+  padding-left: 35px;
+  width: 100%;
+  background: ${theme('modal.subPanel')};
+  /* background: ${theme('modal.panelBg')}; */
+  height: 50px;
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
 `
 export const Option = styled.div`
   ${css.flex('align-center')};

src/containers/tool/Share/Platforms.tsx

@@ -45,8 +45,8 @@ const medias = [
     id: '3',
     title: '微信',
     logo: `${ICON}/social/wechat-share.png`,
-    bg: 'white',
     type: SHARE_TYPE.WECHAT,
+    noBg: true,
   },
   {
     id: '4',
@@ -59,20 +59,19 @@ const medias = [
     id: '5',
     title: 'Telegram',
     logo: `${ICON}/social/telegram-share.png`,
-    bg: 'white',
     type: SHARE_TYPE.TELEGRAM,
   },
   {
     id: '6',
     title: '微博',
     logo: `${ICON}/social/weibo-share.png`,
     type: SHARE_TYPE.WEIBO,
+    noBg: true,
   },
   {
     id: '7',
     title: 'Facebook',
     logo: `${ICON}/social/facebook-share.png`,
-    bg: 'white',
     type: SHARE_TYPE.FACEBOOK,
   },
 ]
@@ -92,7 +91,7 @@ const Platforms: FC<TProps> = ({ article }) => {
       <InnerWrapper>
         {medias.map((item) => (
           <Media key={item.id} onClick={() => toPlatform(item.type)}>
-            <LogoWrapper bg={item.bg}>
+            <LogoWrapper noBg={!!item.noBg}>
               <Logo src={item.logo} small={!!item.small} />
             </LogoWrapper>
             <Title>{item.title}</Title>

src/containers/tool/Share/logic.ts

@@ -26,6 +26,7 @@ type TShareParam = {
   text?: string
   subject?: string
   body?: string
+  u?: string
 }
 const openShareWindow = (platformUrl: string, param: TShareParam): void => {
   const safeParam = []
@@ -64,8 +65,8 @@ export const toPlatform = (type: string): void => {
     }
 
     case SHARE_TYPE.FACEBOOK: {
-      const param = { url, title }
-      return openShareWindow('https://facebook.com/sharer/sharer.php', param)
+      const param = { u: url }
+      return openShareWindow('https://facebook.com/share.php', param)
     }
 
     case SHARE_TYPE.WEIBO: {
@@ -80,7 +81,7 @@ export const toPlatform = (type: string): void => {
 }
 
 export const close = (): void => {
-  store.mark({ show: false })
+  store.mark({ show: false, siteShareType: SHARE_TYPE.LINKS })
 }
 
 // ###############################

src/containers/tool/Share/styles/info_panel.ts

@@ -8,7 +8,7 @@ export const Wrapper = styled.div<{ type: string }>`
   padding: 20px 40px;
   width: 100%;
   height: ${({ type }) => getInfoPanelHeight(type)};
-  background: #0a313e;
+  background: ${theme('modal.subPanel')};
   color: ${theme('thread.articleTitle')};
   transition: all 0.1s;
 `

src/containers/tool/Share/styles/platform.ts

@@ -9,7 +9,7 @@ export const Wrapper = styled.div`
   width: 100%;
   min-height: 220px;
   background: ${theme('modal.bg')};
-  filter: drop-shadow(3px 3px 6px #002a34);
+  filter: ${theme('modal.subPanelShadow')};
   transition: min-height 0.2s;
 `
 export const Header = styled.div`
@@ -38,18 +38,15 @@ export const Media = styled.div`
   margin-bottom: 18px;
   cursor: pointer;
 `
-export const LogoWrapper = styled.div<{ bg: string | undefined }>`
+export const LogoWrapper = styled.div<{ noBg: boolean }>`
   ${css.circle(38)};
   ${css.flex('align-both')};
-  background: ${({ bg }) => bg || '#164651'};
+  background: ${({ noBg }) => (noBg ? 'transparent' : '#184b56')};
   margin-bottom: 5px;
 `
 export const Logo = styled(Img)<{ small: boolean }>`
-  fill: ${theme('thread.articleTitle')};
-  display: block;
-  width: ${({ small }) => (small ? '24px' : '40px')};
-  height: ${({ small }) => (small ? '24px' : '40px')};
-  border-radius: 100%;
+  fill: #e7f2f7; // ${theme('thread.articleTitle')};
+  ${({ small }) => (small ? css.circle('24px') : css.circle('38px'))};
   filter: saturate(0.6);
   opacity: 0.8;
 

src/containers/unit/ArticleFooter/AuthorInfo/index.tsx

@@ -55,7 +55,7 @@ const AuthorInfo: FC<TProps> = ({ testid = 'author-info', author }) => {
           src={author.avatar}
           fallback={<ImgFallback user={author} size={38} bottom={16} />}
         />
-        <FollowButton size="tiny" fakeLoading />
+        <FollowButton size="tiny" fakeLoading hasFollowed />
       </AvatarIntro>
     </Wrapper>
   )