diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx index 757dd23ace1e..a0275256dbc1 100644 --- a/src/components/Skeletons/SearchRowSkeleton.tsx +++ b/src/components/Skeletons/SearchRowSkeleton.tsx @@ -19,7 +19,7 @@ type SearchRowSkeletonProps = { const barHeight = 8; const longBarWidth = 120; -const leftPaneWidth = variables.sideBarWithLHBWidth + variables.navigationTabBarSize; +const leftPaneWidth = variables.searchSidebarWidth + variables.navigationTabBarSize; // 12 is the gap between the element and the right button const gapWidth = 12; diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index cc673f363636..a2e713d27bf0 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -214,14 +214,14 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { (menuItems: MenuItemWithLink[]) => ( ), - [expensifyIcons.Bookmark, styles.sectionMenuItem], + [expensifyIcons.Bookmark, styles.sectionMenuItemCompact], ); const activeItemIndex = useMemo(() => { @@ -275,9 +275,9 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { title={translate(item.translationPath)} badgeStyle={styles.todoBadge} icon={icon} - iconWidth={variables.iconSizeNormal} - iconHeight={variables.iconSizeNormal} - wrapperStyle={styles.sectionMenuItem} + iconWidth={variables.iconSizeSmall} + iconHeight={variables.iconSizeSmall} + wrapperStyle={styles.sectionMenuItemCompact} badgeText={item.badgeText} focused={focused} onPress={onPress} diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 6967b25934eb..29b61161a71c 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -48,6 +48,7 @@ import { import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils'; import type WORKSPACE_TO_RHP from '@navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP'; import type {WorkspaceSplitNavigatorParamList} from '@navigation/types'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -567,9 +568,11 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac interactive={!hasPolicyCreationError} title={translate(item.translationKey)} icon={item.icon} + iconWidth={variables.iconSizeSmall} + iconHeight={variables.iconSizeSmall} onPress={item.action} brickRoadIndicator={item.brickRoadIndicator} - wrapperStyle={styles.sectionMenuItem} + wrapperStyle={styles.sectionMenuItemCompact} highlighted={!!item?.highlighted} focused={!!(item.screenName && activeRoute?.startsWith(item.screenName))} badgeText={item.badgeText} diff --git a/src/styles/index.ts b/src/styles/index.ts index 37fc2d231459..97b823755d1b 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1599,17 +1599,18 @@ const staticStyles = (theme: ThemeColors) => searchSplitContainer: { flex: 1, flexDirection: 'row', - marginLeft: variables.navigationTabBarSize + variables.sideBarWithLHBWidth, + marginLeft: variables.navigationTabBarSize + variables.searchSidebarWidth, }, searchSidebar: { - width: variables.sideBarWithLHBWidth, + width: variables.searchSidebarWidth, height: '100%', + position: 'fixed', + left: variables.navigationTabBarSize, backgroundColor: theme.sidebar, justifyContent: 'space-between', borderRightWidth: 1, borderColor: theme.border, - marginLeft: variables.navigationTabBarSize, }, // Sidebar Styles @@ -2817,6 +2818,13 @@ const staticStyles = (theme: ThemeColors) => alignItems: 'center', }, + sectionMenuItemCompact: { + borderRadius: 8, + paddingHorizontal: 12, + height: 40, + alignItems: 'center', + }, + sectionSelectCircle: { backgroundColor: theme.cardBG, }, @@ -5464,11 +5472,15 @@ const staticStyles = (theme: ThemeColors) => }, todoBadge: { - width: variables.w36, + width: 24, + minWidth: 24, + maxWidth: 24, + minHeight: 20, + height: 20, alignItems: 'center', justifyContent: 'center', - paddingLeft: 0, - paddingRight: 0, + padding: 0, + overflow: 'hidden', }, stickToBottom: { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index b2cf557fe00a..470ea183aa17 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -111,6 +111,7 @@ export default { uploadViewMargin: 20, chooseFilesViewMargin: 8, sideBarWithLHBWidth: 320, + searchSidebarWidth: 260, navigationTabBarSize: 72, popoverMargin: 18, pdfPageMaxWidth: 992,