Merge pull request #135 from ulu-telegram/TG-255-ui-adjustments-and-f…

…ixes

feat: [TG-255] UI adjustments and fixes

src/components/left/main/ChatFolders.tsx

@@ -74,6 +74,7 @@ const SAVED_MESSAGES_HOTKEY = '0';
 const FIRST_FOLDER_INDEX = 0;
 const INVISIBLE_CHAT_TREE_STYLES = 'max-height: 0' as CSSProperties;
 const RECALCULATE_TREE_HEIGHT_INTERVAL_MS = 300;
+const COMMON_PADDING = 16;
 
 const ChatFolders: FC<OwnProps & StateProps> = ({
   leftMainHeaderRef,
@@ -348,10 +349,11 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
     let heightSubtractionPx = 0;
     heightSubtractionPx += leftMainHeaderRef.current.getBoundingClientRect().height;
     heightSubtractionPx += uluSystemFoldersRef.current.getBoundingClientRect().height;
+    heightSubtractionPx -= 2 * COMMON_PADDING;
 
-    // if for some reason modifier is still 0 we also hide the tree
+    // if for some reason modifier is still 0 or less we also hide the tree
     // for the same reasons as above
-    if (!heightSubtractionPx) {
+    if (heightSubtractionPx <= 0) {
       return INVISIBLE_CHAT_TREE_STYLES;
     }
 

src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.module.scss

@@ -0,0 +1,3 @@
+.container {
+	padding-bottom: 11rem;
+}

src/components/left/main/UluChatFolders/TreeRenderers/TreeContainer.tsx

@@ -4,7 +4,10 @@ import React from 'react';
 import type { TreeInformation } from 'react-complex-tree';
 import type { FC } from '../../../../../lib/teact/teact';
 
+import buildClassName from '../../../../../util/buildClassName';
+
 import chatFoldersWrapperStyles from '../../UluChatFoldersWrapper.module.scss';
+import styles from './TreeContainer.module.scss';
 
 type OwnProps = {
   children: ReactNode;
@@ -13,9 +16,11 @@ type OwnProps = {
 };
 
 const TreeContainer: FC<OwnProps> = ({ children, containerProps }) => {
+  const className = buildClassName(chatFoldersWrapperStyles.wrapper, styles.container);
+
   return (
     // @ts-ignore
-    <div className={chatFoldersWrapperStyles.wrapper} {...containerProps} style={{ maxHeight: '100%' }}>
+    <div className={className} {...containerProps} style={{ maxHeight: '100%' }}>
       {children}
     </div>
   );

src/components/left/main/UluChatFolders/TreeRenderers/TreeItem/ChatFolder.tsx

@@ -25,6 +25,8 @@ import SvgFolderOpen from './SvgFolderOpen';
 import stylesUluChatFolder from '../../../UluChatFolder/UluChatFolder.module.scss';
 import styles from './ChatFolder.module.scss';
 
+const svgFill = 'var(--color-gray)';
+
 const ChatFolder: FC<{
   children: ReactNode;
   item: TreeItemChat<any>;
@@ -36,18 +38,16 @@ const ChatFolder: FC<{
   contextRootElementSelector?: string;
   onClick?: (arg: string | number) => void;
 }> = ({
-  children, active, expanded, title, shouldStressUnreadMessages, item, context, onClick, contextRootElementSelector,
+  children, expanded, title, shouldStressUnreadMessages, item, context, onClick, contextRootElementSelector,
 }) => {
   const {
     contextActions, index, unreadCount: messagesUnreadCount, ref,
   } = item;
 
   const classNameWrapper = buildClassName(
     stylesUluChatFolder.wrapper,
-    active && stylesUluChatFolder.active,
     !!messagesUnreadCount && shouldStressUnreadMessages && stylesUluChatFolder['has-unread-messages'],
   );
-  const svgFill = active ? 'var(--color-white)' : 'var(--color-gray)';
   const [SvgComponent, svgComponentProps] = expanded
     ? [SvgFolderOpen, { height: 17, width: 20 }]
     : [SvgFolderClosed, { height: 17, width: 18 }];