Fix small dark mode issues
This commit is contained in:
@@ -16,7 +16,7 @@ const Container = styled.TouchableOpacity`
|
|||||||
|
|
||||||
const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) => {
|
const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) => {
|
||||||
return (
|
return (
|
||||||
<Container {...props} style={colors.borderColor}>
|
<Container {...props} style={colors.border}>
|
||||||
<Text style={{ color: THEME_COLOR, fontSize: 16 }}>{children}</Text>
|
<Text style={{ color: THEME_COLOR, fontSize: 16 }}>{children}</Text>
|
||||||
<ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill={THEME_COLOR} />
|
<ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill={THEME_COLOR} />
|
||||||
</Container>
|
</Container>
|
||||||
|
|||||||
@@ -43,6 +43,7 @@ const SectionContainer = styled.View`
|
|||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
padding: 0 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SectionText = styled.Text`
|
const SectionText = styled.Text`
|
||||||
@@ -50,12 +51,14 @@ const SectionText = styled.Text`
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const sectionStyles = { ...colors.view, ...colors.border };
|
||||||
|
|
||||||
class SectionHeading extends PureComponent<{ label: string }> {
|
class SectionHeading extends PureComponent<{ label: string }> {
|
||||||
render() {
|
render() {
|
||||||
const { label } = this.props;
|
const { label } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SectionContainer style={colors.view}>
|
<SectionContainer style={sectionStyles}>
|
||||||
<SectionText style={colors.text}>{label}</SectionText>
|
<SectionText style={colors.text}>{label}</SectionText>
|
||||||
</SectionContainer>
|
</SectionContainer>
|
||||||
);
|
);
|
||||||
@@ -152,7 +155,7 @@ const Albums: React.FC = () => {
|
|||||||
const nextItem = section.data[index + 1];
|
const nextItem = section.data[index + 1];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={{ flexDirection: 'row' }} key={item}>
|
<View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item}>
|
||||||
<GeneratedAlbumItem
|
<GeneratedAlbumItem
|
||||||
id={item}
|
id={item}
|
||||||
imageUrl={getImage(item as string)}
|
imageUrl={getImage(item as string)}
|
||||||
@@ -183,19 +186,17 @@ const Albums: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SafeAreaView>
|
<SafeAreaView>
|
||||||
<ListContainer>
|
<AlphabetScroller onSelect={selectLetter} />
|
||||||
<AlphabetScroller onSelect={selectLetter} />
|
<SectionList
|
||||||
<SectionList
|
sections={sections}
|
||||||
sections={sections}
|
refreshing={isLoading}
|
||||||
refreshing={isLoading}
|
onRefresh={retrieveData}
|
||||||
onRefresh={retrieveData}
|
getItemLayout={getItemLayout}
|
||||||
getItemLayout={getItemLayout}
|
ref={listRef}
|
||||||
ref={listRef}
|
keyExtractor={(item, index) => `${item}_${index}`}
|
||||||
keyExtractor={(item, index) => `${item}_${index}`}
|
renderSectionHeader={generateSection}
|
||||||
renderSectionHeader={generateSection}
|
renderItem={generateItem}
|
||||||
renderItem={generateItem}
|
/>
|
||||||
/>
|
|
||||||
</ListContainer>
|
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user