metamask-mobile/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.styles.ts at 01e1b361417320cbe6e242f2a3d78bebd8cf078f · MetaMask/metamask-mobile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import { StyleSheet } from 'react-native';
import type { Theme } from '../../../../../util/theme/models';

/**
 * Enterprise-grade layout styles with clear separation of concerns
 * Architecture: Fixed Header + Flex Content + Fixed Actions Footer
 */
export const createStyles = ({ theme }: { theme: Theme }) =>
  StyleSheet.create({
    // Main container - fills entire screen
    mainContainer: {
      flex: 1,
      backgroundColor: theme.colors.background.default,
    },

    // Scrollable content container - takes remaining space
    scrollableContentContainer: {
      flex: 1,
    },

    // Main content scroll view
    mainContentScrollView: {
      flex: 1,
    },

    // Content padding for proper spacing
    scrollViewContent: {
      paddingBottom: 16, // Consistent bottom padding
    },

    // Keeps the fullscreen button fixed while the price row shrinks
    marketSummaryFullscreenButton: {
      flexShrink: 0,
    },

    // Container for error state
    container: {
      flex: 1,
      backgroundColor: theme.colors.background.default,
    },
    section: {
      paddingHorizontal: 16,
    },
    chromeBlock: {
      paddingVertical: 16,
      paddingHorizontal: 16,
    },
    positionsOrdersContainer: {
      paddingHorizontal: 16,
    },
    chartSection: {
      paddingTop: 0,
      marginTop: 16,
      position: 'relative',
    },
    tabsSection: {
      paddingVertical: 8,
      // No horizontal padding - TabsList provides its own
    },
    // Fixed actions footer - positioned at bottom of screen
    actionsFooter: {
      backgroundColor: theme.colors.background.default,
      borderTopWidth: 1,
      borderTopColor: theme.colors.border.muted,
      paddingHorizontal: 16,
      paddingTop: 16,
      paddingBottom: 26,
    },
    // Action buttons container
    actionsContainer: {
      flexDirection: 'row',
      gap: 12,
    },
    // Single action container (for add funds)
    singleActionContainer: {
      alignItems: 'center',
      gap: 12,
    },
    actionButtonWrapper: {
      flex: 1,
    },
    errorContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 24,
    },
    riskDisclaimer: {
      textAlign: 'left',
      lineHeight: 14,
      paddingTop: 8,
    },
  });