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.

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

[Update Account Settings] Preferences, About, Security #35672

Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
0f80d69
redesign preferences page
kosmydel Feb 2, 2024
d836214
Merge branch 'Expensify:main' into update-account-settings/preferences
kosmydel Feb 5, 2024
bd0d930
new about page design
kosmydel Feb 5, 2024
beebe04
add english copy
kosmydel Feb 6, 2024
1b2d2a7
add Spanish copy
kosmydel Feb 7, 2024
9571905
Merge branch 'main' into update-account-settings/preferences
kosmydel Feb 7, 2024
4397fc5
rename
kosmydel Feb 7, 2024
3124444
small fixes
kosmydel Feb 7, 2024
3a8cd2d
fix icon
kosmydel Feb 7, 2024
330fb72
fix illustration height
kosmydel Feb 8, 2024
9f2b8f8
Merge branch 'main' into update-account-settings/preferences
kosmydel Feb 8, 2024
1d0e5a9
fix statusbar color on mWeb iOS
kosmydel Feb 8, 2024
c74a873
fix lint
kosmydel Feb 8, 2024
715eacd
improve types
kosmydel Feb 8, 2024
426632c
fix workspace list empty state
kosmydel Feb 8, 2024
b6d1789
fix
kosmydel Feb 8, 2024
3601b3f
Merge remote-tracking branch 'origin-swm/update-account-settings/abou…
kosmydel Feb 8, 2024
3e44c6f
fix About page status bar
kosmydel Feb 8, 2024
3769321
Security page update
filip-solecki Feb 8, 2024
028d355
fix lint issues
kosmydel Feb 8, 2024
eab2a13
Adjust illustration background color logic
filip-solecki Feb 8, 2024
479203f
add missing icons
kosmydel Feb 8, 2024
56fd657
address review
kosmydel Feb 9, 2024
42d1233
Merge branch 'Expensify:main' into update-account-settings/preferences
kosmydel Feb 9, 2024
782d2ca
add comment
kosmydel Feb 9, 2024
8941626
Merge branch 'Expensify:main' into update-account-settings/preferences
kosmydel Feb 9, 2024
31e513d
Merge branch 'Expensify:main' into update-account-settings/preferences
kosmydel Feb 9, 2024
a33f3a8
remove shouldEnableMaxHeight
kosmydel Feb 9, 2024
5f13923
Merge branch 'main' into update-account-settings/preferences
kosmydel Feb 9, 2024
1743d97
Revert "address review"
kosmydel Feb 9, 2024
0375e27
Rename text styles
filip-solecki Feb 9, 2024
0993456
fix centering
kosmydel Feb 9, 2024
a9ef0cc
Merge branch 'main' into update-account-settings/preferences
filip-solecki Feb 9, 2024
f2ca240
Merge branch 'Expensify:main' into update-account-settings/preferences
kosmydel Feb 12, 2024
5e5bce0
attempt to fix the SignInPage-perf test
kosmydel Feb 12, 2024
4f30355
fix perf tests
kosmydel Feb 12, 2024
404b3c5
Merge branch 'main' into update-account-settings/preferences
filip-solecki Feb 13, 2024
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
5 changes: 4 additions & 1 deletion src/components/LottieAnimations/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import colors from '@styles/theme/colors';
import variables from '@styles/variables';
import type DotLottieAnimation from './types';
import type {AnimationKey} from './types';

const DotLottieAnimations: Record<string, DotLottieAnimation> = {
const DotLottieAnimations: Record<AnimationKey, DotLottieAnimation> = {
kosmydel marked this conversation as resolved.
Show resolved Hide resolved
ExpensifyLounge: {
file: require('@assets/animations/ExpensifyLounge.lottie'),
w: 1920,
Expand All @@ -26,6 +28,7 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
file: require('@assets/animations/PreferencesDJ.lottie'),
w: 375,
h: 240,
backgroundColor: colors.blue500,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes it hard to use same illustration with a different background. Why don't we just pass illustrationBackgroundColor instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I theoretically couldn't use colors in components: DO NOT import colors.js into file stated in colors.js. So I put it here.

Currently, we didn't have any case where we changed the background color of illustration. If someone needs it, he can possibly do that by passing illustrationBackgroundColor.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should I move it anyway, and import colors? But personally I think, that background color is closely related to the illustration.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not.a blocker. Let's keep it as is for now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! If internal decides we want to change it, I will do it as a follow-up!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tmight be nice to add this as a follow up but I would say once we will need this dynamic which we dont right now as far as I know

},
ReviewingBankInfo: {
file: require('@assets/animations/ReviewingBankInfo.lottie'),
Expand Down
17 changes: 17 additions & 0 deletions src/components/LottieAnimations/types.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
import type {LottieViewProps} from 'lottie-react-native';
import type {ColorValue} from '@styles/utils/types';

type AnimationKey =
| 'ExpensifyLounge'
| 'FastMoney'
| 'Fireworks'
| 'Hands'
| 'PreferencesDJ'
| 'ReviewingBankInfo'
| 'WorkspacePlanet'
| 'SaveTheWorld'
| 'Safe'
| 'Magician'
| 'Update'
| 'Coin';

type DotLottieAnimation = {
file: LottieViewProps['source'];
w: number;
h: number;
backgroundColor?: ColorValue;
};

export type {AnimationKey};
export default DotLottieAnimation;
2 changes: 1 addition & 1 deletion src/components/Section/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ function Section({
const StyleUtils = useStyleUtils();
const {isSmallScreenWidth} = useWindowDimensions();

const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? theme.appBG);
const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? illustration?.backgroundColor ?? theme.appBG);

return (
<>
Expand Down
2 changes: 0 additions & 2 deletions src/pages/settings/Preferences/PreferencesPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import SCREENS from '@src/SCREENS';

const propTypes = {
/** The chat priority mode */
Expand All @@ -45,7 +44,7 @@
};

function PreferencesPage(props) {
const theme = useTheme();

Check failure on line 47 in src/pages/settings/Preferences/PreferencesPage.js

View workflow job for this annotation

GitHub Actions / lint

'theme' is assigned a value but never used
const styles = useThemeStyles();
const {isProduction} = useEnvironment();
const {translate, preferredLocale} = useLocalize();
Expand Down Expand Up @@ -73,7 +72,6 @@
isCentralPane
subtitleMuted
illustration={LottieAnimations.PreferencesDJ}
illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
kosmydel marked this conversation as resolved.
Show resolved Hide resolved
titleStyles={styles.accountSettingsSectionTitle}
>
<View style={[styles.flex1, styles.mt5]}>
Expand Down
2 changes: 1 addition & 1 deletion src/styles/theme/themes/dark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const darkTheme = {
statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
},
[SCREENS.SETTINGS.PREFERENCES.ROOT]: {
backgroundColor: colors.blue500,
backgroundColor: colors.productDark100,
statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
},
[SCREENS.SETTINGS.WORKSPACES]: {
Expand Down
2 changes: 1 addition & 1 deletion src/styles/theme/themes/light.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const lightTheme = {
statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
},
[SCREENS.SETTINGS.PREFERENCES.ROOT]: {
backgroundColor: colors.blue500,
backgroundColor: colors.productLight100,
statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
Copy link
Contributor

@ishpaul777 ishpaul777 Feb 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be in dark mode i think

            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
Screen.Recording.2024-02-14.at.4.08.20.AM.mov

@kosmydel

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed here

},
[SCREENS.SETTINGS.WORKSPACES]: {
Expand Down
Loading