diff --git a/components/flashcards/DeckDetails.js b/components/flashcards/DeckDetails.js index acd064f..fa0e47b 100644 --- a/components/flashcards/DeckDetails.js +++ b/components/flashcards/DeckDetails.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import DifficultyMeter from '../ui/DifficultyMeter'; -import { COLOR_B_4, COLOR_A_1, COLOR_B_5 } from '../../utils/colors'; +import { COLOR_B_4, COLOR_A_1, COLOR_B_5, COLOR_FAILURE } from '../../utils/colors'; class DeckDetails extends Component { @@ -21,7 +21,7 @@ class DeckDetails extends Component { * Child navigate.goBack() does not re-render state. * https://github.com/react-navigation/react-navigation/issues/922 */ - refresher(){ + refresher() { this.setState({}); } @@ -48,14 +48,27 @@ class DeckDetails extends Component { {deck.name} {deck.cards.length} Card(s) + {deck.description} - this.props.navigation.navigate('AddCard', { deckKey: deck.name, refresher: this.refresher.bind(this) })}> - Add Card - - - Start Quiz - + + this.props.navigation.navigate('AddCard', { deckKey: deck.name, refresher: this.refresher.bind(this) })}> + Add Card + + + List Cards + + + + + Start Quiz + + + + + Delete Deck + + ); @@ -76,19 +89,26 @@ const styles = StyleSheet.create({ justifyContent: 'center' }, subContainerBtn: { + flex: 1, + alignItems: 'flex-start' + }, + subSubContainerBtn: { flex: 1, flexDirection: 'row', - alignItems: 'flex-start', - alignContent: 'center' }, btn: { flex: 1, flexDirection: 'row', backgroundColor: COLOR_B_4, borderRadius: 2, - padding: 4, - margin: 10, - height: 64 + margin: 2 + }, + btnAlert: { + flex: 1, + flexDirection: 'row', + backgroundColor: COLOR_FAILURE, + borderRadius: 2, + margin: 2 }, btnText: { flex: 1, @@ -102,6 +122,10 @@ const styles = StyleSheet.create({ }, cardText: { fontSize: 20 + }, + description: { + fontSize: 25, + fontStyle: 'italic' } });