style(landing): adjust colors & texts

groupher · Jan 18, 2024 · e06f2d1 · e06f2d1
1 parent 25751fd
commit e06f2d1
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 32 deletions.
diff --git a/config/config.prod.json b/config/config.prod.json
@@ -1,4 +1,5 @@
 {
   "//--- endpoint configs ---//": "",
-  "GRAPHQL_ENDPOINT": "https://api.groupher.com/graphiql"
+  "// GRAPHQL_ENDPOINT": "https://api.groupher.com/graphiql",
+  "GRAPHQL_ENDPOINT": "http://127.0.0.1:4001/graphiql"
 }
diff --git a/src/app/Landing/ArticlesIntroTabs/ChangelogTab/IntroItems.tsx b/src/app/Landing/ArticlesIntroTabs/ChangelogTab/IntroItems.tsx
@@ -18,7 +18,7 @@ const Contents = () => {
       <FeatItem text="标签，版本，时间归档" color={color} />
       <FeatItem text="评论，表情反馈" color={color} />
       <FeatItem text="一键多渠道分享" color={color} />
-      <FeatItem text="高度自定义" color={color} />
+      <FeatItem text="自定义模板" color={color} />
     </>
   )
 }

diff --git a/src/app/Landing/ArticlesIntroTabs/MoreLink.tsx b/src/app/Landing/ArticlesIntroTabs/MoreLink.tsx
@@ -10,7 +10,7 @@ type TProps = {
 
 const MoreLink: FC<TProps> = ({ title = '了解更多', href, color }) => {
   return (
-    <ArrowLinker href="/" color={color} top={55} fontSize={14}>
+    <ArrowLinker href="/" color={color} top={55} fontSize={15}>
       {title}
     </ArrowLinker>
   )

diff --git a/src/app/Landing/styles/articles_intro_tabs/changelog_tab/intro_digest.ts b/src/app/Landing/styles/articles_intro_tabs/changelog_tab/intro_digest.ts
@@ -13,12 +13,12 @@ export const Wrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
   margin-right: 50px;
 `
 export const Digest = styled.div`
-  color: ${theme('hint')};
-  line-height: 1.68em;
+  color: ${theme('article.title')};
+  line-height: 1.78em;
   width: 300px;
   margin-top: -100px;
   margin-bottom: 30px;
-  font-size: 18px;
+  font-size: 19px;
 `
 export const Highlight = styled(HighlightWord)`
   color: ${theme('rainbow.red')};

diff --git a/src/app/Landing/styles/articles_intro_tabs/discuss_tab/intro_digest.ts b/src/app/Landing/styles/articles_intro_tabs/discuss_tab/intro_digest.ts
@@ -13,12 +13,12 @@ export const Wrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
   margin-right: 10px;
 `
 export const Digest = styled.div`
-  color: ${theme('hint')};
-  line-height: 1.68em;
-  width: 300px;
-  margin-top: -40px;
+  color: ${theme('article.title')};
+  line-height: 1.78em;
+  width: 320px;
+  margin-top: -32px;
   margin-bottom: 30px;
-  font-size: 18px;
+  font-size: 19px;
 `
 export const Highlight = styled(HighlightWord)`
   color: ${theme('rainbow.purple')};

diff --git a/src/app/Landing/styles/articles_intro_tabs/help_tab/intro_digest.ts b/src/app/Landing/styles/articles_intro_tabs/help_tab/intro_digest.ts
@@ -17,17 +17,15 @@ export const Wrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
     color: white;
   }
 `
-
 export const Digest = styled.div`
-  color: ${theme('hint')};
-  line-height: 1.68em;
+  color: ${theme('article.title')};
+  line-height: 1.78em;
   width: 300px;
   margin-top: -40px;
   margin-bottom: 16px;
-  font-size: 18px;
+  font-size: 19px;
 `
-
 export const Highlight = styled(HighlightWord)`
   color: ${theme('rainbow.cyan')};
-  opacity: 0.7;
+  opacity: 0.9;
 `
diff --git a/src/app/Landing/styles/articles_intro_tabs/index.ts b/src/app/Landing/styles/articles_intro_tabs/index.ts
@@ -25,7 +25,6 @@ export const MobileIntroLists = styled.div`
 `
 export const HighlightWord = styled.span`
   font-weight: 450;
-  opacity: 0.8;
-  margin-left: 1px;
-  margin-right: 1px;
+  margin-left: 2px;
+  margin-right: 2px;
 `
diff --git a/src/app/Landing/styles/articles_intro_tabs/kanban_tab/intro_digest.ts b/src/app/Landing/styles/articles_intro_tabs/kanban_tab/intro_digest.ts
@@ -11,14 +11,13 @@ export const Wrapper = styled.div`
 `
 export const Digest = styled.div`
   font-size: 18px;
-  color: ${theme('hint')};
+  color: ${theme('article.title')};
   margin-bottom: 20px;
   margin-top: 10px;
   margin-left: 76px;
 `
 export const Highlight = styled(HighlightWord)`
   color: ${theme('rainbow.blue')};
-  opacity: 0.9;
 `
 export const InnerWrapper = styled.div`
   ${css.column('align-start')};

diff --git a/src/app/Landing/styles/dashboard_intros/layout_tab/wallpaper_bar/index.ts b/src/app/Landing/styles/dashboard_intros/layout_tab/wallpaper_bar/index.ts
@@ -29,8 +29,9 @@ export const BallWrapper = styled.div<TActive>`
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 
   &:hover {
-    border-color: ${theme('article.digest')};
+    border-color: ${theme('hint')};
     ${css.circle(38)};
+    ${css.row('align-both')};
     box-shadow: ${css.cardShadow};
     cursor: pointer;
   }

diff --git a/src/app/Landing/styles/dashboard_intros/seo_tab/content.ts b/src/app/Landing/styles/dashboard_intros/seo_tab/content.ts
@@ -1,4 +1,4 @@
-import styled, { css, theme } from '@/css'
+import styled, { css, theme, animate } from '@/css'
 
 import EditSVG from '@/icons/Spider'
 
@@ -23,11 +23,12 @@ export const IconBox = styled.div`
   left: 196px;
   box-shadow: rgba(149, 157, 165, 0.2) 0px -1px 24px;
   background: ${theme('gradientBg.cyan')};
+  animation: ${animate.jump} 3s linear infinite alternate;
 
   &:after {
     content: '';
     position: absolute;
-    left: 17px;
+    left: 16px;
     top: -100px;
     height: 100px;
     width: 1px;

diff --git a/src/containers/thread/PostThread/styles/thread_sidebar/community_brief.ts b/src/containers/thread/PostThread/styles/thread_sidebar/community_brief.ts
@@ -24,14 +24,14 @@ export const Title = styled.div`
 `
 export const InfoBar = styled.div`
   ${css.row('align-center')};
-  margin-top: 1px;
+  margin-top: 2px;
 `
 export const Label = styled.div`
   font-size: 13px;
   color: ${theme('hint')};
 `
 export const Count = styled.div`
-  font-size: 14px;
+  font-size: 13px;
   color: ${theme('article.digest')};
   font-weight: 500;
   margin-left: 5px;

diff --git a/src/widgets/Switcher/styles/tabs/drawer_view.ts b/src/widgets/Switcher/styles/tabs/drawer_view.ts
@@ -9,26 +9,25 @@ export const Wrapper = styled.nav.attrs<TTestable>(({ $testid }) => ({
   overflow: hidden;
   width: 100%;
   height: 38px;
-  border-radius: 10px;
-  background: ${theme('hoverBg')};
+  border-radius: 15px;
   padding: 1px 3px;
+  background: ${theme('hoverBg')};
 `
 export const TabItem = styled.div<TActive>`
   ${css.row('align-both')};
-  height: 28px;
+  height: 30px;
 
   color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
   background: ${({ $active }) => ($active ? 'white' : 'transparent')};
   font-weight: ${({ $active }) => ($active ? 600 : 'normal')};
   font-size: 12px;
   flex-grow: 1;
-  border-radius: 10px;
+  border-radius: 12px;
   margin-left: 1px;
   margin-right: 1px;
 
   border: 1px solid transparent;
   border-color: ${({ $active }) => ($active ? theme('divider') : 'transparent')};
-  box-shadow: ${({ $active }) => ($active ? 'rgb(0 0 0 / 12%) 0px 2px 12px 0px;' : 'none')};
 
   &:hover {
     font-weight: 600;