From 652bc1ffe20b96db01a578605fcb06974ded5fd0 Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Mon, 23 Mar 2020 15:45:59 +0100
Subject: [PATCH] Moves unique styles of Button component from common to local
file
---
components/common/button.js | 25 +++++++++++++++++--------
styles/containers.js | 4 ----
styles/redesign.js | 4 ++--
styles/typography.js | 16 +---------------
4 files changed, 20 insertions(+), 29 deletions(-)
diff --git a/components/common/button.js b/components/common/button.js
index 86f25828..afd57e52 100644
--- a/components/common/button.js
+++ b/components/common/button.js
@@ -4,11 +4,11 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
import AppText from './app-text'
-import { Containers, Typography } from '../../styles/redesign'
+import { Colors, Fonts, Spacing } from '../../styles/redesign'
-const Button = ({ children, isOrange, onPress, testID }) => {
- const buttonStyle = isOrange ? styles.orange : {}
- const textStyle = isOrange ? styles.buttonTextBold : styles.buttonTextRegular
+const Button = ({ children, isCTA, onPress, testID }) => {
+ const buttonStyle = isCTA ? styles.orange : {}
+ const textStyle = isCTA ? styles.buttonTextBold : styles.buttonTextRegular
return (
<TouchableOpacity onPress={onPress} style={buttonStyle} testID={testID}>
<AppText style={textStyle}>{children}</AppText>
@@ -18,20 +18,29 @@ const Button = ({ children, isOrange, onPress, testID }) => {
Button.propTypes = {
children: PropTypes.node,
- isOrange: PropTypes.bool,
+ isCTA: PropTypes.bool,
onPress: PropTypes.func,
testID: PropTypes.string
}
+const button = {
+ paddingHorizontal: Spacing.large,
+ paddingVertical: Spacing.base,
+ textTransform: 'uppercase'
+}
+
const styles = StyleSheet.create({
orange: {
- ...Containers.orangeButton
+ backgroundColor: Colors.orange,
+ borderRadius: 25
},
buttonTextBold: {
- ...Typography.buttonTextBold
+ fontFamily: Fonts.main,
+ ...button
},
buttonTextRegular: {
- ...Typography.buttonTextRegular
+ fontFamily: Fonts.bold,
+ ...button
}
})
diff --git a/styles/containers.js b/styles/containers.js
index 66c3f0cc..32a24047 100644
--- a/styles/containers.js
+++ b/styles/containers.js
@@ -12,10 +12,6 @@ export default {
borderStyle: 'solid',
borderWidth: 1,
},
- orangeButton: {
- backgroundColor: Colors.orange,
- borderRadius: 25
- },
page: {
backgroundColor: Colors.tourquiseLight,
flex: 1
diff --git a/styles/redesign.js b/styles/redesign.js
index 019a9b84..080add1e 100644
--- a/styles/redesign.js
+++ b/styles/redesign.js
@@ -1,6 +1,6 @@
import Colors from './colors'
import Containers from './containers'
import Spacing from './spacing'
-import Typography, { sizes as Sizes } from './typography'
+import Typography, { fonts as Fonts, sizes as Sizes } from './typography'
-export { Colors, Containers, Spacing, Sizes, Typography }
+export { Colors, Containers, Fonts, Spacing, Sizes, Typography }
diff --git a/styles/typography.js b/styles/typography.js
index e28bf7e0..d567c322 100644
--- a/styles/typography.js
+++ b/styles/typography.js
@@ -1,7 +1,7 @@
import Colors from './colors'
import Spacing from './spacing'
-const fonts = {
+export const fonts = {
main: 'Jost-400-Book',
bold : 'Jost-700-Bold',
}
@@ -12,21 +12,7 @@ export const sizes = {
title: 24
}
-const button = {
- paddingHorizontal: Spacing.large,
- paddingVertical: Spacing.base,
- textTransform: 'uppercase'
-}
-
export default {
- buttonTextBold: {
- fontFamily: fonts.bold,
- ...button
- },
- buttonTextRegular: {
- fontFamily: fonts.main,
- ...button
- },
mainText: {
fontFamily: fonts.main,
fontSize: sizes.base
--
GitLab