style: adjust gtd-badege text/bg color (#1286)

Author: mydearxym

src/widgets/GTDBadge/State.tsx

@@ -13,23 +13,23 @@ const State: FC<TProps> = ({ state, type }) => {
     case GTD_STATE.DONE: {
       return (
         <Wrapper type={type}>
-          <DoneIcon />
+          <DoneIcon type={type} />
         </Wrapper>
       )
     }
 
     case GTD_STATE.WIP: {
       return (
         <Wrapper type={type}>
-          <WipIcon />
+          <WipIcon type={type} />
         </Wrapper>
       )
     }
 
     case GTD_STATE.TODO: {
       return (
         <Wrapper type={type}>
-          <TODOIcon />
+          <TODOIcon type={type} />
         </Wrapper>
       )
     }

src/widgets/GTDBadge/styles/label.ts

@@ -1,19 +1,20 @@
+import { theme } from '@/utils'
 import styled from 'styled-components'
 
-import { theme } from '@/utils/css'
+// import { theme } from '@/utils/css'
 
 export const Wrapper = styled.div<{ noBg: boolean }>`
-  color: #3871e0;
+  color: ${theme('gtdBadge.feat')};
   background-color: ${({ noBg }) =>
-    noBg ? 'transparent' : theme('textBadge')};
+    noBg ? 'transparent' : theme('gtdBadge.featBg')};
   padding: ${({ noBg }) => (noBg ? 0 : '2px 6px')};
   font-weight: 500;
   border-radius: ${({ noBg }) => (noBg ? 0 : '6px')};
   border-radius: 6px;
   font-size: 12px;
 `
 export const BugWrapper = styled(Wrapper)<{ noBg: boolean }>`
-  color: #eb6a6a;
+  color: ${theme('gtdBadge.bug')};
   background-color: ${({ noBg }) =>
-    noBg ? 'transparent' : theme('textBadge')};
+    noBg ? 'transparent' : theme('gtdBadge.bugBg')};
 `

src/widgets/GTDBadge/styles/state.ts

@@ -3,31 +3,35 @@ import styled from 'styled-components'
 import type { TGtdType } from '@/spec'
 import { GTD_TYPE } from '@/constant'
 
-import css from '@/utils/css'
+import css, { theme } from '@/utils/css'
 
 import GtdWipSVG from '@/icons/GtdWip'
 import GtdDoneSVG from '@/icons/GtdDone'
 import GtdTodoSVG from '@/icons/GtdTodo'
 
-export const Wrapper = styled.div<{ type: TGtdType }>`
+type TType = { type: TGtdType }
+
+export const Wrapper = styled.div<TType>`
   ${css.size(18)};
   ${css.flex('align-both')};
-  background: ${({ type }) => (type === GTD_TYPE.BUG ? '#eb6a6a' : '#3871e0')};
+  background: ${({ type }) =>
+    type === GTD_TYPE.BUG ? theme('gtdBadge.bugBg') : theme('gtdBadge.featBg')};
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
+  margin-right: -4px;
 `
-export const WipIcon = styled(GtdWipSVG)`
+export const WipIcon = styled(GtdWipSVG)<TType>`
   ${css.size(9)};
-  fill: white;
-  /* fill: #3871e0; */
+  fill: ${({ type }) =>
+    type === GTD_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')};
 `
-export const DoneIcon = styled(GtdDoneSVG)`
+export const DoneIcon = styled(GtdDoneSVG)<TType>`
   ${css.size(10)};
-  fill: white;
-  /* fill: #3871e0; */
+  fill: ${({ type }) =>
+    type === GTD_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')};
 `
-export const TODOIcon = styled(GtdTodoSVG)`
+export const TODOIcon = styled(GtdTodoSVG)<TType>`
   ${css.size(10)};
-  fill: white;
-  /* fill: #3871e0; */
+  fill: ${({ type }) =>
+    type === GTD_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')};
 `

src/widgets/PostItem/styles/desktop_view/body.ts

@@ -13,7 +13,7 @@ export const Extra = styled.li`
   position: relative;
   ${css.flex('align-end')};
   color: ${theme('thread.extraInfo')};
-  margin-top: 3px;
+  margin-top: 5px;
   font-size: 12px;
 `
 export const LeftPart = styled.div`
@@ -84,6 +84,6 @@ export const ViewsIcon = styled(ViewedSVG)`
 
 export const GTDBadgeWrapper = styled.div`
   position: absolute;
-  top: 44px;
+  top: 41px;
   right: -5px;
 `

utils/themes/skins/github.ts

@@ -44,6 +44,14 @@ const github = {
   bodyBg: contentBg,
   selectionBg: '#FFFEDE',
   textBadge: '#f5f5f5',
+
+  gtdBadge: {
+    feat: '#3871e0',
+    featBg: '#e9f0ff',
+    bug: '#eb6a6a',
+    bugBg: '#ffefef',
+  },
+
   baseColor: {
     red: '#ca5f4d',
     redBg: '#FDF1F0',