diff --git a/src/components/LandingHeader.tsx b/src/components/LandingHeader.tsx
index 3406184d..54e326a8 100644
--- a/src/components/LandingHeader.tsx
+++ b/src/components/LandingHeader.tsx
@@ -3,7 +3,7 @@ import { useColorScheme } from '@baca/contexts'
import { Box, Button, Icon, Pressable, Row, Spacer, Touchable } from '@baca/design-system'
import { useFullScreenModal } from '@baca/design-system/modals/useFullScreenModal'
import { useCallback, useMemo, useTheme, useTranslation } from '@baca/hooks'
-import { useWidth } from '@baca/navigation/tabNavigator/hooks'
+import { useUniversalWidth } from '@baca/navigation/tabNavigator/hooks'
import { isSignedInAtom } from '@baca/store/auth'
import { useRouter } from 'expo-router'
import { useAtomValue } from 'jotai'
@@ -19,7 +19,7 @@ export function LandingHeader() {
const height = 60 + top
- const isDesktop = useWidth(768)
+ const isDesktop = useUniversalWidth(768)
const isSignedIn = useAtomValue(isSignedInAtom)
diff --git a/src/navigation/tabNavigator/components/BottomBar.tsx b/src/navigation/tabNavigator/components/BottomBar.tsx
index 66ed2d21..7acce626 100644
--- a/src/navigation/tabNavigator/components/BottomBar.tsx
+++ b/src/navigation/tabNavigator/components/BottomBar.tsx
@@ -1,11 +1,11 @@
-import { Icon } from '@baca/design-system'
+import { Column, Icon, Text } from '@baca/design-system'
import { useTheme } from '@baca/hooks'
import cssStyles from '@baca/styles'
import { Platform, StyleSheet, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { TabBarItemWrapper } from './TabBarItemWrapper'
-import { bottomTabs } from '../navigation-config'
+import { bottomTabs, getTabColor } from '../navigation-config'
import { cns } from '../utils'
export function BottomBar({ visible }: { visible: boolean }) {
@@ -28,21 +28,27 @@ export function BottomBar({ visible }: { visible: boolean }) {
{bottomTabs.map((tab, i) => (
{({ focused, pressed, hovered }) => (
-
+ gap={2}
+ >
+
+ {tab.displayedName}
+
)}
))}
@@ -56,16 +62,11 @@ const jsStyles = StyleSheet.create({
alignItems: 'center',
borderTopWidth: 1,
flexDirection: 'row',
- height: 49,
+ height: 56,
justifyContent: 'space-around',
paddingHorizontal: 16,
},
-
- tabIcon: {
- paddingHorizontal: 8,
- },
tabIconPressed: {
opacity: 0.8,
- transform: [{ scale: 0.9 }],
},
})
diff --git a/src/navigation/tabNavigator/components/HeaderLogo.tsx b/src/navigation/tabNavigator/components/HeaderLogo.tsx
index 2eebb657..4a97f325 100644
--- a/src/navigation/tabNavigator/components/HeaderLogo.tsx
+++ b/src/navigation/tabNavigator/components/HeaderLogo.tsx
@@ -5,12 +5,12 @@ import { Pressable } from '@bacons/react-views'
import { Link } from 'expo-router'
import { Platform, StyleSheet, View } from 'react-native'
-import { useWidth } from '../hooks'
+import { useUniversalWidth } from '../hooks'
import { cns } from '../utils'
export function HeaderLogo() {
const { colors } = useTheme()
- const isLargeHorizontal = useWidth(1264)
+ const isLargeHorizontal = useUniversalWidth(1264)
return (
-
+
{({ hovered }) => (
}) {
- const isLarge = useWidth(1264)
- const { colors } = useTheme()
+ const isLarge = useUniversalWidth(1264)
return (
{({ focused, hovered }) => (
-
-
-
-
-
- {children}
-
-
+
+ {isLarge ? (
+ {children}
+ ) : null}
+
)}
)
}
const jsStyles = StyleSheet.create({
- sidebarIconContainer: Platform.select({
- default: { padding: 0 },
- web: {
- transitionDuration: '150ms',
- transitionProperty: ['transform'],
- transitionTimingFunction: 'cubic-bezier(0.17, 0.17, 0, 1)',
- },
- }),
- sidebarItemContainer: {
- alignItems: 'center',
- borderRadius: 8,
- flexDirection: 'row',
- padding: 8,
- ...Platform.select({
- web: {
- transitionDuration: '200ms',
- transitionProperty: ['background-color', 'box-shadow'],
- },
- }),
- },
- sidebarItemText: {
- marginLeft: 16,
- marginRight: 16,
- userSelect: 'none',
- },
sidebarTabItem: {
paddingVertical: 4,
width: '100%',
diff --git a/src/navigation/tabNavigator/hooks/useWidth.ts b/src/navigation/tabNavigator/hooks/useWidth.ts
index 093b9fcb..8cc9a5ba 100644
--- a/src/navigation/tabNavigator/hooks/useWidth.ts
+++ b/src/navigation/tabNavigator/hooks/useWidth.ts
@@ -10,3 +10,9 @@ export function useWidth(size: number): boolean {
}
return width >= size
}
+
+export function useUniversalWidth(size: number): boolean {
+ const { width } = useWindowDimensions()
+
+ return width >= size
+}
diff --git a/src/navigation/tabNavigator/navigation-config.ts b/src/navigation/tabNavigator/navigation-config.ts
index 81ba8419..1ca342d7 100644
--- a/src/navigation/tabNavigator/navigation-config.ts
+++ b/src/navigation/tabNavigator/navigation-config.ts
@@ -14,8 +14,8 @@ type Tabs = Tab[]
export const upperSideTabs: Tabs = [
{
displayedName: 'Home',
- icon: 'home-3-line',
- iconFocused: 'home-3-fill',
+ icon: 'home-5-line',
+ iconFocused: 'home-5-fill',
id: 'home',
name: 'home',
},
@@ -62,3 +62,14 @@ export const upperSideTabs: Tabs = [
export const bottomSideTabs: Tabs = []
export const bottomTabs: Tabs = [...upperSideTabs]
+
+export const tabsColors: {
+ color: ColorNames
+ colorFocused: ColorNames
+} = {
+ color: 'nav.item.button.icon.fg',
+ colorFocused: 'Brand.600',
+}
+
+export const getTabColor = (isFocused = false) =>
+ isFocused ? tabsColors.colorFocused : tabsColors.color
diff --git a/src/navigation/tabNavigator/navigator.tsx b/src/navigation/tabNavigator/navigator.tsx
index 33a3076c..0d5390d1 100644
--- a/src/navigation/tabNavigator/navigator.tsx
+++ b/src/navigation/tabNavigator/navigator.tsx
@@ -4,12 +4,12 @@ import React from 'react'
import { Platform, View } from 'react-native'
import { AppHeader, BottomBar, SideBar } from './components'
-import { useWidth } from './hooks'
+import { useUniversalWidth } from './hooks'
import { TabbedNavigator } from './tab-slot'
import { cns } from './utils'
export function ResponsiveNavigator() {
- const isRowLayout = useWidth(768)
+ const isRowLayout = useUniversalWidth(768)
return (
diff --git a/src/styles/root-layout.module.scss b/src/styles/root-layout.module.scss
index 6046563b..1906f0df 100644
--- a/src/styles/root-layout.module.scss
+++ b/src/styles/root-layout.module.scss
@@ -17,10 +17,6 @@ $ui-sidebar: 244px;
padding-top: 0px;
}
-.headerLink {
- margin-bottom: 24px;
-}
-
.headerLogo {
@media (min-width: $size-xs) and (max-width: $size-l) {
padding-top: 0px;
diff --git a/src/types/react-native.d.ts b/src/types/react-native.d.ts
new file mode 100644
index 00000000..7da3fecd
--- /dev/null
+++ b/src/types/react-native.d.ts
@@ -0,0 +1,185 @@
+// https://gist.github.com/sstur/9693aa41e95078c8c6bcf3d8f1216872
+
+declare module 'react-native' {
+ // The following list is sourced from:
+ // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L76
+ type CursorValue =
+ | 'alias'
+ | 'all-scroll'
+ | 'auto'
+ | 'cell'
+ | 'context-menu'
+ | 'copy'
+ | 'crosshair'
+ | 'default'
+ | 'grab'
+ | 'grabbing'
+ | 'help'
+ | 'pointer'
+ | 'progress'
+ | 'wait'
+ | 'text'
+ | 'vertical-text'
+ | 'move'
+ | 'none'
+ | 'no-drop'
+ | 'not-allowed'
+ | 'zoom-in'
+ | 'zoom-out'
+ | 'col-resize'
+ | 'e-resize'
+ | 'ew-resize'
+ | 'n-resize'
+ | 'ne-resize'
+ | 'ns-resize'
+ | 'nw-resize'
+ | 'row-resize'
+ | 's-resize'
+ | 'se-resize'
+ | 'sw-resize'
+ | 'w-resize'
+ | 'nesw-resize'
+ | 'nwse-resize'
+
+ // This list is the combination of the following two lists:
+ // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js#L10
+ // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12
+ // Plus the single hard-coded value "label" from here:
+ // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L36
+ type WebAccessibilityRole =
+ | 'adjustable'
+ | 'article'
+ | 'banner'
+ | 'blockquote'
+ | 'button'
+ | 'code'
+ | 'complementary'
+ | 'contentinfo'
+ | 'deletion'
+ | 'emphasis'
+ | 'figure'
+ | 'form'
+ | 'header'
+ | 'image'
+ | 'imagebutton'
+ | 'insertion'
+ | 'keyboardkey'
+ | 'label'
+ | 'link'
+ | 'list'
+ | 'listitem'
+ | 'main'
+ | 'navigation'
+ | 'none'
+ | 'region'
+ | 'search'
+ | 'strong'
+ | 'summary'
+ | 'text'
+
+ interface PressableStateCallbackType {
+ hovered?: boolean
+ focused?: boolean
+ }
+
+ interface ViewProps {
+ accessibilityRole?: WebAccessibilityRole
+ href?: string
+ hrefAttrs?: {
+ target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+ rel?: string
+ download?: boolean
+ }
+ onMouseDown?: (event: React.MouseEvent) => void
+ onMouseUp?: (event: React.MouseEvent) => void
+ onMouseEnter?: (event: React.MouseEvent) => void
+ onMouseLeave?: (event: React.MouseEvent) => void
+ onClick?: (event: React.MouseEvent) => void
+ onFocus?: (event: React.FocusEvent) => void
+ onScroll?: (event: React.UIEvent) => void
+ // For compatibility with RNW internals
+ onScrollShouldSetResponder?: unknown
+ onScrollShouldSetResponderCapture?: unknown
+ onSelectionChangeShouldSetResponder?: unknown
+ onSelectionChangeShouldSetResponderCapture?: unknown
+ }
+
+ interface TextProps {
+ dir?: 'ltr' | 'rtl' | 'auto'
+ focusable?: boolean
+ accessibilityRole?: WebAccessibilityRole
+ accessibilityState?: {
+ busy?: boolean
+ checked?: boolean | 'mixed'
+ disabled?: boolean
+ expanded?: boolean
+ grabbed?: boolean
+ hidden?: boolean
+ invalid?: boolean
+ pressed?: boolean
+ readonly?: boolean
+ required?: boolean
+ selected?: boolean
+ }
+ href?: string
+ hrefAttrs?: {
+ target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+ rel?: string
+ download?: boolean
+ }
+ onMouseEnter?: (event: React.MouseEvent) => void
+ onMouseLeave?: (event: React.MouseEvent) => void
+ onClick?: (event: React.MouseEvent) => void
+ onFocus?: (event: React.FocusEvent) => void
+ // For compatibility with RNW internals
+ onMoveShouldSetResponder?: unknown
+ onMoveShouldSetResponderCapture?: unknown
+ onResponderEnd?: unknown
+ onResponderGrant?: unknown
+ onResponderMove?: unknown
+ onResponderReject?: unknown
+ onResponderRelease?: unknown
+ onResponderStart?: unknown
+ onResponderTerminate?: unknown
+ onResponderTerminationRequest?: unknown
+ onScrollShouldSetResponder?: unknown
+ onScrollShouldSetResponderCapture?: unknown
+ onSelectionChangeShouldSetResponder?: unknown
+ onSelectionChangeShouldSetResponderCapture?: unknown
+ onStartShouldSetResponder?: unknown
+ onStartShouldSetResponderCapture?: unknown
+ }
+
+ interface TouchableOpacityProps {
+ accessibilityRole?: WebAccessibilityRole
+ href?: string
+ hrefAttrs?: {
+ target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+ rel?: string
+ download?: boolean
+ }
+ nativeID?: string
+ onMouseEnter?: (event: React.MouseEvent) => void
+ onMouseLeave?: (event: React.MouseEvent) => void
+ }
+
+ interface CheckBoxProps {
+ color?: string | null
+ }
+
+ interface ViewStyle {
+ cursor?: CursorValue
+ transitionProperty?: string[]
+ transitionDuration?: string
+ transitionTimingFunction?: string
+ display?: 'flex' | 'inline-flex' | 'none'
+ }
+
+ interface TextStyle {
+ // The following list is sourced from:
+ // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L128
+ userSelect?: 'all' | 'auto' | 'contain' | 'none' | 'text'
+ }
+}
+
+export {}