Merge pull request #4320 from tloncorp/hm/modals-desktop

desktop: modal cleanup
tloncorp · Jan 9, 2025 · 2d5346f · 2d5346f
2 parents 439e905 + 52d6a75
commit 2d5346f
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 11 deletions.
diff --git a/packages/ui/src/components/ActionList/ListFrame.tsx b/packages/ui/src/components/ActionList/ListFrame.tsx
@@ -1,9 +1,8 @@
 import { BlurView } from 'expo-blur';
 import { ComponentProps, PropsWithChildren } from 'react';
-import { YStack, styled } from 'tamagui';
+import { XStack, YStack, styled } from 'tamagui';
 
 import useIsWindowNarrow from '../../hooks/useIsWindowNarrow';
-import { ListItemFrame } from '../ListItem';
 
 const ListFrame = styled(YStack, {
   overflow: 'hidden',
@@ -12,7 +11,7 @@ const ListFrame = styled(YStack, {
 
 const ListFrameComponent = (
   props: PropsWithChildren<
-    ComponentProps<typeof ListItemFrame> & ComponentProps<typeof BlurView>
+    ComponentProps<typeof XStack> & ComponentProps<typeof BlurView>
   >
 ) => {
   const { children, intensity, tint, ...rest } = props;

diff --git a/packages/ui/src/components/ActionList/index.tsx b/packages/ui/src/components/ActionList/index.tsx
@@ -1,10 +1,10 @@
 import { ComponentProps, PropsWithChildren } from 'react';
 import { styled, withStaticProperties } from 'tamagui';
 
-import { ListItem, ListItemFrame } from '../ListItem';
+import { ListItem } from '../ListItem';
 import ListFrame from './ListFrame';
 
-const ActionFrame = styled(ListItemFrame, {
+const ActionFrame = styled(ListItem, {
   borderRadius: 'unset',
   borderBottomWidth: 0.5,
   borderBottomColor: '$secondaryBorder',

diff --git a/packages/ui/src/components/ActionSheet.tsx b/packages/ui/src/components/ActionSheet.tsx
@@ -12,6 +12,7 @@ import { Modal, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   Dialog,
+  ScrollView,
   SheetProps,
   View,
   VisuallyHidden,
@@ -121,8 +122,10 @@ const ActionSheetComponent = ({
             maxWidth={800}
             minWidth={400}
             key="content"
+            maxHeight="100%"
+            marginVertical="$2xl"
           >
-            {children}
+            <ScrollView>{children}</ScrollView>
           </Dialog.Content>
         </Dialog.Portal>
 
@@ -355,6 +358,7 @@ const ActionSheetActionFrame = styled(ListItem, {
   borderRadius: 0,
   paddingHorizontal: '$2xl',
   paddingVertical: '$l',
+  alignItems: 'center',
   $gtSm: {
     paddingHorizontal: '$l',
     paddingVertical: '$m',
@@ -404,7 +408,7 @@ const ActionSheetActionDescription = styled(ListItem.Subtitle, {
   context: ActionSheetActionGroupContext,
   maxWidth: '100%',
   $gtSm: {
-    maxWidth: 200,
+    maxWidth: '100%',
   },
   variants: {
     accent: {

diff --git a/packages/ui/src/components/ChatOptionsSheet.tsx b/packages/ui/src/components/ChatOptionsSheet.tsx
@@ -549,7 +549,7 @@ function ChatOptionsSheetContent({
         {icon}
         <ActionSheet.MainContent>
           <ListItem.Title>{title}</ListItem.Title>
-          <ListItem.Subtitle $gtSm={{ maxWidth: 100 }}>
+          <ListItem.Subtitle $gtSm={{ maxWidth: '100%' }}>
             {subtitle}
           </ListItem.Subtitle>
         </ActionSheet.MainContent>

diff --git a/packages/ui/src/components/ListItem/GroupListItem.tsx b/packages/ui/src/components/ListItem/GroupListItem.tsx
@@ -1,3 +1,4 @@
+// sort-imports-ignore
 import type * as db from '@tloncorp/shared/db';
 import * as logic from '@tloncorp/shared/logic';
 import { View, isWeb } from 'tamagui';
@@ -8,8 +9,7 @@ import { Button } from '../Button';
 import { ContactName } from '../ContactNameV2';
 import { Icon } from '../Icon';
 import Pressable from '../Pressable';
-import type { ListItemProps } from './ListItem';
-import { ListItem } from './ListItem';
+import { ListItem, ListItemProps } from './ListItem';
 import { getGroupStatus, getPostTypeIcon } from './listItemUtils';
 
 export const GroupListItem = ({
@@ -99,7 +99,6 @@ export const GroupListItem = ({
       {isWeb && !isPending && (
         <View position="absolute" right="$-2xs" top="$2xl" zIndex={1}>
           <Button
-            onPress={handleLongPress}
             borderWidth="unset"
             paddingHorizontal={0}
             marginHorizontal="$-m"

diff --git a/packages/ui/src/components/ListItem/ListItem.tsx b/packages/ui/src/components/ListItem/ListItem.tsx
@@ -257,6 +257,9 @@ const ListItemEndContent = styled(YStack, {
   gap: '$2xs',
   justifyContent: 'center',
   alignItems: 'flex-end',
+  $gtSm: {
+    paddingTop: 0,
+  },
 });
 
 export type ListItem = typeof ListItemFrame;