Skip to content

Commit b6b8904

Browse files
codinsonncodinsonn
committed
feat: Update HomeScreen design
1 parent 44d1031 commit b6b8904

23 files changed

+526
-111
lines changed

‎apps/expo/app/ExpoRootLayout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default function ExpoRootLayout() {
3232
contextLink={ExpoContextLink}
3333
contextRouter={expoContextRouter}
3434
useContextRouteParams={useExpoRouteParams}
35+
isExpo
3536
>
3637
<UniversalRootLayout>
3738
<Stack

‎apps/next/app/Document.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Document = (props: { children: React.ReactNode }) => {
1616
// -- Render --
1717

1818
return (
19-
<html suppressHydrationWarning>
19+
<html lang="en" suppressHydrationWarning>
2020
<head>
2121
{/* - Title & Keywords - */}
2222
<title>Universal App Router</title>
@@ -26,7 +26,9 @@ const Document = (props: { children: React.ReactNode }) => {
2626
<meta name="viewport" content="width=device-width, initial-scale=1" />
2727
</head>
2828
<body>
29-
<UniversalRootLayout>{children}</UniversalRootLayout>
29+
<UniversalRootLayout>
30+
<main className="flex min-w-screen min-h-screen">{children}</main>
31+
</UniversalRootLayout>
3032
</body>
3133
</html>
3234
)

‎apps/next/app/NextClientRootLayout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const NextClientRootLayout = ({ children }: NextClientRootLayoutProps) => {
3131
contextLink={NextContextLink}
3232
contextRouter={nextContextRouter}
3333
useContextRouteParams={useNextRouteParams}
34+
isNext
3435
>
3536
{children}
3637
</UniversalAppProviders>

‎apps/next/app/ServerStylesProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const ServerStylesProvider = (props: { children: React.ReactNode }) => {
2727
return (
2828
<>
2929
{reactNativeStyleElement}
30-
{/* TODO: Insert other SSR'd styles here */}
30+
{/* OPTIONAL: Insert other SSR'd styles here? */}
3131
</>
3232
)
3333
})

‎features/@app-core/appConfig.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Constants from 'expo-constants'
2-
import { Platform } from 'react-native'
2+
import { Platform, Dimensions } from 'react-native'
33
import { DRIVER_OPTIONS, createDriverConfig } from '@app/registries/drivers.config'
44

55
/* --- Notes ----------------------------------------------------------------------------------- */
@@ -12,6 +12,10 @@ import { DRIVER_OPTIONS, createDriverConfig } from '@app/registries/drivers.conf
1212
export const isWebLocalhost = Platform.OS === 'web' && globalThis?.location?.hostname === 'localhost'
1313
export const isExpoWebLocal = isWebLocalhost && globalThis?.location?.port === '8081'
1414

15+
export const isMobile = ['ios', 'android'].includes(Platform.OS)
16+
export const isLargeScreen = Dimensions.get('window').width > 1024
17+
export const isLargeTablet = isMobile && isLargeScreen
18+
1519
/* --- Computed Fallbacks ---------------------------------------------------------------------- */
1620

1721
export const fallbackExpoWebHost = isExpoWebLocal ? 'localhost' : ''
@@ -30,6 +34,9 @@ export const appConfig = {
3034
isWebLocalhost,
3135
isExpoWebLocal,
3236
isExpoMobileLocal,
37+
isMobile,
38+
isLargeScreen,
39+
isLargeTablet,
3340
// - Server URLs -
3441
baseURL: process.env.NEXT_PUBLIC_BASE_URL || process.env.EXPO_PUBLIC_BASE_URL || `${fallbackBaseURL}`, // prettier-ignore
3542
backendURL: process.env.NEXT_PUBLIC_BACKEND_URL || process.env.EXPO_PUBLIC_BACKEND_URL || `${fallbackBaseURL}`, // prettier-ignore

‎features/@app-core/assets/automagic-api-gen-icons.png‎

11.2 KB
Loading

‎features/@app-core/assets/cross-platform-icons.png‎

12.6 KB
Loading

‎features/@app-core/components/BackButton.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react'
2+
import { View, Text, Link } from '../components/styled'
3+
import { useRouter } from '@green-stack/navigation/useRouter'
4+
import { ArrowLeftFilled } from '../icons/ArrowLeftFilled'
5+
import { schema, z } from '@green-stack/schemas'
6+
7+
/* --- Props ----------------------------------------------------------------------------------- */
8+
9+
const BackButtonProps = schema('BackButtonProps', {
10+
backLink: z.string().default('/'),
11+
})
12+
13+
type BackButtonProps = z.input<typeof BackButtonProps>
14+
15+
/* --- <BackButton/> --------------------------------------------------------------------------- */
16+
17+
const BackButton = (props: BackButtonProps) => {
18+
// Props
19+
const { backLink } = BackButtonProps.applyDefaults(props)
20+
21+
// Routing
22+
const { canGoBack, back } = useRouter()
23+
24+
// Vars
25+
const showBackButton = canGoBack()
26+
27+
// -- Render --
28+
29+
return (
30+
<View className="flex flex-row absolute top-8 web:top-0 left-0 p-4 items-center">
31+
<ArrowLeftFilled fill="#FFFFFF" size={18} />
32+
<View className="w-[5px]" />
33+
{showBackButton ? (
34+
<Text
35+
className="text-white text-lg"
36+
onPress={back}
37+
>
38+
{`Back`}
39+
</Text>
40+
) : (
41+
<Link href={backLink} className="text-white text-lg no-underline">
42+
{`Back`}
43+
</Link>
44+
)}
45+
</View>
46+
)
47+
}
48+
49+
/* --- Exports --------------------------------------------------------------------------------- */
50+
51+
export default BackButton

‎features/@app-core/components/styled.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { KnownRoutes } from '@app/registries/routeManifest.generated'
22
import { styled } from 'nativewind'
3-
import { Text as RNText, View as RNView } from 'react-native'
3+
import { Text as RNText, View as RNView, ScrollView as RNScrollView } from 'react-native'
44
import { Link as UniversalLink } from '@green-stack/navigation/Link'
55
import { UniversalLinkProps } from '@green-stack/navigation/Link.types'
66
import { Image as UniversalImage } from '@green-stack/components/Image'
@@ -13,20 +13,20 @@ export const Image = styled(UniversalImage, '')
1313

1414
/* --- Typography ------------------------------------------------------------------------------ */
1515

16-
export const H1 = styled(RNText, 'font-bold text-2xl text-primary-500')
17-
export const H2 = styled(RNText, 'font-bold text-xl text-primary-500')
18-
export const H3 = styled(RNText, 'font-bold text-lg text-primary-500')
16+
export const H1 = styled(RNText, 'font-bold text-2xl text-primary-100')
17+
export const H2 = styled(RNText, 'font-bold text-xl text-primary-100')
18+
export const H3 = styled(RNText, 'font-bold text-lg text-primary-100')
1919

2020
export const P = styled(RNText, 'text-base')
2121

2222
/* --- Fix for Next Link ----------------------------------------------------------------------- */
2323

2424
export const Link = <HREF extends KnownRoutes>(props: UniversalLinkProps<HREF>) => {
25-
const StyledLink = styled(UniversalLink, 'text-blue-500 underline') // @ts-ignore
25+
const StyledLink = styled(UniversalLink, 'text-blue-300 underline') // @ts-ignore
2626
return <StyledLink {...props} />
2727
}
2828

29-
export const LinkText = styled(RNText, 'text-blue-500 underline')
29+
export const LinkText = styled(RNText, 'text-blue-300 underline')
3030

3131
export const TextLink = (props: Omit<React.ComponentProps<typeof UniversalLink>, 'className'> & { className?: string }) => {
3232
const { className, style, children, ...universalLinkProps } = props

‎features/@app-core/constants/testableFeatures.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
export const testableFeatures = [
3+
{
4+
title: 'Test Images?',
5+
link: '/images'
6+
},
7+
]

0 commit comments

Comments
 (0)