@plusscommunities/pluss-core-app 8.0.0 → 8.0.1-auth.0

package/src/components/ConfirmPopup.js

@@ -1,120 +1,151 @@
-import React, { PureComponent } from 'react';
-import { Text, View } from 'react-native';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import { getMainBrandingColourFromState, TEXT_DARK } from '../colours';
-import { Spinner } from './Spinner';
-import { InlineButton } from './InlineButton';
-import { MiddlePopup } from './MiddlePopup';
+import React, { PureComponent } from "react";
+import { View } from "react-native";
+import { Text } from "./Text";
+import _ from "lodash";
+import { connect } from "react-redux";
+import { getMainBrandingColourFromState, TEXT_DARK } from "../colours";
+import { Spinner } from "./Spinner";
+import { InlineButton } from "./InlineButton";
+import { MiddlePopup } from "./MiddlePopup";
 
 class ConfirmPopup extends PureComponent {
-  render() {
-    return (
-      <MiddlePopup
-        visible={this.props.visible}
-        onClose={this.props.onClose}
-        style={[styles.popup, this.props.headerContent && { paddingTop: 16 }]}
-      >
-        {this.props.headerContent && <View style={{ width: 350, marginBottom: 16 }}>{this.props.headerContent}</View>}
-        {!_.isEmpty(this.props.text) && (
-          <Text style={[styles.text, this.props.textAlignLeft && styles.textAlignLeft]}>{this.props.text}</Text>
-        )}
-        {!_.isEmpty(this.props.subtext) && (
-          <Text style={[styles.subtext, this.props.textAlignLeft && styles.textAlignLeft]}>{this.props.subtext}</Text>
-        )}
-        {this.props.extraContent && <View style={{ width: 350, marginTop: 16 }}>{this.props.extraContent}</View>}
-        {this.props.children}
-        <View style={[styles.buttonsContainer, this.props.verticalButtons && styles.verticalButtons]}>
-          {this.props.buttonsLoading && (
-            <View style={styles.loadingContainer}>
-              <Spinner />
-            </View>
-          )}
-          {!this.props.hideNo && !this.props.buttonsLoading && (
-            <InlineButton
-              onPress={this.props.onCancel}
-              color="#fff"
-              style={[
-                styles.button,
-                styles.noButton,
-                this.props.verticalButtons && styles.buttonVertical,
-                { borderColor: this.props.colourBrandingMain },
-              ]}
-              textStyle={{ color: this.props.colourBrandingMain }}
-              large
-            >
-              {this.props.noText || 'No'}
-            </InlineButton>
-          )}
-          {!this.props.hideYes && !this.props.buttonsLoading && (
-            <InlineButton
-              onPress={this.props.onConfirm}
-              color={this.props.colourBrandingMain}
-              style={[styles.button, this.props.verticalButtons && styles.buttonVertical]}
-              large
-            >
-              {this.props.yesText || 'Yes'}
-            </InlineButton>
-          )}
-        </View>
-      </MiddlePopup>
-    );
-  }
+	render() {
+		return (
+			<MiddlePopup
+				visible={this.props.visible}
+				onClose={this.props.onClose}
+				style={[styles.popup, this.props.headerContent && { paddingTop: 16 }]}
+			>
+				{this.props.headerContent && (
+					<View style={{ width: 350, marginBottom: 16 }}>
+						{this.props.headerContent}
+					</View>
+				)}
+				{!_.isEmpty(this.props.text) && (
+					<Text
+						style={[
+							styles.text,
+							this.props.textAlignLeft && styles.textAlignLeft,
+						]}
+					>
+						{this.props.text}
+					</Text>
+				)}
+				{!_.isEmpty(this.props.subtext) && (
+					<Text
+						style={[
+							styles.subtext,
+							this.props.textAlignLeft && styles.textAlignLeft,
+						]}
+					>
+						{this.props.subtext}
+					</Text>
+				)}
+				{this.props.extraContent && (
+					<View style={{ width: 350, marginTop: 16 }}>
+						{this.props.extraContent}
+					</View>
+				)}
+				{this.props.children}
+				<View
+					style={[
+						styles.buttonsContainer,
+						this.props.verticalButtons && styles.verticalButtons,
+					]}
+				>
+					{this.props.buttonsLoading && (
+						<View style={styles.loadingContainer}>
+							<Spinner />
+						</View>
+					)}
+					{!this.props.hideNo && !this.props.buttonsLoading && (
+						<InlineButton
+							onPress={this.props.onCancel}
+							color="#fff"
+							style={[
+								styles.button,
+								styles.noButton,
+								this.props.verticalButtons && styles.buttonVertical,
+								{ borderColor: this.props.colourBrandingMain },
+							]}
+							textStyle={{ color: this.props.colourBrandingMain }}
+							large
+						>
+							{this.props.noText || "No"}
+						</InlineButton>
+					)}
+					{!this.props.hideYes && !this.props.buttonsLoading && (
+						<InlineButton
+							onPress={this.props.onConfirm}
+							color={this.props.colourBrandingMain}
+							style={[
+								styles.button,
+								this.props.verticalButtons && styles.buttonVertical,
+							]}
+							large
+						>
+							{this.props.yesText || "Yes"}
+						</InlineButton>
+					)}
+				</View>
+			</MiddlePopup>
+		);
+	}
 }
 
 const styles = {
-  popup: {
-    padding: 24,
-    margin: 16,
-    maxWidth: 350,
-  },
-  text: {
-    fontFamily: 'sf-bold',
-    fontSize: 20,
-    color: TEXT_DARK,
-    textAlign: 'center',
-  },
-  subtext: {
-    fontFamily: 'sf-regular',
-    fontSize: 17,
-    color: TEXT_DARK,
-    textAlign: 'center',
-  },
-  textAlignLeft: {
-    textAlign: 'left',
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    marginTop: 24,
-  },
-  loadingContainer: {
-    height: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    width: 120,
-    paddingHorizontal: 2,
-  },
-  noButton: {
-    borderWidth: 1,
-    marginRight: 16,
-  },
-  buttonVertical: {
-    width: '100%',
-    marginTop: 16,
-    marginRight: 0,
-    paddingHorizontal: 8,
-  },
-  verticalButtons: {
-    flexDirection: 'column-reverse',
-  },
+	popup: {
+		padding: 24,
+		margin: 16,
+		maxWidth: 350,
+	},
+	text: {
+		fontFamily: "sf-bold",
+		fontSize: 20,
+		color: TEXT_DARK,
+		textAlign: "center",
+	},
+	subtext: {
+		fontFamily: "sf-regular",
+		fontSize: 17,
+		color: TEXT_DARK,
+		textAlign: "center",
+	},
+	textAlignLeft: {
+		textAlign: "left",
+	},
+	buttonsContainer: {
+		flexDirection: "row",
+		marginTop: 24,
+	},
+	loadingContainer: {
+		height: 40,
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	button: {
+		width: 120,
+		paddingHorizontal: 2,
+	},
+	noButton: {
+		borderWidth: 1,
+		marginRight: 16,
+	},
+	buttonVertical: {
+		width: "100%",
+		marginTop: 16,
+		marginRight: 0,
+		paddingHorizontal: 8,
+	},
+	verticalButtons: {
+		flexDirection: "column-reverse",
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const confirmPopup = connect(mapStateToProps, {})(ConfirmPopup);

package/src/components/ConfirmationPopup.js

@@ -1,79 +1,90 @@
-import React, { PureComponent } from 'react';
-import { Text } from 'react-native';
-import { connect } from 'react-redux';
-import { Pl60Icon } from '../fonts';
-import { COLOUR_GREEN, TEXT_DARK, getMainBrandingColourFromState } from '../colours';
-import { MiddlePopup } from './MiddlePopup';
-import { InlineButton } from './InlineButton';
+import React, { PureComponent } from "react";
+import { Text } from "./Text";
+import { connect } from "react-redux";
+import { FontAwesome } from "./Icon";
+import {
+	COLOUR_GREEN,
+	TEXT_DARK,
+	getMainBrandingColourFromState,
+} from "../colours";
+import { MiddlePopup } from "./MiddlePopup";
+import { InlineButton } from "./InlineButton";
 
 class ConfirmationPopup extends PureComponent {
-  render() {
-    return (
-      <MiddlePopup visible={this.props.visible} onClose={this.props.onClose} style={[styles.popup, this.props.style]}>
-        <Pl60Icon style={styles.icon} name="circleoutlined" />
-        <Text style={styles.text}>{this.props.confirmText}</Text>
-        {this.props.onPressAction && (
-          <InlineButton
-            onPress={this.props.onPressAction}
-            color={this.props.colourBrandingMain}
-            style={[styles.button, this.props.largeButtons && styles.largeButton]}
-            large={this.props.largeButtons}
-          >
-            {this.props.repeatText}
-          </InlineButton>
-        )}
-        <InlineButton
-          onPress={this.props.onClose}
-          color="#fff"
-          style={[
-            styles.button,
-            styles.closeButton,
-            this.props.largeButtons && styles.largeButton,
-            { borderColor: this.props.colourBrandingMain },
-          ]}
-          textStyle={{ color: this.props.colourBrandingMain }}
-          large={this.props.largeButtons}
-        >
-          Close
-        </InlineButton>
-      </MiddlePopup>
-    );
-  }
+	render() {
+		return (
+			<MiddlePopup
+				visible={this.props.visible}
+				onClose={this.props.onClose}
+				style={[styles.popup, this.props.style]}
+			>
+				<FontAwesome style={styles.icon} name="check-circle" />
+				<Text style={styles.text}>{this.props.confirmText}</Text>
+				{this.props.onPressAction && (
+					<InlineButton
+						onPress={this.props.onPressAction}
+						color={this.props.colourBrandingMain}
+						style={[
+							styles.button,
+							this.props.largeButtons && styles.largeButton,
+						]}
+						large={this.props.largeButtons}
+					>
+						{this.props.repeatText}
+					</InlineButton>
+				)}
+				<InlineButton
+					onPress={this.props.onClose}
+					color="#fff"
+					style={[
+						styles.button,
+						styles.closeButton,
+						this.props.largeButtons && styles.largeButton,
+						{ borderColor: this.props.colourBrandingMain },
+					]}
+					textStyle={{ color: this.props.colourBrandingMain }}
+					large={this.props.largeButtons}
+				>
+					Close
+				</InlineButton>
+			</MiddlePopup>
+		);
+	}
 }
 
 const styles = {
-  popup: {
-    width: 280,
-    paddingVertical: 40,
-  },
-  icon: {
-    fontSize: 52,
-    color: COLOUR_GREEN,
-  },
-  text: {
-    fontFamily: 'sf-bold',
-    fontSize: 24,
-    lineHeight: 24,
-    color: TEXT_DARK,
-    textAlign: 'center',
-    marginTop: 8,
-  },
-  button: {
-    width: 150,
-    marginTop: 20,
-  },
-  closeButton: {
-    borderWidth: 1,
-  },
-  largeButton: {
-    width: 250,
-  },
+	popup: {
+		width: 280,
+		paddingVertical: 40,
+	},
+	icon: {
+		fontSize: 52,
+		color: COLOUR_GREEN,
+	},
+	text: {
+		fontFamily: "sf-bold",
+		fontSize: 24,
+		lineHeight: 24,
+		color: TEXT_DARK,
+		textAlign: "center",
+		marginTop: 8,
+	},
+	button: {
+		width: 150,
+		marginTop: 20,
+	},
+	closeButton: {
+		borderWidth: 1,
+	},
+	largeButton: {
+		width: 250,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const confirmationPopup = connect(mapStateToProps, {})(ConfirmationPopup);