Chore: Implement review feedback

components/common/button-row.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+const ButtonRow = ({ children }) => {
+  return <View style={styles.container}>{children}</View>
+}
+
+ButtonRow.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+})
+
+export default ButtonRow

components/common/button-to-button.js

@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 
-const ButtonToButton = ({ children }) => {
+const ButtonRow = ({ children }) => {
   return <View style={styles.container}>{children}</View>
 }
 
-ButtonToButton.propTypes = {
-  children: PropTypes.node,
+ButtonRow.propTypes = {
+  children: PropTypes.node.isRequired,
 }
 
 const styles = StyleSheet.create({
@@ -17,4 +17,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default ButtonToButton
+export default ButtonRow

components/settings/about.js

@@ -5,7 +5,7 @@ import AppPage from '../common/app-page'
 import AppText from '../common/app-text'
 import Segment from '../common/segment'
 import Button from '../common/button'
-import ButtonToButton from '../common/button-to-button'
+import ButtonRow from '../common/button-row'
 
 import labels from '../../i18n/en/settings'
 import links from '../../i18n/en/links'
@@ -15,29 +15,18 @@ const AboutSection = () => {
     <AppPage title={labels.aboutSection.title}>
       <Segment>
         <AppText>{labels.aboutSection.text}</AppText>
-        <ButtonToButton>
+        <ButtonRow>
+          {[links.email, links.gitlab, links.website].map((link) => (
             <Button
+              key={link.url}
               isCTA
-            isSmall={true}
-            onPress={() => Linking.openURL(links.email.url)}
+              isSmall
+              onPress={() => Linking.openURL(link['url'])}
             >
-            {links.email.text}
+              {link['text']}
             </Button>
-          <Button
-            isCTA
-            isSmall={true}
-            onPress={() => Linking.openURL(links.gitlab.url)}
-          >
-            {links.gitlab.text}
-          </Button>
-          <Button
-            isCTA
-            isSmall={true}
-            onPress={() => Linking.openURL(links.website.url)}
-          >
-            {links.website.text}
-          </Button>
-        </ButtonToButton>
+          ))}
+        </ButtonRow>
       </Segment>
       <Segment title={labels.philosophy.title}>
         <AppText>{labels.philosophy.text}</AppText>
@@ -47,11 +36,7 @@ const AboutSection = () => {
       </Segment>
       <Segment title={labels.donate.title}>
         <AppText>{labels.donate.note}</AppText>
-        <Button
-          isCTA
-          isSmall={true}
-          onPress={() => Linking.openURL(links.donate.url)}
-        >
+        <Button isCTA isSmall onPress={() => Linking.openURL(links.donate.url)}>
           {links.donate.text}
         </Button>
       </Segment>