Fix small dark mode issues

This commit is contained in:
Lei Nelissen
2020-07-26 17:18:15 +02:00
parent 57b79bf4e2
commit 86a4d11f67
2 changed files with 17 additions and 16 deletions

View File

@@ -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>

View File

@@ -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>
); );
}; };