Tabs style fixes

public/locales/ru/translation.json

@@ -151,7 +151,7 @@
   "More": "Ещё",
   "Most commented": "Комментируемое",
   "Most read": "Читаемое",
-  "My feed": "Моя лента",
+  "My feed": "Новое",
   "My subscriptions": "Подписки",
   "Name": "Имя",
   "New only": "Только новые",

src/components/Feed/ArticleCard.module.scss

@@ -486,6 +486,10 @@
       }
     }
   }
+
+  a {
+    border: none;
+  }
 }
 
 .shoutCardComments,

src/components/Nav/Topics.scss

@@ -20,7 +20,7 @@
   }
 
   .item {
-    margin-right: 2.4rem;
+    margin-right: 2rem;
 
     &.right {
       margin-right: 0;

src/components/Views/Inbox.tsx

@@ -182,37 +182,38 @@ export const InboxView = () => {
           </div>
 
           <Show when={chatsToShow}>
-            <div class={styles.chatListTypes}>
+            <ul class="view-switcher">
-              <ul>
+              <li class={clsx({ 'view-switcher__item--selected': !sortByPerToPer() && !sortByGroup() })}>
-                <li
+                <button
-                  class={clsx({ [styles.selected]: !sortByPerToPer() && !sortByGroup() })}
                   onClick={() => {
                     setSortByPerToPer(false)
                     setSortByGroup(false)
                   }}
                 >
-                  <span>{t('All')}</span>
+                  {t('All')}
+                </button>
               </li>
-                <li
+              <li class={clsx({ 'view-switcher__item--selected': sortByPerToPer() })}>
-                  class={clsx({ [styles.selected]: sortByPerToPer() })}
+                <button
                   onClick={() => {
                     setSortByPerToPer(true)
                     setSortByGroup(false)
                   }}
                 >
-                  <span>{t('Personal')}</span>
+                  {t('Personal')}
+                </button>
               </li>
-                <li
+              <li class={clsx({ 'view-switcher__item--selected': sortByGroup() })}>
-                  class={clsx({ [styles.selected]: sortByGroup() })}
+                <button
                   onClick={() => {
                     setSortByGroup(true)
                     setSortByPerToPer(false)
                   }}
                 >
-                  <span>{t('Groups')}</span>
+                  {t('Groups')}
+                </button>
               </li>
             </ul>
-            </div>
           </Show>
           <div class={styles.holder}>
             <div class={styles.dialogs}>

src/styles/Inbox.module.scss

@@ -90,35 +90,6 @@ main {
   padding: 1em 0;
 }
 
-// табы выбора списка
-.chatListTypes {
-  @include font-size(1.7rem);
-
-  margin: 16px 0;
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    margin-right: 1em;
-    color: #696969;
-    cursor: pointer;
-
-    &.selected {
-      span {
-        border-bottom: 3px solid;
-        font-weight: normal;
-        color: #000;
-      }
-    }
-  }
-}
-
 .conversation {
   display: flex;
   flex-direction: column;

src/styles/app.scss

@@ -545,13 +545,12 @@ figure {
 
   figcaption {
     @include font-size(1.2rem);
-
     color: #9fa1a7;
   }
 }
 
 .view-switcher {
-  @include font-size(1.7rem);
+  @include font-size(1.4rem);
   display: flex;
   flex-wrap: wrap;
   font-weight: 500;
@@ -561,12 +560,9 @@ figure {
 
   li {
     display: inline-block;
-    margin-right: 2.4rem;
+    margin-right: 2rem;
     margin-bottom: 0.6em;
 
-    @include media-breakpoint-down(md) {
-    }
-
     &:last-child {
       margin-right: 0;
     }