From 9754a0235d7654285a59b51e35610e44fd7037a7 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 9 Jun 2023 00:53:58 +0300
Subject: [PATCH] Tabs style fixes

---
 public/locales/ru/translation.json          |  2 +-
 src/components/Feed/ArticleCard.module.scss |  4 +++
 src/components/Nav/Topics.scss              |  2 +-
 src/components/Views/Inbox.tsx              | 33 +++++++++++----------
 src/styles/Inbox.module.scss                | 29 ------------------
 src/styles/app.scss                         |  8 ++---
 6 files changed, 25 insertions(+), 53 deletions(-)

diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index bd9bafde..0ca4310f 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -151,7 +151,7 @@
   "More": "Ещё",
   "Most commented": "Комментируемое",
   "Most read": "Читаемое",
-  "My feed": "Моя лента",
+  "My feed": "Новое",
   "My subscriptions": "Подписки",
   "Name": "Имя",
   "New only": "Только новые",
diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss
index 5e78db44..cfe90f43 100644
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@@ -486,6 +486,10 @@
       }
     }
   }
+
+  a {
+    border: none;
+  }
 }
 
 .shoutCardComments,
diff --git a/src/components/Nav/Topics.scss b/src/components/Nav/Topics.scss
index 434b01ac..aebcaa2d 100644
--- a/src/components/Nav/Topics.scss
+++ b/src/components/Nav/Topics.scss
@@ -20,7 +20,7 @@
   }
 
   .item {
-    margin-right: 2.4rem;
+    margin-right: 2rem;
 
     &.right {
       margin-right: 0;
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index f69e6ba9..203fb1a2 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -182,37 +182,38 @@ export const InboxView = () => {
           </div>
 
           <Show when={chatsToShow}>
-            <div class={styles.chatListTypes}>
-              <ul>
-                <li
-                  class={clsx({ [styles.selected]: !sortByPerToPer() && !sortByGroup() })}
+            <ul class="view-switcher">
+              <li class={clsx({ 'view-switcher__item--selected': !sortByPerToPer() && !sortByGroup() })}>
+                <button
                   onClick={() => {
                     setSortByPerToPer(false)
                     setSortByGroup(false)
                   }}
                 >
-                  <span>{t('All')}</span>
-                </li>
-                <li
-                  class={clsx({ [styles.selected]: sortByPerToPer() })}
+                  {t('All')}
+                </button>
+              </li>
+              <li class={clsx({ 'view-switcher__item--selected': sortByPerToPer() })}>
+                <button
                   onClick={() => {
                     setSortByPerToPer(true)
                     setSortByGroup(false)
                   }}
                 >
-                  <span>{t('Personal')}</span>
-                </li>
-                <li
-                  class={clsx({ [styles.selected]: sortByGroup() })}
+                  {t('Personal')}
+                </button>
+              </li>
+              <li class={clsx({ 'view-switcher__item--selected': sortByGroup() })}>
+                <button
                   onClick={() => {
                     setSortByGroup(true)
                     setSortByPerToPer(false)
                   }}
                 >
-                  <span>{t('Groups')}</span>
-                </li>
-              </ul>
-            </div>
+                  {t('Groups')}
+                </button>
+              </li>
+            </ul>
           </Show>
           <div class={styles.holder}>
             <div class={styles.dialogs}>
diff --git a/src/styles/Inbox.module.scss b/src/styles/Inbox.module.scss
index bea66f33..c10364f7 100644
--- a/src/styles/Inbox.module.scss
+++ b/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;
diff --git a/src/styles/app.scss b/src/styles/app.scss
index a883d1ab..52d78aaf 100644
--- a/src/styles/app.scss
+++ b/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;
     }