COM-1466 - Fix Romain's review

CompaniTech · Sep 23, 2020 · d442314 · d442314
1 parent 8fff1ef
commit d442314
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/src/components/cards/SurveyScoreSelector.tsx b/src/components/cards/SurveyScoreSelector.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
 import { GREY, PINK } from '../../styles/colors';
 import { FIRA_SANS_REGULAR } from '../../styles/fonts';
-import { BORDER_WIDTH, ICON } from '../../styles/metrics';
+import { BORDER_WIDTH, ICON, PADDING } from '../../styles/metrics';
 
 interface SurveyScoreSelectorProps {
   onPressScore: (score: number) => void,
@@ -14,7 +14,7 @@ const SurveyScoreSelector = ({ onPressScore, selectedScore }: SurveyScoreSelecto
 
   const scoreItem = (score: number) => (
     <TouchableOpacity key={score.toString()} style={styles.buttonContainer} onPress={() => onPressScore(score)}
-      hitSlop={{ top: 20, bottom: 40, left: 20, right: 20 }}>
+      hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} activeOpacity={1}>
       <View style={styles.button}>
         <View style={ score === selectedScore ? styles.selectedCircle : styles.circle} />
       </View>
@@ -23,28 +23,36 @@ const SurveyScoreSelector = ({ onPressScore, selectedScore }: SurveyScoreSelecto
   );
 
   return (
-    <>
+    <View style={styles.container}>
       <View style={styles.line} />
-      <View style={styles.container}>
+      <View style={styles.scoreContainer}>
         {scores.map(score => scoreItem(score))}
       </View>
-    </>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+  },
   line: {
-    borderWidth: BORDER_WIDTH,
     position: 'relative',
-    top: ICON.XL / 2 + BORDER_WIDTH,
+    borderWidth: BORDER_WIDTH,
     borderColor: GREY[200],
+    top: ICON.XL / 2 + BORDER_WIDTH,
+    marginRight: ICON.XL / 2,
+    marginLeft: ICON.XL / 2,
   },
-  container: {
+  scoreContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   buttonContainer: {
+    width: ICON.XL,
     height: ICON.XL,
+    alignItems: 'center',
+    marginBottom: PADDING.XL,
   },
   button: {
     justifyContent: 'center',

diff --git a/src/screens/courses/cardTemplates/SurveyCard.tsx b/src/screens/courses/cardTemplates/SurveyCard.tsx
@@ -5,7 +5,7 @@ import { SurveyType } from '../../../types/CardType';
 import CardHeader from '../../../components/cards/CardHeader';
 import { FIRA_SANS_REGULAR } from '../../../styles/fonts';
 import { GREY, PINK } from '../../../styles/colors';
-import { MARGIN } from '../../../styles/metrics';
+import { MARGIN, PADDING } from '../../../styles/metrics';
 import QuestionCardFooter from '../../../components/cards/QuestionCardFooter';
 import { StateType } from '../../../types/store/StoreType';
 import { getCard } from '../../../store/activities/selectors';
@@ -32,8 +32,8 @@ const SurveyCard = ({ card, index }: SurveyCard) => {
           <View style={styles.labelContainer}>
             {card.label?.left && card.label?.right && (
               <>
-                <Text>{card.label.left}</Text>
-                <Text>{card.label.right}</Text>
+                <Text style={styles.text}>{card.label.left}</Text>
+                <Text style={styles.text}>{card.label.right}</Text>
               </>
             )}
           </View>
@@ -60,10 +60,15 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
   },
   labelContainer: {
-    marginTop: MARGIN.XL,
+    paddingTop: PADDING.XL,
+    paddingHorizontal: PADDING.LG,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  text: {
+    width: 88,
+    color: PINK[500],
+  },
 });
 
 const mapStateToProps = (state: StateType) => ({ card: getCard(state), index: state.activities.cardIndex });