LUN-132: fix shadow and alignment

digitalfabrik · Jun 7, 2022 · 5d1959c · 5d1959c
1 parent 09b44c8
commit 5d1959c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/components/FavoriteButton.tsx b/src/components/FavoriteButton.tsx
@@ -9,11 +9,6 @@ import useLoadAsync from '../hooks/useLoadAsync'
 import AsyncStorage from '../services/AsyncStorage'
 import { reportError } from '../services/sentry'
 
-const Container = styled.View`
-  padding: ${props => `${props.theme.spacings.xs} 0  ${props.theme.spacings.xs} ${props.theme.spacings.sm}`};
-  align-self: center;
-`
-
 const Icon = styled(StarCircleIconGreyFilled)`
   min-width: ${wp('9%')}px;
   min-height: ${wp('9%')}px;
@@ -25,6 +20,7 @@ const IconOutline = styled(StarCircleIconGrey)`
 const Button = styled.TouchableOpacity`
   justify-content: center;
   align-items: center;
+  shadow-color: ${props => props.theme.colors.shadow};
   shadow-radius: 5px;
   shadow-offset: 1px 1px;
   shadow-opacity: 0.5;
@@ -57,11 +53,9 @@ const FavoriteButton = ({ document, onFavoritesChanged }: Props): ReactElement |
   }
 
   return (
-    <Container>
-      <Button testID={isFavorite ? 'remove' : 'add'} onPress={onPress}>
-        {isFavorite ? <Icon /> : <IconOutline />}
-      </Button>
-    </Container>
+    <Button testID={isFavorite ? 'remove' : 'add'} onPress={onPress}>
+      {isFavorite ? <Icon /> : <IconOutline />}
+    </Button>
   )
 }
 

diff --git a/src/components/VocabularyListItem.tsx b/src/components/VocabularyListItem.tsx
@@ -30,6 +30,11 @@ const RightChildrenContainer = styled.View`
   justify-content: space-between;
 `
 
+const FavButtonContainer = styled.View`
+  padding: ${props => `0 ${props.theme.spacings.xs} 0 ${props.theme.spacings.sm}`};
+  align-self: center;
+`
+
 interface VocabularyListItemProps {
   document: Document
   onPress: () => void
@@ -54,7 +59,9 @@ const VocabularyListItem = ({ document, onPress, onFavoritesChanged }: Vocabular
       rightChildren={
         <RightChildrenContainer>
           <AudioPlayer document={document} disabled={false} />
-          <FavoriteButton document={document} onFavoritesChanged={onFavoritesChanged} />
+          <FavButtonContainer>
+            <FavoriteButton document={document} onFavoritesChanged={onFavoritesChanged} />
+          </FavButtonContainer>
         </RightChildrenContainer>
       }
     />