diff --git a/public/icons/expert.svg b/public/icons/expert.svg new file mode 100644 index 00000000..e81cb43e --- /dev/null +++ b/public/icons/expert.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss index d9141883..6b2d15d6 100644 --- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss +++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss @@ -16,14 +16,15 @@ } .action { - display: flex; align-items: center; - width: 100%; box-sizing: border-box; - padding: 8px 16px; + display: flex; font-size: inherit; font-weight: 500; + gap: 0.8rem; + padding: 8px 16px; text-align: left; + width: 100%; white-space: nowrap; &.soon { @@ -32,11 +33,29 @@ gap: 0.6rem; width: 100%; justify-content: space-between; + + .icon { + opacity: 0.4; + } } &:hover { background: var(--black-500); color: var(--black-50) !important; + + .icon { + filter: invert(1); + opacity: 1 !important; + } + } + + .icon { + flex: 0 2.4rem; + min-width: 2.4rem; + } + + .title { + flex: 1; } } diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx index ce9990bb..0943b814 100644 --- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx +++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx @@ -4,6 +4,7 @@ import { clsx } from 'clsx' import { Show, createSignal } from 'solid-js' import { useLocalize } from '../../../context/localize' +import { Icon } from '../../_shared/Icon' import { Popup } from '../../_shared/Popup' import { SoonChip } from '../../_shared/SoonChip' @@ -38,7 +39,8 @@ export const FeedArticlePopup = (props: Props) => { setHidePopup(true) }} > - {t('Share')} + +
{t('Share')}
@@ -51,7 +53,8 @@ export const FeedArticlePopup = (props: Props) => { setHidePopup(true) }} > - {t('Help to edit')} + +
{t('Help to edit')}
@@ -64,19 +67,24 @@ export const FeedArticlePopup = (props: Props) => { setHidePopup(false) }} > - {t('Invite experts')} + +
{t('Invite experts')}
  • {/**/}