refactor(article-thread): adjust article card based on thread

Author: mydearxym

src/components/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: #06303b;
+  background: #002a34;
   margin-right: 10px;
   border-radius: 5px;
 `

src/components/JobItem/styles/index.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components'
 
 import type { TJob, TC11N } from '@/spec'
 import css from '@/utils/css'
+import { theme } from '@/utils/themes'
 
 import { getOpacity } from './metric'
 
@@ -13,8 +14,10 @@ export const Wrapper = styled.article<TWrapper>`
   margin-top: 10px;
   margin-bottom: 18px;
   margin-right: 0;
-  background: #0d3644;
-  border-radius: 8px;
+  background: ${theme('content.bg')};
+  border-radius: 12px;
+  border: 1px solid;
+  border-color: transparent;
 
   position: relative;
   padding: 14px;
@@ -23,6 +26,10 @@ export const Wrapper = styled.article<TWrapper>`
   opacity: ${({ entry, c11n }) => getOpacity(entry, c11n)};
 
   transition: all 0.2s;
+
+  &:hover {
+    border-color: #124d61;
+  }
 `
 
 export const holder = 1

src/components/PagedArticles/ArticleList.tsx

@@ -1,10 +1,8 @@
 /* eslint-disable react/display-name */
 
 import { Fragment, memo } from 'react'
-import { isEmpty } from 'ramda'
 
 import { THREAD, TYPE } from '@/constant'
-
 import PostItem from '@/components/PostItem'
 import JobItem from '@/components/JobItem'
 import BlogItem from '@/components/BlogItem'

src/components/RadarItem/styles/index.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components'
 
 import type { TRadar, TC11N } from '@/spec'
 import css from '@/utils/css'
+import { theme } from '@/utils/themes'
 
 import { getOpacity } from './metric'
 
@@ -13,15 +14,21 @@ export const Wrapper = styled.article<TWrapper>`
   margin-top: 10px;
   margin-bottom: 18px;
   margin-right: 0;
-  background: #0d3644;
-  border-radius: 8px;
+  background: ${theme('content.bg')};
+  border-radius: 12px;
+  border: 1px solid;
+  border-color: transparent;
 
   position: relative;
   padding: 14px;
   padding-top: 16px;
   opacity: ${({ entry, c11n }) => getOpacity(entry, c11n)};
 
   transition: all 0.25s;
+
+  &:hover {
+    border-color: #124d61;
+  }
 `
 
 export const holder = 1

src/containers/thread/ArticlesThread/index.tsx

@@ -54,10 +54,10 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
 
   return (
     <Wrapper>
-      <MainWrapper>
+      <MainWrapper thread={curThread}>
         <ViewportTracker onEnter={inAnchor} onLeave={outAnchor} />
         {showFilters && (
-          <FilterWrapper>
+          <FilterWrapper thread={curThread}>
             <ArticlesFilter
               resState={resState}
               onSelect={onFilterSelect}

src/containers/thread/ArticlesThread/styles/index.ts

@@ -1,26 +1,40 @@
 import styled from 'styled-components'
 
+import { values, includes } from 'ramda'
+import type { TThread } from '@/spec'
+import { CARD_THREAD } from '@/constant'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
 export const Wrapper = styled.div`
   ${css.flex()};
   width: 100%;
 `
-export const MainWrapper = styled.div`
+export const MainWrapper = styled.div<{ thread: TThread }>`
   flex-grow: 1;
   width: 100%;
-  background: ${theme('content.bg')};
+
+  background: ${({ thread }) =>
+    includes(thread, values(CARD_THREAD))
+      ? 'transparent'
+      : theme('content.bg')};
+
   border-radius: 6px;
 
-  padding-top: 15px;
-  padding-left: 25px;
-  padding-right: 24px;
-  margin-right: 42px;
+  padding-top: ${({ thread }) =>
+    includes(thread, values(CARD_THREAD)) ? '13px' : '16px'};
+  padding-left: ${({ thread }) =>
+    includes(thread, values(CARD_THREAD)) ? '15px' : '25px'};
+  padding-right: ${({ thread }) =>
+    includes(thread, values(CARD_THREAD)) ? 0 : '24px'};
+  margin-right: ${({ thread }) =>
+    includes(thread, values(CARD_THREAD)) ? '35px' : '42px'};
 `
-export const FilterWrapper = styled.div`
+export const FilterWrapper = styled.div<{ thread: TThread }>`
   ${css.flex('align-center')};
   margin-bottom: 3px;
+  margin-left: ${({ thread }) =>
+    includes(thread, values(CARD_THREAD)) ? '5px' : '-3px'};
+
   ${css.media.mobile`margin-bottom: 4px;`};
-  margin-left: -3px;
 `

utils/constant/index.ts

@@ -7,7 +7,7 @@ export { default as TYPE } from './type'
 export { default as EVENT } from './event'
 export { default as ERR } from './err'
 export { default as ROUTE } from './route'
-export { ARTICLE_THREAD, THREAD } from './thread'
+export { ARTICLE_THREAD, CARD_THREAD, THREAD } from './thread'
 export { default as USER_THREAD } from './user_thread'
 export { default as FILTER } from './filter'
 export { default as ACTION } from './action'

utils/constant/thread.ts

@@ -1,5 +1,11 @@
 import type { TArticleThread, TThread } from '@/spec'
 
+export const CARD_THREAD = {
+  JOB: 'job',
+  RADAR: 'radar',
+  MEETUP: 'meetup',
+}
+
 export const ARTICLE_THREAD = {
   REPO: 'repo',
   POST: 'post',

utils/ssr.js

@@ -10,7 +10,7 @@ import {
 
 import { DEFAULT_THEME } from '@/config'
 import { TYPE, ARTICLE_THREAD } from '@/constant'
-import { plural } from '@/utils/helper'
+import { plural } from './helper'
 
 import { makeGQClient } from './graphql'
 import { ssrParseURL, akaTranslate, queryStringToJSON } from './route'

utils/themes/skins/solarized_dark.ts

@@ -8,7 +8,7 @@ const primaryColor = '#2d7eb1'
 
 const bannerBg = '#003B4A'
 const contentBg = '#002A35'
-const contentBoxBg = '#10313e' // '#0e303c' // #072d3a
+const contentBoxBg = '#08313e' // '#10313e' // '#0e303c' // #072d3a
 const fontColor = primaryColor
 const sidebarBg = '#001B21'
 const markdownFont = '#687F82'
@@ -75,7 +75,7 @@ const solarizedDark = {
   banner: {
     title: '#889fa0',
     bg: bannerBg,
-    desc: '#6c8084',
+    desc: darken(0.03, '#6c8084'), // '#6c8084',
     spliter: darken(0.03, bannerBg),
     number: '#889fa0',
     active: primaryMate,