style(emotion): add background (#1328)

Author: mydearxym

src/widgets/EmotionSelector/styles/index.ts

@@ -15,7 +15,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   margin-top: -1px;
 `
 export const SelectEmotionWrapper = styled.div`
-  ${css.circle(22)};
+  ${css.circle(24)};
   ${css.flex('align-both')};
   background: ${theme('hoverBg')};
+  margin-left: 2px;
 `

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

@@ -6,21 +6,20 @@ import css, { theme } from '@/utils/css'
 export const Wrapper = styled.div<TActive>`
   ${css.flex('align-center')};
   cursor: pointer;
-  margin-right: 14px;
-  margin-right: 5px;
-  padding: 2px 5px;
-  border-radius: 5px;
-  margin-left: -1px;
-  background: ${({ $active }) => ($active ? '#00333D' : 'transparent')};
+  margin-right: 6px;
+  padding: 2px 8px;
+  margin-left: 2px;
+  border-radius: 15px;
+  /* background: ${({ $active }) => ($active ? '#00333D' : 'transparent')}; */
+  background: ${theme('hoverBg')};
 
   &:hover {
-    background: ${theme('textBadge')}; // to-theme
+    background: ${theme('border')};
   }
+
+  transition: all 0.2s;
 `
 
 export const Count = styled.div`
   color: ${theme('thread.extraInfo')};
-  ${Wrapper}:hover & {
-    color: #00a59b;
-  }
 `

src/widgets/PostItem/UpvoteFirstLayout/DesktopView/Footer.tsx

@@ -32,22 +32,22 @@ const Footer: FC<TProps> = ({ article }) => {
       />
 
       {!includes(article.id, demoList) ? (
-        <ArticleCatState left={20} type="QUESTION" />
+        <ArticleCatState left={18} type="QUESTION" />
       ) : (
         <Fragment>
-          {article.id === '239' && <ArticleCatState type="FEATURE" left={20} />}
-          {article.id === '231' && <ArticleCatState type="BUG" left={20} />}
+          {article.id === '239' && <ArticleCatState type="FEATURE" left={18} />}
+          {article.id === '231' && <ArticleCatState type="BUG" left={18} />}
           {article.id === '227' && (
-            <ArticleCatState type="BUG" state="TODO" left={20} />
+            <ArticleCatState type="BUG" state="TODO" left={18} />
           )}
           {article.id === '228' && (
-            <ArticleCatState type="FEATURE" state="WIP" left={20} />
+            <ArticleCatState type="FEATURE" state="WIP" left={18} />
           )}
           {article.id === '226' && (
-            <ArticleCatState type="QUESTION" state="RESOLVE" left={20} />
+            <ArticleCatState type="QUESTION" state="RESOLVE" left={18} />
           )}
           {article.id === '225' && (
-            <ArticleCatState type="LOCK" state="LOCK" left={20} />
+            <ArticleCatState type="LOCK" state="LOCK" left={18} />
           )}
         </Fragment>
       )}