Merge pull request #5 from Abby-Wheelis/profile-migration-fixes

Profile migration fixes
Abby-Wheelis · Jul 17, 2023 · 04d39b6 · 04d39b6
2 parents e8faa6f + 9a639ca
commit 04d39b6
Show file tree

Hide file tree

Showing 9 changed files with 295 additions and 385 deletions.
diff --git a/www/js/control/ControlDataTable.jsx b/www/js/control/ControlDataTable.jsx
@@ -6,7 +6,7 @@ import { array } from "prop-types";
 // Note the camelCase to dash-case conventions when translating to .html files!
 // val with explicit call toString() to resolve bool values not showing
 const ControlDataTable = ({ controlData }) => {
-  // console.log("Printing data trying to tabulate", controlData);
+  console.log("Printing data trying to tabulate", controlData);
   return (
     //rows require unique keys!
     <DataTable style={styles.table}>

diff --git a/www/js/control/ExpandMenu.jsx b/www/js/control/ExpandMenu.jsx
@@ -1,19 +1,20 @@
 import React from "react";
 import { angularize} from "../angular-react-helper";
 import { StyleSheet } from 'react-native';
-import { List } from 'react-native-paper';
+import { List, useTheme } from 'react-native-paper';
 import { useTranslation } from "react-i18next";
 import { string } from "prop-types";
 
 const ExpansionSection = (props) => {
     const { t } = useTranslation(); //this accesses the translations
+    const { colors } = useTheme(); // use this to get the theme colors instead of hardcoded #hex colors
     const [expanded, setExpanded] = React.useState(false);
 
     const handlePress = () => setExpanded(!expanded);
 
   return (
     <List.Accordion
-      style={styles.section}
+      style={styles.section(colors.surface)}
       title={t(props.sectionTitle)}
       titleStyle={styles.title}
       expanded={expanded}
@@ -23,12 +24,11 @@ const ExpansionSection = (props) => {
   );
 };
 const styles = StyleSheet.create({
-  section:{
+  section: (surfaceColor) => ({
       justifyContent: 'space-between',
-      backgroundColor: '#fff',
-      height: 75,
-      margin: 5,
-  },
+      backgroundColor: surfaceColor,
+      margin: 1,
+  }),
   title: {
       fontSize: 16,
       marginVertical: 2,
@@ -39,4 +39,4 @@ ExpansionSection.propTypes = {
 }
 
 angularize(ExpansionSection, 'ExpansionSection', 'emission.main.control.expansionSection'); 
-export default ExpansionSection;
+export default ExpansionSection;
diff --git a/www/js/control/PopOpCode.jsx b/www/js/control/PopOpCode.jsx
@@ -1,30 +1,52 @@
 import React from "react";
 import { angularize} from "../angular-react-helper";
-import { Modal } from 'react-native';
-import { Text, IconButton, Dialog } from 'react-native-paper';
+import { Modal, StyleSheet } from 'react-native';
+import { Button, Text, IconButton, Dialog, useTheme } from 'react-native-paper';
 import { useTranslation } from "react-i18next";
 import { bool, string, func } from "prop-types";
 import QrCode from "../components/QrCode";
 
 const PopOpCode = ({visibilityValue, tokenURL, action, setVis}) => {
     const { t } = useTranslation(); 
+    const { colors } = useTheme();
 
     return (
         <Modal visible={visibilityValue} onDismiss={() => setVis(false)}
-        elevated={true}
-        style={{ elevation: 3 }}
         transparent={true}>
-            <Dialog visible={visibilityValue} onDismiss={() => setVis(false)}>
+            <Dialog visible={visibilityValue} 
+            onDismiss={() => setVis(false)}
+            style={styles.dialog(colors.elevation.level3)}>
                 <Dialog.Title>{t("general-settings.qrcode")}</Dialog.Title>
-                <Dialog.Content>
+                <Dialog.Content style={styles.content}>
                     <QrCode value={tokenURL}></QrCode>
                     <Text>{t("general-settings.qrcode-share-title")}</Text>
-                    <IconButton icon="share" onPress={() => action()}/>
+                    <IconButton icon="share" onPress={() => action()} style={styles.button}/>
                 </Dialog.Content>
+                <Dialog.Actions>
+                    <Button onPress={() => setVis(false)}>{t('general-settings.cancel')}</Button>
+                </Dialog.Actions>
             </Dialog>
         </Modal>
     )
 }
+const styles = StyleSheet.create({
+    dialog: (surfaceColor) => ({
+        backgroundColor: surfaceColor,
+        margin: 1,
+    }),
+    title:
+    {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center', 
+    },
+    button: {
+        margin: 'auto',
+    }
+  });
 PopOpCode.prototypes = {
     visibilityValue: bool,
     tokenURL: string,