adding closed banner to each required component to show up across the app

Author: mazenchami

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/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 = {