@plusscommunities/pluss-webview-app 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/module/components/WidgetLarge.js +43 -33
  2. package/dist/module/components/WidgetLarge.js.map +1 -1
  3. package/dist/module/components/WidgetSmall.js +43 -33
  4. package/dist/module/components/WidgetSmall.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/WidgetLarge.js +40 -32
  7. package/src/components/WidgetSmall.js +40 -32
package/dist/module/components/WidgetLarge.js CHANGED
@@ -45,26 +45,40 @@ class WidgetLarge extends Component {
45
45
 
46
46
  if (options.isWebViewSeparatePage) {
47
47
  return /*#__PURE__*/React.createElement(View, {
48
- style: styles.sectionContainer
48
+ style: [styles.buttonContainer, {
49
+ backgroundColor: Colours.hexToRGBAstring(colourBrandingMain, 0.2)
50
+ }]
49
51
  }, /*#__PURE__*/React.createElement(View, {
50
- style: styles.sectionPadding
51
- }, /*#__PURE__*/React.createElement(View, {
52
- style: styles.sectionHeading
53
- }, /*#__PURE__*/React.createElement(Text, {
54
- style: styles.sectionTitle
55
- }, this.getTitle()))), /*#__PURE__*/React.createElement(View, {
56
- style: styles.buttonContainer
57
- }, /*#__PURE__*/React.createElement(Components.InlineButton, {
52
+ style: styles.upperContainer
53
+ }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
54
+ style: [styles.title, {
55
+ color: colourBrandingMain
56
+ }]
57
+ }, this.getTitle()))), /*#__PURE__*/React.createElement(Components.InlineButton, {
58
58
  onPress: this.onGoToFullpage,
59
59
  color: colourBrandingMain,
60
- touchableStyle: {
61
- paddingTop: 6
62
- },
63
- textStyle: {
64
- color: '#fff'
65
- },
60
+ style: styles.button,
66
61
  large: true
67
- }, options.buttonText)));
62
+ }, options.buttonText)); // return (
63
+ // <View style={styles.sectionContainer}>
64
+ // <View style={styles.sectionPadding}>
65
+ // <View style={styles.sectionHeading}>
66
+ // <Text style={styles.sectionTitle}>{this.getTitle()}</Text>
67
+ // </View>
68
+ // </View>
69
+ // <View style={styles.buttonContainer}>
70
+ // <Components.InlineButton
71
+ // onPress={this.onGoToFullpage}
72
+ // color={colourBrandingMain}
73
+ // touchableStyle={{ paddingTop: 6 }}
74
+ // textStyle={{ color: '#fff' }}
75
+ // large
76
+ // >
77
+ // {options.buttonText}
78
+ // </Components.InlineButton>
79
+ // </View>
80
+ // </View>
81
+ // );
68
82
  }
69
83
 
