chore(theme): adjust some color for white theme (#1291)

Author: mydearxym

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

@@ -48,7 +48,7 @@ export const LeftArrow = styled(ArrowSVG)`
   fill: ${theme('thread.extraInfo')};
 `
 export const RightSwitchBlock = styled(SwitchBlock)`
-  left: 755px;
+  left: 54vw;
 `
 export const RightArrow = styled(LeftArrow)`
   transform: rotate(180deg);

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

@@ -4,7 +4,7 @@ import css, { theme } from '@/utils/css'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
-  color: ${theme('thread.articleDigest')};
+  color: ${theme('thread.extraInfo')};
   padding-top: 25px;
   padding-bottom: 18px;
   margin-left: 25px;
@@ -19,7 +19,7 @@ export const SlashSign = styled.div`
 export const Text = styled.div`
   font-size: 12px;
   opacity: 0.8;
-  color: ${theme('button.primary')};
+  color: ${theme('thread.extraInfo')};
   margin-left: 14px;
 
   &:hover {

src/widgets/ArtimentBody/styles/fold_box.ts

@@ -11,11 +11,11 @@ export const Wrapper = styled.div<TWrapper>`
   margin-bottom: 28px;
   padding: 5px 0;
   border-radius: 15px;
-  background: ${({ fold }) => (fold ? '#00333e' : 'transparent')};
+  background: ${({ fold }) => (fold ? '#F5F5F5' : 'transparent')};
 
   &:hover {
     cursor: pointer;
-    background: #00333e;
+    background: #f5f5f5;
   }
 
   ${css.media.mobile`
@@ -27,7 +27,7 @@ export const Wrapper = styled.div<TWrapper>`
 `
 export const Hint = styled.div<{ mode: 'article' | 'comment' }>`
   ${css.flex('align-center')};
-  color: ${theme('button.primary')};
+  color: ${theme('article.extraInfo')};
   font-size: ${({ mode }) => (mode === 'article' ? '15px' : '13px')};
   opacity: 0.8;
 
@@ -40,8 +40,8 @@ export const FoldHint = styled(Hint)`
   opacity: 0;
 `
 export const ArrowIcon = styled(Img)<{ reverse?: boolean }>`
-  ${css.size(20)};
-  fill: #139c9e;
+  ${css.size(18)};
+  fill: ${theme('article.extraInfo')};
   transform: ${({ reverse }) => (reverse ? 'rotate(90deg)' : 'rotate(-90deg)')};
   margin-left: 4px;
 `

src/widgets/Buttons/styles/icon_button.ts

@@ -52,7 +52,7 @@ export const Icon = styled(Img)<TIcon>`
   opacity: ${({ $dimWhenIdle }) => ($dimWhenIdle ? 0.7 : 1)};
 
   &:hover {
-    fill: #00a59b;
+    fill: ${theme('thread.extraInfo')};
     opacity: 1;
     cursor: pointer;
   }
@@ -122,12 +122,12 @@ export const getStyledIcon = (comp: FC): FC<TIcon> => {
     opacity: ${({ $dimWhenIdle }) => ($dimWhenIdle ? 0.7 : 1)};
 
     &:hover {
-      fill: #00a59b;
+      fill: ${theme('thread.extraInfo')};
       opacity: 1;
       cursor: pointer;
     }
 
-    transition: fill 0.2s;
+    transition: all 0.2s;
   `
 }
 

src/widgets/EmotionSelector/index.tsx

@@ -40,7 +40,12 @@ const EmotionSelector: FC<TProps> = ({
           trigger="click"
           noPadding
         >
-          <IconButton path="emotion/emotion.svg" mRight={0} mTop={1} />
+          <IconButton
+            path="emotion/emotion.svg"
+            mRight={0}
+            mTop={1}
+            dimWhenIdle
+          />
         </Tooltip>
       )}
     </Wrapper>

src/widgets/EmotionSelector/styles/index.ts

@@ -13,5 +13,6 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   padding-right: 0;
   border-radius: 8px;
   margin-left: -4px;
+  margin-top: -2px;
 `
 export const holder = 1

src/widgets/EmotionSelector/styles/panel.ts

@@ -34,9 +34,9 @@ export const EIcon = styled(Img)<TEIcon>`
 `
 export const Name = styled.div<TActive>`
   font-size: 11px;
-  margin-top: 5px;
+  margin-top: 7px;
   color: ${({ $active }) =>
-    $active ? '#12999B' : theme('thread.articleTitle')};
+    $active ? '#12999B' : theme('thread.articleDigest')};
 
   ${Item}:hover & {
     cursor: pointer;

src/widgets/EmotionSelector/styles/selected_emotions/emotion_icon.ts

@@ -9,7 +9,6 @@ export const EIcon = styled(Img)<{ name: string }>`
     name === 'confused' || name === 'popcorn' ? css.size(15) : css.size(14)};
   margin-right: 6px;
 
-  filter: saturate(0.6);
-  opacity: 0.9;
+  filter: saturate(0.8);
 `
 export const holder = 1

src/widgets/Loading/styles/lava_lamp_loading.ts

@@ -2,7 +2,7 @@ import styled, { keyframes } from 'styled-components'
 
 import type { TSpace, TSIZE_TSM } from '@/spec'
 import { getRandomInt } from '@/utils/helper'
-import css from '@/utils/css'
+import css, { theme } from '@/utils/css'
 
 import { getLavaLampScale } from './metric'
 
@@ -49,8 +49,8 @@ const speedMap = {
 }
 
 export const Circle = styled.span<{ index: number }>`
-  ${css.circle(4)};
-  background-color: #0080a9;
+  ${css.circle(3)};
+  background-color: ${theme('thread.extraInfo')};
   animation: ${move} 1s linear 0ms infinite;
   /* animation-duration: ${() =>
     `${speed[getRandomInt(0, speed.length - 1)]}s`}; */

utils/themes/skins/github.ts

@@ -199,7 +199,7 @@ const github = {
     mentionShadow: '0px 2px 10px 1px rgba(235, 235, 235, 1)',
 
     indentLine: '#d5d5d5',
-    indentActive: descText,
+    indentActive: '#8590a6',
   },
   editor: {
     title: '#7ea9ad',