refactor(ui): modernize components with flat design and UX refinements

- Redesign chat screen header with improved layout and panel styling
- Update emoji panel tab bar from emoji to icon-based navigation
- Simplify trade detail view with inline content attributes
- Add masonry layout support to market view grid
- Refactor privacy settings from card-based to list-based dropdown UI
- Improve comment item actions layout and styling
- Update trade creation flow with buy/sell specific text
- Adjust padding, gaps, and font sizes across multiple components
- Clean up unused code and imports

src/components/business/TradeCard/TradeCard.tsx

@@ -41,6 +41,7 @@ function createTradeCardStyles(colors: AppColors) {
       position: 'relative',
       aspectRatio: 1,
       backgroundColor: colors.background.default,
+      minHeight: 140,
     },
     listImageContainer: {
       width: 120,
@@ -104,7 +105,9 @@ function createTradeCardStyles(colors: AppColors) {
       fontWeight: '600',
     },
     gridContent: {
-      padding: spacing.sm,
+      paddingHorizontal: spacing.sm,
+      paddingTop: spacing.xs,
+      paddingBottom: spacing.sm,
     },
     titleRow: {
       flexDirection: 'row',
@@ -155,7 +158,7 @@ function createTradeCardStyles(colors: AppColors) {
       flexDirection: 'row',
       flexWrap: 'wrap',
       gap: 4,
-      marginTop: spacing.xs,
+      marginTop: 2,
     },
     tag: {
       paddingHorizontal: 5,
@@ -191,7 +194,7 @@ function createTradeCardStyles(colors: AppColors) {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      marginTop: spacing.sm,
+      marginTop: spacing.xs,
     },
     authorRow: {
       flexDirection: 'row',
@@ -354,6 +357,9 @@ const TradeCardBase: React.FC<TradeCardProps> = ({ item, variant = 'list', onPre
     );
   }
 
+  // grid variant is used in masonry layout; list variant below is unused but kept for compatibility
+
+
   return (
     <TouchableOpacity
       style={styles.listCard}