-
Notifications
You must be signed in to change notification settings - Fork 50
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.
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(wallet-mobile): Status bar styles with hook and theme #3121
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this can be moved to /components/hooks/useStatusBar
* @param color Hex color in #224466 format | ||
* @returns Hex color halved #112233, same as if the modal backdrop was on top rgba(0,0,0,0.5) of it | ||
*/ | ||
const opaqueColor = (color: HexColor) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we have tests for this one
@@ -0,0 +1,41 @@ | |||
import {useFocusEffect} from '@react-navigation/native' | |||
import {useTheme} from '@yoroi/theme' | |||
import {useEffect} from 'react' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prefer non-default imports for better tree shaking + dependency check
const color = baseColor ?? (isDark ? theme.color['black-static'] : theme.color['white-static']) | ||
const bgColor = isOpen || legacyModal ? opaqueColor(color) : color | ||
|
||
const effect = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
React.useCallback.
if (Platform.OS === 'android') StatusBarRN.setBackgroundColor(bgColor, true) | ||
} | ||
useFocusEffect(effect) | ||
useEffect(effect, [bgColor, isDark, isOpen]) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this can be dropped
) | ||
.join('')}` | ||
} catch { | ||
return color |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
avoid using error as logic
related: https://emurgo.atlassian.net/browse/YOMO-1231
I need someone to check iOS.
Legacy Blue in wallet selection
Primary color (100) in tx history
Light or Dark everywhere else
50% darker with a modal open
Additionally fixed some dark theme title header styles for tx history