From 5d1959c834ec3665099e90f34c9e8b4d835ba956 Mon Sep 17 00:00:00 2001
From: Andy <fischer@integreat-app.de>
Date: Tue, 7 Jun 2022 16:59:18 +0200
Subject: [PATCH] LUN-132: fix shadow and alignment

---
 src/components/FavoriteButton.tsx     | 14 ++++----------
 src/components/VocabularyListItem.tsx |  9 ++++++++-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/FavoriteButton.tsx b/src/components/FavoriteButton.tsx
index 9dabfbbfc..e6e5779dd 100644
--- 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
index 03e8d0d1b..b2baf8aff 100644
--- 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>
       }
     />