From c3be1229ccf97a1568acc2350a76dd437d935698 Mon Sep 17 00:00:00 2001 From: gustavo-em Date: Fri, 29 Apr 2022 15:00:39 -0300 Subject: [PATCH] fix text in list portals --- .../app/pages/list_portals/component.tsx | 21 +- react-native/app/pages/list_portals/styles.ts | 181 +++++++++--------- 2 files changed, 99 insertions(+), 103 deletions(-) diff --git a/react-native/app/pages/list_portals/component.tsx b/react-native/app/pages/list_portals/component.tsx index 41ff949..f3f4c27 100644 --- a/react-native/app/pages/list_portals/component.tsx +++ b/react-native/app/pages/list_portals/component.tsx @@ -1,6 +1,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; import React from 'react'; import { + BlockTextWithoutPortal, ButtonDelete, ButtonOpen, DivButtonDelete, @@ -160,16 +161,18 @@ export const ListPortals = ({navigation}: IListPortalsDTO) => { /> ) : ( <> - - {i18next.t('mobileApp.portals.list.empty.addFirstPortal.label')} - - onPressTextCreateDemoServer()}> - - {i18next.t( - 'mobileApp.portals.list.empty.orUseOurDemoServer.label', - )} + + + {i18next.t('mobileApp.portals.list.empty.addFirstPortal.label')+' '} + onPressTextCreateDemoServer()} color={true}> + {i18next.t( + 'mobileApp.portals.list.empty.orUseOurDemoServer.label', + )} + + - + + )} diff --git a/react-native/app/pages/list_portals/styles.ts b/react-native/app/pages/list_portals/styles.ts index f3dfb02..1f3e650 100644 --- a/react-native/app/pages/list_portals/styles.ts +++ b/react-native/app/pages/list_portals/styles.ts @@ -1,124 +1,117 @@ -import styled from 'styled-components/native' -import { colors } from '../../styles/colors'; -import { TouchableOpacity } from 'react-native-gesture-handler'; -import { SwipeListView } from 'react-native-swipe-list-view'; - +import styled from 'styled-components/native'; +import {colors} from '../../styles/colors'; export const WrapperListContainer = styled.SafeAreaView` - background-color: ${colors.secundary}; - flex: 1 ; - justify-content: center; - align-items: center; + background-color: ${colors.secundary}; + flex: 1; + justify-content: center; + align-items: center; `; export const WrapperList = styled.FlatList` - background-color: ${colors.primary}; - width: 95%; + background-color: ${colors.primary}; + width: 95%; - border-radius: 10px; -` + border-radius: 10px; +`; -export const WrapperItemListText = styled.TouchableOpacity.attrs(props=>({ - activeOpacity: 1 +export const WrapperItemListText = styled.TouchableOpacity.attrs(props => ({ + activeOpacity: 1, }))` - - width: 300px; - padding: 5px; - margin: 3% auto; - height: 80px; - background-color: ${colors.primary_light}; - border-radius: 10px; - flex-direction: column; - align-items: center; - justify-content: center; -` + width: 300px; + padding: 5px; + margin: 3% auto; + height: 80px; + background-color: ${colors.primary_light}; + border-radius: 10px; + flex-direction: column; + align-items: center; + justify-content: center; +`; export const WrapperItemListView = styled.View` - display: flex; - flex: 1; - background-color: black; + display: flex; + flex: 1; + background-color: black; - padding: 10px; - justify-content: center; - align-items: center; - text-align: center; - height: 100px; - width: 200px; - -` + padding: 10px; + justify-content: center; + align-items: center; + text-align: center; + height: 100px; + width: 200px; +`; export const ItemList = styled.Text` - color: #fff; - padding: 2px; - font-size: 16px; - - font-weight: ${(props)=>(props.bold ? 'bold': 'normal')}; - -` + color: #fff; + padding: 2px; + font-size: 16px; + font-weight: ${props => (props.bold ? 'bold' : 'normal')}; +`; export const TextItem = styled.Text` - font-size: 18px; -` + font-size: 18px; +`; export const WrapperViewAdd = styled.View` - background-color: ${colors.primary}; - margin: 70px 0px 0px 0px; - -` + background-color: ${colors.primary}; + margin: 70px 0px 0px 0px; +`; export const ButtonOpen = styled.TouchableOpacity` - padding: 10px; - background-color: ${colors.primary}; - width: 300px; - margin: 10px; - border-radius: 10px; - - align-items: center; - justify-content: center; + padding: 10px; + background-color: ${colors.primary}; + width: 300px; + margin: 10px; + border-radius: 10px; - -` + align-items: center; + justify-content: center; +`; export const TextButtonOpen = styled.Text` - color: #fff; - font-size: 20px; - font-weight: bold; -` - + color: #fff; + font-size: 20px; + font-weight: bold; +`; export const TextWithoutPortal = styled.Text` - color: ${(props)=> (props.color ? colors.primary_light: colors.primary)}; - font-size: 20px; - text-align: center; -` + color: ${props => (props.color ? colors.primary_light : colors.primary)}; + font-size: 20px; + text-align: center; + display: flex; +`; + +export const BlockTextWithoutPortal = styled.View` + flex-direction: row; + padding: 20px; + max-width: 100%; +`; export const ButtonDelete = styled.TouchableOpacity` - background-color: ${colors.white}; - border-radius: 10px; - margin: 3% auto; - width: 100%; - height: 80px; - - justify-content: center; - align-items: center; - - flex-direction: row; - -` + background-color: ${colors.white}; + border-radius: 10px; + margin: 3% auto; + width: 100%; + height: 80px; + + justify-content: center; + align-items: center; + + flex-direction: row; +`; export const DivButtonDelete = styled.View` - width: 100px; - align-items: center; - justify-content: center; - margin: 3% 0px; - align-content: center; - justify-items: center; - - -` + width: 100px; + align-items: center; + justify-content: center; + margin: 3% 0px; + align-content: center; + justify-items: center; +`; export const DivDelete = styled.View` - width: 300px; - justify-content: flex-end; - align-items: flex-end; -` \ No newline at end of file + width: 300px; + justify-content: flex-end; + align-items: flex-end; +`;