refactor(share): integrate menu & panel & re-org codebase

src/containers/content/HaveADrinkContent/styles/body/catalog.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import type { TActive } from '@/spec'
 import Img from '@/Img'
 import css, { theme } from '@/utils/css'
-import MoreSVG from '@/icons/More'
+import MoreSVG from '@/icons/menu/More'
 
 import { Divider } from '@/widgets/Common'
 

src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx

@@ -13,7 +13,7 @@ import {
   WORKS_TAB,
   SVG,
 } from '@/constant'
-import { shareTo, addCollection } from '@/utils/helper'
+import { addCollection } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
@@ -75,7 +75,7 @@ const WorksLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article, tab }) => {
                   size={18}
                   onClick={() => addCollection()}
                 />
-                <IconButton icon={SVG.SHARE} size={18} onClick={shareTo} />
+                <IconButton icon={SVG.SHARE} size={18} />
               </Actions>
             </Other>
           </Intro>

src/containers/editor/ArticleEditor/Footer.tsx

@@ -45,7 +45,6 @@ const Footer: FC<TProps> = ({
       <ArticleFooter>
         <TagsList
           items={tags}
-          mLeft={0}
           size="medium"
           community={community}
           thread={thread}

src/containers/editor/BlogEditor/Content/FeedItem.tsx

@@ -59,7 +59,7 @@ const FeedItem: FC<TProps> = ({
           <IconButton
             icon={SVG.EDIT_PEN}
             onClick={() => toStep('STEP_2')}
-            mTop={3}
+            top={3}
           />
         )}
       </Header>

src/containers/editor/BlogEditor/Content/TheRSSItem.tsx

@@ -9,10 +9,10 @@ import IconButton from '@/widgets/Buttons/IconButton'
 import { Wrapper, Title, Subtitle } from '../styles/content/rss_item'
 import { toStep } from '../logic'
 
-type TProps = TSpace & {
+type TProps = {
   rssInfo: TBlogRSS
   readonly?: boolean
-}
+} & TSpace
 
 const RSSItem: FC<TProps> = ({ rssInfo, readonly = false, ...restProps }) => {
   return (

src/containers/editor/BlogEditor/Footer.tsx

@@ -25,7 +25,6 @@ const Footer: FC<TProps> = ({ community, tags, submitState, mode }) => {
         {mode === 'publish' && (
           <TagsList
             items={tags}
-            mLeft={0}
             size="medium"
             community={community}
             thread={THREAD.BLOG}

src/containers/editor/RichEditor/Menu.tsx

@@ -38,7 +38,7 @@ const Menu: FC = () => {
       placement="bottom-end"
       onClick={console.log}
     >
-      <IconButton path="shape/more.svg" mLeft={16} />
+      <IconButton path="shape/more.svg" left={16} />
     </MenuButton>
   )
 }

src/containers/editor/WorksEditor/Footer.tsx

@@ -53,7 +53,6 @@ const Footer: FC<TProps> = ({ step, inputData, submitState, mode }) => {
           <FooterExtra>
             <TagsList
               items={[]}
-              mLeft={0}
               size="medium"
               // community={community}
               // thread={THREAD.WORKS}

src/containers/layout/GlobalLayout/Addon.tsx

@@ -4,7 +4,7 @@ import { isMobile } from 'react-device-detect'
 import useShortcut from '@/hooks/useShortcut'
 
 import { openDoraemon, logBuddha } from './logic'
-import { AbuseReport, Doraemon, Share, Drawer, ErrorBox } from './dynamic'
+import { AbuseReport, Doraemon, Drawer, ErrorBox } from './dynamic'
 
 const Addon: FC = () => {
   useEffect(() => logBuddha(), [])
@@ -17,7 +17,6 @@ const Addon: FC = () => {
       {/* @ts-ignore */}
       <Drawer />
       {/* @ts-ignore */}
-      {!isMobile && <Share />}
       {/* @ts-ignore */}
       {!isMobile && <Doraemon />}
       {/* @ts-ignore */}

src/containers/layout/GlobalLayout/CustomBg.tsx

@@ -75,7 +75,7 @@ const ComstomBg: FC = () => {
       bgColor: '#050139', // backgroundBg or fallback
     },
     k: {
-      bgImage: '/bg/CircleSapres.jpeg',
+      bgImage: '/bg/Squares.png',
     },
     m: {
       bgImage: '/bg/Antiquitarian.jpeg',
@@ -90,16 +90,22 @@ const ComstomBg: FC = () => {
       bgImage: '/bg/space.svg',
       bgColor: '#002630', // backgroundBg
     },
+    y: {
+      bgImage: '/bg/waves.png',
+    },
   }
 
-  const effect: TBackgroundEffect = effects.l
+  // e, h,
+  // y, g
+  const effect = effects.g
 
   // for linear/solid background colors
   if (isString(effect)) {
     // @ts-ignore
     return <Wrapper effect={effect as string} />
   }
 
+  // @ts-ignore
   const { bgImage, bgColor = '', bgSize = 'contain' } = effect
 
   // for custom image/svg

src/containers/layout/ThemePalette/GlobalStyle.ts

@@ -39,13 +39,25 @@ const GlobalStyle = createGlobalStyle`
     background-color: ${theme('toast.bg')} !important;
     min-height: 36px !important;
     padding: 2px 45px 0px 0 !important;
+    box-shadow: none;
+
+    &:after {
+      box-shadow: ${theme('toast.boxShadow')};
+    }
+  }
+  /* make sure the toast will not show in custom bg */
+  .iziToast-wrapper {
+    align-items: center;
+  }
+  .iziToast-capsule {
+    /* general content page width, adjuust if need */
+    max-width: 1380px; 
+    padding-left:  30px;
+    padding-right:  30px;
   }
   .iziToast > .iziToast-body .iziToast-title {
     color: ${theme('toast.title')} !important;
   }
-  .iziToast-wrapper-topRight {
-    top: 25px !important;
-  }
   .iziToast > .iziToast-body .iziToast-message {
     color: ${theme('toast.message')} !important;
   }

src/containers/thread/KanbanThread/index.tsx

@@ -54,7 +54,7 @@ const KanbanThreadContainer: FC<TProps> = ({
             <Label>待办项</Label>
             <SubTitle>{getRandomInt(5, 20)}</SubTitle>
             <SpaceGrow />
-            <IconButton path="shape/add.svg" mRight={12} />
+            <IconButton path="shape/add.svg" right={12} />
           </Header>
           <Body>
             <KanbanItem />
@@ -71,7 +71,7 @@ const KanbanThreadContainer: FC<TProps> = ({
             <Label>正在完善</Label>
             <SubTitle>{getRandomInt(5, 20)}</SubTitle>
             <SpaceGrow />
-            <IconButton path="shape/add.svg" mRight={12} />
+            <IconButton path="shape/add.svg" right={12} />
           </Header>
           <Body>
             <KanbanItem />
@@ -88,7 +88,7 @@ const KanbanThreadContainer: FC<TProps> = ({
             <Label>已完成</Label>
             <SubTitle>{getRandomInt(5, 20)}</SubTitle>
             <SpaceGrow />
-            <IconButton path="shape/add.svg" mRight={12} />
+            <IconButton path="shape/add.svg" right={12} />
           </Header>
           <Body>
             <KanbanItem />

src/containers/tool/ArticleSticker/LeftSticker/index.tsx

@@ -2,17 +2,15 @@ import { FC } from 'react'
 
 import type { TArticle } from '@/spec'
 
-import { SVG } from '@/constant'
-import { shareTo } from '@/utils/helper'
-import IconButton from '@/widgets/Buttons/IconButton'
+import Share from '@/containers/tool/Share'
 import Upvote from '@/widgets/Upvote'
 
 import {
   Wrapper,
   InnerWrapper,
-  BackWrapper,
-  ArrowIcon,
-  BackText,
+  // BackWrapper,
+  // ArrowIcon,
+  // BackText,
   Divider,
 } from '../styles/left_sticker'
 import { handleUpvote } from '../logic'
@@ -46,7 +44,7 @@ const LeftSticker: FC<TProps> = ({
           onAction={handleUpvote}
         />
         <Divider />
-        <IconButton icon={SVG.SHARE} onClick={shareTo} size={16} mRight={2} />
+        <Share left={5} size={17} right={3} />
       </InnerWrapper>
     </Wrapper>
   )

src/containers/tool/ArticleSticker/styles/left_sticker/index.ts

@@ -18,7 +18,7 @@ export const Wrapper = styled(FadeToggle).attrs(({ testid }: TTestable) => ({
   font-size: 13px;
 
   ${css.media.desktopL`
-    left: 18%;
+    left: 22%;
   `}
 
   ${css.media.laptopL`

src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx

@@ -21,15 +21,13 @@ const Header: FC<TProps> = ({ view, texts }) => {
         <IconButton
           path="article/community-mirror.svg"
           size={18}
-          mRight={8}
           hintDelay={0}
           hint="镜像到其他社区"
           active={action === COMMUNITY_ACTION.MIRROR}
         />
         <IconButton
           path="article/community-move.svg"
           size={18}
-          mRight={0}
           hintDelay={0}
           hint="移动到其他社区"
           active={action === COMMUNITY_ACTION.MOVE}

src/containers/tool/CommunityTagSetter/TagSetter/Header.tsx

@@ -52,7 +52,7 @@ const Header: FC<TProps> = ({ view }) => {
         <IconButton
           path="shape/settings.svg"
           size={18}
-          mRight={8}
+          right={8}
           hintDelay={0}
           hint="设置标签"
           active={view === TAG_VIEW.SELECT}
@@ -61,7 +61,7 @@ const Header: FC<TProps> = ({ view }) => {
         <IconButton
           path="shape/add.svg"
           size={20}
-          mRight={8}
+          right={8}
           hintDelay={0}
           hint="新增标签"
           active={view === TAG_VIEW.CREATE_ITEM}
@@ -70,7 +70,7 @@ const Header: FC<TProps> = ({ view }) => {
         <IconButton
           path="edit/publish-pen.svg"
           size={18}
-          mRight={8}
+          right={8}
           hintDelay={0}
           hint="编辑标签"
           active={view === TAG_VIEW.UPDATE}
@@ -79,7 +79,6 @@ const Header: FC<TProps> = ({ view }) => {
         <IconButton
           path="shape/delete.svg"
           size={18}
-          mRight={0}
           hintDelay={0}
           hint="删除标签"
           active={view === TAG_VIEW.DELETE}

src/containers/tool/CommunityTagSetter/TagSetter/Tag.tsx

@@ -64,8 +64,8 @@ const Tag: FC<TProps> = ({ tag, view, checked, onTagSelect }) => {
         {updateable && (
           <IconButton
             path="edit/publish-pen.svg"
-            mLeft={8}
-            mRight={5}
+            left={8}
+            right={5}
             onClick={() => {
               changeTagView(TAG_VIEW.UPDATE_ITEM)
             }}

src/containers/tool/Drawer/AddOn/CloseButton.tsx

@@ -5,13 +5,7 @@ import { closeDrawer } from '../logic'
 
 const CloseButton: FC = () => {
   return (
-    <IconButton
-      icon="close"
-      onClick={closeDrawer}
-      mTop={4}
-      size={20}
-      mLeft={6}
-    />
+    <IconButton icon="close" onClick={closeDrawer} top={4} size={20} left={6} />
   )
 }
 

src/containers/tool/Drawer/AddOn/index.tsx

@@ -6,8 +6,8 @@ import ArticleNavi from './ArticleNavi'
 import type { TArticleNavi } from '../spec'
 import { ARTICLE_VIEWER_TYPES } from '../constant'
 
+import Share from '@/containers/tool/Share'
 import CloseButton from './CloseButton'
-import ShareButton from './ShareButton'
 import { Wrapper, TopArea } from '../styles/add_on'
 
 type TProps = {
@@ -23,7 +23,7 @@ const AddOn: FC<TProps> = ({ type, articleNavi }) => {
     <Wrapper>
       <TopArea showShare={showShare}>
         <CloseButton />
-        {showShare && <ShareButton />}
+        {showShare && <Share top={9} left={5} size={15} offsetLeft="50%" />}
       </TopArea>
 
       {showArticleNavi && <ArticleNavi articleNavi={articleNavi} />}

src/containers/tool/Drawer/Content/DesktopView.tsx

@@ -32,7 +32,7 @@ const Content: FC<TProps> = ({ visible, type, attUser, userListerType }) => {
         instanceKey={DRAWER_SCROLLER}
         direction="vertical"
         height="100vh"
-        shadowSize="small"
+        barSize="medium"
         showShadow={false}
       >
         {renderContent(type, attUser, userListerType)}

src/containers/tool/Drawer/styles/add_on/index.ts

@@ -25,7 +25,6 @@ export const TopArea = styled.div<{ showShare: boolean }>`
   ${css.flexColumn('align-both')}
   padding-left: 12px;
   z-index: 100000;
-  transform: rotate(2deg);
 
   &:before {
     content: '';

src/containers/tool/Share/IFrameBoard.tsx → src/containers/tool/Share/Panel/IFrameBoard.tsx

@@ -8,7 +8,7 @@ import {
   Title,
   CodeWrapper,
   Inputer,
-} from './styles/iframe_board'
+} from '../styles/panel/iframe_board'
 
 const IFrameBoard: FC = () => {
   const code =

src/containers/tool/Share/InfoPanel.tsx → src/containers/tool/Share/Panel/InfoPanel.tsx

@@ -1,13 +1,14 @@
 import { FC, memo } from 'react'
 
-import { SITE_SHARE_TYPE } from './constant'
+import { SITE_SHARE_TYPE } from '../constant'
+
+import type { TLinksData } from '../spec'
 
 import LinkBoard from './LinkBoard'
 import IFrameBoard from './IFrameBoard'
 import WechatBoard from './WechatBoard'
 
-import { Wrapper } from './styles/info_panel'
-import type { TLinksData } from './store'
+import { Wrapper } from '../styles/panel/info_panel'
 
 type TProps = {
   type: string