From 5bde0bc7d02d9fdeec3ee4cfaf4a7227fdbdf260 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 20 May 2024 23:37:56 +0300
Subject: [PATCH 1/2] Add icons to the feed context popup

---
 public/icons/expert.svg                       |  4 +++
 .../FeedArticlePopup.module.scss              | 25 ++++++++++++++++---
 .../FeedArticlePopup/FeedArticlePopup.tsx     | 18 +++++++++----
 3 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 public/icons/expert.svg

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 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M11.9967 4.51318C11.5931 4.51318 11.1868 4.59652 10.8118 4.75798L7.9056 6.01058L9.83268 6.81266L11.4056 6.13558C11.5931 6.05225 11.7962 6.01058 11.9993 6.01058C12.2025 6.01058 12.4056 6.05225 12.5931 6.13558L20.5801 9.57829C20.6504 9.60693 20.6947 9.67464 20.6947 9.75016C20.6947 9.82568 20.6504 9.89339 20.5801 9.92204L12.5931 13.3647C12.2181 13.5262 11.7806 13.5262 11.4056 13.3647L3.41862 9.92204C3.34831 9.89339 3.30404 9.82568 3.30404 9.75016C3.30404 9.67464 3.34831 9.60693 3.41862 9.57829L6.47591 8.26058L11.7103 10.4429C11.804 10.4819 11.903 10.5002 11.9993 10.5002C12.291 10.5002 12.5723 10.3283 12.6921 10.0392C12.8509 9.65641 12.6712 9.21631 12.2884 9.05746L8.39258 7.43506L8.39518 7.43246L6.4681 6.63037L2.42643 8.37516C1.87435 8.60954 1.51758 9.1512 1.51758 9.75016C1.51758 10.3491 1.87435 10.8908 2.42643 11.1252L4.87435 12.1825V18.5679C4.64779 18.7371 4.49935 19.008 4.49935 19.3127V20.8127C4.49935 21.3309 4.91862 21.7502 5.43685 21.7502H5.81185C6.33008 21.7502 6.74935 21.3309 6.74935 20.8127V19.3127C6.74935 19.008 6.60091 18.7371 6.37435 18.5679V17.1512C7.42904 17.909 9.2181 18.7502 11.9993 18.7502C15.5384 18.7502 17.4889 17.3856 18.3353 16.5705C18.8379 16.0887 19.1243 15.4064 19.1243 14.6955V12.1825L21.5723 11.1252C22.1243 10.8908 22.4811 10.3491 22.4811 9.75016C22.4811 9.1512 22.1243 8.60954 21.5723 8.37516L13.1868 4.75798C12.8092 4.59652 12.403 4.51318 11.9967 4.51318ZM6.37435 12.8283L10.8118 14.7424C11.1895 14.9064 11.5931 14.9845 11.9993 14.9845C12.4056 14.9845 12.8092 14.9064 13.1868 14.7424L17.6243 12.8283V14.6955C17.6243 15.0002 17.5046 15.2892 17.2962 15.4897C16.6113 16.146 15.015 17.2502 11.9993 17.2502C8.98372 17.2502 7.38737 16.146 6.70247 15.4897C6.49414 15.2892 6.37435 15.0002 6.37435 14.6955V12.8283Z" fill="currentColor"/>
+</svg>
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..1597138a 100644
--- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
+++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
@@ -6,6 +6,7 @@ import { Show, createSignal } from 'solid-js'
 import { useLocalize } from '../../../context/localize'
 import { Popup } from '../../_shared/Popup'
 import { SoonChip } from '../../_shared/SoonChip'
+import { Icon } from '../../_shared/Icon'
 
 import styles from './FeedArticlePopup.module.scss'
 
@@ -38,7 +39,8 @@ export const FeedArticlePopup = (props: Props) => {
                 setHidePopup(true)
               }}
             >
-              {t('Share')}
+              <Icon name="share-outline" class={styles.icon}/>
+              <div class={styles.title}>{t('Share')}</div>
             </button>
           </li>
           <Show when={!props.canEdit}>
@@ -51,7 +53,8 @@ export const FeedArticlePopup = (props: Props) => {
                   setHidePopup(true)
                 }}
               >
-                {t('Help to edit')}
+                <Icon name="pencil-outline" class={styles.icon}/>
+                <div class={styles.title}>{t('Help to edit')}</div>
               </button>
             </li>
           </Show>
@@ -64,19 +67,24 @@ export const FeedArticlePopup = (props: Props) => {
                 setHidePopup(false)
               }}
             >
-              {t('Invite experts')}
+              <Icon name="expert" class={styles.icon}/>
+              <div class={styles.title}>{t('Invite experts')}</div>
             </button>
           </li>
           <Show when={!props.canEdit}>
             <li>
               <button class={clsx(styles.action, styles.soon)} role="button">
-                {t('Subscribe to comments')} <SoonChip />
+                <Icon name="bell-white" class={styles.icon}/>
+                <div class={styles.title}>{t('Subscribe to comments')}</div>
+                <SoonChip/>
               </button>
             </li>
           </Show>
           <li>
             <button class={clsx(styles.action, styles.soon)} role="button">
-              {t('Add to bookmarks')} <SoonChip />
+              <Icon name="bookmark" class={styles.icon}/>
+              <div class={styles.title}>{t('Add to bookmarks')}</div>
+              <SoonChip />
             </button>
           </li>
           {/*<Show when={!props.canEdit}>*/}

From 8397facc5e52bcd8263042b4b5128a766f71dfde Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 20 May 2024 23:39:59 +0300
Subject: [PATCH 2/2] Fixed code style

---
 .../Feed/FeedArticlePopup/FeedArticlePopup.tsx     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
index 1597138a..0943b814 100644
--- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
+++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
@@ -4,9 +4,9 @@ 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'
-import { Icon } from '../../_shared/Icon'
 
 import styles from './FeedArticlePopup.module.scss'
 
@@ -39,7 +39,7 @@ export const FeedArticlePopup = (props: Props) => {
                 setHidePopup(true)
               }}
             >
-              <Icon name="share-outline" class={styles.icon}/>
+              <Icon name="share-outline" class={styles.icon} />
               <div class={styles.title}>{t('Share')}</div>
             </button>
           </li>
@@ -53,7 +53,7 @@ export const FeedArticlePopup = (props: Props) => {
                   setHidePopup(true)
                 }}
               >
-                <Icon name="pencil-outline" class={styles.icon}/>
+                <Icon name="pencil-outline" class={styles.icon} />
                 <div class={styles.title}>{t('Help to edit')}</div>
               </button>
             </li>
@@ -67,22 +67,22 @@ export const FeedArticlePopup = (props: Props) => {
                 setHidePopup(false)
               }}
             >
-              <Icon name="expert" class={styles.icon}/>
+              <Icon name="expert" class={styles.icon} />
               <div class={styles.title}>{t('Invite experts')}</div>
             </button>
           </li>
           <Show when={!props.canEdit}>
             <li>
               <button class={clsx(styles.action, styles.soon)} role="button">
-                <Icon name="bell-white" class={styles.icon}/>
+                <Icon name="bell-white" class={styles.icon} />
                 <div class={styles.title}>{t('Subscribe to comments')}</div>
-                <SoonChip/>
+                <SoonChip />
               </button>
             </li>
           </Show>
           <li>
             <button class={clsx(styles.action, styles.soon)} role="button">
-              <Icon name="bookmark" class={styles.icon}/>
+              <Icon name="bookmark" class={styles.icon} />
               <div class={styles.title}>{t('Add to bookmarks')}</div>
               <SoonChip />
             </button>