diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js --- a/native/navigation/community-drawer-content.react.js +++ b/native/navigation/community-drawer-content.react.js @@ -13,6 +13,7 @@ import { useNavigateToThread } from '../chat/message-list-types'; import { useStyles } from '../themes/colors'; +import type { TextStyle } from '../types/styles'; import CommunityDrawerItemCommunity from './community-drawer-item-cummunity.react'; const MAX_DEPTH = 2; @@ -41,6 +42,7 @@ const itemData = { threadInfo: item.threadInfo, itemChildren: item.itemChildren, + labelStyle: item.labelStyle, }; return ( [ + labelStylesObj.level0Label, + labelStylesObj.level1Label, + labelStylesObj.level2Label, + ], + [labelStylesObj], + ); + const drawerItemsData = React.useMemo( () => - createRecursiveDrawerItemsData(childThreadInfosMap, communitiesSuffixed), - [childThreadInfosMap, communitiesSuffixed], + createRecursiveDrawerItemsData( + childThreadInfosMap, + communitiesSuffixed, + labelStyles, + ), + [childThreadInfosMap, communitiesSuffixed, labelStyles], ); return ( @@ -71,11 +87,13 @@ function createRecursiveDrawerItemsData( childThreadInfosMap: { +[id: string]: $ReadOnlyArray }, communities: $ReadOnlyArray, + labelStyles: $ReadOnlyArray, ) { const result = communities.map(community => ({ key: community.id, threadInfo: community, itemChildren: [], + labelStyle: labelStyles[0], })); let queue = result.map(item => [item, 0]); @@ -89,6 +107,7 @@ .map(childItem => ({ threadInfo: childItem, itemChildren: [], + labelStyle: labelStyles[lvl + 1], })); queue = queue.concat( item.itemChildren.map(childItem => [childItem, lvl + 1]), @@ -122,6 +141,26 @@ backgroundColor: 'drawerBackgroud', }, }; +const labelUnboundStyles = { + level0Label: { + color: 'drawerItemLabelLevel0', + fontSize: 16, + lineHeight: 24, + fontWeight: '500', + }, + level1Label: { + color: 'drawerItemLabelLevel1', + fontSize: 14, + lineHeight: 22, + fontWeight: '500', + }, + level2Label: { + color: 'drawerItemLabelLevel2', + fontSize: 14, + lineHeight: 22, + fontWeight: '400', + }, +}; const MemoizedCommunityDrawerContent: React.ComponentType<{}> = React.memo( CommunityDrawerContent, diff --git a/native/navigation/community-drawer-item-cummunity.react.js b/native/navigation/community-drawer-item-cummunity.react.js --- a/native/navigation/community-drawer-item-cummunity.react.js +++ b/native/navigation/community-drawer-item-cummunity.react.js @@ -27,7 +27,7 @@ const unboundStyles = { communityBase: { - paddingVertical: 8, + paddingVertical: 2, paddingRight: 24, paddingLeft: 8, overflow: 'hidden', diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js --- a/native/navigation/community-drawer-item.react.js +++ b/native/navigation/community-drawer-item.react.js @@ -8,11 +8,13 @@ import type { MessageListParams } from '../chat/message-list-types'; import { SingleLine } from '../components/single-line.react'; import { useStyles } from '../themes/colors'; +import type { TextStyle } from '../types/styles'; import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react'; export type CommunityDrawerItemData = { +threadInfo: ThreadInfo, +itemChildren?: $ReadOnlyArray, + +labelStyle: TextStyle, }; export type DrawerItemProps = { @@ -24,7 +26,7 @@ function CommunityDrawerItem(props: DrawerItemProps): React.Node { const { - itemData: { threadInfo, itemChildren }, + itemData: { threadInfo, itemChildren, labelStyle }, navigateToThread, expanded, toggleExpanded, @@ -74,7 +76,7 @@ style={styles.textTouchableWrapper} onLongPress={onExpandToggled} > - {threadInfo.uiName} + {threadInfo.uiName} {children} @@ -85,16 +87,10 @@ const unboundStyles = { chatView: { marginLeft: 16, - marginVertical: 6, }, threadEntry: { flexDirection: 'row', - }, - title: { - color: 'drawerItemLabel', - fontSize: 16, - lineHeight: 24, - fontWeight: '500', + marginVertical: 6, }, textTouchableWrapper: { flex: 1, diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -84,7 +84,9 @@ tooltipBackground: '#E0E0E0', drawerExpandButton: '#808080', drawerExpandButtonDisabled: '#CCCCCC', - drawerItemLabel: '#0A0A0A', + drawerItemLabelLevel0: '#0A0A0A', + drawerItemLabelLevel1: '#0A0A0A', + drawerItemLabelLevel2: '#1F1F1F', drawerOpenCommunityBackground: '#F5F5F5', drawerBackgroud: '#FFFFFF', }); @@ -164,7 +166,9 @@ tooltipBackground: '#1F1F1F', drawerExpandButton: '#808080', drawerExpandButtonDisabled: '#404040', - drawerItemLabel: '#CCCCCC', + drawerItemLabelLevel0: '#CCCCCC', + drawerItemLabelLevel1: '#CCCCCC', + drawerItemLabelLevel2: '#F5F5F5', drawerOpenCommunityBackground: '#191919', drawerBackgroud: '#1F1F1F', });