feat(perps): new TPSL view design

app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx

@@ -580,6 +580,8 @@ const PerpsOrderViewContentBase: React.FC = () => {
       limitPrice: orderForm.limitPrice,
       initialTakeProfitPrice: orderForm.takeProfitPrice,
       initialStopLossPrice: orderForm.stopLossPrice,
+      amount: orderForm.amount,
+      szDecimals: marketData?.szDecimals,
       onConfirm: async (takeProfitPrice?: string, stopLossPrice?: string) => {
         // Use the same clearing approach as the "Off" button
         // If values are undefined or empty, ensure they're cleared properly
@@ -599,11 +601,13 @@ const PerpsOrderViewContentBase: React.FC = () => {
     orderForm.leverage,
     orderForm.takeProfitPrice,
     orderForm.stopLossPrice,
+    orderForm.amount,
     assetData.price,
     showToast,
     navigation,
     setTakeProfitPrice,
     setStopLossPrice,
+    marketData?.szDecimals,
   ]);
 
   const handleAmountPress = () => {

app/components/UI/Perps/Views/PerpsTPSLView/PerpsTPSLView.styles.ts

@@ -14,14 +14,22 @@ export const createStyles = (colors: Theme['colors']) =>
     header: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: 16,
+      justifyContent: 'center',
       paddingHorizontal: 16,
       paddingVertical: 16,
-      borderBottomWidth: 1,
-      borderBottomColor: colors.border.muted,
+      position: 'relative',
+    },
+    headerBackButton: {
+      position: 'absolute',
+      left: 16,
+      zIndex: 1,
+    },
+    headerTitleContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
     },
     footer: {
-      paddingHorizontal: 16,
       paddingBottom: 16,
     },
     priceInfoContainer: {
@@ -53,10 +61,8 @@ export const createStyles = (colors: Theme['colors']) =>
       marginBottom: 8,
     },
     inputContainer: {
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.muted,
       borderRadius: 8,
-      borderWidth: 1,
-      borderColor: colors.border.muted,
       paddingHorizontal: 16,
       paddingVertical: 12,
       flexDirection: 'row',
@@ -70,9 +76,11 @@ export const createStyles = (colors: Theme['colors']) =>
       marginLeft: 4,
     },
     inputContainerActive: {
+      borderWidth: 1,
       borderColor: colors.primary.default,
     },
     inputContainerError: {
+      borderWidth: 1,
       borderColor: colors.error.default,
     },
     input: {
@@ -81,38 +89,25 @@ export const createStyles = (colors: Theme['colors']) =>
       color: colors.text.default,
       paddingVertical: 0,
       textAlign: 'left',
-      marginRight: 8,
+      marginLeft: 8,
     },
 
     percentageRow: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
       marginBottom: 12,
       gap: 8,
     },
     percentageButton: {
       flex: 1,
       paddingVertical: 10,
       paddingHorizontal: 8,
-      backgroundColor: colors.background.pressed,
+      backgroundColor: colors.background.muted,
       borderRadius: 8,
       alignItems: 'center',
-      borderWidth: 1,
-      borderColor: colors.border.muted,
       minWidth: 50,
     },
     percentageButtonOff: {
-      backgroundColor: colors.background.pressed,
-      borderWidth: 1,
-      borderColor: colors.border.muted,
-    },
-    percentageButtonActiveTP: {
-      borderWidth: 1,
-      borderColor: colors.primary.default,
-    },
-    percentageButtonActiveSL: {
-      borderWidth: 1,
-      borderColor: colors.primary.default,
+      backgroundColor: colors.background.muted,
     },
     helperText: {
       marginTop: 4,
@@ -172,7 +167,6 @@ export const createStyles = (colors: Theme['colors']) =>
     },
     percentageButtonsContainer: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
       marginBottom: 12,
       gap: 8,
     },
@@ -203,4 +197,22 @@ export const createStyles = (colors: Theme['colors']) =>
       width: '100%',
       marginBottom: 8,
     },
+    expectedPnLText: {
+      marginTop: 8,
+      textAlign: 'right',
+    },
+    sectionTitleRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    footerButtonsRow: {
+      flexDirection: 'row',
+      gap: 12,
+      width: '100%',
+    },
+    footerButton: {
+      flex: 1,
+    },
   });