Merge pull request #339 from cultuurnet/bugfix/redeemed-rewards-and-h…

…istory-filter Styling fix of family filter component
cultuurnet · Dec 7, 2023 · b331a8e · b331a8e
2 parents 7f4e07c + d710545
commit b331a8e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/src/_components/family/familyFilter/FamilyFilter.tsx b/src/_components/family/familyFilter/FamilyFilter.tsx
@@ -3,7 +3,6 @@ import { FlatList } from 'react-native';
 
 import { useGetFamilyMembers } from '../../../onboarding/family/_queries';
 import { TFamilyMember, TPassHolder } from '../../../profile/_models';
-import Typography from '../../typography/Typography';
 import * as Styled from './style';
 
 type TProps = {
@@ -49,13 +48,13 @@ export const FamilyFilter = ({ selectedPassHolder, setSelectedPassHolder }: TPro
             isSelected={familyMember.passholder.id === selectedPassHolder.id}
             onPress={() => handleSelectPassHolder(familyMember.passholder, index)}
           >
-            <Typography
+            <Styled.FilterLabel
               color={familyMember.passholder.id === selectedPassHolder.id ? 'neutral.0' : 'primary.100'}
               fontStyle="bold"
               size="small"
             >
               {familyMember.passholder.firstName}
-            </Typography>
+            </Styled.FilterLabel>
           </Styled.FilterItem>
         )}
         showsHorizontalScrollIndicator={false}

diff --git a/src/_components/family/familyFilter/style.ts b/src/_components/family/familyFilter/style.ts
@@ -2,12 +2,13 @@ import styled from 'styled-components/native';
 
 import Icon from '../../icon/Icon';
 import TouchableRipple from '../../touchableRipple/TouchableRipple';
+import { Typography } from '../../typography/style';
 
 export const Container = styled.View`
   flex-direction: row;
   align-items: center;
   background-color: ${({ theme }) => theme.palette.primary[700]};
-  padding-vertical: 8px;
+  padding-vertical: 9px;
 `;
 
 export const FilterPrevButton = styled(Icon)`
@@ -27,6 +28,10 @@ export const FilterItem = styled(TouchableRipple)<{ isSelected: boolean }>`
   border-radius: 20px;
 `;
 
+export const FilterLabel = styled(Typography)`
+  line-height: 21px;
+`;
+
 export const Separator = styled.View`
   width: 8px;
 `;
diff --git a/src/history/History.tsx b/src/history/History.tsx
@@ -45,7 +45,7 @@ const History: FC = () => {
       <Styled.ListView>
         <FlashList
           ListEmptyComponent={<Styled.NoContentText align="center">{t('PROFILE.HISTORY.EMPTY')}</Styled.NoContentText>}
-          contentContainerStyle={{ paddingBottom: 105, paddingTop: 20 }}
+          contentContainerStyle={{ paddingBottom: 105, paddingTop: 24 }}
           data={members}
           estimatedItemSize={Styled.HISTORY_ITEM_HEIGHT}
           onEndReached={fetchNextPage}

diff --git a/src/redeemedRewards/RedeemedRewards.tsx b/src/redeemedRewards/RedeemedRewards.tsx
@@ -61,7 +61,7 @@ export const RedeemedRewards = ({ navigation }: TProps) => {
             </Styled.FooterLoadingContainer>
           )
         }
-        contentContainerStyle={{ paddingBottom: 105 }}
+        contentContainerStyle={{ paddingBottom: 105, paddingTop: 24 }}
         data={members}
         estimatedItemSize={MIMIMAL_REWARD_HEIGHT}
         keyExtractor={item => item.id}