Merge pull request #1870 from myxmaster/fix-theme-change

Fix updating colors on theme change

.github/PULL_REQUEST_TEMPLATE.md

@@ -11,7 +11,7 @@ This pull request is categorized as a:
 - [ ] Code refactor
 - [ ] Configuration change
 - [ ] Locales update
-- [ ] Quality assurance 
+- [ ] Quality assurance
 - [ ] Other
 
 ## Checklist

.github/workflows/lint.yml

@@ -14,6 +14,6 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
       - run: yarn install --frozen-lockfile
       - run: yarn run lint

.github/workflows/prettier.yml

@@ -14,6 +14,6 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
       - run: yarn install --frozen-lockfile
       - run: yarn run prettier

.github/workflows/test.yml

@@ -14,6 +14,6 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
       - run: yarn install --frozen-lockfile
       - run: yarn run test

README.md

@@ -108,6 +108,9 @@ ZEUS is proud to be integrated on the following platforms:
 
 **Don't trust, verify** the code with your own two eyes. Then when ready proceed to the steps below based on your platform.
 
+### Prerequisites
+1. Node.js (minimum version: 18.17)
+
 ### Android
 1. install and setup react-native and its related dependencies under **"Building Projects with Native Code"** on
 [react-native's Getting Started page](https://reactnative.dev/docs/environment-setup)

check-styles.test.ts

@@ -0,0 +1,38 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('static style sheets', () => {
+    it('must not contain themeColor() calls', () => {
+        const dirs = fs
+            .readdirSync('.', { withFileTypes: true })
+            .filter((e) => e.isDirectory() && e.name !== 'node_modules')
+            .map((e) => e.name);
+        dirs.push('.');
+        const tsxFiles = dirs.flatMap((dir) =>
+            fs
+                .readdirSync(dir, { recursive: dir !== '.' })
+                .filter(
+                    (file) =>
+                        typeof file === 'string' &&
+                        !file.startsWith('node_modules/') &&
+                        file.toLowerCase().endsWith('.tsx')
+                )
+                .map((file) => path.join(dir, file as string))
+        );
+        const regExp = new RegExp(
+            /\n[^\s][^\n]+StyleSheet\.create\(\{.*themeColor\(/,
+            's'
+        );
+        const invalidFiles = tsxFiles.filter((file) =>
+            fs.readFileSync(file).toString('utf8').match(regExp)
+        );
+
+        if (invalidFiles.length > 0) {
+            throw new Error(
+                'The following files contain static StyleSheets with themeColor() calls. ' +
+                    'This is not allowed because the color then will not be updated when theme is changed.\n' +
+                    invalidFiles.join('\n')
+            );
+        }
+    });
+});

components/CollapsedQR.tsx

@@ -41,12 +41,17 @@ function ValueText({ value, truncateLongValue }: ValueTextProps) {
             }
             highlight={false}
         >
-            <Text style={styles.value} numberOfLines={state.numberOfValueLines}>
+            <Text
+                style={{ ...styles.value, color: themeColor('secondaryText') }}
+                numberOfLines={state.numberOfValueLines}
+            >
                 {value}
             </Text>
         </Touchable>
     ) : (
-        <Text style={styles.value}>{value}</Text>
+        <Text style={{ ...styles.value, color: themeColor('secondaryText') }}>
+            {value}
+        </Text>
     );
 }
 
@@ -259,7 +264,6 @@ const styles = StyleSheet.create({
     value: {
         marginBottom: 15,
         paddingLeft: 20,
-        color: themeColor('secondaryText'),
         fontFamily: 'PPNeueMontreal-Book'
     },
     qrPadding: {

package.json

@@ -9,7 +9,8 @@
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!(react-native|@react-native|react-native-blob-util|react-native-randombytes)/)"
-    ]
+    ],
+    "testPathIgnorePatterns": ["check-styles.test.ts"]
   },
   "scripts": {
     "start": "react-native start",
@@ -18,7 +19,7 @@
     "postinstall": "rn-nodeify --install --hack & npx jetify & yarn run patch & react-native setup-ios-permissions & yarn run fetch-libraries & pod-install",
     "test": "jest",
     "tsc": "tsc",
-    "lint": "eslint --ext .js,.ts,.tsx \"*.@(js|ts|tsx)\" .",
+    "lint": "eslint --ext .js,.ts,.tsx \"*.@(js|ts|tsx)\" . && yarn run test check-styles.test.ts --testPathIgnorePatterns=",
     "prettier": "prettier --check \"**/*.ts*\"",
     "prettier-write": "prettier --check --write \"**/*.ts*\"",
     "patch": "git apply patches/react-native-camera-kit.patch && git apply patches/rnqli-build.gradle.patch",

views/Channels/Channel.tsx

@@ -261,7 +261,9 @@ export default class ChannelView extends React.Component<
                         localBalance={lurkerMode ? 50 : localBalance}
                         remoteBalance={lurkerMode ? 50 : remoteBalance}
                     />
-                    <Text style={styles.status}>
+                    <Text
+                        style={{ ...styles.status, color: themeColor('text') }}
+                    >
                         {pendingOpen
                             ? localeString('views.Channel.pendingOpen')
                             : pendingClose || closing
@@ -568,7 +570,12 @@ export default class ChannelView extends React.Component<
                         <View>
                             {(BackendUtils.isLNDBased() || !implementation) && (
                                 <>
-                                    <Text style={styles.text}>
+                                    <Text
+                                        style={{
+                                            ...styles.text,
+                                            color: themeColor('text')
+                                        }}
+                                    >
                                         {localeString(
                                             'views.Channel.closingRate'
                                         )}
@@ -610,11 +617,6 @@ export default class ChannelView extends React.Component<
 
 const styles = StyleSheet.create({
     text: {
-        color: themeColor('text'),
-        fontFamily: 'PPNeueMontreal-Book'
-    },
-    secondaryText: {
-        color: themeColor('secondaryText'),
         fontFamily: 'PPNeueMontreal-Book'
     },
     content: {
@@ -626,7 +628,6 @@ const styles = StyleSheet.create({
     },
     status: {
         fontFamily: 'PPNeueMontreal-Book',
-        color: themeColor('text'),
         alignSelf: 'center',
         marginBottom: 10
     },
@@ -639,22 +640,8 @@ const styles = StyleSheet.create({
         paddingBottom: 30,
         textAlign: 'center'
     },
-    balance: {
-        fontSize: 15,
-        fontWeight: 'bold'
-    },
     button: {
         paddingTop: 15,
         paddingBottom: 15
-    },
-    editFeeBox: {
-        paddingTop: 10,
-        paddingBottom: 10,
-        paddingLeft: 15,
-        marginTop: 15,
-        flexDirection: 'row',
-        borderRadius: 4,
-        borderColor: themeColor('secondaryText'),
-        borderWidth: 3
     }
 });

views/ContactDetails.tsx

@@ -281,9 +281,12 @@ export default class ContactDetails extends React.Component<
                                                     >
                                                         <LightningBolt />
                                                         <Text
-                                                            style={
-                                                                styles.contactFields
-                                                            }
+                                                            style={{
+                                                                ...styles.contactFields,
+                                                                color: themeColor(
+                                                                    'chain'
+                                                                )
+                                                            }}
                                                         >
                                                             {address.length > 23
                                                                 ? `${address.substring(
@@ -326,9 +329,12 @@ export default class ContactDetails extends React.Component<
                                                     >
                                                         <LightningBolt />
                                                         <Text
-                                                            style={
-                                                                styles.contactFields
-                                                            }
+                                                            style={{
+                                                                ...styles.contactFields,
+                                                                color: themeColor(
+                                                                    'chain'
+                                                                )
+                                                            }}
                                                         >
                                                             {address.length > 23
                                                                 ? `${address.substring(
@@ -372,9 +378,12 @@ export default class ContactDetails extends React.Component<
                                                     >
                                                         <BitcoinIcon />
                                                         <Text
-                                                            style={
-                                                                styles.contactFields
-                                                            }
+                                                            style={{
+                                                                ...styles.contactFields,
+                                                                color: themeColor(
+                                                                    'chain'
+                                                                )
+                                                            }}
                                                         >
                                                             {address.length > 23
                                                                 ? `${address.substring(
@@ -413,9 +422,12 @@ export default class ContactDetails extends React.Component<
                                                     >
                                                         <VerifiedAccount />
                                                         <Text
-                                                            style={
-                                                                styles.contactFields
-                                                            }
+                                                            style={{
+                                                                ...styles.contactFields,
+                                                                color: themeColor(
+                                                                    'chain'
+                                                                )
+                                                            }}
                                                         >
                                                             {value.length > 15
                                                                 ? `${value.substring(
@@ -454,9 +466,12 @@ export default class ContactDetails extends React.Component<
                                                             <KeySecurity />
                                                         </View>
                                                         <Text
-                                                            style={
-                                                                styles.contactFields
-                                                            }
+                                                            style={{
+                                                                ...styles.contactFields,
+                                                                color: themeColor(
+                                                                    'chain'
+                                                                )
+                                                            }}
                                                         >
                                                             {value.length > 15
                                                                 ? `${value.substring(
@@ -498,7 +513,6 @@ const styles = StyleSheet.create({
     contactFields: {
         fontSize: 24,
         marginBottom: 4,
-        marginLeft: 4,
-        color: themeColor('chain')
+        marginLeft: 4
     }
 });

views/EditFee.tsx

@@ -299,7 +299,14 @@ export default class EditFee extends React.Component<
 
                                 {!displayOnly && (
                                     <>
-                                        <Text style={styles.custom}>
+                                        <Text
+                                            style={{
+                                                fontSize: 18,
+                                                top: 48,
+                                                left: 15,
+                                                color: themeColor('text')
+                                            }}
+                                        >
                                             {localeString(
                                                 'views.EditFee.custom'
                                             )}
@@ -403,12 +410,6 @@ const styles = StyleSheet.create({
     feeText: {
         fontSize: 18
     },
-    custom: {
-        color: themeColor('text'),
-        fontSize: 18,
-        top: 48,
-        left: 15
-    },
     confirmButton: {
         marginTop: 20,
         width: 350

views/LnurlPay/Success.tsx

@@ -119,14 +119,27 @@ export default class LnurlPaySuccess extends React.Component<LnurlPaySuccessProp
 
         return scrollable ? (
             <ScrollView
-                style={{ ...styles.container, maxHeight }}
+                style={{
+                    ...styles.container,
+                    borderColor: themeColor('text'),
+                    backgroundColor: themeColor('secondary'),
+                    maxHeight
+                }}
                 contentContainerStyle={{ gap: 5, padding: 15 }}
             >
                 {body}
                 {servicedBy}
             </ScrollView>
         ) : (
-            <View style={{ ...styles.container, maxHeight, padding: 15 }}>
+            <View
+                style={{
+                    ...styles.container,
+                    borderColor: themeColor('text'),
+                    backgroundColor: themeColor('secondary'),
+                    maxHeight,
+                    padding: 15
+                }}
+            >
                 {body}
                 {servicedBy}
             </View>
@@ -138,8 +151,6 @@ const styles = StyleSheet.create({
     container: {
         borderWidth: 1,
         borderRadius: 5,
-        borderColor: themeColor('text'),
-        backgroundColor: themeColor('secondary'),
         gap: 5
     }
 });

views/Routing/RoutingHeader.tsx

@@ -66,8 +66,7 @@ export function RoutingHeader(props) {
                 : 120,
             padding: 16,
             borderBottomLeftRadius: 40,
-            borderBottomRightRadius: 20,
-            color: themeColor('text')
+            borderBottomRightRadius: 20
         }
     });