chore: adjust some UI comps (#1317)

* style: comps styles in postviewer

* style(helpe-center): adjust full mode layout

Author: mydearxym

src/containers/thread/HelpThread/Category.tsx

@@ -1,6 +1,14 @@
 import { FC, memo } from 'react'
 
-import { Wrapper, Header, Icon, Title, Item, MoreLink } from './styles/category'
+import {
+  Wrapper,
+  Header,
+  IconWrapper,
+  Icon,
+  Title,
+  Item,
+  MoreLink,
+} from './styles/category'
 
 type TProps = {
   color: string
@@ -13,7 +21,9 @@ const Category: FC<TProps> = ({ color, title, desc, column = 2 }) => {
   return (
     <Wrapper color={color} column={column}>
       <Header>
-        <Icon />
+        <IconWrapper>
+          <Icon />
+        </IconWrapper>
         <Title color={color}>{title}</Title>
       </Header>
       <Item color={color}>{desc}</Item>

src/containers/thread/HelpThread/store.ts

@@ -13,8 +13,7 @@ import { markStates, toJS } from '@/utils/mobx'
 const log = buildLog('S:HelpThread')
 
 const HelpThread = T.model('HelpThread', {
-  // mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'full'),
-  mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'faq'),
+  mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'full'),
 })
   .views((self) => ({
     get curCommunity(): TCommunity {

src/containers/thread/HelpThread/styles/category.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import type { TTestable } from '@/spec'
 import css, { theme } from '@/utils/css'
 
-import LaptopSVG from '@/icons/Laptop'
+import LaptopSVG from '@/icons/Works'
 
 type TWrapper = TTestable & { color?: string; column: number }
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
@@ -21,24 +21,31 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 `
 
 export const Header = styled.div`
-  ${css.flex('align-center')};
-  margin-bottom: 10px;
+  ${css.flexColumn()};
+  margin-bottom: 12px;
+`
+export const IconWrapper = styled.div`
+  ${css.circle(32)};
+  ${css.flex('align-both')};
+
+  ${Wrapper}:hover & {
+    background: #f5f5f5; //${theme('border')};
+  }
 `
 export const Icon = styled(LaptopSVG)`
-  ${css.size(16)};
+  ${css.size(18)};
   fill: ${theme('thread.extraInfo')};
-  margin-right: 10px;
 `
 export const Title = styled.div<{ color: string }>`
   color: ${theme('thread.articleTitle')};
   font-size: 18px;
   font-weight: 600;
+  margin-top: 8px;
 `
 export const Item = styled.div<{ color: string }>`
   color: ${theme('thread.articleDigest')};
   font-size: 14px;
-  margin-bottom: 4px;
-  margin-left: 25px;
+  margin-bottom: 6px;
 
   &:hover {
     color: ${theme('thread.articleTitle')};
@@ -51,7 +58,6 @@ export const MoreLink = styled.div`
   color: ${theme('link')};
   font-size: 12px;
   margin-top: 5px;
-  margin-left: 24px;
 
   &:hover {
     cursor: pointer;

src/containers/thread/HelpThread/styles/full_layout.ts

@@ -8,18 +8,17 @@ export const Wrapper = styled.div`
   width: 100%;
   margin-top: 10px;
 `
-
 export const CatsWrapper = styled(MainWrapper)`
   ${css.flex()};
   flex-wrap: wrap;
 
   flex-grow: 1;
   width: 100%;
   min-height: 600px;
+  margin-top: 8px;
 
   background: transparent;
   border-radius: 6px;
-  margin-top: 5px;
   padding-left: 22px;
   padding-right: 50px;
 

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

@@ -23,7 +23,7 @@ const AddOn: FC<TProps> = ({ type, articleNavi }) => {
     <Wrapper>
       <TopArea showShare={showShare}>
         <CloseButton />
-        {showShare && <Share top={9} left={5} size={15} offsetLeft="50%" />}
+        {showShare && <Share top={9} left={6} size={15} offsetLeft="50%" />}
       </TopArea>
 
       {showArticleNavi && <ArticleNavi articleNavi={articleNavi} />}

src/containers/unit/Comments/styles/comment/actions.ts

@@ -12,9 +12,12 @@ export const Wrapper = styled.div`
   `};
 `
 export const ReplyAction = styled.div`
-  color: ${theme('comment.action')};
+  color: ${theme('thread.extraInfo')};
+  opacity: 0.7;
+  font-weight: bold;
+
   &:hover {
-    font-weight: 500;
+    opacity: 1;
     cursor: pointer;
   }
 

src/containers/unit/Comments/styles/list/toggler_button.ts

@@ -18,9 +18,10 @@ export const SlashSign = styled.div`
 
 export const Text = styled.div`
   font-size: 12px;
-  opacity: 0.8;
   color: ${theme('thread.extraInfo')};
   margin-left: 14px;
+  font-weight: bold;
+  opacity: 0.85;
 
   &:hover {
     opacity: 1;

src/widgets/ArtimentBody/styles/fold_box.ts

@@ -19,10 +19,6 @@ export const Wrapper = styled.div<TWrapper>`
   /* border: 1px solid; */
   padding-bottom: 5px;
 
-  &:hover {
-    cursor: pointer;
-  }
-
   ${css.media.mobile`
     margin-top: 18px;
     margin-bottom: 18px;
@@ -35,11 +31,12 @@ export const Hint = styled.div<{ mode: 'article' | 'comment' }>`
   color: ${theme('thread.extraInfo')};
   font-size: ${({ mode }) => (mode === 'article' ? '15px' : '13px')};
   padding-right: 5%;
-  font-weight: 400;
+  font-weight: bold;
+  opacity: 0.7;
 
-  ${Wrapper}:hover & {
-    font-weight: 500;
+  &:hover {
     opacity: 1;
+    cursor: pointer;
   }
   transition: all 0.2s;
 `
@@ -51,4 +48,9 @@ export const ArrowIcon = styled(Img)<{ reverse?: boolean }>`
   fill: ${theme('thread.extraInfo')};
   transform: ${({ reverse }) => (reverse ? 'rotate(90deg)' : 'rotate(-90deg)')};
   margin-left: 4px;
+  opacity: 0.8;
+
+  ${Hint}:hover {
+    opacity: 1;
+  }
 `

src/widgets/FaqList/Sidebar.tsx

@@ -3,7 +3,6 @@ import { FC, memo } from 'react'
 import {
   Wrapper,
   Header,
-  FAQIcon,
   Title,
   Section,
   Footer,
@@ -18,7 +17,6 @@ const Sidebar: FC<TProps> = ({ articles }) => {
   return (
     <Wrapper>
       <Header>
-        <FAQIcon />
         <Title>常见问题</Title>
       </Header>
       {articles.map((item) => (

src/widgets/FaqList/styles/sidebar.ts

@@ -17,7 +17,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 `
 export const Header = styled.div`
   ${css.flex('align-center')};
-  margin-bottom: 20px;
+  margin-top: -2px;
+  margin-bottom: 16px;
 `
 export const FAQIcon = styled(FAQSVG)`
   ${css.size(15)};
@@ -27,7 +28,9 @@ export const FAQIcon = styled(FAQSVG)`
   margin-top: 2px;
 `
 export const Title = styled.div`
-  color: ${theme('thread.articleDigest')};
+  color: ${theme('thread.articleTitle')};
+  font-weight: bold;
+  font-size: 15px;
 `
 export const Section = styled.div`
   ${css.lineClamp(2)}