Feed page style fixes

public/icons/rating-control-checked.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path
+  d="M12 3.75C16.5573 3.75 20.25 7.44271 20.25 12C20.25 16.5573 16.5573 20.25 12 20.25C7.44271 20.25 3.75 16.5573 3.75 12C3.75 7.44271 7.44271 3.75 12 3.75ZM16.0052 9.55729C16.2292 9.20833 16.1302 8.74479 15.7839 8.52083C15.4349 8.29427 14.9714 8.39323 14.7448 8.74219L11.1042 14.362L9.1875 12.1823C8.91406 11.8724 8.4401 11.8411 8.13021 12.1146C7.81771 12.388 7.78906 12.862 8.0625 13.1745L10.6328 16.0964C10.776 16.2578 10.9818 16.3516 11.1953 16.3516C11.2135 16.3516 11.2318 16.349 11.25 16.349C11.4844 16.3307 11.6979 16.2057 11.8255 16.0078L16.0052 9.55729Z" fill="currentColor"/>
+</svg>

public/icons/rating-control-less.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path d="M7 12H17" stroke="currentColor" stroke-width="1.5"/>
+</svg>

public/icons/rating-control-more.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd"
+      d="M11.25 12.75V17H12.75V12.75H17V11.25H12.75V7H11.25V11.25H7V12.75H11.25Z" fill="currentColor"/>
+</svg>

src/components/Article/Article.module.scss

