Chat Folders: Revert to smaller size (#1072)

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 {

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>

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;
   }

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}