Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix updating colors on theme change #1870

Merged
merged 2 commits into from
Nov 27, 2023
Merged

Fix updating colors on theme change #1870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4d59f2
moved themeColor() calls from static styles to render methods
myxmaster Nov 25, 2023
a2ed49d
created test to ensure static styles don't contain themeColor() calls…
myxmaster Nov 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/PULL_REQUEST_TEMPLATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This pull request is categorized as a:
- [ ] Code refactor
- [ ] Configuration change
- [ ] Locales update
- [ ] Quality assurance
- [ ] Quality assurance
- [ ] Other

## Checklist
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/lint.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion .github/workflows/prettier.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion .github/workflows/test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
38 changes: 38 additions & 0 deletions check-styles.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')
);
}
});
});
10 changes: 7 additions & 3 deletions components/CollapsedQR.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}

Expand Down Expand Up @@ -259,7 +264,6 @@ const styles = StyleSheet.create({
value: {
marginBottom: 15,
paddingLeft: 20,
color: themeColor('secondaryText'),
fontFamily: 'PPNeueMontreal-Book'
},
qrPadding: {
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
31 changes: 9 additions & 22 deletions views/Channels/Channel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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'
)}
Expand Down Expand Up @@ -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: {
Expand All @@ -626,7 +628,6 @@ const styles = StyleSheet.create({
},
status: {
fontFamily: 'PPNeueMontreal-Book',
color: themeColor('text'),
alignSelf: 'center',
marginBottom: 10
},
Expand All @@ -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
}
});
48 changes: 31 additions & 17 deletions views/ContactDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -498,7 +513,6 @@ const styles = StyleSheet.create({
contactFields: {
fontSize: 24,
marginBottom: 4,
marginLeft: 4,
color: themeColor('chain')
marginLeft: 4
}
});
15 changes: 8 additions & 7 deletions views/EditFee.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
)}
Expand Down Expand Up @@ -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
Expand Down
19 changes: 15 additions & 4 deletions views/LnurlPay/Success.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -138,8 +151,6 @@ const styles = StyleSheet.create({
container: {
borderWidth: 1,
borderRadius: 5,
borderColor: themeColor('text'),
backgroundColor: themeColor('secondary'),
gap: 5
}
});
3 changes: 1 addition & 2 deletions views/Routing/RoutingHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,7 @@ export function RoutingHeader(props) {
: 120,
padding: 16,
borderBottomLeftRadius: 40,
borderBottomRightRadius: 20,
color: themeColor('text')
borderBottomRightRadius: 20
}
});

Expand Down
Loading