View switcher unification

src/components/Article/Article.module.scss

@@ -1,6 +1,5 @@
 h1 {
   @include font-size(4rem);
-
   line-height: 1.1;
   margin-top: 0.5em;
 }
@@ -334,12 +333,7 @@ img {
 }
 
 .commentsViewSwitcher {
-  margin-top: 0;
+  margin-top: 0 !important;
-}
-
-.commentsViewSwitcherButton {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
 }
 
 .help {

src/components/Article/CommentsTree.tsx

@@ -115,35 +115,32 @@ export const CommentsTree = (props: Props) => {
         <Show when={comments().length > 0}>
           <ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
             <Show when={newReactions().length > 0}>
-              <li classList={{ selected: commentsOrder() === 'newOnly' }}>
+              <li classList={{ 'view-switcher__item--selected': commentsOrder() === 'newOnly' }}>
                 <Button
-                  variant="inline"
+                  variant="light"
                   value={t('New only')}
                   onClick={() => {
                     setCommentsOrder('newOnly')
                   }}
-                  class={styles.commentsViewSwitcherButton}
                 />
               </li>
             </Show>
-            <li classList={{ selected: commentsOrder() === 'createdAt' }}>
+            <li classList={{ 'view-switcher__item--selected': commentsOrder() === 'createdAt' }}>
               <Button
-                variant="inline"
+                variant="light"
                 value={t('By time')}
                 onClick={() => {
                   setCommentsOrder('createdAt')
                 }}
-                class={styles.commentsViewSwitcherButton}
               />
             </li>
-            <li classList={{ selected: commentsOrder() === 'rating' }}>
+            <li classList={{ 'view-switcher__item--selected': commentsOrder() === 'rating' }}>
               <Button
-                variant="inline"
+                variant="light"
                 value={t('By rating')}
                 onClick={() => {
                   setCommentsOrder('rating')
                 }}
-                class={styles.commentsViewSwitcherButton}
               />
             </li>
           </ul>

src/components/Author/Full.scss

@@ -16,8 +16,6 @@
 
 .author-page {
   .view-switcher {
-    @include font-size(1.5rem);
-
     margin-top: 0;
 
     button {

src/components/Nav/Header.module.scss

@@ -158,14 +158,14 @@
 }
 
 .mainNavigation {
-  display: inline-flex;
+  margin: 0 !important;
-  font-weight: 500;
-  list-style: none;
-  margin: 0;
   opacity: 1;
-  padding: 0;
   transition: opacity 0.3s;
 
+  li {
+    margin-bottom: 0 !important;
+  }
+
   @include media-breakpoint-down(md) {
     background: #fff;
     bottom: 0;
@@ -180,7 +180,7 @@
     z-index: 1;
 
     li {
-      margin-bottom: 2.4rem;
+      margin-bottom: 2.4rem !important;
     }
   }
 
@@ -195,22 +195,6 @@
       display: block !important;
     }
   }
-
-  li {
-    margin-right: 2.4rem;
-  }
-
-  a,
-  a:link {
-    border: none;
-  }
-
-  .selected a {
-    border-bottom: 2px solid;
-    color: #000;
-    cursor: default;
-    pointer-events: none;
-  }
 }
 
 .headerWithTitle.headerScrolledBottom {

src/components/Nav/Header.tsx

@@ -111,13 +111,10 @@ export const Header = (props: Props) => {
             <Show when={props.title}>
               <div class={styles.articleHeader}>{props.title}</div>
             </Show>
-            <ul
+            <ul class={clsx('view-switcher', styles.mainNavigation)} classList={{ fixed: fixed() }}>
-              class={clsx(styles.mainNavigation, 'col text-xl inline-flex')}
-              classList={{ fixed: fixed() }}
-            >
               <For each={resources}>
                 {(r) => (
-                  <li classList={{ [styles.selected]: r.route === page().route }}>
+                  <li classList={{ 'view-switcher__item--selected': r.route === page().route }}>
                     <a href={getPagePath(router, r.route)}>{r.name}</a>
                   </li>
                 )}

src/components/Views/AllAuthors.tsx

@@ -99,13 +99,17 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
         <p>{t('Subscribe who you like to tune your personal feed')}</p>
 
         <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
-          <li classList={{ selected: !searchParams().by || searchParams().by === 'shouts' }}>
+          <li
+            classList={{
+              'view-switcher__item--selected': !searchParams().by || searchParams().by === 'shouts'
+            }}
+          >
             <a href="/authors?by=shouts">{t('By shouts')}</a>
           </li>
-          <li classList={{ selected: searchParams().by === 'followers' }}>
+          <li classList={{ 'view-switcher__item--selected': searchParams().by === 'followers' }}>
             <a href="/authors?by=followers">{t('By popularity')}</a>
           </li>
-          <li classList={{ selected: searchParams().by === 'name' }}>
+          <li classList={{ 'view-switcher__item--selected': searchParams().by === 'name' }}>
             <a href="/authors?by=name">{t('By name')}</a>
           </li>
           <Show when={searchParams().by !== 'name'}>

src/components/Views/AllTopics.tsx

@@ -100,14 +100,14 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
         <h1>{t('Topics')}</h1>
         <p>{t('Subscribe what you like to tune your personal feed')}</p>
 
-        <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
+        <ul class="view-switcher">
-          <li classList={{ selected: searchParams().by === 'shouts' }}>
+          <li classList={{ 'view-switcher__item--selected': searchParams().by === 'shouts' }}>
             <a href="/topics?by=shouts">{t('By shouts')}</a>
           </li>
-          <li classList={{ selected: searchParams().by === 'authors' }}>
+          <li classList={{ 'view-switcher__item--selected': searchParams().by === 'authors' }}>
             <a href="/topics?by=authors">{t('By authors')}</a>
           </li>
-          <li classList={{ selected: searchParams().by === 'title' }}>
+          <li classList={{ 'view-switcher__item--selected': searchParams().by === 'title' }}>
             <a href="/topics?by=title">{t('By title')}</a>
           </li>
           <Show when={searchParams().by !== 'title'}>

src/components/Views/Author/Author.tsx

@@ -140,27 +140,27 @@ export const AuthorView = (props: AuthorProps) => {
         <div class="row group__controls">
           <div class="col-md-16">
             <ul class="view-switcher">
-              <li classList={{ selected: searchParams().by === 'rating' }}>
+              <li classList={{ 'view-switcher__item--selected': searchParams().by === 'rating' }}>
                 <button type="button" onClick={() => changeSearchParam('by', 'rating')}>
                   {t('Publications')}
                 </button>
               </li>
-              <li classList={{ selected: searchParams().by === 'followers' }}>
+              <li classList={{ 'view-switcher__item--selected': searchParams().by === 'followers' }}>
                 <button type="button" onClick={() => changeSearchParam('by', 'followers')}>
                   {t('Followers')}
                 </button>
               </li>
-              <li classList={{ selected: searchParams().by === 'subscriptions' }}>
+              <li classList={{ 'view-switcher__item--selected': searchParams().by === 'subscriptions' }}>
                 <button type="button" onClick={() => changeSearchParam('by', 'subscriptions')}>
                   {t('Subscriptions')}
                 </button>
               </li>
-              <li classList={{ selected: searchParams().by === 'commented' }}>
+              <li classList={{ 'view-switcher__item--selected': searchParams().by === 'commented' }}>
                 <button type="button" onClick={() => changeSearchParam('by', 'commented')}>
                   {t('Comments')}
                 </button>
               </li>
-              <li classList={{ selected: searchParams().by === 'about' }}>
+              <li classList={{ 'view-switcher__item--selected': searchParams().by === 'about' }}>
                 <button type="button" onClick={() => changeSearchParam('by', 'about')}>
                   {t('About myself')}
                 </button>

src/components/Views/Feed.module.scss

@@ -1,3 +1,7 @@
+.feedFilter {
+  margin: 0 0 1.6rem;
+}
+
 .feedNavigation {
   @include font-size(1.5rem);
 

src/components/Views/Feed.tsx

@@ -1,5 +1,4 @@
 import { createEffect, createSignal, For, onMount, Show } from 'solid-js'
-import '../../styles/Feed.scss'
 import { Icon } from '../_shared/Icon'
 import { ArticleCard } from '../Feed/ArticleCard'
 import { AuthorCard } from '../Author/AuthorCard'
@@ -88,9 +87,9 @@ export const FeedView = () => {
           </div>
 
           <div class="col-md-12 offset-xl-1">
-            <ul class="feed-filter">
+            <ul class={clsx(styles.feedFilter, 'view-switcher')}>
               <Show when={!!session()?.user?.slug}>
-                <li class="selected">
+                <li class="view-switcher__item--selected">
                   <a href="/feed/my">{t('My feed')}</a>
                 </li>
               </Show>

src/components/Views/FeedSettings.tsx

@@ -12,7 +12,7 @@ export const FeedSettingsView = (_props) => {
       <h1>{t('Feed settings')}</h1>
 
       <ul class="view-switcher">
-        <li class="selected">
+        <li class="view-switcher__item--selected">
           <a href="?by=topics">{t('topics')}</a>
         </li>
         {/*<li>

src/components/Views/Search.tsx

@@ -69,14 +69,14 @@ export const SearchView = (props: Props) => {
       <ul class="view-switcher">
         <li
           classList={{
-            selected: searchParams().by === 'relevance'
+            'view-switcher__item--selected': searchParams().by === 'relevance'
           }}
         >
           <a href="?by=relevance">{t('By relevance')}</a>
         </li>
         <li
           classList={{
-            selected: searchParams().by === 'rating'
+            'view-switcher__item--selected': searchParams().by === 'rating'
           }}
         >
           <a href="?by=rating">{t('Top rated')}</a>

src/components/Views/Topic.tsx

@@ -83,23 +83,27 @@ export const TopicView = (props: TopicProps) => {
           <div class={clsx(styles.groupControls, 'row group__controls')}>
             <div class="col-md-16">
               <ul class="view-switcher">
-                <li classList={{ selected: searchParams().by === 'recent' || !searchParams().by }}>
+                <li
+                  classList={{
+                    'view-switcher__item--selected': searchParams().by === 'recent' || !searchParams().by
+                  }}
+                >
                   <button type="button" onClick={() => changeSearchParam('by', 'recent')}>
                     {t('Recent')}
                   </button>
                 </li>
                 {/*TODO: server sort*/}
-                {/*<li classList={{ selected: getSearchParams().by === 'rating' }}>*/}
+                {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'rating' }}>*/}
                 {/*  <button type="button" onClick={() => changeSearchParam('by', 'rating')}>*/}
                 {/*    {t('Popular')}*/}
                 {/*  </button>*/}
                 {/*</li>*/}
-                {/*<li classList={{ selected: getSearchParams().by === 'viewed' }}>*/}
+                {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'viewed' }}>*/}
                 {/*  <button type="button" onClick={() => changeSearchParam('by', 'viewed')}>*/}
                 {/*    {t('Views')}*/}
                 {/*  </button>*/}
                 {/*</li>*/}
-                {/*<li classList={{ selected: getSearchParams().by === 'commented' }}>*/}
+                {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'commented' }}>*/}
                 {/*  <button type="button" onClick={() => changeSearchParam('by', 'commented')}>*/}
                 {/*    {t('Discussing')}*/}
                 {/*  </button>*/}

src/components/_shared/Button/Button.module.scss

@@ -43,6 +43,11 @@
     }
   }
 
