Lots of updates

src/components/Menu/Button.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import {
+  Alert,
+  AlertButton,
+  AlertOptions,
+  Pressable,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native'
+import { useTheme } from 'src/utils/styles/ThemeManager'
+
+import constants from 'src/utils/styles/constants'
+
+export interface Props {
+  text: string
+  destructive?: boolean
+  alertOption?: {
+    title: string
+    message?: string | undefined
+    buttons?: AlertButton[] | undefined
+    options?: AlertOptions | undefined
+  }
+}
+
+const Core: React.FC<Props> = ({ text, destructive = false }) => {
+  const { theme } = useTheme()
+
+  return (
+    <View style={styles.core}>
+      <Text style={{ color: destructive ? theme.dangerous : theme.primary }}>
+        {text}
+      </Text>
+    </View>
+  )
+}
+
+const MenuButton: React.FC<Props> = ({ ...props }) => {
+  const { theme } = useTheme()
+
+  return (
+    <Pressable
+      style={[styles.base, { borderBottomColor: theme.separator }]}
+      onPress={() =>
+        props.alertOption &&
+        Alert.alert(
+          props.alertOption.title,
+          props.alertOption.message,
+          props.alertOption.buttons,
+          props.alertOption.options
+        )
+      }
+    >
+      <Core {...props} />
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    height: 50,
+    borderBottomWidth: 1
+  },
+  core: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: constants.GLOBAL_PAGE_PADDING,
+    paddingRight: constants.GLOBAL_PAGE_PADDING
+  }
+})
+
+export default MenuButton

src/components/Menu/Container.tsx

@@ -1,8 +1,24 @@
 import React from 'react'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from 'src/utils/styles/ThemeManager'
+
+import constants from 'src/utils/styles/constants'
 
 const MenuContainer: React.FC = ({ ...props }) => {
-  return <View>{props.children}</View>
+  const { theme } = useTheme()
+
+  return (
+    <View style={[styles.base, { borderTopColor: theme.separator }]}>
+      {props.children}
+    </View>
+  )
 }
 
+const styles = StyleSheet.create({
+  base: {
+    borderTopWidth: 1,
+    marginBottom: constants.SPACING_M
+  }
+})
+
 export default MenuContainer

src/components/Menu/Item.tsx

@@ -4,6 +4,8 @@ import { useNavigation } from '@react-navigation/native'
 import { Feather } from '@expo/vector-icons'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
+import constants from 'src/utils/styles/constants'
+
 export interface Props {
   icon?: string
   title: string
@@ -16,8 +18,17 @@ const Core: React.FC<Props> = ({ icon, title, navigateTo }) => {
 
   return (
     <View style={styles.core}>
-      {icon && <Feather name={icon} size={24} style={styles.iconLeading} />}
-      <Text>{title}</Text>
+      {icon && (
+        <Feather
+          name={icon}
+          size={constants.FONT_SIZE_M + 2}
+          style={styles.iconLeading}
+          color={theme.primary}
+        />
+      )}
+      <Text style={{ color: theme.primary, fontSize: constants.FONT_SIZE_M }}>
+        {title}
+      </Text>
       {navigateTo && (
         <Feather
           name='chevron-right'
@@ -31,11 +42,12 @@ const Core: React.FC<Props> = ({ icon, title, navigateTo }) => {
 }
 
 const MenuItem: React.FC<Props> = ({ ...props }) => {
+  const { theme } = useTheme()
   const navigation = useNavigation()
 
   return props.navigateTo ? (
     <Pressable
-      style={styles.base}
+      style={[styles.base, { borderBottomColor: theme.separator }]}
       onPress={() => {
         navigation.navigate(props.navigateTo!, props.navigateToParams)
       }}
@@ -52,15 +64,14 @@ const MenuItem: React.FC<Props> = ({ ...props }) => {
 const styles = StyleSheet.create({
   base: {
     height: 50,
-    borderBottomColor: 'lightgray',
     borderBottomWidth: 1
   },
   core: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    paddingLeft: 12,
-    paddingRight: 12
+    paddingLeft: constants.GLOBAL_PAGE_PADDING,
+    paddingRight: constants.GLOBAL_PAGE_PADDING
   },
   iconLeading: {
     marginRight: 8