From bf37913701836091b3e902694d72d190eeca5ec9 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Tue, 29 Aug 2023 12:16:26 -0700
Subject: fix onboarding on web

---
 src/view/com/util/ViewHeader.tsx | 74 +++++++++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 28 deletions(-)

(limited to 'src/view/com/util/ViewHeader.tsx')

diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index f5a921ac0..47e631072 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -17,6 +17,7 @@ const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 export const ViewHeader = observer(function ({
   title,
   canGoBack,
+  showBackButton = true,
   hideOnScroll,
   showOnDesktop,
   showBorder,
@@ -24,6 +25,7 @@ export const ViewHeader = observer(function ({
 }: {
   title: string
   canGoBack?: boolean
+  showBackButton?: boolean
   hideOnScroll?: boolean
   showOnDesktop?: boolean
   showBorder?: boolean
@@ -49,7 +51,13 @@ export const ViewHeader = observer(function ({
 
   if (isDesktopWeb) {
     if (showOnDesktop) {
-      return <DesktopWebHeader title={title} renderButton={renderButton} />
+      return (
+        <DesktopWebHeader
+          title={title}
+          renderButton={renderButton}
+          showBorder={showBorder}
+        />
+      )
     }
     return null
   } else {
@@ -59,30 +67,32 @@ export const ViewHeader = observer(function ({
 
     return (
       <Container hideOnScroll={hideOnScroll || false} showBorder={showBorder}>
-        <TouchableOpacity
-          testID="viewHeaderDrawerBtn"
-          onPress={canGoBack ? onPressBack : onPressMenu}
-          hitSlop={BACK_HITSLOP}
-          style={canGoBack ? styles.backBtn : styles.backBtnWide}
-          accessibilityRole="button"
-          accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
-          accessibilityHint={
-            canGoBack ? '' : 'Access navigation links and settings'
-          }>
-          {canGoBack ? (
-            <FontAwesomeIcon
-              size={18}
-              icon="angle-left"
-              style={[styles.backIcon, pal.text]}
-            />
-          ) : (
-            <FontAwesomeIcon
-              size={18}
-              icon="bars"
-              style={[styles.backIcon, pal.textLight]}
-            />
-          )}
-        </TouchableOpacity>
+        {showBackButton ? (
+          <TouchableOpacity
+            testID="viewHeaderDrawerBtn"
+            onPress={canGoBack ? onPressBack : onPressMenu}
+            hitSlop={BACK_HITSLOP}
+            style={canGoBack ? styles.backBtn : styles.backBtnWide}
+            accessibilityRole="button"
+            accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
+            accessibilityHint={
+              canGoBack ? '' : 'Access navigation links and settings'
+            }>
+            {canGoBack ? (
+              <FontAwesomeIcon
+                size={18}
+                icon="angle-left"
+                style={[styles.backIcon, pal.text]}
+              />
+            ) : (
+              <FontAwesomeIcon
+                size={18}
+                icon="bars"
+                style={[styles.backIcon, pal.textLight]}
+              />
+            )}
+          </TouchableOpacity>
+        ) : null}
         <View style={styles.titleContainer} pointerEvents="none">
           <Text type="title" style={[pal.text, styles.title]}>
             {title}
@@ -101,13 +111,23 @@ export const ViewHeader = observer(function ({
 function DesktopWebHeader({
   title,
   renderButton,
+  showBorder = true,
 }: {
   title: string
   renderButton?: () => JSX.Element
+  showBorder?: boolean
 }) {
   const pal = usePalette('default')
   return (
-    <CenteredView style={[styles.header, styles.desktopHeader, pal.border]}>
+    <CenteredView
+      style={[
+        styles.header,
+        styles.desktopHeader,
+        pal.border,
+        {
+          borderBottomWidth: showBorder ? 1 : 0,
+        },
+      ]}>
       <View style={styles.titleContainer} pointerEvents="none">
         <Text type="title-lg" style={[pal.text, styles.title]}>
           {title}
@@ -195,13 +215,11 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   desktopHeader: {
-    borderBottomWidth: 1,
     paddingVertical: 12,
   },
   border: {
     borderBottomWidth: 1,
   },
-
   titleContainer: {
     marginLeft: 'auto',
     marginRight: 'auto',
-- 
cgit 1.4.1


From b847917969a2b86388ca88a84d6c8616bc40aeaf Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 29 Aug 2023 23:02:37 -0700
Subject: Tweaks to mobile onboard

---
 src/view/com/auth/onboarding/RecommendedFeeds.tsx | 9 +++++----
 src/view/com/util/ViewHeader.tsx                  | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'src/view/com/util/ViewHeader.tsx')

diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index f6b40b88d..4a3200168 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -19,9 +19,9 @@ export const RecommendedFeeds = observer(({next}: Props) => {
 
   return (
     <View style={[styles.container]} testID="recommendedFeedsScreen">
-      <ViewHeader title="Recommended Feeds" canGoBack={true} />
+      <ViewHeader title="Recommended Feeds" showBackButton={false} />
       <Text type="lg-medium" style={[pal.text, styles.header]}>
-        Check out some recommended feeds. Click + to add them to your list of
+        Check out some recommended feeds. Tap + to add them to your list of
         pinned feeds.
       </Text>
 
@@ -72,14 +72,15 @@ const Item = ({item}: {item: ItemProps}) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginHorizontal: 16,
     justifyContent: 'space-between',
   },
   header: {
     marginBottom: 16,
+    marginHorizontal: 16,
   },
   button: {
-    marginBottom: 48,
+    marginBottom: 24,
+    marginHorizontal: 16,
     marginTop: 16,
   },
   buttonText: {
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 47e631072..7482db8eb 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -100,9 +100,9 @@ export const ViewHeader = observer(function ({
         </View>
         {renderButton ? (
           renderButton()
-        ) : (
+        ) : showBackButton ? (
           <View style={canGoBack ? styles.backBtn : styles.backBtnWide} />
-        )}
+        ) : null}
       </Container>
     )
   }
-- 
cgit 1.4.1