From bb574820a58d2256e0cf0e705102fd0fbc9cb96e Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 11 May 2021 02:57:08 +0300
Subject: [PATCH] Chat Folders: Revert to smaller size (#1072)

---
 src/components/left/main/LeftMain.scss | 9 +++++++--
 src/components/right/Profile.tsx       | 2 +-
 src/components/ui/TabList.scss         | 6 +++++-
 src/components/ui/TabList.tsx          | 7 +++++--
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/left/main/LeftMain.scss b/src/components/left/main/LeftMain.scss
index 3b8804b5..01b7b8b0 100644
--- a/src/components/left/main/LeftMain.scss
+++ b/src/components/left/main/LeftMain.scss
@@ -36,8 +36,13 @@
 
     .Tab {
       flex: 0 0 auto;
-      padding-left: 1rem;
-      padding-right: 1rem;
+      padding-left: 0.625rem;
+      padding-right: 0.625rem;
+
+      > span {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+      }
     }
 
     > .Transition {
diff --git a/src/components/right/Profile.tsx b/src/components/right/Profile.tsx
index c178b3dd..40f5ca57 100644
--- a/src/components/right/Profile.tsx
+++ b/src/components/right/Profile.tsx
@@ -333,7 +333,7 @@ const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
           >
             {renderSharedMedia}
           </Transition>
-          <TabList activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} />
+          <TabList big activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} />
         </div>
       )}
     </InfiniteScroll>
diff --git a/src/components/ui/TabList.scss b/src/components/ui/TabList.scss
index 8333b29c..22bf406f 100644
--- a/src/components/ui/TabList.scss
+++ b/src/components/ui/TabList.scss
@@ -5,7 +5,7 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  font-size: 1rem;
+  font-size: .875rem;
   flex-wrap: nowrap;
   box-shadow: 0 2px 2px var(--color-light-shadow);
   background-color: var(--color-background);
@@ -15,6 +15,10 @@
   scrollbar-width: none;
   scrollbar-color: rgba(0, 0, 0, 0);
 
+  &.big {
+    font-size: 1rem;
+  }
+
   &::-webkit-scrollbar {
     height: 0;
   }
diff --git a/src/components/ui/TabList.tsx b/src/components/ui/TabList.tsx
index 5256c58e..9a0d2bb9 100644
--- a/src/components/ui/TabList.tsx
+++ b/src/components/ui/TabList.tsx
@@ -20,12 +20,15 @@ export type TabWithProperties = {
 type OwnProps = {
   tabs: readonly TabWithProperties[];
   activeTab: number;
+  big?: boolean;
   onSwitchTab: (index: number) => void;
 };
 
 const TAB_SCROLL_THRESHOLD_PX = 16;
 
-const TabList: FC<OwnProps> = ({ tabs, activeTab, onSwitchTab }) => {
+const TabList: FC<OwnProps> = ({
+  tabs, activeTab, big, onSwitchTab,
+}) => {
   // eslint-disable-next-line no-null/no-null
   const containerRef = useRef<HTMLDivElement>(null);
   const previousActiveTab = usePrevious(activeTab);
@@ -55,7 +58,7 @@ const TabList: FC<OwnProps> = ({ tabs, activeTab, onSwitchTab }) => {
   const lang = useLang();
 
   return (
-    <div className="TabList no-selection no-scrollbar" ref={containerRef}>
+    <div className={`TabList no-selection no-scrollbar ${big ? 'big' : ''}`} ref={containerRef}>
       {tabs.map((tab, i) => (
         <Tab
           key={tab.title}