🐛 fix: Text Box-Sizing

polijrorg · Aug 10, 2024 · 7145a93 · 7145a93
1 parent 44cf932
commit 7145a93
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 98 deletions.
diff --git a/src/components/CardsMentory/styles.ts b/src/components/CardsMentory/styles.ts
@@ -2,7 +2,7 @@ import { Text, View } from 'react-native';
 import styled from 'styled-components/native';
 
 export const StyledWrapper = styled(View)`
-  width: 95%;
+  width: 90%;
   height: auto;
   background-color: #f1f3f3;
   border-width: 1px;
@@ -17,15 +17,18 @@ export const StyledWrapper = styled(View)`
 `;
 
 export const DivText = styled(View)`
-  padding: 0px 7px;
+  padding: 4px 8px;
   display: flex;
   flex-direction: column;
+  flex-wrap: wrap;
+  max-width: 30%;
 `;
 
 export const Title = styled(Text)`
   font-size: 12px;
   font-family: Poppins;
-  word-wrap: break-word; /* Adiciona essa propriedade */
+  width: 100%;
+  padding: 0 4px;
 `;
 
 export const Nota = styled(Text)`

diff --git a/src/screens/PlainAction/index.tsx b/src/screens/PlainAction/index.tsx
@@ -1,22 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import {
-  StatusBar,
-  ActivityIndicator,
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-} from 'react-native';
+import { StatusBar, ActivityIndicator, ScrollView } from 'react-native';
 import * as S from './styles';
 
 import Header from '@components/HeaderPages';
 import useAuth from '@hooks/useAuth';
 import CardsMentory from '@components/CardsMentory';
 
 import PlainService from '@services/PlainService';
-
 import IPlains from '@interfaces/Plain';
