style(articles-card): adjust for white theme (#1278)

Author: mydearxym

src/containers/content/CommunityContent/ThreadContent.tsx

@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
 import type { TThread } from '@/spec'
 import { THREAD } from '@/constant'
 
-// import ArticlesThread from '@/containers//thread/ArticlesThread'
+import ArticlesThread from '@/containers//thread/ArticlesThread'
 // import GtdThread from '@/containers//thread/GtdThread'
 // import ChangeThread from '@/containers//thread/ChangelogThread'
 // import ReposThread from '@/containers/thread/ReposThread'
@@ -49,10 +49,10 @@ const ThreadContent: FC<TProps> = ({ thread }) => {
       return <CperMapThread />
 
     default:
-      return <AboutThread />
-    // return <GtdThread />
-    // return <ChangeThread />
-    // return <ArticlesThread />
+      // return <AboutThread />
+      // return <GtdThread />
+      // return <ChangeThread />
+      return <ArticlesThread />
   }
 }
 

src/widgets/ArticleCard/Header.tsx

@@ -56,7 +56,7 @@ const Header: FC<TIndex> = ({ data, thread }) => {
           <TagsList
             items={articleTags}
             mLeft={0}
-            size={isMobile ? 'small' : 'medium'}
+            size={isMobile ? 'small' : 'small'}
           />
           <Br top={isMobile ? '4px' : '10px'} />
           {!isMobile && (

src/widgets/ArticleCard/styles/footer.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import css, { theme } from '@/utils/css'
 
 export const Wrapper = styled.div`
-  color: ${theme('thread.articleDigest')};
+  color: ${theme('thread.extraInfo')};
 `
 export const PublishWrapper = styled.div`
   ${css.flex('align-center')};

src/widgets/ArticleCard/styles/index.ts

@@ -5,8 +5,18 @@ import css, { theme } from '@/utils/css'
 export const Wrapper = styled.div`
   ${css.flexColumn()};
   height: 100%;
-`
 
+  box-shadow: 0 2px 40px 0 rgb(224 226 228 / 27%);
+  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out,
+    opacity 0.2s ease-out;
+  transition-delay: 0.1s;
+  border-radius: 4px;
+  transform: translateZ(0);
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid;
+  border-color: #f8f6f6;
+`
 export const MobileDigest = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 13px;

src/widgets/ArticleImgWindow/styles/index.ts

@@ -13,7 +13,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 export const Block = styled.div`
   width: 30%;
   height: 60px;
-  background: #002a34;
+  background: #f5f5f5; // to-theme
   margin-right: 10px;
   border-radius: 5px;
 `

src/widgets/ArticlesFilter/CatFilterButton.tsx

@@ -6,6 +6,7 @@ import Tooltip from '@/widgets/Tooltip'
 
 import {
   Wrapper,
+  Label,
   InnerBtnWrapper,
   ButtonWrapper,
   FilterIcon,
@@ -26,7 +27,7 @@ type TProps = {
 const CatFilterButton: FC<TProps> = ({ thread, onSelect, activeFilter }) => {
   return (
     <Wrapper>
-      类别
+      <Label>类别</Label>
       <Tooltip
         placement="bottom-end"
         trigger="click"

src/widgets/ArticlesFilter/FilterButton.tsx

@@ -6,6 +6,7 @@ import Tooltip from '@/widgets/Tooltip'
 
 import {
   Wrapper,
+  Label,
   InnerBtnWrapper,
   ButtonWrapper,
   FilterIcon,
@@ -26,7 +27,7 @@ type TProps = {
 const FilterButton: FC<TProps> = ({ thread, onSelect, activeFilter }) => {
   return (
     <Wrapper>
-      排序
+      <Label>排序</Label>
       <Tooltip
         placement="bottom"
         trigger="click"

src/widgets/ArticlesFilter/styles/cat_filter_button.ts

@@ -11,11 +11,14 @@ export const Wrapper = styled.div`
   margin-right: -12px;
   font-size: 13px;
 `
+export const Label = styled.div`
+  opacity: 0.7;
+`
 export const InnerBtnWrapper = styled.div`
   ${css.flex('align-center')};
   margin-left: 2px;
   color: ${theme('thread.articleDigest')};
-  font-weight: 550;
+  font-weight: 400;
   font-size: 13px;
 
   &:hover {

src/widgets/ArticlesFilter/styles/filter_button.ts

@@ -10,11 +10,14 @@ export const Wrapper = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 13px;
 `
+export const Label = styled.div`
+  opacity: 0.7;
+`
 export const InnerBtnWrapper = styled.div`
   ${css.flex('align-center')};
   margin-left: 2px;
   color: ${theme('thread.articleDigest')};
-  font-weight: 550;
+  font-weight: 400;
   font-size: 13px;
 
   &:hover {

src/widgets/ArticlesFilter/styles/index.ts

@@ -9,7 +9,7 @@ import Input from '@/widgets/Input'
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 `
 export const Inputer = styled(Input)`
   height: 30px;