Improved group selection button

src/components/Custom/AnimatedBottomBar.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {StyleSheet, View} from "react-native";
-import {Button, IconButton, Surface, withTheme} from "react-native-paper";
+import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
 import AutoHideComponent from "./AutoHideComponent";
 
 type Props = {
@@ -85,13 +85,24 @@ class AnimatedBottomBar extends React.Component<Props, State> {
                             style={{marginLeft: 5}}
                             onPress={() => this.props.onPress('today', undefined)}/>
                     </View>
-                        <Button
+                    <View style={{
-                            icon="book-variant"
+                        position: "absolute",
-                            onPress={() => this.props.navigation.navigate('group-select')}
+                        left: 0,
-                            style={{maxWidth: '40%'}}
+                        right: 0,
-                        >
+                        alignItems: "center",
-                            {this.props.currentGroup.replace(/_/g, " ")}
+                        width: '100%',
-                        </Button>
+                        height: '100%'
+                    }}>
+                    <FAB
+                        style={{
+                            position: 'absolute',
+                            alignSelf: 'center',
+                            top: -10,
+                        }}
+                        icon="account-clock"
+                        onPress={() => this.props.navigation.navigate('group-select')}
+                    />
+                    </View>
                     <View style={{flexDirection: 'row'}}>
                         <IconButton
                             icon="chevron-left"
@@ -117,13 +128,12 @@ const styles = StyleSheet.create({
         width: '90%',
     },
     surface: {
+        position: 'relative',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         borderRadius: 50,
         elevation: 2,
-        padding: 10,
-        paddingHorizontal: 20,
     }
 });