+  &.light {
+    font-weight: inherit;
+    padding: 0;
+  }
+
   &.outline,
   &.bordered {
     border: 3px solid #f2f2f2;

src/components/_shared/Button/Button.tsx

@@ -5,7 +5,7 @@ import styles from './Button.module.scss'
 type Props = {
   value: string | JSX.Element
   size?: 'S' | 'M' | 'L'
-  variant?: 'primary' | 'secondary' | 'bordered' | 'inline' | 'outline'
+  variant?: 'primary' | 'secondary' | 'bordered' | 'inline' | 'light' | 'outline'
   type?: 'submit' | 'button'
   loading?: boolean
   disabled?: boolean

src/pages/layoutShouts.page.tsx

@@ -80,16 +80,16 @@ export const LayoutShoutsPage = (props: PageProps) => {
       <div class={clsx(styles.groupControls, 'row group__controls')}>
         <div class="col-md-16">
           <ul class="view-switcher">
-            <li classList={{ selected: getLayout() === 'audio' }}>
+            <li classList={{ 'view-switcher__item--selected': getLayout() === 'audio' }}>
               <a href="/expo/audio">{t('Audio')}</a>
             </li>
-            <li classList={{ selected: getLayout() === 'video' }}>
+            <li classList={{ 'view-switcher__item--selected': getLayout() === 'video' }}>
               <a href="/expo/video">{t('Video')}</a>
             </li>
-            <li classList={{ selected: getLayout() === 'image' }}>
+            <li classList={{ 'view-switcher__item--selected': getLayout() === 'image' }}>
               <a href="/expo/image">{t('Artworks')}</a>
             </li>
-            <li classList={{ selected: getLayout() === 'literature' }}>
+            <li classList={{ 'view-switcher__item--selected': getLayout() === 'literature' }}>
               <a href="/expo/literature">{t('Literature')}</a>
             </li>
           </ul>

src/styles/AllTopics.module.scss

@@ -1,7 +1,6 @@
 .allTopicsPage {
   .group {
     @include font-size(1.6rem);
-
     margin: 3em 0 9.6rem;
 
     @include media-breakpoint-down(sm) {
@@ -55,9 +54,8 @@
   display: flex;
   flex-wrap: wrap;
   font-weight: 700;
-  margin: 1.5em -3% 0 0;
-
   @include font-size(1.5rem);
+  margin: 1.5em -3% 0 0;
 
   li {
     min-width: 1.5em;
@@ -68,7 +66,6 @@
 
 .articlesCounter {
   @include font-size(1.2rem);
-
   margin-left: 0.5em;
   vertical-align: super;
 }

src/styles/Feed.scss

@@ -1,93 +0,0 @@
-.feed {
-  .comment__content {
-    display: flex;
-  }
-
-  .comment__author-image {
-    background: #ccc;
-    border-radius: 100%;
-    height: 40px;
-    min-width: 40px;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .comment__text {
-    @include font-size(1.5rem);
-
-    line-clamp: 5;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
-    display: box;
-    margin: 0 1em 0.5em 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .comment__details {
-    @include font-size(1.2rem);
-
-    display: flex;
-    overflow: hidden;
-    position: relative;
-    white-space: nowrap;
-    width: 100%;
-
-    &,
-    a {
-      border: none;
-      color: #9ca3af;
-    }
-  }
-
-  .comment__article {
-    margin-left: 0.5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    .icon {
-      display: inline-block;
-      margin-right: 0.3em;
-      vertical-align: middle;
-      width: 1.2em;
-    }
-  }
-}
-
-.feed-filter {
-  @include font-size(1.7rem);
-
-  display: flex;
-  flex-wrap: wrap;
-  font-weight: 500;
-  list-style: none;
-  margin: 0 0 1.6rem;
-  padding: 0;
-
-  li {
-    border-bottom: 4px solid transparent;
-    margin: 0 1.4em 0.5em 0;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  .selected {
-    border-bottom-color: #000;
-
-    a {
-      &,
-      &:hover {
-        background: none;
-        color: #000;
-        cursor: default;
-      }
-    }
-  }
-
-  a {
-    border: none;
-  }
-}

src/styles/app.scss

@@ -530,19 +530,21 @@ figure {
 
 .view-switcher {
   @include font-size(1.7rem);
-
   display: flex;
   flex-wrap: wrap;
-  font-weight: bold;
+  font-weight: 500;
   list-style: none;
   margin: 3.6rem 0 0;
   padding: 0;
 
   li {
     display: inline-block;
-    margin-right: 1em;
+    margin-right: 2rem;
     margin-bottom: 0.6em;
 
+    @include media-breakpoint-down(md) {
+    }
+
     &:last-child {
       margin-right: 0;
     }
@@ -551,34 +553,40 @@ figure {
   button {
     background: none;
     border: none;
-    border-bottom: 2px solid #fff;
-    color: #696969;
     cursor: pointer;
-    font-size: inherit;
+    height: auto !important;
-    font-weight: inherit;
+    font-size: inherit !important;
-    padding: 0;
+    padding: 0 !important;
   }
 
   a {
-    border-bottom: 2px solid #fff;
-    color: rgb(0 0 0 / 50%);
-
     &:hover {
       color: #fff;
     }
   }
 
-  .selected {
+  a,
-    button {
+  button {
-      border-color: #000;
+    border-bottom: 2px solid #fff;
-      color: #000;
+    color: #000;
-      cursor: default;
+    cursor: pointer;
-    }
+    font-weight: inherit;
 
-    a {
+    &:hover {
-      border-color: #000;
+      background: #000;
+      color: #fff;
+    }
+  }
+
+  .view-switcher__item--selected {
+    font-weight: bold;
+
+    a,
+    button {
+      border-bottom: 2px solid #000;
       color: #000;
       cursor: default;
+      pointer-events: none;
 
       &:hover {
         background: none;