Closed Banner (#242)

Author: mazenchami

app/components/ClosedBanner.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Text } from "./Text"
+import { View, type TextStyle, type ViewStyle } from "react-native"
+import { colors, spacing } from "../theme"
+import { translate } from "../i18n"
+import { openLinkInBrowser } from "../utils/openLinkInBrowser"
+
+export const ClosedBanner = () => {
+  const chainReactWebsite = () =>
+    openLinkInBrowser(`https://${translate("common.appClosedLinkText")}`)
+
+  return (
+    <View style={$wrapper}>
+      <Text style={$text}>
+        {translate("common.appClosedPart1")}
+        <Text style={$link} onPress={chainReactWebsite} tx="common.appClosedLinkText" />
+        {translate("common.appClosedPart2")}
+      </Text>
+    </View>
+  )
+}
+
+const $wrapper: ViewStyle = {
+  backgroundColor: colors.errorBackground,
+  padding: spacing.extraSmall,
+}
+
+const $text: TextStyle = {
+  color: colors.error,
+  textAlign: "center",
+}
+
+const $link: TextStyle = {
+  color: colors.error,
+  textDecorationColor: colors.error,
+  textDecorationLine: "underline",
+}

app/components/Header.tsx

@@ -14,6 +14,7 @@ import { Text, TextProps } from "./Text"
 import { Icon, IconTypes } from "./Icon"
 import { isRTL, translate } from "../i18n"
 import SafeAreaViewFixed from "./SafeAreaViewFixed"
+import { ClosedBanner } from "./ClosedBanner"
 
 export interface HeaderProps {
   /**
@@ -175,6 +176,7 @@ export function Header(props: HeaderProps) {
       {...HeaderViewProps}
       style={[$safeArea, HeaderViewProps?.style, { backgroundColor }]}
     >
+      <ClosedBanner />
       <View style={[$container, $containerStyleOverride]}>
         <HeaderAction
           tx={leftTx}

app/components/index.ts

@@ -4,6 +4,7 @@ export * from "./BoxShadow"
 export * from "./Button"
 export * from "./ButtonLink"
 export * from "./Card"
+export * from "./ClosedBanner"
 export * from "./carousel"
 export * from "./CustomToast"
 export * from "./Header"

app/i18n/en.ts

@@ -4,6 +4,9 @@ const en = {
     cancel: "Cancel",
     back: "Back",
     comingSoon: "Coming soon",
+    appClosedPart1: "Hey, this app is not being used in 2024; go to ",
+    appClosedPart2: " to get all the details!",
+    appClosedLinkText: "ChainReactConf.com",
   },
   welcomeScreen: {
     heading: "Welcome to Chain React!",

app/screens/TalkDetailsScreen/TalkDetailsHeader.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { TextStyle, View, ViewStyle } from "react-native"
 import Animated, { interpolate, SharedValue, useAnimatedStyle } from "react-native-reanimated"
-import { Text } from "../../components"
+import { ClosedBanner, Text } from "../../components"
 import { BackButton } from "../../navigators/BackButton"
 import { colors, layout, spacing } from "../../theme"
 
@@ -36,16 +36,19 @@ export const TalkDetailsHeader: React.FunctionComponent<TalkDetailsHeaderProps>
     }, [headingHeight])
 
     return (
-      <View style={$rowContainer}>
-        <BackButton />
-        <AnimatedText
-          allowFontScaling={false}
-          preset="navHeader"
-          style={[$centerTitle, $animatedTitle]}
-        >
-          {title}
-        </AnimatedText>
-      </View>
+      <>
+        <ClosedBanner />
+        <View style={$rowContainer}>
+          <BackButton />
+          <AnimatedText
+            allowFontScaling={false}
+            preset="navHeader"
+            style={[$centerTitle, $animatedTitle]}
+          >
+            {title}
+          </AnimatedText>
+        </View>
+      </>
     )
   }
 

app/screens/WelcomeScreen.tsx

@@ -8,8 +8,7 @@ import {
   ViewStyle,
   useWindowDimensions,
 } from "react-native"
-import { SafeAreaView } from "react-native-safe-area-context"
-import { Button, Screen, Text } from "../components"
+import { Button, ClosedBanner, Screen, Text } from "../components"
 import { useAppNavigation } from "../hooks"
 import { AppStackScreenProps } from "../navigators"
 import { colors, spacing } from "../theme"
@@ -32,7 +31,8 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = (_props) => {
   }, [])
 
   return (
-    <Screen style={$container}>
+    <Screen safeAreaEdges={["top", "bottom"]} style={$container}>
+      <ClosedBanner />
       <View style={$topContainer}>
         <Image style={$welcomeLogo} source={welcomeLogo} />
       </View>
@@ -58,7 +58,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = (_props) => {
         />
       </View>
 
-      <SafeAreaView style={$bottomContainer} edges={["bottom"]}>
+      <View style={$bottomContainer}>
         <View
           style={[
             $bottomContentContainer,
@@ -72,7 +72,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = (_props) => {
             onPress={goNext}
           />
         </View>
-      </SafeAreaView>
+      </View>
     </Screen>
   )
 }
@@ -85,7 +85,7 @@ const $container: ViewStyle = {
 const $topContainer: ViewStyle = {
   flexShrink: 1,
   flexGrow: 1,
-  flexBasis: "25%",
+  flexBasis: "20%",
   justifyContent: "flex-start",
 }
 
@@ -100,10 +100,8 @@ const $middleContainer: ViewStyle = {
 const $bottomContainer: ViewStyle = {
   flexShrink: 1,
   flexGrow: 0,
-  flexBasis: "25%",
+  flexBasis: "20%",
   backgroundColor: colors.background,
-  borderTopLeftRadius: 16,
-  borderTopRightRadius: 16,
 }
 
 const $bottomContentContainer: ViewStyle = {