Revert icons

public/icons/bookmark-x.svg

@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
+<path d="M0 0H14V18.6667L7 14.9333L0 18.6667V0ZM2 2V15.3333L7 12.6667L12 15.3333V2H2Z" fill="#141414"/>
-        d="M16,2H8A3,3,0,0,0,5,5V21a1,1,0,0,0,.5.87,1,1,0,0,0,1,0L12,18.69l5.5,3.18A1,1,0,0,0,18,22a1,1,0,0,0,.5-.13A1,1,0,0,0,19,21V5A3,3,0,0,0,16,2Zm1,17.27-4.5-2.6a1,1,0,0,0-1,0L7,19.27V5A1,1,0,0,1,8,4h8a1,1,0,0,1,1,1Z" />
 </svg>

public/icons/bookmark.svg

@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" fill="#141414"
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H14V18.6667L7 14.9333L0 18.6667V0ZM2 2V15.3333L7 12.6667L12 15.3333V2H2Z" fill="#141414"/>
-        d="M16,2H8A3,3,0,0,0,5,5V21a1,1,0,0,0,.5.87,1,1,0,0,0,1,0L12,18.69l5.5,3.18A1,1,0,0,0,18,22a1,1,0,0,0,.5-.13A1,1,0,0,0,19,21V5A3,3,0,0,0,16,2Zm1,17.27-4.5-2.6a1,1,0,0,0-1,0L7,19.27V5A1,1,0,0,1,8,4h8a1,1,0,0,1,1,1Z" />
 </svg>

src/components/Article/Comment.tsx

@@ -118,7 +118,7 @@ export default (props: {
                 containerCssClass={stylesHeader.control}
                 trigger={
                   <button class={clsx(styles.commentControl, styles.commentControlShare)}>
-                    <Icon name="share-new" class={styles.icon} />
+                    <Icon name="share" class={styles.icon} />
                     {t('Share')}
                   </button>
                 }

src/components/Article/FullArticle.tsx

@@ -156,7 +156,7 @@ export const FullArticle = (props: ArticleProps) => {
 
           <Show when={props.article.stat?.viewed}>
             <div class={clsx(styles.shoutStatsItem)}>
-              <Icon name="eye" class={styles.icon} />
+              <Icon name="eye" class={clsx(styles.icon, styles.iconEye)} />
               {props.article.stat?.viewed}
             </div>
           </Show>
@@ -169,7 +169,7 @@ export const FullArticle = (props: ArticleProps) => {
           <div class={styles.shoutStatsItem}>
             <SharePopup
               containerCssClass={stylesHeader.control}
-              trigger={<Icon name="share-new" class={styles.icon} />}
+              trigger={<Icon name="share-outline" class={styles.icon} />}
             />
           </div>
 

src/components/Article/RatingControl.module.scss

@@ -10,16 +10,20 @@
 
 .ratingControl {
   align-items: center;
+  border: 2px solid;
+  border-radius: 100%;
   display: flex;
   justify-content: center;
   height: 0.9em;
   line-height: 0;
   @include font-size(3.6rem);
-  color: #777;
+
   padding: 0;
   width: 0.9em;
-  transition: 0.15s all linear;
+
   &:hover {
-    transform: scale(1.2);
+    background: #000;
+    border-color: #000;
+    color: #fff;
   }
 }

src/components/Article/RatingControl.tsx

@@ -10,13 +10,9 @@ interface RatingControlProps {
 export const RatingControl = (props: RatingControlProps) => {
   return (
     <div class={clsx(props.class, styles.rating)}>
-      <button class={styles.ratingControl}>
+      <button class={styles.ratingControl}>&minus;</button>
-        <Icon name="dislike" />
-      </button>
       <span class={styles.ratingValue}>{props?.rating || ''}</span>
-      <button class={styles.ratingControl}>
+      <button class={styles.ratingControl}>+</button>
-        <Icon name="like" />
-      </button>
     </div>
   )
 }

src/components/Author/Card.module.scss

@@ -12,11 +12,6 @@
   }
 }
 
-.s24 {
-  width: 24px;
-  height: 24px;
-}
-
 .authorDetails {
   display: flex;
   flex: 1;

src/components/Author/Card.tsx

@@ -119,7 +119,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
                       disabled={isSubscribing()}
                     >
                       <Show when={!props.isAuthorsList}>
-                        <Icon name="circle-plus" iconClassName={styles.s24} class={styles.icon} />
+                        <Icon name="author-subscribe" class={styles.icon} />
                       </Show>
                       <span class={styles.buttonLabel}>{t('Follow')}</span>
                     </button>

src/components/Feed/Beside.tsx

@@ -37,14 +37,14 @@ export const Beside = (props: BesideProps) => {
                     <Show when={props.wrapper === 'author'}>
                       <a href="/authors">
                         {t('All authors')}
-                        <Icon name="arrow-circle-right" class={styles.icon} />
+                        <Icon name="arrow-right" class={styles.icon} />
                       </a>
                     </Show>
 
                     <Show when={props.wrapper === 'topic'}>
                       <a href="/topics">
                         {t('All topics')}
-                        <Icon name="arrow-circle-right" class={styles.icon} />
+                        <Icon name="arrow-right" class={styles.icon} />
                       </a>
                     </Show>
                   </div>

src/components/Nav/Header.module.scss

@@ -12,10 +12,12 @@
       padding: 0 divide($container-padding-x, 2);
     }
   }
+
   .icon {
-    height: 1.2em;
+    height: 1em;
-    width: 1.2em;
+    width: 1em;
   }
+
   a:hover {
     .icon {
       filter: invert(1);

src/components/Nav/Header.tsx

@@ -127,13 +127,16 @@ export const Header = (props: Props) => {
                   setIsSharePopupVisible(isVisible)
                 }}
                 containerCssClass={styles.control}
-                trigger={<Icon name="share-new" class={styles.icon} />}
+                trigger={<Icon name="share-outline" class={styles.icon} />}
               />
               <a href={getPagePath(router, 'inbox')} class={styles.control}>
                 <Icon name="comments-outline" class={styles.icon} />
               </a>
               <a href={getPagePath(router, 'create')} class={styles.control}>
-                <Icon name="feather" class={styles.icon} />
+                <Icon name="pencil-outline" class={styles.icon} />
+              </a>
+              <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
+                <Icon name="bookmark" class={styles.icon} />
               </a>
             </div>
           </Show>

src/components/Nav/HeaderAuth.tsx

@@ -44,7 +44,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
             <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
               <a href="/create">
                 <span class={styles.textLabel}>{t('Create post')}</span>
-                <Icon name="feather" class={styles.icon} />
+                <Icon name="pencil" class={styles.icon} />
               </a>
             </div>
 

src/styles/Article.module.scss

@@ -150,13 +150,21 @@ img {
   vertical-align: baseline;
 
   .icon {
-    height: 1.5em;
+    height: 1.6em;
     display: inline-block;
     margin-right: 0.2em;
+    max-width: 1.4em;
+    max-height: 1.4em;
     transition: filter 0.2s;
     vertical-align: middle;
   }
 
+  .iconEye {
+    height: 1.8em;
+    max-width: 1.8em;
+    max-height: 1.8em;
+  }
+
   img {
     display: block;
   }