Skip to content

Commit db91e2b

Browse files
antonisclaude
antonis
and
claude
authored
refactor(core): Extract playground modal styles to separate file (#5927)
Move StyleSheet definitions from modal.tsx into modal.styles.ts to bring the file under the max-lines limit (427 → 287 lines) and remove the oxlint-disable for max-lines. Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 849d593 commit db91e2b

File tree

2 files changed

+143
-142
lines changed

2 files changed

+143
-142
lines changed

‎packages/core/src/js/playground/modal.styles.ts‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { StyleSheet } from 'react-native';
2+
3+
export const defaultDarkStyles = StyleSheet.create({
4+
welcomeText: { color: 'rgb(246, 245, 250)', fontSize: 24, fontWeight: 'bold' },
5+
background: {
6+
flex: 1,
7+
backgroundColor: 'rgb(26, 20, 31)',
8+
width: '100%',
9+
minHeight: '100%',
10+
alignItems: 'center', // Center content horizontally
11+
justifyContent: 'center', // Center content vertically
12+
},
13+
container: {
14+
flex: 1,
15+
flexDirection: 'column',
16+
padding: 12,
17+
marginTop: 20,
18+
width: '100%',
19+
alignItems: 'center', // Center image and button container
20+
justifyContent: 'space-evenly', // Center image and button container
21+
},
22+
buttonContainer: {
23+
flexDirection: 'row', // Arrange buttons horizontally
24+
marginTop: 20, // Add some space above the buttons
25+
},
26+
listContainer: {
27+
backgroundColor: 'rgb(39, 36, 51)',
28+
width: '100%',
29+
flexDirection: 'column',
30+
marginTop: 20, // Add some space above the buttons
31+
borderColor: 'rgb(7, 5, 15)',
32+
borderWidth: 1,
33+
borderRadius: 8,
34+
},
35+
rowTitle: {
36+
color: 'rgb(246, 245, 250)',
37+
fontSize: 14,
38+
fontWeight: 'bold',
39+
textAlign: 'left',
40+
fontFamily: 'Menlo',
41+
},
42+
rowContainer: {
43+
overflow: 'hidden',
44+
flexDirection: 'row',
45+
justifyContent: 'space-between', // Space between buttons
46+
paddingTop: 16,
47+
paddingBottom: 10,
48+
paddingHorizontal: 10,
49+
borderColor: 'rgb(7, 5, 15)',
50+
borderBottomWidth: 1,
51+
},
52+
lastRowContainer: {
53+
borderBottomWidth: 0, // Remove border for the last row
54+
},
55+
buttonCommon: {
56+
borderRadius: 8,
57+
},
58+
buttonBottomLayer: {
59+
backgroundColor: 'rgb(7, 5, 15)',
60+
},
61+
buttonMainContainer: {
62+
paddingVertical: 8,
63+
paddingHorizontal: 13,
64+
backgroundColor: 'rgb(117, 83, 255)',
65+
transform: [{ translateY: -4 }],
66+
borderWidth: 1,
67+
borderColor: 'rgb(7, 5, 15)',
68+
},
69+
buttonSecondaryContainer: {
70+
backgroundColor: 'rgb(39, 36, 51)',
71+
},
72+
buttonSecondaryBottomLayer: {},
73+
buttonSecondaryText: {},
74+
buttonMainContainerPressed: {
75+
transform: [{ translateY: 0 }],
76+
},
77+
buttonText: {
78+
color: 'rgb(246, 245, 250)',
79+
fontSize: 16,
80+
fontWeight: 'bold',
81+
textAlign: 'center',
82+
},
83+
buttonDisabledText: {
84+
color: 'rgb(146, 130, 170)',
85+
},
86+
buttonDisabledContainer: {
87+
transform: [{ translateY: -2 }],
88+
backgroundColor: 'rgb(39, 36, 51)',
89+
},
90+
});
91+
92+
export const lightStyles: typeof defaultDarkStyles = StyleSheet.create({
93+
...defaultDarkStyles,
94+
welcomeText: {
95+
...defaultDarkStyles.welcomeText,
96+
color: 'rgb(24, 20, 35)',
97+
},
98+
background: {
99+
...defaultDarkStyles.background,
100+
backgroundColor: 'rgb(251, 250, 255)',
101+
},
102+
buttonMainContainer: {
103+
...defaultDarkStyles.buttonMainContainer,
104+
backgroundColor: 'rgb(117, 83, 255)',
105+
borderColor: 'rgb(85, 61, 184)',
106+
},
107+
buttonBottomLayer: {
108+
backgroundColor: 'rgb(85, 61, 184)',
109+
},
110+
buttonSecondaryContainer: {
111+
backgroundColor: 'rgb(255, 255, 255)',
112+
borderColor: 'rgb(218, 215, 229)',
113+
},
114+
buttonSecondaryBottomLayer: {
115+
backgroundColor: 'rgb(218, 215, 229)',
116+
},
117+
buttonText: {
118+
...defaultDarkStyles.buttonText,
119+
},
120+
buttonSecondaryText: {
121+
...defaultDarkStyles.buttonText,
122+
color: 'rgb(24, 20, 35)',
123+
},
124+
rowTitle: {
125+
...defaultDarkStyles.rowTitle,
126+
color: 'rgb(24, 20, 35)',
127+
},
128+
rowContainer: {
129+
...defaultDarkStyles.rowContainer,
130+
borderColor: 'rgb(218, 215, 229)',
131+
},
132+
listContainer: {
133+
...defaultDarkStyles.listContainer,
134+
borderColor: 'rgb(218, 215, 229)',
135+
backgroundColor: 'rgb(255, 255, 255)',
136+
},
137+
buttonDisabledContainer: {
138+
...defaultDarkStyles.buttonDisabledContainer,
139+
backgroundColor: 'rgb(238, 235, 249)',
140+
},
141+
});

‎packages/core/src/js/playground/modal.tsx‎

Lines changed: 2 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
/* oxlint-disable eslint(max-lines) */
21
import { debug } from '@sentry/core';
32
import * as React from 'react';
4-
import { Animated, Image, Modal, Platform, Pressable, StyleSheet, Text, useColorScheme, View } from 'react-native';
3+
import { Animated, Image, Modal, Platform, Pressable, Text, useColorScheme, View } from 'react-native';
54

65
import { getDevServer } from '../integrations/debugsymbolicatorutils';
76
import { isExpo, isExpoGo, isWeb } from '../utils/environment';
87
import { bug as bugAnimation, hi as hiAnimation, thumbsup as thumbsupAnimation } from './animations';
98
import { nativeCrashExample, tryCatchExample, uncaughtErrorExample } from './examples';
109
import { bug as bugImage, hi as hiImage, thumbsup as thumbsupImage } from './images';
10+
import { defaultDarkStyles, lightStyles } from './modal.styles';
1111

1212
/**
1313
* Wrapper to add Sentry Playground to your application
@@ -270,146 +270,6 @@ const Button = ({
270270
);
271271
};
272272

273-
const defaultDarkStyles = StyleSheet.create({
274-
welcomeText: { color: 'rgb(246, 245, 250)', fontSize: 24, fontWeight: 'bold' },
275-
background: {
276-
flex: 1,
277-
backgroundColor: 'rgb(26, 20, 31)',
278-
width: '100%',
279-
minHeight: '100%',
280-
alignItems: 'center', // Center content horizontally
281-
justifyContent: 'center', // Center content vertically
282-
},
283-
container: {
284-
flex: 1,
285-
flexDirection: 'column',
286-
padding: 12,
287-
marginTop: 20,
288-
width: '100%',
289-
alignItems: 'center', // Center image and button container
290-
justifyContent: 'space-evenly', // Center image and button container
291-
},
292-
buttonContainer: {
293-
flexDirection: 'row', // Arrange buttons horizontally
294-
marginTop: 20, // Add some space above the buttons
295-
},
296-
listContainer: {
297-
backgroundColor: 'rgb(39, 36, 51)',
298-
width: '100%',
299-
flexDirection: 'column',
300-
marginTop: 20, // Add some space above the buttons
301-
borderColor: 'rgb(7, 5, 15)',
302-
borderWidth: 1,
303-
borderRadius: 8,
304-
},
305-
rowTitle: {
306-
color: 'rgb(246, 245, 250)',
307-
fontSize: 14,
308-
fontWeight: 'bold',
309-
textAlign: 'left',
310-
fontFamily: 'Menlo',
311-
},
312-
rowContainer: {
313-
overflow: 'hidden',
314-
flexDirection: 'row',
315-
justifyContent: 'space-between', // Space between buttons
316-
paddingTop: 16,
317-
paddingBottom: 10,
318-
paddingHorizontal: 10,
319-
borderColor: 'rgb(7, 5, 15)',
320-
borderBottomWidth: 1,
321-
},
322-
lastRowContainer: {
323-
borderBottomWidth: 0, // Remove border for the last row
324-
},
325-
buttonCommon: {
326-
borderRadius: 8,
327-
},
328-
buttonBottomLayer: {
329-
backgroundColor: 'rgb(7, 5, 15)',
330-
},
331-
buttonMainContainer: {
332-
paddingVertical: 8,
333-
paddingHorizontal: 13,
334-
backgroundColor: 'rgb(117, 83, 255)',
335-
transform: [{ translateY: -4 }],
336-
borderWidth: 1,
337-
borderColor: 'rgb(7, 5, 15)',
338-
},
339-
buttonSecondaryContainer: {
340-
backgroundColor: 'rgb(39, 36, 51)',
341-
},
342-
buttonSecondaryBottomLayer: {},
343-
buttonSecondaryText: {},
344-
buttonMainContainerPressed: {
345-
transform: [{ translateY: 0 }],
346-
},
347-
buttonText: {
348-
color: 'rgb(246, 245, 250)',
349-
fontSize: 16,
350-
fontWeight: 'bold',
351-
textAlign: 'center',
352-
},
353-
buttonDisabledText: {
354-
color: 'rgb(146, 130, 170)',
355-
},
356-
buttonDisabledContainer: {
357-
transform: [{ translateY: -2 }],
358-
backgroundColor: 'rgb(39, 36, 51)',
359-
},
360-
});
361-
362-
const lightStyles: typeof defaultDarkStyles = StyleSheet.create({
363-
...defaultDarkStyles,
364-
welcomeText: {
365-
...defaultDarkStyles.welcomeText,
366-
color: 'rgb(24, 20, 35)',
367-
},
368-
background: {
369-
...defaultDarkStyles.background,
370-
backgroundColor: 'rgb(251, 250, 255)',
371-
},
372-
buttonMainContainer: {
373-
...defaultDarkStyles.buttonMainContainer,
374-
backgroundColor: 'rgb(117, 83, 255)',
375-
borderColor: 'rgb(85, 61, 184)',
376-
},
377-
buttonBottomLayer: {
378-
backgroundColor: 'rgb(85, 61, 184)',
379-
},
380-
buttonSecondaryContainer: {
381-
backgroundColor: 'rgb(255, 255, 255)',
382-
borderColor: 'rgb(218, 215, 229)',
383-
},
384-
buttonSecondaryBottomLayer: {
385-
backgroundColor: 'rgb(218, 215, 229)',
386-
},
387-
buttonText: {
388-
...defaultDarkStyles.buttonText,
389-
},
390-
buttonSecondaryText: {
391-
...defaultDarkStyles.buttonText,
392-
color: 'rgb(24, 20, 35)',
393-
},
394-
rowTitle: {
395-
...defaultDarkStyles.rowTitle,
396-
color: 'rgb(24, 20, 35)',
397-
},
398-
rowContainer: {
399-
...defaultDarkStyles.rowContainer,
400-
borderColor: 'rgb(218, 215, 229)',
401-
},
402-
listContainer: {
403-
...defaultDarkStyles.listContainer,
404-
borderColor: 'rgb(218, 215, 229)',
405-
backgroundColor: 'rgb(255, 255, 255)',
406-
},
407-
buttonDisabledContainer: {
408-
...defaultDarkStyles.buttonDisabledContainer,
409-
backgroundColor: 'rgb(238, 235, 249)',
410-
},
411-
});
412-
413273
function openURLInBrowser(url: string): void {
414274
const devServer = getDevServer();
415275
if (devServer?.url) {

0 commit comments

Comments
 (0)