Improved dashboard badge borders

package.json

@@ -23,15 +23,15 @@
     "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/push-notification-ios": "^1.3.0",
-    "@react-native-community/slider": "^3.0.0",
+    "@react-native-community/slider": "^3.0.3",
-    "@react-navigation/bottom-tabs": "^5.7.0",
+    "@react-navigation/bottom-tabs": "^5.7.1",
     "@react-navigation/native": "^5.7.0",
     "@react-navigation/stack": "^5.7.0",
     "i18n-js": "^3.7.1",
     "react": "16.13.1",
-    "react-native": "0.63.0",
+    "react-native": "0.63.1",
     "react-native-animatable": "^1.3.3",
-    "react-native-app-intro-slider": "^4.0.0",
+    "react-native-app-intro-slider": "^4.0.4",
     "react-native-appearance": "^0.3.4",
     "react-native-autolink": "^3.0.0",
     "react-native-calendars": "^1.300.0",
@@ -43,11 +43,11 @@
     "react-native-linear-gradient": "^2.5.6",
     "react-native-localize": "^1.4.0",
     "react-native-modalize": "^2.0.4",
-    "react-native-paper": "^3.10.1",
+    "react-native-paper": "^4.0.1",
     "react-native-permissions": "^2.1.5",
     "react-native-push-notification": "^4.0.0",
     "react-native-reanimated": "^1.9.0",
-    "react-native-render-html": "^4.2.0",
+    "react-native-render-html": "^4.2.1",
     "react-native-safe-area-context": "0.7.3",
     "react-native-screens": "^2.9.0",
     "react-native-splash-screen": "^3.2.0",

src/components/Home/EventDashboardItem.js

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Avatar, Card, Text, withTheme} from 'react-native-paper';
+import {Avatar, Card, Text, TouchableRipple, withTheme} from 'react-native-paper';
-import {StyleSheet} from "react-native";
+import {StyleSheet, View} from "react-native";
 import i18n from "i18n-js";
 import type {CustomTheme} from "../../managers/ThemeManager";
 
@@ -47,9 +47,11 @@ class EventDashBoardItem extends React.Component<Props> {
         } else
             subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
         return (
-            <Card
+            <Card style={styles.card}>
-                style={styles.card}
+                <TouchableRipple
+                    style={{flex: 1}}
                     onPress={props.clickAction}>
+                    <View>
                         <Card.Title
                             title={i18n.t('screens.home.dashboard.todayEventsTitle')}
                             titleStyle={{color: textColor}}
@@ -65,6 +67,8 @@ class EventDashBoardItem extends React.Component<Props> {
                         <Card.Content>
                             {props.children}
                         </Card.Content>
+                    </View>
+                </TouchableRipple>
             </Card>
         );
     }

src/components/Home/FeedItem.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Button, Card, Text} from 'react-native-paper';
+import {Button, Card, Text, TouchableRipple} from 'react-native-paper';
 import {Image, View} from "react-native";
 import Autolink from "react-native-autolink";
 import i18n from "i18n-js";
@@ -75,8 +75,11 @@ class FeedItem extends React.Component<Props> {
                     margin: cardMargin,
                     height: cardHeight,
                 }}
-                onPress={this.onPress}
             >
+                <TouchableRipple
+                    style={{flex: 1}}
+                    onPress={this.onPress}>
+                    <View>
                         <Card.Title
                             title={this.props.title}
                             subtitle={this.props.subtitle}
@@ -114,6 +117,8 @@ class FeedItem extends React.Component<Props> {
                                 {i18n.t('screens.home.dashboard.seeMore')}
                             </Button>
                         </Card.Actions>
+                    </View>
+                </TouchableRipple>
             </Card>
         );
     }

src/components/Home/PreviewEventDashboardItem.js

@@ -1,9 +1,9 @@
 // @flow
 
 import * as React from 'react';
-import {StyleSheet} from "react-native";
+import {StyleSheet, View} from "react-native";
 import i18n from "i18n-js";
-import {Avatar, Button, Card} from 'react-native-paper';
+import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
 import {getFormattedEventTime, isDescriptionEmpty} from "../../utils/Planning";
 import CustomHTML from "../Overrides/CustomHTML";
 import type {CustomTheme} from "../../managers/ThemeManager";
@@ -36,9 +36,12 @@ class PreviewEventDashboardItem extends React.Component<Props> {
             return (
                 <Card
                     style={styles.card}
-                    onPress={props.clickAction}
                     elevation={3}
                 >
+                    <TouchableRipple
+                        style={{flex: 1}}
+                        onPress={props.clickAction}>
+                        <View>
                             {hasImage ?
                                 <Card.Title
                                     title={event.title}
@@ -61,6 +64,8 @@ class PreviewEventDashboardItem extends React.Component<Props> {
                                     {i18n.t("screens.home.dashboard.seeMore")}
                                 </Button>
                             </Card.Actions>
+                        </View>
+                    </TouchableRipple>
                 </Card>
             );
         } else

src/components/Home/SmallDashboardItem.js

@@ -65,8 +65,8 @@ class SmallDashboardItem extends React.Component<Props> {
                                         top: 0,
                                         right: 0,
                                         backgroundColor: props.theme.colors.primary,
-                                        borderColor: "#fff",
+                                        borderColor: props.theme.colors.background,
-                                        borderWidth: 1,
+                                        borderWidth: 2,
                                     }}>
                                     {props.badgeCount}
                                 </AnimatableBadge> : null

src/components/Lists/CardList/CardListItem.js

@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Caption, Card, Paragraph} from 'react-native-paper';
+import {Caption, Card, Paragraph, TouchableRipple} from 'react-native-paper';
+import {View} from "react-native";
 import type {cardItem} from "./CardList";
 
 type Props = {
@@ -28,8 +29,11 @@ export default class CardListItem extends React.Component<Props> {
                     marginLeft: 'auto',
                     marginRight: 'auto',
                 }}
-                onPress={item.onPress}
             >
+                <TouchableRipple
+                    style={{flex: 1}}
+                    onPress={item.onPress}>
+                    <View>
                         <Card.Cover
                             style={{height: 80}}
                             source={source}
@@ -38,6 +42,9 @@ export default class CardListItem extends React.Component<Props> {
                             <Paragraph>{item.title}</Paragraph>
                             <Caption>{item.subtitle}</Caption>
                         </Card.Content>
+                    </View>
+                </TouchableRipple>
+
             </Card>
         );
     }