Merge branch 'feature/compact-view'

Memmy-App · Oct 20, 2023 · c90364b · c90364b
2 parents 44f668f + d48c715
commit c90364b
Show file tree

Hide file tree

Showing 80 changed files with 764 additions and 538 deletions.
diff --git a/package.json b/package.json
@@ -113,6 +113,6 @@
     "postinstall": "patch-package",
     "build-submit-ios": "cd ios && fastlane beta",
     "lint": "./node_modules/eslint/bin/eslint.js . --ext=js,jsx,ts,tsx",
-    "lint-fix": "./node_modules/eslint/bin/eslint.js --fix"
+    "lint-fix": "./node_modules/eslint/bin/eslint.js . --ext=js,jsx,ts,tsx --fix"
   }
 }
diff --git a/src/components/Account/components/VerifyEmailNotice.tsx b/src/components/Account/components/VerifyEmailNotice.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import VStack from '@components/Common/Stack/VStack';
-import { Text } from 'tamagui';
+import { Text, YStack } from 'tamagui';
 import { UseSignup } from '@components/Account/hooks/useSignup';
 import { Button } from '@components/Common/Button';
 import { Linking } from 'react-native';
@@ -19,7 +18,7 @@ export default function VerifyEmailNotice({
   doSignup,
 }: IProps): React.JSX.Element {
   return (
-    <VStack paddingHorizontal="$2" space="$2">
+    <YStack px="$2" space="$2">
       <Text fontSize="$7" fontWeight="$6" textAlign="center">
         Check Your Inbox
       </Text>
@@ -33,6 +32,6 @@ export default function VerifyEmailNotice({
       <Button onPress={doSignup} disabled={signup.loading}>
         <Text>Get Started</Text>
       </Button>
-    </VStack>
+    </YStack>
   );
 }
diff --git a/src/components/Account/screens/AddAccountModal.tsx b/src/components/Account/screens/AddAccountModal.tsx
@@ -36,8 +36,8 @@ export default function AddAccountModal(): React.JSX.Element {
   return (
     <ScrollView
       space="$1"
-      marginHorizontal="$3"
-      marginVertical="$2"
+      mx="$3"
+      my="$2"
       automaticallyAdjustKeyboardInsets={true}
     >
       <AppToast translate={95} />

diff --git a/src/components/Account/screens/CreateAccountModal.tsx b/src/components/Account/screens/CreateAccountModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { ScrollView, Spacer } from 'tamagui';
+import { ScrollView, Spacer, YStack } from 'tamagui';
 import AppToast from '@components/Common/Toast/AppToast';
 import LoadingOverlay from '@components/Common/Loading/LoadingOverlay';
 import InputWrapper from '@components/Common/Form/InputWrapper';
@@ -16,7 +16,6 @@ import TextInput from '@components/Common/Form/TextInput';
 import { Button } from '@components/Common/Button';
 import { useSignup } from '@components/Account/hooks/useSignup';
 import { Image } from 'expo-image';
-import VStack from '@components/Common/Stack/VStack';
 import VerifyEmailNotice from '@components/Account/components/VerifyEmailNotice';
 
 interface IProps {
@@ -61,8 +60,8 @@ export default function CreateAccountModal({
   return (
     <ScrollView
       space="$1"
-      marginHorizontal="$3"
-      marginVertical="$2"
+      mx="$3"
+      my="$2"
       automaticallyAdjustKeyboardInsets={true}
     >
       <AppToast translate={95} />
@@ -139,12 +138,12 @@ export default function CreateAccountModal({
 
           {signup.captchaPng != null && (
             <>
-              <VStack alignItems="center" marginTop="$3">
+              <YStack alignItems="center" mt="$3">
                 <Image
                   source={{ uri: `data:image/png;base64,${signup.captchaPng}` }}
                   style={{ height: 100, width: '100%' }}
                 />
-              </VStack>
+              </YStack>
               <InputWrapper>
                 <Label icon={<ShieldQuestion size={12} />}>Captcha</Label>
                 <TextInput

diff --git a/src/components/Comment/components/Comment.tsx b/src/components/Comment/components/Comment.tsx
@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react';
-import VStack from '@components/Common/Stack/VStack';
+import { Separator, View, YStack } from 'tamagui';
 import CommentHeader from '@components/Comment/components/CommentHeader';
 import CommentContent from '@components/Comment/components/CommentContent';
 import { Pressable } from 'react-native';
-import { Separator, View } from 'tamagui';
 import { SwipeableRow } from '@components/Common/SwipeableRow/SwipeableRow';
 import { useCommentGesturesEnabled, useCommentPostId } from '@src/state';
 import { LeftOptions } from '@components/Common/SwipeableRow/LeftOptions';
@@ -69,7 +68,7 @@ function Comment({
   );
 
   return (
-    <View marginVertical={space ? 2 : 0}>
+    <View my={space ? 2 : 0}>
       <SwipeableRow
         leftOption={
           swipesEnabled && leftOptions?.actions.first != null ? (
@@ -82,20 +81,20 @@ function Comment({
           ) : undefined
         }
       >
-        <VStack backgroundColor="$fg">
-          <VStack
-            marginLeft={depth * 10}
-            marginVertical="$2"
+        <YStack backgroundColor="$fg">
+          <YStack
+            ml={depth * 10}
+            my="$2"
             borderLeftColor={borderColor}
             borderLeftWidth={borderWidth}
-            paddingHorizontal="$2"
-            paddingVertical="$1"
+            px="$2"
+            py="$1"
           >
             <CommentHeader itemId={itemId} />
             {!collapsed && <CommentContent itemId={itemId} />}
-          </VStack>
-          <Separator borderColor="$bg" marginLeft={depth * 10 + 10} />
-        </VStack>
+          </YStack>
+          <Separator borderColor="$bg" ml={depth * 10 + 10} />
+        </YStack>
       </SwipeableRow>
     </View>
   );

diff --git a/src/components/Comment/components/CommentHeader.tsx b/src/components/Comment/components/CommentHeader.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import HStack from '@components/Common/Stack/HStack';
 import CommentUserLabel from '@components/Comment/components/CommentUserLabel';
 import {
   useCommentCreatorActorId,
@@ -8,7 +7,7 @@ import {
 } from '@src/state';
 import CommentMetrics from '@components/Comment/components/CommentMetrics';
 import CommentEllipsisButton from '@components/Comment/components/CommentEllipsisButton';
-import { View } from 'tamagui';
+import { View, XStack } from 'tamagui';
 
 interface IProps {
   itemId: number;
@@ -20,17 +19,17 @@ function CommentHeader({ itemId }: IProps): React.JSX.Element {
   const commentCreatorActorId = useCommentCreatorActorId(itemId);
 
   return (
-    <HStack space="$3" alignItems="center" pb="$2">
+    <XStack space="$3" alignItems="center" pb="$2">
       <CommentUserLabel
         userIcon={commentCreatorAvatar}
         userName={commentCreatorName}
         userCommunity={commentCreatorActorId}
       />
       <CommentMetrics itemId={itemId} />
-      <View marginLeft="auto">
+      <View ml="auto">
         <CommentEllipsisButton itemId={itemId} />
       </View>
-    </HStack>
+    </XStack>
   );
 }
 

diff --git a/src/components/Comment/components/CommentImageButton.tsx b/src/components/Comment/components/CommentImageButton.tsx
@@ -3,9 +3,8 @@ import { useImageViewer } from '@components/Common/ImageViewer/ImageViewerProvid
 import { saveImageDimensions, useImageSavedDimensions } from '@src/state';
 import { IDimensions } from '@src/types';
 import { Image, ImageLoadEventData } from 'expo-image';
-import { Separator, Text, View } from 'tamagui';
+import { Separator, Text, View, XStack } from 'tamagui';
 import { ChevronRight } from '@tamagui/lucide-icons';
-import HStack from '@components/Common/Stack/HStack';
 
 interface IProps {
   source: string;
@@ -40,18 +39,13 @@ function CommentImageButton({ source }: IProps): React.JSX.Element {
   );
 
   return (
-    <HStack
-      backgroundColor="$bg"
-      borderRadius={10}
-      marginTop="$1"
-      onPress={onPress}
-    >
-      <HStack
+    <XStack backgroundColor="$bg" borderRadius={10} mt="$1" onPress={onPress}>
+      <XStack
         alignItems="center"
         space="$2"
-        paddingHorizontal="$3"
-        paddingBottom="$2"
-        paddingTop="$2"
+        px="$3"
+        pb="$2"
+        pt="$2"
         justifyContent="space-between"
         flex={1}
       >
@@ -76,8 +70,8 @@ function CommentImageButton({ source }: IProps): React.JSX.Element {
           </Text>
         </View>
         <ChevronRight color="$secondary" />
-      </HStack>
-    </HStack>
+      </XStack>
+    </XStack>
   );
 }
 

diff --git a/src/components/Comment/components/CommentMetrics.tsx b/src/components/Comment/components/CommentMetrics.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { useSettingsStore } from '@src/state';
-import HStack from '@components/Common/Stack/HStack';
-import { Text } from 'tamagui';
+import { Text, XStack } from 'tamagui';
 import ScoreIcon from '@components/Common/Icons/ScoreIcon';
 import { ArrowDown, ArrowUp } from '@tamagui/lucide-icons';
 import { useCommentVoting } from '@hooks/comments/useCommentVoting';
@@ -35,7 +34,7 @@ function CommentMetrics({ itemId }: IProps): React.JSX.Element {
 
   if (totalScore) {
     return (
-      <HStack
+      <XStack
         space="$1"
         onPress={voting.scoreVote}
         hitSlop={3}
@@ -45,12 +44,12 @@ function CommentMetrics({ itemId }: IProps): React.JSX.Element {
         <Text fontSize="$2" color={scoreColor}>
           {voting.score}
         </Text>
-      </HStack>
+      </XStack>
     );
   } else {
     return (
-      <HStack space="$2">
-        <HStack
+      <XStack space="$2">
+        <XStack
           space="$1"
           onPress={voting.upvote}
           hitSlop={3}
@@ -60,8 +59,8 @@ function CommentMetrics({ itemId }: IProps): React.JSX.Element {
           <Text fontSize="$2" color={upvoteColor}>
             {voting.upvotes}
           </Text>
-        </HStack>
-        <HStack
+        </XStack>
+        <XStack
           space="$1"
           onPress={voting.downvote}
           hitSlop={3}
@@ -71,8 +70,8 @@ function CommentMetrics({ itemId }: IProps): React.JSX.Element {
           <Text fontSize="$2" color={downvoteColor}>
             {voting.downvotes}
           </Text>
-        </HStack>
-      </HStack>
+        </XStack>
+      </XStack>
     );
   }
 }

diff --git a/src/components/Comment/components/CommentShowMoreButton.tsx b/src/components/Comment/components/CommentShowMoreButton.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import { ICommentInfo } from '@src/types';
-import VStack from '@components/Common/Stack/VStack';
-import { Separator, Text } from 'tamagui';
+import { Separator, Text, YStack } from 'tamagui';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/core';
 import { Pressable } from 'react-native';
@@ -21,26 +20,21 @@ function CommentShowMoreButton({ commentInfo }: IProps): React.JSX.Element {
 
   return (
     <Pressable onPress={onPress}>
-      <VStack backgroundColor="$fg">
-        <VStack
-          marginLeft={commentInfo.depth * 10}
-          marginVertical="$2"
+      <YStack backgroundColor="$fg">
+        <YStack
+          ml={commentInfo.depth * 10}
+          my="$2"
           borderLeftColor="$secondary"
           borderLeftWidth={2}
-          paddingHorizontal="$2"
-          paddingVertical="$1"
+          px="$2"
+          py="$1"
         >
-          <Text
-            color="$secondary"
-            fontStyle="italic"
-            marginBottom="$1"
-            margin="auto"
-          >
+          <Text color="$secondary" fontStyle="italic" mb="$1" m="auto">
             Show More Comments...
           </Text>
-        </VStack>
-        <Separator borderColor="$bg" marginLeft={commentInfo.depth * 10 + 10} />
-      </VStack>
+        </YStack>
+        <Separator borderColor="$bg" ml={commentInfo.depth * 10 + 10} />
+      </YStack>
     </Pressable>
   );
 }

diff --git a/src/components/Comment/components/CommentUserLabel.tsx b/src/components/Comment/components/CommentUserLabel.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { useSettingsStore } from '@src/state';
 import { createName } from '@helpers/text';
-import HStack from '@components/Common/Stack/HStack';
-import { Text } from 'tamagui';
+import { Text, XStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/core';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import UserIcon from '@components/Common/Avatar/UserIcon';
@@ -33,12 +32,12 @@ function CommentUserLabel({
   }, [userName]);
 
   return (
-    <HStack space="$2" alignItems="center" onPress={onPress} hitSlop={5}>
+    <XStack space="$2" alignItems="center" onPress={onPress} hitSlop={5}>
       {showIcon && <UserIcon userIcon={userIcon} />}
       <Text fontSize="$3" color="$secondary">
         {name}
       </Text>
-    </HStack>
+    </XStack>
   );
 }
 

diff --git a/src/components/Comment/screens/CommentChainScreen.tsx b/src/components/Comment/screens/CommentChainScreen.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import VStack from '@components/Common/Stack/VStack';
 import { ICommentInfo } from '@src/types';
 import { usePostCommentsInfo } from '@src/state';
 import { FlatList, ListRenderItemInfo } from 'react-native';
 import CommentChain from '@components/Comment/components/CommentChain';
 import FeedLoadingIndicator from '@components/Feed/components/Feed/FeedLoadingIndicator';
 import { useAwaitTransition } from '@hooks/useAwaitTransition';
+import { YStack } from 'tamagui';
 
 interface IProps {
   navigation: NativeStackNavigationProp<any>;
@@ -45,7 +45,7 @@ export default function CommentChainScreen({
   );
 
   return (
-    <VStack flex={1} backgroundColor="$bg">
+    <YStack flex={1} backgroundColor="$bg">
       <FlatList<ICommentInfo>
         renderItem={renderItem}
         data={commentsToShow}
@@ -60,6 +60,6 @@ export default function CommentChainScreen({
         // @ts-expect-error - This is valid
         ref={flashListRef}
       />
-    </VStack>
+    </YStack>
   );
 }
diff --git a/src/components/Common/Button/AnimatedIconButton.tsx b/src/components/Common/Button/AnimatedIconButton.tsx
@@ -61,7 +61,7 @@ function AnimatedIconButton({
       onPress={onButtonPress}
     >
       <Animated.View style={[scaleStyle]}>
-        <View backgroundColor={backgroundColor} borderRadius={3} padding={4}>
+        <View backgroundColor={backgroundColor} borderRadius={3} p={4}>
           <Icon />
         </View>
       </Animated.View>