import { ImageStyle , TextStyle , ViewStyle } from 'react-native' ; import { config } from '../../constants/config' ; import { ResponsiveStyleSheet , ScaleByFactor } from '../../utils/responsive' ; export interface VocabularyExtraFieldListStyles { container : ViewStyle ; item_container : ViewStyle ; left : ViewStyle ; right : ViewStyle ; image : ImageStyle ; name : TextStyle ; value : TextStyle ; speak_touchable : ViewStyle ; speaker_icon : ImageStyle ; activity_indicator : ViewStyle ; } export class VocabularyExtraFieldListResponsiveStyles extends ResponsiveStyleSheet < VocabularyExtraFieldListStyles > { public baseStyles ( scaleByFactor ) { return { container : { } , item_container : { marginVertical : scaleByFactor ( 4 ) , flexDirection : 'row' , justifyContent : 'space-between' , alignItems : 'center' , } , left : { } , right : { } , image : { width : 100 , height : 100 , } , name : { fontSize : scaleByFactor ( 15 ) , fontWeight : '700' , } , value : { fontSize : scaleByFactor ( 17 ) , } , speak_touchable : { flexDirection : 'row' , alignItems : 'center' , } , speaker_icon : { marginLeft : scaleByFactor ( 6 ) , } , activity_indicator : { marginLeft : scaleByFactor ( 6 ) , } , } ; } public lightStyles ( ) { return { name : { color : config . styles . light . secondaryTextColor , } , value : { color : config . styles . light . primaryTextColor , } , } ; } public darkStyles ( ) { return { name : { color : config . styles . dark . secondaryTextColor , } , value : { color : config . styles . dark . primaryTextColor , } , } ; } } export const vocabularyExtraFieldListResponsiveStyles = new VocabularyExtraFieldListResponsiveStyles ( ) ;