Merge branch '21-ux-improvements' into 'master'

#21 Improved minHeight for dropdown and ux for movieDetail when not logged in

Closes #21

See merge request !20

components/MovieInfo.tsx

+import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import {
@@ -12,6 +13,7 @@ import { Button, Icon } from 'react-native-elements';
 import { AirbnbRating } from 'react-native-ratings';
 import { default as AwesomeIcon } from 'react-native-vector-icons/FontAwesome';
 import { useDispatch, useSelector } from 'react-redux';
+import Profile from '../screens/Profile';
 import { rateMovie } from '../store/ducks/auth/actions';
 import { clearMovie, fetchMovieById } from '../store/ducks/movies/actions';
 import { ApplicationState } from '../store/interface';
@@ -117,7 +119,8 @@ export default function MovieInfo({ movieID }: MovieInfoProps) {
   const dispatch = useDispatch();
 
   const data = useSelector(({ movies }: ApplicationState) => movies.byId);
-  const { ratings, token, loading, error } = useSelector((state: ApplicationState) => state.auth);
+  const { ratings, token, loading, error, loggedIn } = useSelector((state: ApplicationState) => state.auth);
+  const navigation = useNavigation();
 
   const [rateModalVisible, setRateModalVisible] = useState(false);
   const [awaitingRating, setAwaitingRating] = useState(false);
@@ -259,19 +262,20 @@ export default function MovieInfo({ movieID }: MovieInfoProps) {
               </View>
             </View>
 
-            <View style={{ width: 150, marginBottom: 10 }}>
-              <Button
+            <View style={{ maxWidth: 250, marginBottom: 10 }}>
+              {loggedIn ?  <Button
                 onPress={() => setRateModalVisible(true)}
                 title='  Give Rating'
                 disabled={(() => {
                   return ratings.find((rating) => rating.movie.id === movieID) ? true : false;
                 })()}
                 icon={<AwesomeIcon name='star-o' size={24} color='white' />}
-              />
+              /> : <Button title="Log in to rate this movie" onPress={() => navigation.navigate("Profile")}/> }
+             
             </View>
 
             <Text style={[styles.titleText, { flexGrow: 0 }]}>Plot</Text>
-            <Seperator marginVertical={10} width='75%' curved />
+            <Seperator marginVertical={10} width='75%' curved /> 
 
             <Text style={{ fontSize: 16, fontStyle: 'italic', textAlign: 'center' }}>
               {data.movie.plot}

components/common/SelectInput.tsx

@@ -43,7 +43,7 @@ function SelectInput<T extends string>(props: IProps<T>) {
       dropdownStyle={{
         backgroundColor: useThemeColor({}, 'component'),
       }}
-      rowStyle={{ borderColor: useThemeColor({}, 'border') }}
+      rowStyle={{minHeight: 40, borderColor: useThemeColor({}, 'border') }}
       rowTextStyle={[styles.text, { color: useThemeColor({}, 'inputText') }]}
       data={data}
       onSelect={(selected) => dispatchValue(selected)}