Fix: Web design issues (#2377) (#2410)

* Fix web design issues

* Fix Right Nav width design issue

Co-authored-by: Rahul Yadav <52163880+rahulyadav5524@users.noreply.github.com>

src/lib/styles.ts

@@ -167,6 +167,7 @@ export const s = StyleSheet.create({
   flexGrow1: {flexGrow: 1},
   alignCenter: {alignItems: 'center'},
   alignBaseline: {alignItems: 'baseline'},
+  justifyCenter: {justifyContent: 'center'},
 
   // position
   absolute: {position: 'absolute'},

src/view/com/feeds/FeedSourceCard.tsx

@@ -229,7 +229,7 @@ export function FeedSourceCardLoaded({
         </View>
 
         {showSaveBtn && feed.type === 'feed' && (
-          <View>
+          <View style={[s.justifyCenter]}>
             <Pressable
               testID={`feed-${feed.displayName}-toggleSave`}
               disabled={isSavePending || isPinPending || isRemovePending}

src/view/screens/Moderation.tsx

@@ -62,7 +62,7 @@ export function ModerationScreen({}: Props) {
       ]}
       testID="moderationScreen">
       <ViewHeader title={_(msg`Moderation`)} showOnDesktop />
-      <ScrollView>
+      <ScrollView contentContainerStyle={[styles.noBorder]}>
         <View style={styles.spacer} />
         <TouchableOpacity
           testID="contentFilteringBtn"
@@ -275,4 +275,10 @@ const styles = StyleSheet.create({
     borderRadius: 30,
     marginRight: 12,
   },
+  noBorder: {
+    borderBottomWidth: 0,
+    borderRightWidth: 0,
+    borderLeftWidth: 0,
+    borderTopWidth: 0,
+  },
 })

src/view/screens/SavedFeeds.tsx

@@ -82,7 +82,7 @@ export function SavedFeeds({}: Props) {
         isTabletOrDesktop && styles.desktopContainer,
       ]}>
       <ViewHeader title={_(msg`Edit My Feeds`)} showOnDesktop showBorder />
-      <ScrollView style={s.flex1}>
+      <ScrollView style={s.flex1} contentContainerStyle={[styles.noBorder]}>
         <View style={[pal.text, pal.border, styles.title]}>
           <Text type="title" style={pal.text}>
             <Trans>Pinned Feeds</Trans>
@@ -288,7 +288,7 @@ function ListItem({
       <FeedSourceCard
         key={feedUri}
         feedUri={feedUri}
-        style={styles.noBorder}
+        style={styles.noTopBorder}
         showSaveBtn
         showMinimalPlaceholder
       />
@@ -344,7 +344,7 @@ const styles = StyleSheet.create({
   webArrowUpButton: {
     marginBottom: 10,
   },
-  noBorder: {
+  noTopBorder: {
     borderTopWidth: 0,
   },
   footerText: {
@@ -352,4 +352,10 @@ const styles = StyleSheet.create({
     paddingTop: 22,
     paddingBottom: 100,
   },
+  noBorder: {
+    borderBottomWidth: 0,
+    borderRightWidth: 0,
+    borderLeftWidth: 0,
+    borderTopWidth: 0,
+  },
 })

src/view/shell/desktop/RightNav.tsx

@@ -180,14 +180,14 @@ const styles = StyleSheet.create({
     position: 'absolute',
     // @ts-ignore web only
     left: 'calc(50vw + 320px)',
-    width: 304,
+    width: 300,
     maxHeight: '100%',
     overflowY: 'auto',
   },
 
   message: {
     paddingVertical: 18,
-    paddingHorizontal: 10,
+    paddingHorizontal: 12,
   },
   messageLine: {
     marginBottom: 10,
@@ -195,7 +195,7 @@ const styles = StyleSheet.create({
 
   inviteCodes: {
     borderTopWidth: 1,
-    paddingHorizontal: 16,
+    paddingHorizontal: 12,
     paddingVertical: 12,
     flexDirection: 'row',
   },