Merge pull request #28 from SocialGouv/Fix--Text-categorie-gain

fix: text categorie gain
SocialGouv · May 11, 2022 · da203be · da203be
2 parents ca4f21e + f33a643
commit da203be
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/scenes/Gains/CategorieGain.js b/src/scenes/Gains/CategorieGain.js
@@ -22,9 +22,11 @@ const CategorieGain = ({ children, icon = null, value = '?', unit = '', descript
           )}
         </UnitCategorie>
       </ComponentCategorie>
-      <TextCategorie>
-        <TextStyled>{description}</TextStyled>
-      </TextCategorie>
+      <TextCategorieContainer>
+        <TextCategorie>
+          <TextStyled numberOfLines={2}>{description}</TextStyled>
+        </TextCategorie>
+      </TextCategorieContainer>
     </Categorie>
   );
 };
@@ -33,6 +35,7 @@ const width = screenWidth / 3;
 
 const Categorie = styled.View`
   margin-left: ${width * 0.2}px;
+  width: ${width * 0.85}px;
   margin-right: ${width * 0.2}px;
 `;
 
@@ -65,8 +68,15 @@ const CategorieValue = styled.Text`
   font-size: 45px;
 `;
 
-const TextCategorie = styled.View`
+const TextCategorieContainer = styled.View`
   padding-top: 2px;
   align-items: center;
 `;
+
+const TextCategorie = styled.Text`
+  textAlign: center;
+`;
+
+
+
 export default CategorieGain;
diff --git a/src/scenes/Gains/MesGains.js b/src/scenes/Gains/MesGains.js
@@ -83,8 +83,8 @@ const MesGains = () => {
         </TextForm>
       </TextContainer>
       <Categories>
-        <CategorieGain icon={<Economy size={24} />} unit={'€'} description1={'Mes économies'} />
-        <CategorieGain icon={<Balance size={26} />} value={null} unit="kcal" description1="'Mes calories économisées" />
+        <CategorieGain icon={<Economy size={24} />} unit={'€'} description='Mes économies' />
+        <CategorieGain icon={<Balance size={26} />} value={null} unit="kcal" description="Mes calories économisées" />
       </Categories>
       <TextContainer>
         <TextForm>
@@ -105,7 +105,7 @@ const MesGains = () => {
             internalColor={`rgba(64, 48, 165, ${50 / 100})`}
           />
         </CategorieGain>
-        <CategorieGain icon={<NoDrink size={24} />} description1="Jours où je n'ai pas bu" />
+        <CategorieGain icon={<NoDrink size={24} />} description="Jours où je n'ai pas bu" />
       </Categories>
       <OnBoardingGain
         onPress={toGoal}