feat: Update HomeScreen design

Aetherspace · Jul 12, 2024 · 4971d64 · 4971d64
1 parent 44d1031
commit 4971d64
Show file tree

Hide file tree

Showing 18 changed files with 461 additions and 98 deletions.
diff --git a/apps/expo/app/ExpoRootLayout.tsx b/apps/expo/app/ExpoRootLayout.tsx
@@ -32,6 +32,7 @@ export default function ExpoRootLayout() {
       contextLink={ExpoContextLink}
       contextRouter={expoContextRouter}
       useContextRouteParams={useExpoRouteParams}
+      isExpo
     >
       <UniversalRootLayout>
         <Stack

diff --git a/apps/next/app/Document.tsx b/apps/next/app/Document.tsx
@@ -16,7 +16,7 @@ const Document = (props: { children: React.ReactNode }) => {
   // -- Render --
 
   return (
-    <html suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <head>
         {/* - Title & Keywords - */}
         <title>Universal App Router</title>
@@ -26,7 +26,9 @@ const Document = (props: { children: React.ReactNode }) => {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </head>
       <body>
-        <UniversalRootLayout>{children}</UniversalRootLayout>
+        <UniversalRootLayout>
+          <main className="flex min-w-screen min-h-screen">{children}</main>
+        </UniversalRootLayout>
       </body>
     </html>
   )

diff --git a/apps/next/app/NextClientRootLayout.tsx b/apps/next/app/NextClientRootLayout.tsx
@@ -31,6 +31,7 @@ const NextClientRootLayout = ({ children }: NextClientRootLayoutProps) => {
             contextLink={NextContextLink}
             contextRouter={nextContextRouter}
             useContextRouteParams={useNextRouteParams}
+            isNext
         >
             {children}
         </UniversalAppProviders>

diff --git a/apps/next/app/ServerStylesProvider.tsx b/apps/next/app/ServerStylesProvider.tsx
@@ -27,7 +27,7 @@ const ServerStylesProvider = (props: { children: React.ReactNode }) => {
       return (
         <>
           {reactNativeStyleElement}
-          {/* TODO: Insert other SSR'd styles here */}
+          {/* OPTIONAL: Insert other SSR'd styles here? */}
         </>
       )
     })

diff --git a/features/@app-core/components/BackButton.tsx b/features/@app-core/components/BackButton.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { View, Text, Link } from '../components/styled'
+import { useRouter } from '@green-stack/navigation/useRouter'
+import { ArrowLeftFilled } from '../icons/ArrowLeftFilled'
+import { schema, z } from '@green-stack/schemas'
+
+/* --- Props ----------------------------------------------------------------------------------- */
+
+const BackButtonProps = schema('BackButtonProps', {
+  backLink: z.string().default('/'),
+})
+
+type BackButtonProps = z.input<typeof BackButtonProps>
+
+/* --- <BackButton/> --------------------------------------------------------------------------- */
+
+const BackButton = (props: BackButtonProps) => {
+  // Props
+  const { backLink } = BackButtonProps.applyDefaults(props)
+
+  // Routing
+  const { canGoBack, back } = useRouter()
+
+  // Vars
+  const showBackButton = canGoBack()
+
+  // -- Render --
+
+  return (
+    <View className="flex flex-row absolute top-8 web:top-0 left-0 p-4 items-center">
+      <ArrowLeftFilled fill="#FFFFFF" size={18} />
+      <View className="w-[5px]" />
+      {showBackButton ? (
+        <Text
+          className="text-white text-lg"
+          onPress={back}
+        >
+          {`Back`}
+        </Text>
+      ) : (
+        <Link href={backLink} className="text-white text-lg no-underline">
+          {`Back`}
+        </Link>
+      )}
+    </View>
+  )
+}
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default BackButton
diff --git a/features/@app-core/components/styled.tsx b/features/@app-core/components/styled.tsx
@@ -1,6 +1,6 @@
 import type { KnownRoutes } from '@app/registries/routeManifest.generated'
 import { styled } from 'nativewind'
-import { Text as RNText, View as RNView } from 'react-native'
+import { Text as RNText, View as RNView, ScrollView as RNScrollView } from 'react-native'
 import { Link as UniversalLink } from '@green-stack/navigation/Link'
 import { UniversalLinkProps } from '@green-stack/navigation/Link.types'
 import { Image as UniversalImage } from '@green-stack/components/Image'
@@ -13,20 +13,20 @@ export const Image = styled(UniversalImage, '')
 
 /* --- Typography ------------------------------------------------------------------------------ */
 
-export const H1 = styled(RNText, 'font-bold text-2xl text-primary-500')
-export const H2 = styled(RNText, 'font-bold text-xl text-primary-500')
-export const H3 = styled(RNText, 'font-bold text-lg text-primary-500')
+export const H1 = styled(RNText, 'font-bold text-2xl text-primary-100')
+export const H2 = styled(RNText, 'font-bold text-xl text-primary-100')
+export const H3 = styled(RNText, 'font-bold text-lg text-primary-100')
 
 export const P = styled(RNText, 'text-base')
 
 /* --- Fix for Next Link ----------------------------------------------------------------------- */
 
 export const Link = <HREF extends KnownRoutes>(props: UniversalLinkProps<HREF>) => {
-    const StyledLink = styled(UniversalLink, 'text-blue-500 underline') // @ts-ignore
+    const StyledLink = styled(UniversalLink, 'text-blue-300 underline') // @ts-ignore
     return <StyledLink {...props} />
 }
 
-export const LinkText = styled(RNText, 'text-blue-500 underline')
+export const LinkText = styled(RNText, 'text-blue-300 underline')
 
 export const TextLink = (props: Omit<React.ComponentProps<typeof UniversalLink>, 'className'> & { className?: string }) => {
     const { className, style, children, ...universalLinkProps } = props

diff --git a/features/@app-core/constants/testableFeatures.ts b/features/@app-core/constants/testableFeatures.ts
@@ -0,0 +1,7 @@
+
+export const testableFeatures = [
+    {
+        title: 'Test Images?',
+        link: '/images'
+    },
+]
diff --git a/features/@app-core/icons/ArrowLeftFilled.tsx b/features/@app-core/icons/ArrowLeftFilled.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import type { SvgProps } from 'react-native-svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type IconProps = SvgProps & { fill?: string; stroke?: string; size?: number }
+
+/* --- <ArrowLeftFilled/> --------------------------------------------------------------------- */
+
+export const ArrowLeftFilled = ({ size = 24, fill = '#333333', ...svgProps }: IconProps) => (
+  <Svg width={size} height={size} fill="none" viewBox="0 0 24 24" {...svgProps}>
+    <Path
+      d="M10 6L4 12L10 18"
+      stroke={fill}
+      strokeWidth="4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M20 12H4"
+      stroke={fill}
+      strokeWidth="4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+)
diff --git a/features/@app-core/icons/ArrowRightFilled.tsx b/features/@app-core/icons/ArrowRightFilled.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import type { SvgProps } from 'react-native-svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type IconProps = SvgProps & { fill?: string; stroke?: string; size?: number }
+
+/* --- <ArrowRightFilled/> --------------------------------------------------------------------- */
+
+export const ArrowRightFilled = ({ size = 24, fill = '#333333', ...svgProps }: IconProps) => (
+  <Svg width={size} height={size} fill="none" viewBox="0 0 24 24" {...svgProps}>
+    <Path
+      d="M14 6L20 12L14 18"
+      stroke={fill}
+      strokeWidth="4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M4 12H20"
+      stroke={fill}
+      strokeWidth="4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+)