From 3797dd4dbabe2d25374c345c2079defb7fa80695 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 2 Feb 2021 19:02:55 -0500
Subject: adjusted styling

---
 src/components/common/TaggSquareButton.tsx | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

(limited to 'src/components/common')

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 41e0b891..4fe61b95 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -7,7 +7,7 @@ import {
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import {normalize} from '../../utils';
+import {normalize, SCREEN_WIDTH} from '../../utils';
 
 interface TaggSquareButtonProps extends ViewProps {
   onPress: (event: GestureResponderEvent) => void;
@@ -18,13 +18,13 @@ interface TaggSquareButtonProps extends ViewProps {
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
-  const color = (() => {
+  const buttonStyles = (() => {
     switch (props.color) {
       case 'purple':
-        return '#8F01FF';
+        return {backgroundColor: '#8F01FF'};
       case 'white':
       default:
-        return 'white';
+        return {backgroundColor: 'white'};
     }
   })();
   switch (props.mode) {
@@ -32,8 +32,8 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
-          <Text style={styles.normalLabel}>{props.title}</Text>
+          style={[styles.largeButton, buttonStyles, props.style]}>
+          <Text style={styles.largeLabel}>{props.title}</Text>
         </TouchableOpacity>
       );
     case 'normal':
@@ -41,7 +41,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
+          style={[styles.normalButton, buttonStyles, props.style]}>
           <Text style={styles.normalLabel}>{props.title}</Text>
         </TouchableOpacity>
       );
@@ -55,25 +55,24 @@ const styles = StyleSheet.create({
     width: '70%',
     height: '10%',
     borderRadius: 5,
-    // marginBottom: '15%',
   },
   largeLabel: {
-    fontSize: normalize(30),
+    fontSize: normalize(26),
     fontWeight: '500',
-    color: '#ddd',
+    color: '#eee',
   },
   normalButton: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: '70%',
-    height: '10%',
+    width: SCREEN_WIDTH * 0.45,
+    aspectRatio: 3.7,
     borderRadius: 5,
-    // marginBottom: '15%',
+    marginBottom: '5%',
   },
   normalLabel: {
-    fontSize: normalize(24),
+    fontSize: normalize(20),
     fontWeight: '500',
-    color: '#ddd',
+    color: '#78A0EF',
   },
 });
 
-- 
cgit v1.2.3-70-g09d2