Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix up dark mode for main lists

Browse Source 
Summary: Changelog: [Internal] Fix up basic styling of dark mode for examples. Individual examples still may be broken and will be fixed up individually

Reviewed By: yungsters

Differential Revision: D31710790

fbshipit-source-id: 6ca4fb8a6238f38ff484ec91518057b243ba1d7b
This commit is contained in:
Luna Wei
2021-10-22 16:07:41 -07:00
committed by Facebook GitHub Bot
parent 4b25a0aaa0
commit ebe5417c7a
11 changed files with 71 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/rn-tester/js/RNTesterAppShared.js
+4 -1
View File
@@ -176,7 +176,10 @@ const RNTesterApp = (): React.Node => {
onBack={activeModule ? handleBackPress : null}
documentationURL={activeModule?.documentationURL}
/>
<View style={styles.container}>
<View
style={StyleSheet.compose(styles.container, {
backgroundColor: theme.GroupedBackgroundColor,
})}>
{activeModule != null ? (
<RNTesterModuleContainer
module={activeModule}
packages/rn-tester/js/components/RNTPressableRow.js
+2 -3
View File
@@ -52,8 +52,8 @@ export default function RNTPressableRow({
styles.row,
typeof style === 'function' ? style(pressed) : style,
pressed
? styles.pressed
: {backgroundColor: theme.SystemBackgroundColor},
? {backgroundColor: theme.SecondarySystemFillColor}
: {backgroundColor: theme.SecondaryGroupedBackgroundColor},
]}
onPress={onPress}>
<View style={styles.topRowStyle}>
@@ -86,7 +86,6 @@ const styles = StyleSheet.create({
marginBottom: 5,
},
pressed: {
backgroundColor: 'rgb(242,242,242)',
elevation: 3,
},
topRowStyle: {
packages/rn-tester/js/components/RNTTestDetails.js
+5 -1
View File
@@ -9,7 +9,7 @@
*/
import * as React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {View, Text, StyleSheet, Button, Platform} from 'react-native';
import {type RNTesterTheme} from './RNTesterTheme';
function RNTTestDetails({
@@ -45,6 +45,10 @@ function RNTTestDetails({
<View
style={StyleSheet.compose(styles.container, {
borderColor: theme.SeparatorColor,
backgroundColor:
Platform.OS === 'ios'
? theme.SystemBackgroundColor
: theme.BackgroundColor,
})}>
<View style={styles.titleRow}>
<Text
packages/rn-tester/js/components/RNTTitleBar.js
+2 -1
View File
@@ -33,7 +33,8 @@ const HeaderIOS = ({
}) => {
return (
<SafeAreaView>
<View style={styles.header}>
<View
style={[styles.header, {backgroundColor: theme.SystemBackgroundColor}]}>
<View style={styles.headerCenter}>
<Text style={{...styles.title, ...{color: theme.LabelColor}}}>
{title}
packages/rn-tester/js/components/RNTesterBlock.js
+1 -1
View File
@@ -26,7 +26,7 @@ const RNTesterBlock = ({description, title, children}: Props): React.Node => {
[styles.container],
{
borderColor: theme.SeparatorColor,
backgroundColor: theme.SystemBackgroundColor,
backgroundColor: theme.SecondaryGroupedBackgroundColor,
},
]}>
<View style={[styles.titleContainer]}>
packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js
+25 -22
View File
@@ -10,30 +10,34 @@
import * as React from 'react';
import {View, Image, Text, StyleSheet} from 'react-native';
import {RNTesterThemeContext} from './RNTesterTheme';
export const RNTesterEmptyBookmarksState = (): React.Node => (
<View style={styles.emptyContainer}>
<View style={styles.emptyContainerInner}>
<Image
source={require('../assets/empty.png')}
resizeMode="contain"
style={styles.emptyImage}
/>
<View>
<Text style={styles.heading}>Bookmarks are empty</Text>
<Text style={styles.subheading}>
Please tap the{' '}
<Image
source={require('../assets/bookmark-outline-gray.png')}
resizeMode="contain"
style={styles.bookmarkIcon}
/>{' '}
icon to bookmark examples.
</Text>
export const RNTesterEmptyBookmarksState = (): React.Node => {
const theme = React.useContext(RNTesterThemeContext);
return (
<View
style={StyleSheet.compose(styles.emptyContainer, {
backgroundColor: theme.GroupedBackgroundColor,
})}>
<View style={styles.emptyContainerInner}>
<View>
<Text style={[styles.heading, {color: theme.LabelColor}]}>
Bookmarks are empty
</Text>
<Text style={[styles.subheading, {color: theme.SecondaryLabelColor}]}>
Please tap the{' '}
<Image
source={require('../assets/bookmark-outline-gray.png')}
resizeMode="contain"
style={styles.bookmarkIcon}
/>{' '}
icon to bookmark examples.
</Text>
</View>
</View>
</View>
</View>
);
);
};
const styles = StyleSheet.create({
emptyContainer: {
@@ -41,7 +45,6 @@ const styles = StyleSheet.create({
paddingHorizontal: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
emptyContainerInner: {
marginTop: -150,
packages/rn-tester/js/components/RNTesterExampleFilter.js
+7 -1
View File
@@ -16,6 +16,7 @@ const {
View,
ScrollView,
Image,
Platform,
} = require('react-native');
import {RNTesterThemeContext} from './RNTesterTheme';
@@ -108,7 +109,12 @@ class RNTesterExampleFilter<T> extends React.Component<Props<T>, State> {
<View
style={[
styles.searchRow,
{backgroundColor: theme.BackgroundColor},
{
backgroundColor:
Platform.OS === 'ios'
? theme.SystemBackgroundColor
: theme.BackgroundColor,
},
]}>
<View style={styles.textInputStyle}>
<Image
packages/rn-tester/js/components/RNTesterModuleContainer.js
+6 -1
View File
@@ -124,7 +124,12 @@ function Header(props: {
style={[
styles.headerContainer,
props.noBottomPadding === true ? styles.headerNoBottomPadding : null,
{backgroundColor: props.theme.BackgroundColor},
{
backgroundColor:
Platform.OS === 'ios'
? props.theme.SystemBackgroundColor
: props.theme.BackgroundColor,
},
]}>
<Text style={styles.headerDescription}>{props.description}</Text>
</View>
packages/rn-tester/js/components/RNTesterModuleList.js
+1 -37
View File
@@ -118,8 +118,6 @@ const renderSectionHeader = ({section}) => (
const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
({sections, toggleBookmark, handleModuleCardPress}) => {
const theme = React.useContext(RNTesterThemeContext);
const filter = ({example, filterRegex, category}) =>
filterRegex.test(example.module.title) &&
(!category || example.category === category) &&
@@ -139,11 +137,7 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
};
return (
<View
style={[
styles.listContainer,
{backgroundColor: theme.SecondaryGroupedBackgroundColor},
]}>
<View style={styles.listContainer}>
<RNTesterExampleFilter
testID="explorer_search"
page="components_page"
@@ -155,7 +149,6 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
sections={filteredSections}
extraData={filteredSections}
renderItem={renderListItem}
ItemSeparatorComponent={ItemSeparator}
keyboardShouldPersistTaps="handled"
automaticallyAdjustContentInsets={false}
keyboardDismissMode="on-drag"
@@ -169,32 +162,10 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
},
);
const ItemSeparator = ({highlighted}) => (
<RNTesterThemeContext.Consumer>
{theme => {
return (
<View
style={
highlighted
? [
styles.separatorHighlighted,
{backgroundColor: theme.OpaqueSeparatorColor},
]
: [styles.separator, {backgroundColor: theme.SeparatorColor}]
}
/>
);
}}
</RNTesterThemeContext.Consumer>
);
const styles = StyleSheet.create({
listContainer: {
flex: 1,
},
listItem: {
backgroundColor: Platform.select({ios: '#FFFFFF', android: '#F3F8FF'}),
},
sectionHeader: {
padding: 5,
fontWeight: '500',
@@ -209,13 +180,6 @@ const styles = StyleSheet.create({
overflow: 'hidden',
elevation: 5,
},
separator: {
height: Platform.select({ios: StyleSheet.hairlineWidth, android: 0}),
marginHorizontal: Platform.select({ios: 15, android: 0}),
},
separatorHighlighted: {
height: StyleSheet.hairlineWidth,
},
topRowStyle: {
flexDirection: 'row',
justifyContent: 'space-between',
packages/rn-tester/js/components/RNTesterTheme.js
+17
View File
@@ -17,17 +17,22 @@ export type RNTesterTheme = {
SecondaryLabelColor: ColorValue,
TertiaryLabelColor: ColorValue,
QuaternaryLabelColor: ColorValue,
PlaceholderTextColor: ColorValue,
SystemBackgroundColor: ColorValue,
SecondarySystemBackgroundColor: ColorValue,
TertiarySystemBackgroundColor: ColorValue,
GroupedBackgroundColor: ColorValue,
SecondaryGroupedBackgroundColor: ColorValue,
TertiaryGroupedBackgroundColor: ColorValue,
SystemFillColor: ColorValue,
SecondarySystemFillColor: ColorValue,
TertiarySystemFillColor: ColorValue,
QuaternarySystemFillColor: ColorValue,
SeparatorColor: ColorValue,
OpaqueSeparatorColor: ColorValue,
LinkColor: ColorValue,
@@ -44,19 +49,25 @@ export const RNTesterLightTheme = {
SecondaryLabelColor: '#3c3c4399',
TertiaryLabelColor: '#3c3c434c',
QuaternaryLabelColor: '#3c3c432d',
PlaceholderTextColor: '#3c3c434c',
SystemBackgroundColor: '#ffffffff',
SecondarySystemBackgroundColor: '#f2f2f7ff',
TertiarySystemBackgroundColor: '#ffffffff',
GroupedBackgroundColor: '#f2f2f7ff',
SecondaryGroupedBackgroundColor: '#ffffffff',
TertiaryGroupedBackgroundColor: '#f2f2f7ff',
SystemFillColor: '#78788033',
SecondarySystemFillColor: '#78788028',
TertiarySystemFillColor: '#7676801e',
QuaternarySystemFillColor: '#74748014',
SeparatorColor: '#3c3c4349',
OpaqueSeparatorColor: '#c6c6c8ff',
LinkColor: '#007affff',
SystemRedColor: '#ff3b30ff',
SystemGreenColor: '#34c759ff',
@@ -70,19 +81,25 @@ export const RNTesterDarkTheme = {
SecondaryLabelColor: '#ebebf599',
TertiaryLabelColor: '#ebebf54c',
QuaternaryLabelColor: '#ebebf528',
PlaceholderTextColor: '#ebebf54c',
SystemBackgroundColor: '#000000ff',
SecondarySystemBackgroundColor: '#1c1c1eff',
TertiarySystemBackgroundColor: '#2c2c2eff',
GroupedBackgroundColor: '#000000ff',
SecondaryGroupedBackgroundColor: '#1c1c1eff',
TertiaryGroupedBackgroundColor: '#2c2c2eff',
SystemFillColor: '#7878805b',
SecondarySystemFillColor: '#78788051',
TertiarySystemFillColor: '#7676803d',
QuaternarySystemFillColor: '#7676802d',
SeparatorColor: '#54545899',
OpaqueSeparatorColor: '#38383aff',
LinkColor: '#0984ffff',
SystemRedColor: '#ff375fff',
SystemGreenColor: '#30d158ff',
packages/rn-tester/js/components/RNTesterTitle.js
+1 -1
View File
@@ -24,7 +24,7 @@ class RNTesterTitle extends React.Component<$FlowFixMeProps> {
styles.container,
{
borderColor: theme.SeparatorColor,
backgroundColor: theme.SystemBackgroundColor,
backgroundColor: theme.TertiaryGroupedBackgroundColor,
},
]}>
<Text style={[styles.text, {color: theme.LabelColor}]}>