From 80f7e4bd7adb6d684ab2f99583cfe1173df8a30a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diogo=20Silv=C3=A9rio?= <dblsilverio@gmail.com>
Date: Wed, 31 Jan 2018 23:29:50 -0200
Subject: [PATCH] FEATURE: Scores layout

Designing scores template. *Not functional yet
---
 components/flashcards/Scores.js | 75 ++++++++++++++++++++++++++++++---
 1 file changed, 69 insertions(+), 6 deletions(-)

diff --git a/components/flashcards/Scores.js b/components/flashcards/Scores.js
index 091c053..eb5893a 100644
--- a/components/flashcards/Scores.js
+++ b/components/flashcards/Scores.js
@@ -1,15 +1,78 @@
 import React, { Component } from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, ScrollView, StyleSheet } from 'react-native';
+
+import { getScores } from '../../services';
+
+import { COLOR_B_1 } from '../../utils/colors';
 
 export default class Scores extends Component {
 
+    async componentDidMount() {
+        const scores = await getScores();
+        // console.log(scores);
+    }
+
     render() {
         return (
-            <View>
-                <Text>Scores</Text>
-            </View>
+            <ScrollView style={styles.container}>
+
+                <View style={styles.match}>
+                    <View style={styles.resultContainer}>
+                        <Text style={styles.resultText}>W</Text>
+                    </View>
+                    <View style={styles.statusContainer}>
+                        <Text style={styles.statusText}>Deck 'A' @ 10/20/2017 19:22:40</Text>
+                    </View>
+                </View>
+                <View style={styles.match}>
+                    <View style={styles.resultContainerL}>
+                        <Text style={styles.resultText}>L</Text>
+                    </View>
+                    <View style={styles.statusContainer}>
+                        <Text style={styles.statusText}>Deck 'A' @ 10/20/2017 19:22:40</Text>
+                    </View>
+                </View>
+
+            </ScrollView>
         );
     }
+}
 
-
-}
\ No newline at end of file
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    match: {
+        flex: 1,
+        flexDirection: 'row',
+        height: 64,
+        borderBottomWidth: 1,
+        borderBottomColor: COLOR_B_1
+    },
+    resultContainer: {
+        flex: 1,
+        backgroundColor: 'green',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    resultContainerL: {
+        flex: 1,
+        backgroundColor: 'red',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    resultText: {
+        color: 'white',
+        fontWeight: 'bold',
+        fontSize: 30
+    },
+    statusContainer: {
+        flex: 4,
+        alignItems: 'flex-start',
+        justifyContent: 'center',
+        paddingLeft: 5
+    },
+    statusText: {
+        fontSize: 17
+    }
+});
\ No newline at end of file