@@ -177,10 +177,10 @@ img {
 }
 
 .shoutStatsItem {
+  align-items: center;
   @include font-size(1.5rem);
-
   font-weight: 500;
-  display: inline-block;
+  display: flex;
   margin: 0 6% 1em 0;
   vertical-align: baseline;
   cursor: pointer;
@@ -190,25 +190,30 @@ img {
   }
 
   .icon {
-    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;
   }
 
+  .iconHover {
+    display: none;
+  }
+
+  &:hover {
+    .icon {
+      display: none;
+    }
+
+    .iconHover {
+      display: inline-block;
+    }
+  }
+
   a {
     border: none;
     text-decoration: none;
@@ -225,21 +230,11 @@ img {
 }
 
 .shoutStatsItemInner {
-  margin: -0.3em -0.3em 0;
-  padding: 0.3em;
   cursor: pointer;
 
   .icon {
     margin-right: 0;
   }
-
-  &:hover {
-    background: #000;
-
-    img {
-      filter: invert(1);
-    }
-  }
 }
 
 .shoutStatsItemLikes {
@@ -275,8 +270,6 @@ img {
 }
 
 .shoutStatsItemViews {
-  margin-left: 2rem;
-  margin-right: 0;
   cursor: default;
 }
 
@@ -285,6 +278,7 @@ img {
   display: inline-block;
   margin-left: 2rem;
   margin-right: 0;
+  margin-bottom: 0;
   cursor: default;
 
   @include media-breakpoint-down(sm) {

src/components/Article/FullArticle.tsx

@@ -196,10 +196,20 @@ export const FullArticle = (props: ArticleProps) => {
                 {(triggerRef: (el) => void) => (
                   <div class={styles.shoutStatsItem} ref={triggerRef} onClick={scrollToComments}>
                     <Icon name="comment" class={styles.icon} />
+                    <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
                     {props.article.stat?.commented ?? ''}
                   </div>
                 )}
               </Popover>
+
+              <Show when={props.article.stat?.viewed}>
+                <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
+                  <Icon name="eye" class={styles.icon} />
+                  <Icon name="eye" class={clsx(styles.icon, styles.iconHover)} />
+                  {props.article.stat?.viewed}
+                </div>
+              </Show>
+
               <Popover content={t('Share')}>
                 {(triggerRef: (el) => void) => (
                   <div class={styles.shoutStatsItem} ref={triggerRef}>
@@ -211,6 +221,7 @@ export const FullArticle = (props: ArticleProps) => {
                       trigger={
                         <div class={styles.shoutStatsItemInner}>
                           <Icon name="share-outline" class={styles.icon} />
+                          <Icon name="share-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                         </div>
                       }
                     />
@@ -222,6 +233,7 @@ export const FullArticle = (props: ArticleProps) => {
                   <div class={styles.shoutStatsItem} ref={triggerRef} onClick={handleBookmarkButtonClick}>
                     <div class={styles.shoutStatsItemInner}>
                       <Icon name="bookmark" class={styles.icon} />
+                      <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
                     </div>
                   </div>
                 )}
@@ -235,6 +247,7 @@ export const FullArticle = (props: ArticleProps) => {
                         class={styles.shoutStatsItemInner}
                       >
                         <Icon name="pencil-outline" class={styles.icon} />
+                        <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                       </a>
                     </div>
                   )}
@@ -244,12 +257,6 @@ export const FullArticle = (props: ArticleProps) => {
                 <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
                   {formattedDate()}
                 </div>
-                <Show when={props.article.stat?.viewed}>
-                  <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
-                    <Icon name="eye" class={clsx(styles.icon, styles.iconEye)} />
-                    {props.article.stat?.viewed}
-                  </div>
-                </Show>
               </div>
             </div>
             <div class={styles.help}>

src/components/Article/ShoutRatingControl.module.scss

@@ -2,36 +2,14 @@
   align-items: center;
   display: flex;
 
-  &.isDownvoted .downvoteButton,
-  &.isUpvoted .upvoteButton {
-    background: #000;
-    border-color: #000;
-    color: #fff;
-  }
-
   .ratingControl {
-    align-items: center;
-    border: 2px solid;
-    border-radius: 100%;
-    display: flex;
-    justify-content: center;
-    height: 0.9em;
-    line-height: 0;
-    font-size: 1.6em;
-    padding: 0;
-    width: 0.9em;
-
     &:hover {
-      background: #000;
-      border-color: #000;
-      color: #fff;
     }
   }
 }
 
 .ratingValue {
   font-weight: bold;
-  margin: 0 4px;
   padding: 0 4px;
   cursor: pointer;
 

src/components/Article/ShoutRatingControl.tsx

@@ -8,6 +8,7 @@ import { useReactions } from '../../context/reactions'
 import { Popup } from '../_shared/Popup'
 import { VotersList } from '../_shared/VotersList'
 import { useLocalize } from '../../context/localize'
+import { Icon } from '../_shared/Icon'
 
 interface ShoutRatingControlProps {
   shout: Shout
@@ -80,17 +81,14 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
   }
 
   return (
-    <div
+    <div class={clsx(styles.rating, props.class)}>
-      class={clsx(styles.rating, props.class, {
+      <button class={styles.ratingControl} onClick={() => handleRatingChange(false)}>
-        [styles.isUpvoted]: isUpvoted(),
+        <Show when={!isDownvoted()}>
-        [styles.isDownvoted]: isDownvoted()
+          <Icon name="rating-control-less" />
-      })}
+        </Show>
-    >
+        <Show when={isDownvoted()}>
-      <button
+          <Icon name="rating-control-checked" />
-        class={clsx(styles.ratingControl, styles.downvoteButton)}
+        </Show>
-        onClick={() => handleRatingChange(false)}
-      >
-        &minus;
       </button>
 
       <Popup trigger={<span class={styles.ratingValue}>{props.shout.stat.rating}</span>} variant="tiny">
@@ -100,11 +98,13 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
         />
       </Popup>
 
-      <button
+      <button class={styles.ratingControl} onClick={() => handleRatingChange(true)}>
-        class={clsx(styles.ratingControl, styles.upvoteButton)}
+        <Show when={!isUpvoted()}>
-        onClick={() => handleRatingChange(true)}
+          <Icon name="rating-control-more" />
-      >
+        </Show>
-        +
+        <Show when={isUpvoted()}>
+          <Icon name="rating-control-checked" />
+        </Show>
       </button>
     </div>
   )

src/components/Author/Userpic.module.scss

@@ -19,9 +19,11 @@
   }
 
   .userpic {
+    background-color: white;
     border-radius: 50%;
+    border: 1.5px solid black;
+    color: #000;
     font-size: small;
-    border: 2px solid black;
     text-align: center;
     line-height: 28px;
     min-width: 32px;
@@ -34,12 +36,17 @@
     width: 20px !important;
   }
 
-  a:link {
+  a:link,
+  a:visited {
+    border: none;
     display: block;
     height: 100%;
-    padding: 0;
+    padding: 0 !important;
+    text-align: center;
+    width: 100%;
 
     &:hover {
+      background: none;
       color: #000;
     }
   }
@@ -78,6 +85,8 @@
 
 .feedMode {
   .userpic {
+    font-size: 0.8rem;
+    line-height: 14px;
     min-width: 16px;
     max-width: 16px;
   }

src/components/Discours/Hero.scss

@@ -28,11 +28,13 @@
   .button {
     border: 3px solid;
     border-radius: 1.2em;
+    color: inherit;
     cursor: pointer;
     display: inline-block;
     font-weight: bold;
     margin-right: 0.8rem;
     margin-bottom: 0.8em;
+    padding-bottom: 0.6rem;
     transition: all 0.2s;
 
     &:hover {

src/components/Feed/ArticleCard.module.scss

@@ -56,7 +56,16 @@
   padding-top: 2.4rem;
 }
 
+.shoutCardLinkWrapper {
+  background-color: transparent;
+  transition: background-color 0.3s;
+}
+
 .shoutCardTitlesContainer {
+  &.shoutCardTitlesContainerFeedMode {
+    margin-bottom: 1.4rem;
+  }
+
   a:link {
     border: none;
 
@@ -71,7 +80,7 @@
     }
 
     &:hover {
-      .shoutCardTitle .shoutCardLinkContainer {
+      .shoutCardTitle .shoutCardLinkWrapper {
         background-color: var(--default-color);
         color: var(--link-hover-color);
       }
@@ -166,7 +175,7 @@
 
   .shoutCardTitlesContainerFeedMode & {
     @include font-size(3.2rem);
-    line-height: 1.25;
+    line-height: 1.1;
   }
 }
 
@@ -246,6 +255,7 @@
       background: #000;
 
       .icon {
+        display: inline-block;
         filter: invert(1);
       }
     }
@@ -511,6 +521,10 @@
 
   &:first-child {
     padding: 0 1em 1em 0;
+
+    .shoutCardDetailsItem {
+      margin-right: 2rem;
+    }
   }
 }
 

src/components/Feed/ArticleCard.tsx

@@ -37,6 +37,7 @@ interface ArticleCardProps {
     isCompact?: boolean
     isSingle?: boolean
     isBeside?: boolean
+    withViewed?: boolean
   }
   article: Shout
 }
@@ -123,7 +124,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
           <div class={styles.shoutCardType}>
             <a href={`/expo/${layout}`}>
               <Icon name={layout} class={styles.icon} />
-              <Icon name={layout} class={clsx(styles.icon, styles.iconHover)} />
+              {/*<Icon name={`${layout}-hover`} class={clsx(styles.icon, styles.iconHover)} />*/}
             </a>
           </div>
         </Show>
@@ -147,7 +148,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
         >
           <a href={`/${slug || ''}`}>
             <div class={styles.shoutCardTitle}>
-              <span class={styles.shoutCardLinkContainer}>{title}</span>
+              <span class={styles.shoutCardLinkWrapper}>
+                <span class={styles.shoutCardLinkContainer}>{title}</span>
+              </span>
             </div>
 
             <Show when={!props.settings?.nosubtitle && subtitle}>
@@ -195,7 +198,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
               >
                 <div class={styles.shoutCardType}>
                   <a href={`/expo/${layout}`}>
-                    <Icon name={layout} class={clsx(styles.icon, styles.iconHover)} />
+                    <Icon name={layout} class={styles.icon} />
+                    {/*<Icon name={`${layout}-hover`} class={clsx(styles.icon, styles.iconHover)} />*/}
                   </a>
                 </div>
               </Show>
@@ -212,11 +216,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
             <div class={styles.shoutCardDetailsContent}>
               <ShoutRatingControl shout={props.article} class={styles.shoutCardDetailsItem} />
 
-              <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardDetailsViewed)}>
-                <Icon name="eye" class={clsx(styles.icon, styles.feedControlIcon)} />
-                {stat?.viewed}
-              </div>
-
               <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
                 <a href="#" onClick={(event) => scrollToComments(event)}>
                   <Icon name="comment" class={clsx(styles.icon, styles.feedControlIcon)} />
@@ -227,6 +226,13 @@ export const ArticleCard = (props: ArticleCardProps) => {
                   <span class={styles.shoutCardLinkContainer}>{stat?.commented || t('Add comment')}</span>
                 </a>
               </div>
+
+              <Show when={props.settings?.withViewed}>
+                <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardDetailsViewed)}>
+                  <Icon name="eye" class={clsx(styles.icon, styles.feedControlIcon)} />
+                  {stat?.viewed}
+                </div>
+              </Show>
             </div>
 
             <div class={styles.shoutCardDetailsContent}>

src/components/Feed/Sidebar/Sidebar.module.scss

@@ -79,9 +79,10 @@
     display: inline-block;
     line-height: 1;
     height: 2.4rem;
+    margin-bottom: 0.2rem;
     margin-right: 0.8rem;
-    vertical-align: middle;
     text-align: center;
+    vertical-align: middle;
     width: 2.4rem;
 
     img {

src/components/Nav/Header.module.scss

@@ -315,16 +315,15 @@
     cursor: pointer;
     border: 0;
 
-    .icon {
-      opacity: 0.6;
-      transition: opacity 0.3s;
-    }
-
     &:hover {
       background: none;
 
       .icon {
-        opacity: 1;
+        display: none;
+      }
+
+      .iconHover {
+        display: block;
       }
     }
   }

src/components/Nav/Header.tsx

@@ -130,16 +130,24 @@ export const Header = (props: Props) => {
                   setIsSharePopupVisible(isVisible)
                 }}
                 containerCssClass={styles.control}
-                trigger={<Icon name="share-outline" class={styles.icon} />}
+                trigger={
+                  <>
+                    <Icon name="share-outline" class={styles.icon} />
+                    <Icon name="share-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
+                  </>
+                }
               />
               <div onClick={(event) => scrollToComments(event, true)} class={styles.control}>
-                <Icon name="comments-outline" class={styles.icon} />
+                <Icon name="comment" class={styles.icon} />
+                <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
               </div>
               <a href={getPagePath(router, 'create')} class={styles.control}>
                 <Icon name="pencil-outline" class={styles.icon} />
+                <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
               </a>
               <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
                 <Icon name="bookmark" class={styles.icon} />
+                <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
               </a>
             </div>
           </Show>

src/components/Nav/Topics.scss

@@ -14,6 +14,7 @@
   .topics {
     display: flex;
     flex-wrap: wrap;
+    font-weight: 500;
     list-style: none;
     margin-top: 0;
     padding: 0 7em 0 0;

src/components/Views/Feed.module.scss

@@ -1,5 +1,5 @@
 .feedFilter {
-  margin: 0.2em 0 1.6rem;
+  margin: 0.2em 0 4.8rem;
 }
 
 .feedNavigation {
@@ -98,27 +98,34 @@
     line-height: 1.3;
 
     li {
-      margin-bottom: 1.2rem;
+      margin-bottom: 1.6rem;
-      padding-left: 2.6rem;
+      padding-left: 3.4rem;
       position: relative;
 
-      &::before {
-        background: url(/icons/knowledge-base-bullet.svg) no-repeat;
-        content: '';
-        height: 1.6rem;
-        left: 0;
-        position: absolute;
-        width: 2rem;
-      }
-
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
 
-  a {
+  a:link {
     border: none;
+
+    &::before {
+      background: url(/public/icons/knowledge-base-bullet.svg) no-repeat;
+      content: '';
+      height: 2.4rem;
+      left: 0;
+      position: absolute;
+      top: -0.1em;
+      width: 2.4rem;
+    }
+
+    &:hover {
+      &:before {
+        background-image: url(/public/icons/knowledge-base-bullet-hover.svg);
+      }
+    }
   }
 }
 

src/components/_shared/VotersList/VotersList.module.scss

@@ -36,4 +36,8 @@
   .commentRatingNegative {
     color: #d00820;
   }
+
+  .fallbackMessage {
+    font-size: 1.2rem;
+  }
 }

src/components/_shared/VotersList/VotersList.tsx

@@ -16,11 +16,7 @@ export const VotersList = (props: Props) => {
       <ul class={clsx('nodash', styles.users)}>
         <Show
           when={props.reactions.length > 0}
-          fallback={
+          fallback={<li class={clsx(styles.item, styles.fallbackMessage)}>{props.fallbackMessage}</li>}
-            <li class={styles.item}>
-              <small>{props.fallbackMessage}</small>
-            </li>
-          }
         >
           <For each={props.reactions}>
             {(reaction) => (