70
84
  return /*#__PURE__*/React.createElement(View, {
@@ -90,28 +104,24 @@ const styles = StyleSheet.create({
90
104
  alignItems: 'center',
91
105
  justifyContent: 'center'
92
106
  },
93
- sectionContainer: {
94
- backgroundColor: '#fff',
95
- paddingTop: 16
96
- },
97
- sectionPadding: {
98
- paddingHorizontal: 16,
99
- paddingBottom: 6
107
+ buttonContainer: {
108
+ width: '100%',
109
+ alignItems: 'center',
110
+ justifyContent: 'center',
111
+ padding: 16
100
112
  },
101
- sectionHeading: {
102
- marginBottom: 4,
113
+ upperContainer: {
103
114
  flexDirection: 'row',
104
- alignContent: 'flex-start',
115
+ alignItems: 'center',
105
116
  justifyContent: 'space-between'
106
117
  },
107
- sectionTitle: {
108
- fontFamily: 'sf-bold',
109
- fontSize: 24,
110
- color: Colours.TEXT_DARKEST
118
+ title: {
119
+ fontFamily: 'sf-semibold',
120
+ fontSize: 16
111
121
  },
112
- buttonContainer: {
113
- alignItems: 'center',
114
- justifyContent: 'center'
122
+ button: {
123
+ paddingHorizontal: 40,
124
+ marginTop: 16
115
125
  }
116
126
  });
117
127
 
package/dist/module/components/WidgetLarge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","Component","View","Text","StyleSheet","WebView","connect","_","Colours","Components","Services","WidgetLarge","constructor","props","options","navigation","navigate","url","headerTitle","getTitle","isEmpty","Title","state","render","colourBrandingMain","isWebViewSeparatePage","styles","sectionContainer","sectionPadding","sectionHeading","sectionTitle","buttonContainer","onGoToFullpage","paddingTop","color","buttonText","container","ListHeaderComponent","uri","webContainer","onLoadStart","onLoadEnd","create","flex","alignItems","justifyContent","backgroundColor","paddingHorizontal","paddingBottom","marginBottom","flexDirection","alignContent","fontFamily","fontSize","TEXT_DARKEST","mapStateToProps","getMainBrandingColourFromState","forwardRef"],"sources":["WidgetLarge.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\nimport { connect } from 'react-redux';\nimport _ from 'lodash';\nimport { Colours, Components } from '../core.config';\nimport { Services } from '../feature.config';\n\nclass WidgetLarge extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n onLoadStart = () => {};\n onLoadEnd = () => {};\n\n onGoToFullpage = () => {\n const { options } = this.props;\n Services.navigation.navigate('webViewPage', { url: options['webUrl'], headerTitle: this.getTitle() });\n };\n\n getTitle = () => {\n const { options } = this.props;\n if (options && !_.isEmpty(options.Title)) return options.Title;\n return 'Web View';\n };\n\n render() {\n const { options, colourBrandingMain } = this.props;\n if (options.isWebViewSeparatePage) {\n return (\n <View style={styles.sectionContainer}>\n <View style={styles.sectionPadding}>\n <View style={styles.sectionHeading}>\n <Text style={styles.sectionTitle}>{this.getTitle()}</Text>\n </View>\n </View>\n <View style={styles.buttonContainer}>\n <Components.InlineButton\n onPress={this.onGoToFullpage}\n color={colourBrandingMain}\n touchableStyle={{ paddingTop: 6 }}\n textStyle={{ color: '#fff' }}\n large\n >\n {options.buttonText}\n </Components.InlineButton>\n </View>\n </View>\n );\n }\n return (\n <View style={styles.container}>\n {this.props.ListHeaderComponent}\n <WebView\n source={{ uri: options['webUrl'] }}\n style={styles.webContainer}\n onLoadStart={this.onLoadStart}\n onLoadEnd={this.onLoadEnd}\n />\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n webContainer: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n sectionContainer: {\n backgroundColor: '#fff',\n paddingTop: 16,\n },\n sectionPadding: {\n paddingHorizontal: 16,\n paddingBottom: 6,\n },\n sectionHeading: {\n marginBottom: 4,\n flexDirection: 'row',\n alignContent: 'flex-start',\n justifyContent: 'space-between',\n },\n sectionTitle: {\n fontFamily: 'sf-bold',\n fontSize: 24,\n color: Colours.TEXT_DARKEST,\n },\n buttonContainer: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nconst mapStateToProps = state => {\n return {\n colourBrandingMain: Colours.getMainBrandingColourFromState(state),\n };\n};\n\nexport default connect(mapStateToProps, {}, null, { forwardRef: true })(WidgetLarge);\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","Component","View","Text","StyleSheet","WebView","connect","_","Colours","Components","Services","WidgetLarge","constructor","props","options","navigation","navigate","url","headerTitle","getTitle","isEmpty","Title","state","render","colourBrandingMain","isWebViewSeparatePage","styles","buttonContainer","backgroundColor","hexToRGBAstring","upperContainer","title","color","onGoToFullpage","button","buttonText","container","ListHeaderComponent","uri","webContainer","onLoadStart","onLoadEnd","create","flex","alignItems","justifyContent","width","padding","flexDirection","fontFamily","fontSize","paddingHorizontal","marginTop","mapStateToProps","getMainBrandingColourFromState","forwardRef"],"sources":["WidgetLarge.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\nimport { connect } from 'react-redux';\nimport _ from 'lodash';\nimport { Colours, Components } from '../core.config';\nimport { Services } from '../feature.config';\n\nclass WidgetLarge extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n onLoadStart = () => {};\n onLoadEnd = () => {};\n\n onGoToFullpage = () => {\n const { options } = this.props;\n Services.navigation.navigate('webViewPage', { url: options['webUrl'], headerTitle: this.getTitle() });\n };\n\n getTitle = () => {\n const { options } = this.props;\n if (options && !_.isEmpty(options.Title)) return options.Title;\n return 'Web View';\n };\n\n render() {\n const { options, colourBrandingMain } = this.props;\n if (options.isWebViewSeparatePage) {\n return (\n <View style={[styles.buttonContainer, { backgroundColor: Colours.hexToRGBAstring(colourBrandingMain, 0.2) }]}>\n <View style={styles.upperContainer}>\n <View>\n <Text style={[styles.title, { color: colourBrandingMain }]}>{this.getTitle()}</Text>\n </View>\n </View>\n <Components.InlineButton onPress={this.onGoToFullpage} color={colourBrandingMain} style={styles.button} large>\n {options.buttonText}\n </Components.InlineButton>\n </View>\n );\n // return (\n // <View style={styles.sectionContainer}>\n // <View style={styles.sectionPadding}>\n // <View style={styles.sectionHeading}>\n // <Text style={styles.sectionTitle}>{this.getTitle()}</Text>\n // </View>\n // </View>\n // <View style={styles.buttonContainer}>\n // <Components.InlineButton\n // onPress={this.onGoToFullpage}\n // color={colourBrandingMain}\n // touchableStyle={{ paddingTop: 6 }}\n // textStyle={{ color: '#fff' }}\n // large\n // >\n // {options.buttonText}\n // </Components.InlineButton>\n // </View>\n // </View>\n // );\n }\n return (\n <View style={styles.container}>\n {this.props.ListHeaderComponent}\n <WebView\n source={{ uri: options['webUrl'] }}\n style={styles.webContainer}\n onLoadStart={this.onLoadStart}\n onLoadEnd={this.onLoadEnd}\n />\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n webContainer: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n buttonContainer: {\n width: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n padding: 16,\n },\n upperContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n title: {\n fontFamily: 'sf-semibold',\n fontSize: 16,\n },\n button: {\n paddingHorizontal: 40,\n marginTop: 16,\n },\n});\n\nconst mapStateToProps = state => {\n return {\n colourBrandingMain: Colours.getMainBrandingColourFromState(state),\n };\n};\n\nexport default connect(mapStateToProps, {}, null, { forwardRef: true })(WidgetLarge);\n"],"mappings":"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"}
package/dist/module/components/WidgetSmall.js CHANGED
@@ -45,26 +45,40 @@ class WidgetSmall extends Component {
45
45
 
46
46
  if (options.isWebViewSeparatePage) {
47
47
  return /*#__PURE__*/React.createElement(View, {
48
- style: styles.sectionContainer
48
+ style: [styles.buttonContainer, {
49
+ backgroundColor: Colours.hexToRGBAstring(colourBrandingMain, 0.2)
50
+ }]
49
51
  }, /*#__PURE__*/React.createElement(View, {
50
- style: styles.sectionPadding
51
- }, /*#__PURE__*/React.createElement(View, {
52
- style: styles.sectionHeading
53
- }, /*#__PURE__*/React.createElement(Text, {
54
- style: styles.sectionTitle
55
- }, this.getTitle()))), /*#__PURE__*/React.createElement(View, {
56
- style: styles.buttonContainer
57
- }, /*#__PURE__*/React.createElement(Components.InlineButton, {
52
+ style: styles.upperContainer
53
+ }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
54
+ style: [styles.title, {
55
+ color: colourBrandingMain
56
+ }]
57
+ }, this.getTitle()))), /*#__PURE__*/React.createElement(Components.InlineButton, {
58
58
  onPress: this.onGoToFullpage,
59
59
  color: colourBrandingMain,
60
- touchableStyle: {
61
- paddingTop: 6
62
- },
63
- textStyle: {
64
- color: '#fff'
65
- },
60
+ style: styles.button,
66
61
  large: true
67
- }, options.buttonText)));
62
+ }, options.buttonText)); // return (
63
+ // <View style={styles.sectionContainer}>
64
+ // <View style={styles.sectionPadding}>
65
+ // <View style={styles.sectionHeading}>
66
+ // <Text style={styles.sectionTitle}>{this.getTitle()}</Text>
67
+ // </View>
68
+ // </View>
69
+ // <View style={styles.buttonContainer}>
70
+ // <Components.InlineButton
71
+ // onPress={this.onGoToFullpage}
72
+ // color={colourBrandingMain}
73
+ // touchableStyle={{ paddingTop: 6 }}
74
+ // textStyle={{ color: '#fff' }}
75
+ // large
76
+ // >
77
+ // {options.buttonText}
78
+ // </Components.InlineButton>
79
+ // </View>
80
+ // </View>
81
+ // );
68
82
  }
69
83
 
70
84
  return /*#__PURE__*/React.createElement(View, {
@@ -92,28 +106,24 @@ const styles = StyleSheet.create({
92
106
  alignItems: 'center',
93
107
  justifyContent: 'center'
94
108
  },
95
- sectionContainer: {
96
- backgroundColor: '#fff',
97
- paddingTop: 16
98
- },
99
- sectionPadding: {
100
- paddingHorizontal: 16,
101
- paddingBottom: 6
109
+ buttonContainer: {
110
+ width: '100%',
111
+ alignItems: 'center',
112
+ justifyContent: 'center',
113
+ padding: 16
102
114
  },
103
- sectionHeading: {
104
- marginBottom: 4,
115
+ upperContainer: {
105
116
  flexDirection: 'row',
106
- alignContent: 'flex-start',
117
+ alignItems: 'center',
107
118
  justifyContent: 'space-between'
108
119
  },
109
- sectionTitle: {
110
- fontFamily: 'sf-bold',
111
- fontSize: 24,
112
- color: Colours.TEXT_DARKEST
120
+ title: {
121
+ fontFamily: 'sf-semibold',
122
+ fontSize: 16
113
123
  },
114
- buttonContainer: {
115
- alignItems: 'center',
116
- justifyContent: 'center'
124
+ button: {
125
+ paddingHorizontal: 40,
126
+ marginTop: 16
117
127
  }
118
128
  });
119
129
 
package/dist/module/components/WidgetSmall.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","Component","View","Text","StyleSheet","WebView","connect","_","Colours","Components","Services","WidgetSmall","constructor","props","options","navigation","navigate","url","headerTitle","getTitle","isEmpty","Title","state","render","colourBrandingMain","isWebViewSeparatePage","styles","sectionContainer","sectionPadding","sectionHeading","sectionTitle","buttonContainer","onGoToFullpage","paddingTop","color","buttonText","container","uri","webContainer","onLoadStart","onLoadEnd","create","height","paddingBottom","flex","alignItems","justifyContent","backgroundColor","paddingHorizontal","marginBottom","flexDirection","alignContent","fontFamily","fontSize","TEXT_DARKEST","mapStateToProps","getMainBrandingColourFromState","forwardRef"],"sources":["WidgetSmall.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\nimport { connect } from 'react-redux';\nimport _ from 'lodash';\nimport { Colours, Components } from '../core.config';\nimport { Services } from '../feature.config';\n\nclass WidgetSmall extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n onLoadStart = () => {};\n onLoadEnd = () => {};\n\n onGoToFullpage = () => {\n const { options } = this.props;\n Services.navigation.navigate('webViewPage', { url: options['webUrl'], headerTitle: this.getTitle() });\n };\n\n getTitle = () => {\n const { options } = this.props;\n if (options && !_.isEmpty(options.Title)) return options.Title;\n return 'Web View';\n };\n\n render() {\n const { options, colourBrandingMain } = this.props;\n if (options.isWebViewSeparatePage) {\n return (\n <View style={styles.sectionContainer}>\n <View style={styles.sectionPadding}>\n <View style={styles.sectionHeading}>\n <Text style={styles.sectionTitle}>{this.getTitle()}</Text>\n </View>\n </View>\n <View style={styles.buttonContainer}>\n <Components.InlineButton\n onPress={this.onGoToFullpage}\n color={colourBrandingMain}\n touchableStyle={{ paddingTop: 6 }}\n textStyle={{ color: '#fff' }}\n large\n >\n {options.buttonText}\n </Components.InlineButton>\n </View>\n </View>\n );\n }\n return (\n <View style={styles.container}>\n <WebView\n source={{ uri: options['webUrl'] }}\n style={styles.webContainer}\n onLoadStart={this.onLoadStart}\n onLoadEnd={this.onLoadEnd}\n />\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n height: 300,\n paddingTop: 8,\n paddingBottom: 8,\n },\n webContainer: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n sectionContainer: {\n backgroundColor: '#fff',\n paddingTop: 16,\n },\n sectionPadding: {\n paddingHorizontal: 16,\n paddingBottom: 6,\n },\n sectionHeading: {\n marginBottom: 4,\n flexDirection: 'row',\n alignContent: 'flex-start',\n justifyContent: 'space-between',\n },\n sectionTitle: {\n fontFamily: 'sf-bold',\n fontSize: 24,\n color: Colours.TEXT_DARKEST,\n },\n buttonContainer: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nconst mapStateToProps = state => {\n return {\n colourBrandingMain: Colours.getMainBrandingColourFromState(state),\n };\n};\n\nexport default connect(mapStateToProps, {}, null, { forwardRef: true })(WidgetSmall);\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","Component","View","Text","StyleSheet","WebView","connect","_","Colours","Components","Services","WidgetSmall","constructor","props","options","navigation","navigate","url","headerTitle","getTitle","isEmpty","Title","state","render","colourBrandingMain","isWebViewSeparatePage","styles","buttonContainer","backgroundColor","hexToRGBAstring","upperContainer","title","color","onGoToFullpage","button","buttonText","container","uri","webContainer","onLoadStart","onLoadEnd","create","height","paddingTop","paddingBottom","flex","alignItems","justifyContent","width","padding","flexDirection","fontFamily","fontSize","paddingHorizontal","marginTop","mapStateToProps","getMainBrandingColourFromState","forwardRef"],"sources":["WidgetSmall.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\nimport { connect } from 'react-redux';\nimport _ from 'lodash';\nimport { Colours, Components } from '../core.config';\nimport { Services } from '../feature.config';\n\nclass WidgetSmall extends Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n onLoadStart = () => {};\n onLoadEnd = () => {};\n\n onGoToFullpage = () => {\n const { options } = this.props;\n Services.navigation.navigate('webViewPage', { url: options['webUrl'], headerTitle: this.getTitle() });\n };\n\n getTitle = () => {\n const { options } = this.props;\n if (options && !_.isEmpty(options.Title)) return options.Title;\n return 'Web View';\n };\n\n render() {\n const { options, colourBrandingMain } = this.props;\n if (options.isWebViewSeparatePage) {\n return (\n <View style={[styles.buttonContainer, { backgroundColor: Colours.hexToRGBAstring(colourBrandingMain, 0.2) }]}>\n <View style={styles.upperContainer}>\n <View>\n <Text style={[styles.title, { color: colourBrandingMain }]}>{this.getTitle()}</Text>\n </View>\n </View>\n <Components.InlineButton onPress={this.onGoToFullpage} color={colourBrandingMain} style={styles.button} large>\n {options.buttonText}\n </Components.InlineButton>\n </View>\n );\n // return (\n // <View style={styles.sectionContainer}>\n // <View style={styles.sectionPadding}>\n // <View style={styles.sectionHeading}>\n // <Text style={styles.sectionTitle}>{this.getTitle()}</Text>\n // </View>\n // </View>\n // <View style={styles.buttonContainer}>\n // <Components.InlineButton\n // onPress={this.onGoToFullpage}\n // color={colourBrandingMain}\n // touchableStyle={{ paddingTop: 6 }}\n // textStyle={{ color: '#fff' }}\n // large\n // >\n // {options.buttonText}\n // </Components.InlineButton>\n // </View>\n // </View>\n // );\n }\n return (\n <View style={styles.container}>\n <WebView\n source={{ uri: options['webUrl'] }}\n style={styles.webContainer}\n onLoadStart={this.onLoadStart}\n onLoadEnd={this.onLoadEnd}\n />\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n height: 300,\n paddingTop: 8,\n paddingBottom: 8,\n },\n webContainer: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n buttonContainer: {\n width: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n padding: 16,\n },\n upperContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n title: {\n fontFamily: 'sf-semibold',\n fontSize: 16,\n },\n button: {\n paddingHorizontal: 40,\n marginTop: 16,\n },\n});\n\nconst mapStateToProps = state => {\n return {\n colourBrandingMain: Colours.getMainBrandingColourFromState(state),\n };\n};\n\nexport default connect(mapStateToProps, {}, null, { forwardRef: true })(WidgetSmall);\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plusscommunities/pluss-webview-app",
3
- "version": "1.3.1",
3
+ "version": "1.3.2",
4
4
  "description": "Extension package to enable webview on Pluss Communities Platform",
5
5
  "main": "dist/module/index.js",
6
6
  "module": "dist/module/index.js",
package/src/components/WidgetLarge.js CHANGED
@@ -30,25 +30,37 @@ class WidgetLarge extends Component {
30
30
  const { options, colourBrandingMain } = this.props;
31
31
  if (options.isWebViewSeparatePage) {
32
32
  return (
33
- <View style={styles.sectionContainer}>
34
- <View style={styles.sectionPadding}>
35
- <View style={styles.sectionHeading}>
36
- <Text style={styles.sectionTitle}>{this.getTitle()}</Text>
33
+ <View style={[styles.buttonContainer, { backgroundColor: Colours.hexToRGBAstring(colourBrandingMain, 0.2) }]}>
34
+ <View style={styles.upperContainer}>
35
+ <View>
36
+ <Text style={[styles.title, { color: colourBrandingMain }]}>{this.getTitle()}</Text>
37
37
  </View>
38
38
  </View>
39
- <View style={styles.buttonContainer}>
40
- <Components.InlineButton
41
- onPress={this.onGoToFullpage}
42
- color={colourBrandingMain}
43
- touchableStyle={{ paddingTop: 6 }}
44
- textStyle={{ color: '#fff' }}
45
- large
46
- >
47
- {options.buttonText}
48
- </Components.InlineButton>
49
- </View>
39
+ <Components.InlineButton onPress={this.onGoToFullpage} color={colourBrandingMain} style={styles.button} large>
40
+ {options.buttonText}
41
+ </Components.InlineButton>
50
42
  </View>
51
43
  );
44
+ // return (
45
+ // <View style={styles.sectionContainer}>
46
+ // <View style={styles.sectionPadding}>
47
+ // <View style={styles.sectionHeading}>
48
+ // <Text style={styles.sectionTitle}>{this.getTitle()}</Text>
49
+ // </View>
50
+ // </View>
51
+ // <View style={styles.buttonContainer}>
52
+ // <Components.InlineButton
53
+ // onPress={this.onGoToFullpage}
54
+ // color={colourBrandingMain}
55
+ // touchableStyle={{ paddingTop: 6 }}
56
+ // textStyle={{ color: '#fff' }}
57
+ // large
58
+ // >
59
+ // {options.buttonText}
60
+ // </Components.InlineButton>
61
+ // </View>
62
+ // </View>
63
+ // );
52
64
  }
53
65
  return (
54
66
  <View style={styles.container}>
@@ -73,28 +85,24 @@ const styles = StyleSheet.create({
73
85
  alignItems: 'center',
74
86
  justifyContent: 'center',
75
87
  },
76
- sectionContainer: {
77
- backgroundColor: '#fff',
78
- paddingTop: 16,
79
- },
80
- sectionPadding: {
81
- paddingHorizontal: 16,
82
- paddingBottom: 6,
88
+ buttonContainer: {
89
+ width: '100%',
90
+ alignItems: 'center',
91
+ justifyContent: 'center',
92
+ padding: 16,
83
93
  },
84
- sectionHeading: {
85
- marginBottom: 4,
94
+ upperContainer: {
86
95
  flexDirection: 'row',
87
- alignContent: 'flex-start',
96
+ alignItems: 'center',
88
97
  justifyContent: 'space-between',
89
98
  },
90
- sectionTitle: {
91
- fontFamily: 'sf-bold',
92
- fontSize: 24,
93
- color: Colours.TEXT_DARKEST,
99
+ title: {
100
+ fontFamily: 'sf-semibold',
101
+ fontSize: 16,
94
102
  },
95
- buttonContainer: {
96
- alignItems: 'center',
97
- justifyContent: 'center',
103
+ button: {
104
+ paddingHorizontal: 40,
105
+ marginTop: 16,
98
106
  },
99
107
  });
100
108
 
package/src/components/WidgetSmall.js CHANGED
@@ -30,25 +30,37 @@ class WidgetSmall extends Component {
30
30
  const { options, colourBrandingMain } = this.props;
31
31
  if (options.isWebViewSeparatePage) {
32
32
  return (
33
- <View style={styles.sectionContainer}>
34
- <View style={styles.sectionPadding}>
35
- <View style={styles.sectionHeading}>
36
- <Text style={styles.sectionTitle}>{this.getTitle()}</Text>
33
+ <View style={[styles.buttonContainer, { backgroundColor: Colours.hexToRGBAstring(colourBrandingMain, 0.2) }]}>
34
+ <View style={styles.upperContainer}>
35
+ <View>
36
+ <Text style={[styles.title, { color: colourBrandingMain }]}>{this.getTitle()}</Text>
37
37
  </View>
38
38
  </View>
39
- <View style={styles.buttonContainer}>
40
- <Components.InlineButton
41
- onPress={this.onGoToFullpage}
42
- color={colourBrandingMain}
43
- touchableStyle={{ paddingTop: 6 }}
44
- textStyle={{ color: '#fff' }}
45
- large
46
- >
47
- {options.buttonText}
48
- </Components.InlineButton>
49
- </View>
39
+ <Components.InlineButton onPress={this.onGoToFullpage} color={colourBrandingMain} style={styles.button} large>
40
+ {options.buttonText}
41
+ </Components.InlineButton>
50
42
  </View>
51
43
  );
44
+ // return (
45
+ // <View style={styles.sectionContainer}>
46
+ // <View style={styles.sectionPadding}>
47
+ // <View style={styles.sectionHeading}>
48
+ // <Text style={styles.sectionTitle}>{this.getTitle()}</Text>
49
+ // </View>
50
+ // </View>
51
+ // <View style={styles.buttonContainer}>
52
+ // <Components.InlineButton
53
+ // onPress={this.onGoToFullpage}
54
+ // color={colourBrandingMain}
55
+ // touchableStyle={{ paddingTop: 6 }}
56
+ // textStyle={{ color: '#fff' }}
57
+ // large
58
+ // >
59
+ // {options.buttonText}
60
+ // </Components.InlineButton>
61
+ // </View>
62
+ // </View>
63
+ // );
52
64
  }
53
65
  return (
54
66
  <View style={styles.container}>
@@ -74,28 +86,24 @@ const styles = StyleSheet.create({
74
86
  alignItems: 'center',
75
87
  justifyContent: 'center',
76
88
  },
77
- sectionContainer: {
78
- backgroundColor: '#fff',
79
- paddingTop: 16,
80
- },
81
- sectionPadding: {
82
- paddingHorizontal: 16,
83
- paddingBottom: 6,
89
+ buttonContainer: {
90
+ width: '100%',
91
+ alignItems: 'center',
92
+ justifyContent: 'center',
93
+ padding: 16,
84
94
  },
85
- sectionHeading: {
86
- marginBottom: 4,
95
+ upperContainer: {
87
96
  flexDirection: 'row',
88
- alignContent: 'flex-start',
97
+ alignItems: 'center',
89
98
  justifyContent: 'space-between',
90
99
  },
91
- sectionTitle: {
92
- fontFamily: 'sf-bold',
93
- fontSize: 24,
94
- color: Colours.TEXT_DARKEST,
100
+ title: {
101
+ fontFamily: 'sf-semibold',
102
+ fontSize: 16,
95
103
  },
96
- buttonContainer: {
97
- alignItems: 'center',
98
- justifyContent: 'center',
104
+ button: {
105
+ paddingHorizontal: 40,
106
+ marginTop: 16,
99
107
  },
100
108
  });
101
109