style(report): redesign sub panel (#1121)

* style(report): redesign sub panel

* chore: small fix

* chore(share): logo update & facebook url fix

Author: mydearxym

public/icons/static/social/facebook-share.png

@@ -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;
 `

public/icons/static/social/telegram-share.png

@@ -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>
   )
 }

public/icons/static/social/twitter-share.png

@@ -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)

public/icons/static/social/wechat-share.png

@@ -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

public/icons/static/social/weibo-share.png

@@ -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>
   )
 }