Merge pull request #217 from IvanIFChen/tma597-update-login-button

[TMA-597] Update Login Button Styles

1 files changed, 79 insertions, 0 deletions

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
new file mode 100644
index 00000000..4fe61b95
--- /dev/null
+++ b/src/components/common/TaggSquareButton.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+
+interface TaggSquareButtonProps extends ViewProps {
+  onPress: (event: GestureResponderEvent) => void;
+  title: string;
+  mode: 'normal' | 'large';
+  color: 'purple' | 'white';
+  style?: ViewStyle;
+}
+
+const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
+  const buttonStyles = (() => {
+    switch (props.color) {
+      case 'purple':
+        return {backgroundColor: '#8F01FF'};
+      case 'white':
+      default:
+        return {backgroundColor: 'white'};
+    }
+  })();
+  switch (props.mode) {
+    case 'large':
+      return (
+        <TouchableOpacity
+          onPress={props.onPress}
+          style={[styles.largeButton, buttonStyles, props.style]}>
+          <Text style={styles.largeLabel}>{props.title}</Text>
+        </TouchableOpacity>
+      );
+    case 'normal':
+    default:
+      return (
+        <TouchableOpacity
+          onPress={props.onPress}
+          style={[styles.normalButton, buttonStyles, props.style]}>
+          <Text style={styles.normalLabel}>{props.title}</Text>
+        </TouchableOpacity>
+      );
+  }
+};
+
+const styles = StyleSheet.create({
+  largeButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: '10%',
+    borderRadius: 5,
+  },
+  largeLabel: {
+    fontSize: normalize(26),
+    fontWeight: '500',
+    color: '#eee',
+  },
+  normalButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.45,
+    aspectRatio: 3.7,
+    borderRadius: 5,
+    marginBottom: '5%',
+  },
+  normalLabel: {
+    fontSize: normalize(20),
+    fontWeight: '500',
+    color: '#78A0EF',
+  },
+});
+
+export default TaggSquareButton;