-
 import { useDataContext } from '../../context/DataContext';
 
 const PlainActionTemplate = () => {
@@ -35,12 +26,10 @@ const PlainActionTemplate = () => {
           const plainsData = await PlainService.getPlainActionByIdSupervisor(
             user.id
           );
-
           setPlains(plainsData.filter((plain) => !plain.done));
           setCompletedPlains(plainsData.filter((plain) => plain.done));
         } else if (user.job === 'Manager') {
           const plainsData = await PlainService.getAll();
-
           setPlains(plainsData.filter((plain) => !plain.done));
           setCompletedPlains(plainsData.filter((plain) => plain.done));
         }
@@ -83,27 +72,25 @@ const PlainActionTemplate = () => {
         <Header title="Planos de Ação" />
         <S.ViewWrapper>
           {loading ? (
-            <View style={styles.loadingContainer}>
+            <S.LoadingContainer>
               <ActivityIndicator size="large" color="#3E63DD" />
-            </View>
+            </S.LoadingContainer>
           ) : !isVisible ? (
             <ScrollView>
-              <View style={styles.sectionContainer}>
+              <S.SectionContainer>
                 <PlanList
                   title="Planos Pendentes"
                   plains={plains}
                   handleToggleVisibility={handleToggleVisibility}
                   handleMarkDone={handleMarkDone}
                 />
                 {plains.length === 0 && (
-                  <View style={styles.emptyContainer}>
-                    <Text style={styles.emptyText}>
-                      Você não tem planos pendentes
-                    </Text>
-                  </View>
+                  <S.EmptyContainer>
+                    <S.EmptyText>Você não tem planos pendentes</S.EmptyText>
+                  </S.EmptyContainer>
                 )}
-              </View>
-              <View style={styles.sectionContainer}>
+              </S.SectionContainer>
+              <S.SectionContainer>
                 <CompletedPlanList
                   title="Planos Concluídos"
                   completedPlains={completedPlains}
@@ -112,13 +99,11 @@ const PlainActionTemplate = () => {
                   complete
                 />
                 {completedPlains.length === 0 && (
-                  <View style={styles.emptyContainer}>
-                    <Text style={styles.emptyText}>
-                      Você não tem planos concluídos
-                    </Text>
-                  </View>
+                  <S.EmptyContainer>
+                    <S.EmptyText>Você não tem planos concluídos</S.EmptyText>
+                  </S.EmptyContainer>
                 )}
-              </View>
+              </S.SectionContainer>
             </ScrollView>
           ) : (
             <></>
@@ -143,23 +128,21 @@ const PlanList: React.FC<PlanListProps> = ({
   handleMarkDone,
 }) => {
   return (
-    <View>
-      <Text style={styles.sectionHeader}>{title}</Text>
-      {plains.map((plain: IPlains) => {
-        return (
-          <CardsMentory
-            key={plain.id}
-            title={plain.title}
-            seller={plain.seller}
-            prize={plain.prize}
-            isVisible={plain.done}
-            complete={false}
-            onToggleVisibility={() => handleToggleVisibility(plain.id)}
-            onMarkDone={() => handleMarkDone(plain.id)}
-          />
-        );
-      })}
-    </View>
+    <S.Section>
+      <S.SectionHeader>{title}</S.SectionHeader>
+      {plains.map((plain: IPlains) => (
+        <CardsMentory
+          key={plain.id}
+          title={plain.title}
+          seller={plain.seller}
+          prize={plain.prize}
+          isVisible={plain.done}
+          complete={false}
+          onToggleVisibility={() => handleToggleVisibility(plain.id)}
+          onMarkDone={() => handleMarkDone(plain.id)}
+        />
+      ))}
+    </S.Section>
   );
 };
 
@@ -179,8 +162,8 @@ const CompletedPlanList: React.FC<CompletedPlanListProps> = ({
   complete,
 }) => {
   return (
-    <View>
-      <Text style={styles.sectionHeader}>{title}</Text>
+    <S.Section>
+      <S.SectionHeader>{title}</S.SectionHeader>
       {completedPlains.map((plain) => (
         <CardsMentory
           key={plain.id}
@@ -193,37 +176,8 @@ const CompletedPlanList: React.FC<CompletedPlanListProps> = ({
           onMarkDone={() => handleMarkDone(plain.id)}
         />
       ))}
-    </View>
+    </S.Section>
   );
 };
 
-const styles = StyleSheet.create({
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  sectionContainer: {
-    flex: 1,
-    marginBottom: 20,
-  },
-  emptyContainer: {
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  emptyText: {
-    fontFamily: 'Poppins',
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  sectionHeader: {
-    fontFamily: 'Poppins',
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginVertical: 16,
-    paddingHorizontal: 16,
-  },
-});
-
 export default PlainActionTemplate;
diff --git a/src/screens/PlainAction/styles.ts b/src/screens/PlainAction/styles.ts
@@ -1,12 +1,6 @@
-import {
-  View,
-  ScrollView,
-  TouchableOpacity,
-  Text,
-  StatusBar as RNStatusBar,
-} from 'react-native';
 import styled from 'styled-components/native';
 import { theme } from '@styles/default.theme';
+import { View, ScrollView, Text, StatusBar as RNStatusBar } from 'react-native';
 
 export const Wrapper = styled(ScrollView)`
   width: 100%;
@@ -22,20 +16,37 @@ export const ViewWrapper = styled(View)`
   margin: 0 auto;
 `;
 
-export const BtnCriarAction = styled(TouchableOpacity)`
-  width: 90%;
-  padding: 12px 8px;
-  margin: 0 auto;
-  border-radius: 8px;
-  background-color: ${theme.colors.secundary.main};
-  display: flex;
+export const LoadingContainer = styled(View)`
+  flex: 1;
   justify-content: center;
   align-items: center;
 `;
 
-export const TextBtn = styled(Text)`
+export const SectionContainer = styled(View)`
+  flex: 1;
+  margin-bottom: 20px;
+`;
+
+export const EmptyContainer = styled(View)`
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const EmptyText = styled(Text)`
+  font-family: 'Poppins';
   font-size: 16px;
-  text-transform: uppercase;
-  font-family: Poppins;
-  color: #fff;
+  text-align: center;
+`;
+
+export const SectionHeader = styled(Text)`
+  font-family: 'Poppins';
+  font-size: 18px;
+  font-weight: bold;
+  margin-vertical: 16px;
+  padding-horizontal: 16px;
+`;
+
+export const Section = styled(View)`
+  margin-bottom: 20px;
 `;