Moves unique styles of Segment component from common files to local one

components/common/segment.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Containers, Typography } from '../../styles/redesign'
+import { Colors, Spacing, Sizes, Typography } from '../../styles/redesign'
 
 const Segment = ({ children, last, title }) => {
   const containerStyle = last ? styles.containerLast : styles.container
@@ -23,17 +23,29 @@ Segment.propTypes = {
   title: PropTypes.string
 }
 
+const bottomBorder = {
+  borderStyle: 'solid',
+  borderBottomWidth: 2,
+  borderBottomColor: Colors.grey,
+  paddingBottom: Spacing.base
+}
+
+const segmentContainer = {
+  marginHorizontal: Spacing.base,
+  marginBottom: Spacing.base,
+}
+
 const styles = StyleSheet.create({
   container: {
-    ...Containers.segmentContainer,
+    ...segmentContainer,
-    ...Containers.bottomBorder
+    ...bottomBorder
   },
   containerLast: {
-    ...Containers.segmentContainer,
+    ...segmentContainer
-    ...Containers.marginBottom
   },
   title: {
-    ...Typography.titleSmall
+    fontSize: Sizes.subtitle,
+    ...Typography.title
   }
 })
 

styles/containers.js

@@ -1,13 +1,6 @@
 import Colors from './colors'
-import Spacing from './spacing'
 
 export default {
-  bottomBorder: {
-    borderStyle: 'solid',
-    borderBottomWidth: 2,
-    borderBottomColor: Colors.grey,
-    paddingBottom: Spacing.base
-  },
   centerItems: {
     alignItems: 'center',
     flex: 1,
@@ -19,7 +12,6 @@ export default {
     borderStyle: 'solid',
     borderWidth: 1,
   },
-  marginBottom: { marginBottom: Spacing.base },
   orangeButton: {
     backgroundColor: Colors.orange,
     borderRadius: 25
@@ -27,6 +19,5 @@ export default {
   page: {
     backgroundColor: Colors.tourquiseLight,
     flex: 1
-  },
+  }
-  segmentContainer: { marginHorizontal: Spacing.base }
 }

styles/redesign.js

@@ -1,5 +1,6 @@
 import Colors from './colors'
 import Containers from './containers'
-import Typography from './typography'
+import Spacing from './spacing'
+import Typography, { sizes as Sizes } from './typography'
 
-export { Colors, Containers, Typography }
+export { Colors, Containers, Spacing, Sizes, Typography }

styles/typography.js

@@ -6,12 +6,10 @@ const fonts = {
   bold : 'Jost-700-Bold',
 }
 
-const sizes = {
+export const sizes = {
-  mainMedium: 18,
+  base: 18,
-  mainLarge: 20,
+  subtitle: 22,
-  titleSmall: 22,
+  title: 24
-  titleMedium: 24,
-  titleLarge: 28
 }
 
 const button = {
@@ -20,12 +18,6 @@ const button = {
   textTransform: 'uppercase'
 }
 
-const title = {
-  color: Colors.purple,
-  marginHorizontal: Spacing.base,
-  marginVertical: Spacing.large
-}
-
 export default {
   buttonTextBold: {
     fontFamily: fonts.bold,
@@ -37,18 +29,18 @@ export default {
   },
   mainText: {
     fontFamily: fonts.main,
-    fontSize: sizes.mainMedium
+    fontSize: sizes.base
   },
   pageTitle: {
     alignSelf: 'center',
     fontFamily: fonts.bold,
     fontWeight: '700',
-    fontSize: sizes.titleMedium,
+    fontSize: sizes.title,
-    ...title
+    marginHorizontal: Spacing.base,
   },
-  titleSmall: {
+  title: {
-    fontSize: sizes.titleSmall,
+    color: Colors.purple,
-    ...title
+    marginVertical: Spacing.large
   },
   underline: { textDecorationLine: 'underline' }
 }