From b076bf0d04edc1a5f401b8126bacb73f4d0cb0b2 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 12 Aug 2021 11:15:45 +0800 Subject: [PATCH 1/2] style(digest): use thunder icon for preview --- src/components/DigestSentence/index.tsx | 3 ++- src/components/DigestSentence/styles/index.ts | 8 ++++++- src/components/Icons/Thunder.tsx | 21 +++++++++++++++++++ 3 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 src/components/Icons/Thunder.tsx diff --git a/src/components/DigestSentence/index.tsx b/src/components/DigestSentence/index.tsx index 3bb79d7b5..03119a6ea 100755 --- a/src/components/DigestSentence/index.tsx +++ b/src/components/DigestSentence/index.tsx @@ -21,6 +21,7 @@ import { PreviewWrapper, PreviewText, PreviewIcon, + ThunderIcon, } from './styles' /* eslint-disable-next-line */ @@ -69,7 +70,7 @@ const DigestSentence: FC = ({ 预览 - + ) diff --git a/src/components/DigestSentence/styles/index.ts b/src/components/DigestSentence/styles/index.ts index 8039d4586..5d6dc7f3a 100755 --- a/src/components/DigestSentence/styles/index.ts +++ b/src/components/DigestSentence/styles/index.ts @@ -1,7 +1,9 @@ import styled from 'styled-components' import type { TTestable, TSpace, TSIZE_SM } from '@/spec' + import Img from '@/Img' +import ThunderSVG from '@/icons/Thunder' import { theme } from '@/utils/themes' import css from '@/utils/css' @@ -66,5 +68,9 @@ export const PreviewIcon = styled(Img)` export const PreviewText = styled.span` color: ${theme('thread.extraInfo')}; font-size: 12px; - margin-right: 5px; +` +export const ThunderIcon = styled(ThunderSVG)` + fill: ${theme('thread.extraInfo')}; + ${css.size(18)}; + transform: rotate(12deg); ` diff --git a/src/components/Icons/Thunder.tsx b/src/components/Icons/Thunder.tsx new file mode 100644 index 000000000..087b71de8 --- /dev/null +++ b/src/components/Icons/Thunder.tsx @@ -0,0 +1,21 @@ +import { memo, SVGProps } from 'react' + +const Thunder = (props: SVGProps) => { + return ( + + + + + + + ) +} + +export default memo(Thunder) From 98b20a254ae4a184ae065748e929b9a2d6b60813 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 12 Aug 2021 14:27:25 +0800 Subject: [PATCH 2/2] style(tags): make tagsbar look nice --- src/components/Img/LazyLoadImg.tsx | 3 +- .../ThemePalette/ThirdPartyOverWrite.ts | 18 ++++ .../ClassicLayout/DynamicPart.tsx | 4 +- .../unit/TagsBar/DesktopView/Folder.tsx | 4 +- .../unit/TagsBar/DesktopView/GobackTag.tsx | 2 +- .../unit/TagsBar/DesktopView/TagItem.tsx | 38 ++++---- .../unit/TagsBar/DesktopView/index.tsx | 5 +- src/containers/unit/TagsBar/store.ts | 17 ++-- .../TagsBar/styles/desktop_view/folder.ts | 10 +-- .../TagsBar/styles/desktop_view/goback_tag.ts | 19 ++-- .../TagsBar/styles/desktop_view/tag_item.ts | 63 ++++++++------ utils/mock.ts | 86 +++++++++---------- utils/themes/skins/cyan.ts | 18 ++-- utils/themes/skins/github.ts | 18 ++-- utils/themes/skins/green.ts | 18 ++-- utils/themes/skins/iron_green.ts | 18 ++-- utils/themes/skins/monokai.ts | 16 +++- utils/themes/skins/purple.ts | 16 +++- utils/themes/skins/solarized_dark.ts | 18 ++-- utils/themes/skins/yellow.ts | 18 ++-- 20 files changed, 243 insertions(+), 166 deletions(-) diff --git a/src/components/Img/LazyLoadImg.tsx b/src/components/Img/LazyLoadImg.tsx index cb0ffd120..b41dfd320 100644 --- a/src/components/Img/LazyLoadImg.tsx +++ b/src/components/Img/LazyLoadImg.tsx @@ -1,7 +1,6 @@ import { FC, Fragment, ReactNode, memo, useState } from 'react' import { LazyLoadImage } from 'react-lazy-load-image-component' -import 'react-lazy-load-image-component/src/effects/blur.css' import { Wrapper, FallbackWrapper } from './styles/lazy_load_image' @@ -24,7 +23,7 @@ const LazyLoadImg: FC = ({ src, alt = 'image', fallback = null, - visibleByDefault = false, + visibleByDefault = true, }) => { const [imgLoaded, setImgLoaded] = useState(false) diff --git a/src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts b/src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts index 983d03edd..1aa68cfd8 100755 --- a/src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts +++ b/src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts @@ -58,6 +58,24 @@ const CustomOverWrite = createGlobalStyle` font-size: 1.3em; color: ${theme('editor.content')}; } + + .lazy-load-image-background.blur { + filter: blur(3px); + } + + .lazy-load-image-background.blur.lazy-load-image-loaded { + filter: blur(0); + transition: filter 0.2s; + } + + .lazy-load-image-background.blur > img { + opacity: 0; + } + + .lazy-load-image-background.blur.lazy-load-image-loaded > img { + opacity: 1; + transition: opacity 0.2s; + } ` export default CustomOverWrite diff --git a/src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx b/src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx index 6bb780a61..9a1fb9a8c 100644 --- a/src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx +++ b/src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx @@ -14,7 +14,7 @@ import Sticky from '@/components/Sticky' import PublishButton from '@/components/Buttons/PublishButton' import CommunityJoinBadge from '@/containers/tool/CommunityJoinBadge' import TagsBar from '@/containers/unit/TagsBar' -import PromotionList from '@/components/PromotionList' +// import PromotionList from '@/components/PromotionList' import type { TBaseProps } from '../index' @@ -46,7 +46,7 @@ const ClassicLayout: FC = ({ - + {/* */} ) } diff --git a/src/containers/unit/TagsBar/DesktopView/Folder.tsx b/src/containers/unit/TagsBar/DesktopView/Folder.tsx index 77b52e57a..0d6465a08 100644 --- a/src/containers/unit/TagsBar/DesktopView/Folder.tsx +++ b/src/containers/unit/TagsBar/DesktopView/Folder.tsx @@ -82,7 +82,7 @@ const Folder: FC = ({ /> {title} {!isFolderOpen && isActiveTagInFolder && ( - + )} @@ -109,7 +109,7 @@ const Folder: FC = ({ ) }} > - + {curDisplayCount === MAX_DISPLAY_COUNT ? '展开更多' : '收起'} diff --git a/src/containers/unit/TagsBar/DesktopView/GobackTag.tsx b/src/containers/unit/TagsBar/DesktopView/GobackTag.tsx index cdd5e05be..657e9e847 100644 --- a/src/containers/unit/TagsBar/DesktopView/GobackTag.tsx +++ b/src/containers/unit/TagsBar/DesktopView/GobackTag.tsx @@ -12,7 +12,7 @@ type TProps = { const GobackTag: FC = ({ onSelect }) => { return ( onSelect(emptyTag)}> - + 全部标签 ) diff --git a/src/containers/unit/TagsBar/DesktopView/TagItem.tsx b/src/containers/unit/TagsBar/DesktopView/TagItem.tsx index 5efb413ce..26a5369bb 100644 --- a/src/containers/unit/TagsBar/DesktopView/TagItem.tsx +++ b/src/containers/unit/TagsBar/DesktopView/TagItem.tsx @@ -1,46 +1,42 @@ import { FC } from 'react' -import { Trans } from '@/utils/i18n' import type { TTag } from '@/spec' +import { cutRest } from '@/utils/helper' +import { Trans } from '@/utils/i18n' +// import DotDivider from '@/components/DotDivider' // import TagCount from './TagCount' import { Wrapper, HashWrapper, HashSign, - TagTitle, - // CountInfoWrapper, + Tag, + Title, + RawWrapper, + Raw, } from '../styles/desktop_view/tag_item' type TProps = { tag: TTag active: boolean activeid?: string | null - inline?: boolean onSelect?: (tag?: TTag) => void } -const TagItem: FC = ({ - tag, - active, - activeid, - inline = false, - onSelect, -}) => { +const TagItem: FC = ({ tag, active, activeid, onSelect }) => { return ( - + - + - onSelect(tag)}> - {Trans(tag.title)} - + onSelect(tag)}> + {cutRest(Trans(tag.title), 10)} + + {/* */} + {tag.raw} + + {/* {!inline && ( diff --git a/src/containers/unit/TagsBar/DesktopView/index.tsx b/src/containers/unit/TagsBar/DesktopView/index.tsx index 09fa6ad1d..74ca1b4f3 100644 --- a/src/containers/unit/TagsBar/DesktopView/index.tsx +++ b/src/containers/unit/TagsBar/DesktopView/index.tsx @@ -27,6 +27,7 @@ type TProps = Omit const TagsBarContainer: FC = ({ tagsBar: store, onSelect }) => { useInit(store) const { groupedTags, tagsData, activeTagData } = store + console.log('# groupedTags -> ', groupedTags) const groupsKeys = keys(groupedTags) as string[] return ( @@ -35,7 +36,7 @@ const TagsBarContainer: FC = ({ tagsBar: store, onSelect }) => { { onTagSelect(tag) - onSelect() + onSelect?.() }} /> )} @@ -48,7 +49,7 @@ const TagsBarContainer: FC = ({ tagsBar: store, onSelect }) => { activeTag={activeTagData} onSelect={(tag) => { onTagSelect(tag) - onSelect() + onSelect?.() }} /> ))} diff --git a/src/containers/unit/TagsBar/store.ts b/src/containers/unit/TagsBar/store.ts index ec5dcbb28..d1fd7d139 100755 --- a/src/containers/unit/TagsBar/store.ts +++ b/src/containers/unit/TagsBar/store.ts @@ -16,6 +16,8 @@ import type { import { markStates, toJS } from '@/utils/mobx' import { groupByKey } from '@/utils/helper' +import { mockTags } from '@/utils/mock' + import { Tag, emptyTag } from '@/model' const TagsBar = T.model('TagsBar', { @@ -35,7 +37,8 @@ const TagsBar = T.model('TagsBar', { return root.viewing.activeThread }, get tagsData(): TTag[] { - return toJS(self.tags) + // return toJS(self.tags) + return mockTags(15) }, get activeTagData(): TTag { return toJS(self.activeTag) || emptyTag @@ -43,17 +46,7 @@ const TagsBar = T.model('TagsBar', { get groupedTags(): TGroupedTags { const { tagsData } = self as TStore - return groupByKey( - tagsData.map((tag) => { - if (parseInt(tag.id, 10) < 4) { - tag.group = '这是第一组' - } else { - tag.group = '这是第二组' // '__default__' - } - return tag - }), - 'group', - ) + return groupByKey(tagsData, 'group') }, })) .actions((self) => ({ diff --git a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts index 5de96ffbd..e06ed2372 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts @@ -41,8 +41,9 @@ export const Content = styled.div<{ isOpen: boolean }>` ` export const SubToggle = styled.div` ${css.flex('align-center')}; - margin-left: 5px; - opacity: 0.5; + margin-top: 5px; + margin-left: 2px; + opacity: 0.6; &:hover { opacity: 0.8; @@ -52,12 +53,11 @@ export const SubToggle = styled.div` export const SubToggleTitle = styled.div` color: ${theme('tags.text')}; font-size: 12px; - margin-left: 5px; + margin-left: 6px; padding: 2px; border-radius: 5px; ` export const SubTogglePrefixIcon = styled(Img)` fill: ${theme('tags.text')}; - ${css.size(14)}; - transform: rotate(90deg); + ${css.size(13)}; ` diff --git a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts index 8d5ae3e1e..574eb6cdd 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts @@ -5,29 +5,20 @@ import { theme } from '@/utils/themes' import css from '@/utils/css' import Img from '@/Img' -export const Wrapper = styled.div` +export const Wrapper = styled.div` ${css.flex('align-center')}; - margin-bottom: 5px; + margin-bottom: 8px; max-width: 180px; - padding: 5px; - border-radius: 5px; - - background: ${({ active }) => (active ? '#0e303d' : 'transparent')}; - - &:hover { - background: #0e303d; - } + padding: 5px 2px; ` export const TagIcon = styled(Img)` fill: ${theme('banner.desc')}; - margin-right: 10px; + margin-right: 6px; ${css.size(14)}; - transform: rotate(17deg); ` - export const TagTitle = styled.div` color: ${theme('tags.text')}; - font-size: 15px; + font-size: 14px; letter-spacing: 1px; &:hover { diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts index d9173ccaa..c215ca079 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts @@ -10,20 +10,20 @@ import { getActiveColor } from '../metric' import { TagsWrapper } from './index' -type TTag = TActive & { $inline: boolean } +type TTag = TActive & { color?: string } export const Wrapper = styled.div` ${css.flex('align-center')}; - margin-left: -3px; - padding: ${({ $inline }) => (!$inline ? '4px' : 0)}; + margin-left: -2px; + padding: 4px; max-width: 180px; border-radius: 5px; - background: ${({ $active, $inline }) => - !$active || $inline ? 'transparent' : '#0e303d'}; + background: ${({ $active }) => (!$active ? 'transparent' : '#0e303d')}; &:hover { - background: ${({ $inline }) => (!$inline ? '#0e303d' : 'none')}; + background: #06303b; + cursor: pointer; } ` export const AllTagIcon = styled(Img)` @@ -36,42 +36,57 @@ export const HashWrapper = styled.div` ${css.size(15)}; margin-right: 6px; ` -type THashSign = TActive & { color: string; activeid: string; $inline: boolean } +type THashSign = TActive & { color: string; activeid: string } export const HashSign = styled(HashTagSVG)` fill: ${({ $active, color, activeid }) => - getActiveColor($active, color, activeid)}; - ${css.size(14)}; - margin-top: 1px; - margin-right: ${({ $inline }) => (!$inline ? '12px' : '3px')}; + getActiveColor($active, theme(`baseColor.${color}`), activeid)}; + ${css.size(12)}; + margin-top: 2px; + margin-right: 10px; opacity: ${theme('tags.dotOpacity')}; - filter: saturate(0.5); ${Wrapper}:hover & { - filter: saturate(1); + opacity: 0.9; } transform: rotate(18deg); transition: filter 0.1s; ` -export const TagTitle = styled.div` - color: ${theme('tags.text')}; - font-size: ${({ $inline }) => (!$inline ? '14.5px' : '13px')}; - opacity: 0.9; - letter-spacing: 3px; - font-weight: ${({ $active }) => ($active ? 'bold' : 'normal')}; - opacity: ${({ $active }) => ($active ? 1 : 0.9)}; - /* ${({ $inline }) => - !$inline ? css.cutRest('120px') : css.cutRest('50px')}; */ +export const Tag = styled.div` + ${css.flex('align-end', 'justify-between')}; + width: 100%; + font-size: 14px; + padding-left: 4px; + color: ${({ color, $active }) => + !$active ? theme('tags.text') : theme(`baseColor.${color}`)}; - ${css.cutRest('120px')}; + /* color: ${({ color }) => theme(`baseColor.${color}`)}; */ ${Wrapper}:hover & { cursor: pointer; - opacity: 1; } transition: all 0.1s; ` +export const Title = styled.div` + letter-spacing: 1px; +` +export const RawWrapper = styled.div` + ${css.flex('align-center')}; + opacity: ${({ $active }) => ($active ? 1 : 0)}; + + ${Wrapper}:hover & { + cursor: pointer; + opacity: 1; + } + transition: all 0.1s; +` +export const Raw = styled.div` + color: ${theme('tags.text')}; + font-size: 12px; + margin-top: 1px; + opacity: 0.8; +` export const CountInfoWrapper = styled.div` opacity: 0; diff --git a/utils/mock.ts b/utils/mock.ts index 051d5e4a8..47fe8e50f 100644 --- a/utils/mock.ts +++ b/utils/mock.ts @@ -59,36 +59,12 @@ const users = [ ] const tags = [ - { - id: '0', - index: 0, - raw: 'career', - title: '职场', - color: 'red', - group: '生活', - }, - { - id: '1', - index: 1, - raw: 'afterwork', - title: '下班后', - color: 'orange', - group: '生活', - }, - { - id: '2', - index: 2, - raw: 'myth', - title: '迷思', - color: 'orange', - group: '生活', - }, { id: '3', index: 3, raw: 'help', title: '求助', - color: 'yellow', + color: 'red', group: '技术与人文', }, { @@ -96,7 +72,7 @@ const tags = [ index: 4, raw: 'tech', title: '技术', - color: 'cyan', + color: 'orange', group: '技术与人文', }, { @@ -104,7 +80,7 @@ const tags = [ index: 5, raw: 'maker', title: '创作者', - color: 'green', + color: 'yellow', group: '技术与人文', }, { @@ -120,7 +96,7 @@ const tags = [ index: 7, raw: 'IxD', title: '交互设计', - color: 'green', + color: 'cyan', group: '技术与人文', }, { @@ -128,23 +104,47 @@ const tags = [ index: 8, raw: 'DF', title: '黑暗森林', - color: 'red', + color: 'blue', group: '技术与人文', }, + { + id: '0', + index: 0, + raw: 'career', + title: '职场', + color: 'purple', + group: '生活', + }, + { + id: '1', + index: 1, + raw: 'afterwork', + title: '下班后', + color: 'pink', + group: '生活', + }, + { + id: '2', + index: 2, + raw: 'thoughts', + title: '迷思', + color: 'grey', + group: '生活', + }, { id: '9', index: 9, raw: 'wtf', title: '吐槽', - color: 'orange', + color: 'red', group: '其他', }, { id: '10', index: 10, raw: 'hunt', - title: '发现/分享', - color: 'purple', + title: '发现', + color: 'orange', group: '其他', }, { @@ -152,25 +152,25 @@ const tags = [ index: 11, raw: 'idea', title: '脑洞', - color: 'green', + color: 'yellow', group: '其他', }, { id: '12', index: 12, raw: 'feedback', - title: '站务反馈', - color: 'purple', - group: '其他', - }, - { - id: '13', - index: 13, - raw: 'others', - title: '奇奇怪怪', - color: 'purple', + title: '站务', + color: 'green', group: '其他', }, + // { + // id: '13', + // index: 13, + // raw: 'others', + // title: '奇奇怪怪', + // color: 'purple', + // group: '其他', + // }, ] const communities = [ diff --git a/utils/themes/skins/cyan.ts b/utils/themes/skins/cyan.ts index d1b2e2528..f61cd9b89 100755 --- a/utils/themes/skins/cyan.ts +++ b/utils/themes/skins/cyan.ts @@ -44,11 +44,19 @@ const cyan = { bodyBg: contentBg, selectionBg: '#f8f7dc', baseColor: { - red: '#fd7f68 !important', - green: 'yellowgreen !important', - pink: '#f59dba !important', - pinkLite: '#ffafc9', - pinkBtnText: '#fff !important', + red: '#ca5f4d', + orange: '#ad735c', + yellow: '#B0BA6C', + green: '#699411', + cyan: '#24878C', + blue: '#456fbd', + purple: '#7d519e', + + grey: '#106d8a', + pink: '#b36976', + + pinkLite: '#82606b', + pinkBtnText: '#ded0d0', }, header: { fg: primaryColor, diff --git a/utils/themes/skins/github.ts b/utils/themes/skins/github.ts index 4f62d596d..8d1a157b1 100755 --- a/utils/themes/skins/github.ts +++ b/utils/themes/skins/github.ts @@ -44,11 +44,19 @@ const github = { bodyBg: contentBg, selectionBg: 'tomato', baseColor: { - red: 'tomato !important', - green: 'yellowgreen !important', - pink: '#f59dba !important', - pinkLite: '#ffafc9', - pinkBtnText: '#fff !important', + red: '#ca5f4d', + orange: '#ad735c', + yellow: '#B0BA6C', + green: '#699411', + cyan: '#24878C', + blue: '#456fbd', + purple: '#7d519e', + + grey: '#106d8a', + pink: '#b36976', + + pinkLite: '#82606b', + pinkBtnText: '#ded0d0', }, header: { fg: '#8c8c8c', diff --git a/utils/themes/skins/green.ts b/utils/themes/skins/green.ts index 5a2e1e5f7..76132fa8a 100755 --- a/utils/themes/skins/green.ts +++ b/utils/themes/skins/green.ts @@ -46,11 +46,19 @@ const green = { bodyBg: contentBg, selectionBg: '#839496', baseColor: { - red: 'tomato !important', - green: 'yellowgreen !important', - pink: '#f59dba !important', - pinkLite: '#ffafc9', - pinkBtnText: '#fff !important', + red: '#ca5f4d', + orange: '#ad735c', + yellow: '#B0BA6C', + green: '#699411', + cyan: '#24878C', + blue: '#456fbd', + purple: '#7d519e', + + grey: '#106d8a', + pink: '#b36976', + + pinkLite: '#82606b', + pinkBtnText: '#ded0d0', }, header: { fg: primaryColor, diff --git a/utils/themes/skins/iron_green.ts b/utils/themes/skins/iron_green.ts index 50d22a235..d8ec0ad6b 100755 --- a/utils/themes/skins/iron_green.ts +++ b/utils/themes/skins/iron_green.ts @@ -44,11 +44,19 @@ const iconGreen = { bodyBg: contentBg, selectionBg: 'tomato', baseColor: { - red: '#ff9d8b !important', - green: 'yellowgreen !important', - pink: '#f59dba !important', - pinkLite: '#ffafc9', - pinkBtnText: '#fff !important', + red: '#ca5f4d', + orange: '#ad735c', + yellow: '#B0BA6C', + green: '#699411', + cyan: '#24878C', + blue: '#456fbd', + purple: '#7d519e', + + grey: '#106d8a', + pink: '#b36976', + + pinkLite: '#82606b', + pinkBtnText: '#ded0d0', }, header: { fg: descText, diff --git a/utils/themes/skins/monokai.ts b/utils/themes/skins/monokai.ts index a408e46f0..852b75f71 100755 --- a/utils/themes/skins/monokai.ts +++ b/utils/themes/skins/monokai.ts @@ -46,11 +46,19 @@ const monokai = { bodyBg: contentBg, selectionBg: '#839496', baseColor: { - red: '#a24e3f !important', - green: '#699411 !important', - pink: '#966475 !important', + red: '#ca5f4d', + orange: '#ad735c', + yellow: '#B0BA6C', + green: '#699411', + cyan: '#24878C', + blue: '#456fbd', + purple: '#7d519e', + + grey: '#106d8a', + pink: '#b36976', + pinkLite: '#82606b', - pinkBtnText: '#ded0d0 !important', + pinkBtnText: '#ded0d0', }, header: { fg: descText, diff --git a/utils/themes/skins/purple.ts b/utils/themes/skins/purple.ts index 3642a2434..aab650cd0 100755 --- a/utils/themes/skins/purple.ts +++ b/utils/themes/skins/purple.ts @@ -45,11 +45,19 @@ const purple = { bodyBg: contentBg, selectionBg: '#839496', baseColor: { - red: '#a24e3f !important', - green: '#699411 !important', - pink: '#966475 !important', + red: '#ca5f4d', + orange: '#ad735c', + yellow: '#B0BA6C', + green: '#699411', + cyan: '#24878C', + blue: '#456fbd', + purple: '#7d519e', + + grey: '#106d8a', + pink: '#b36976', + pinkLite: '#82606b', - pinkBtnText: '#ded0d0 !important', + pinkBtnText: '#ded0d0', }, header: { fg: primaryColor, diff --git a/utils/themes/skins/solarized_dark.ts b/utils/themes/skins/solarized_dark.ts index d06862b4a..46447c39c 100755 --- a/utils/themes/skins/solarized_dark.ts +++ b/utils/themes/skins/solarized_dark.ts @@ -46,11 +46,19 @@ const solarizedDark = { bodyBg: contentBg, selectionBg: '#0E3B49', baseColor: { - red: '#a24e3f !important', - green: '#699411 !important', - pink: '#966475 !important', + red: '#ca5f4d', + orange: '#ad735c', + yellow: '#B0BA6C', + green: '#699411', + cyan: '#24878C', + blue: '#456fbd', + purple: '#7d519e', + + grey: '#106d8a', + pink: '#b36976', + pinkLite: '#82606b', - pinkBtnText: '#ded0d0 !important', + pinkBtnText: '#ded0d0', }, header: { fg: primaryColor, @@ -271,7 +279,7 @@ const solarizedDark = { boxShadow: '0px 7px 20px 10px rgba(0, 0, 0, 0.15)', }, tags: { - dotOpacity: 0.5, + dotOpacity: 0.6, text: '#69848a', }, tagger: { diff --git a/utils/themes/skins/yellow.ts b/utils/themes/skins/yellow.ts index b14a50919..e9d9420f0 100755 --- a/utils/themes/skins/yellow.ts +++ b/utils/themes/skins/yellow.ts @@ -45,11 +45,19 @@ const yellow = { bodyBg: contentBg, selectionBg: '#839496', baseColor: { - red: 'tomato !important', - green: 'yellowgreen !important', - pink: '#f59dba !important', - pinkLite: '#ffafc9', - pinkBtnText: '#fff !important', + red: '#ca5f4d', + orange: '#ad735c', + yellow: '#B0BA6C', + green: '#699411', + cyan: '#24878C', + blue: '#456fbd', + purple: '#7d519e', + + grey: '#106d8a', + pink: '#b36976', + + pinkLite: '#82606b', + pinkBtnText: '#ded0d0', }, header: { fg: '#988E80',