Re-structure styles and theme switching components #32679

chrispader · 2023-12-07T15:48:44Z

@grgia

Details

This PR implements a new file/folder structure for styles and especially theme switching components.

The src/styles folder now follows the following structure:

theme: all themes, colors and theme-dependent items for styling like illustrations.
- context: contexts used for theme switching
- illustrations: central definition of all theme-dependent illustrations
  - themes: all illustration lists for different themes
- themes: different theme color palettes
- colors.ts: all colors used across different themes
- types.ts: types used for theme switching
- index.ts: central definition of all available themes
utils: all utility functions for styling.
- index.ts: contains generator function for StyleUtils, which will contain all of the style utils and be the only location from which we should use utils (via useStyleUtils hook, finished in a follow-up PR)
index.ts: all static but theme-dependent styles (used via useThemeStyles hook)

Multiple components have been moved to different locations for consistency:

Theme switching hooks: useTheme, useThemeStyles, useStyleUtils, useThemeIllustrations, useThemePreference and useThemePreferenceWithStaticOverride have all been moved to src/hooks.
Theme switching providers: ThemeProvider, ThemeStylesProvider and ThemeIllustrationsProvider have been moved to src/components.
Theme switching HOCs: withTheme, withThemeStyles, withStyleUtils and useThemeIllustrations have been moved to src/components.

Fixed Issues

$ #32664
PROPOSAL:

Tests

Full Regression Suite was done on this PR by QA

Offline tests

QA Steps

NO QA

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

Co-authored-by: Georgia Monahan <38015950+grgia@users.noreply.github.com>

…:margelo/expensify-app-fork into @chrispader/theme-switching-eslint-rules

…e-switching-eslint-rules

…ructure-styles-and-theme-switching

melvin-bot · 2023-12-07T15:48:48Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

OSBotify · 2023-12-11T20:57:39Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/32679/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/32679/index.html

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/32679/NewExpensify.dmg	https://32679.pr-testing.expensify.com

lanitochka17 · 2023-12-12T18:43:12Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Web- Chat - Placeholder "Write something..." is not centered in Message Composer

Action Performed:

Open https://32679.pr-testing.expensify.com/
Navigate to any conversation
Refresh the page and notify the placeholder "Write something..." in Message Composer

Expected Result:

"Write something..." should be centered in Message Composer

Actual Result:

Placeholder "Write something..." is not centered in Message Composer

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.4.11-1

Reproducible in staging?: No

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Recording.705.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

lanitochka17 · 2023-12-12T18:46:45Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Web - Notification - User does not receive notification when new message arrive

Action Performed:

Open https://32679.pr-testing.expensify.com/
User B send new message to user A

Expected Result:

User A should receive notification for all new messages

Actual Result:

User does not receive notification when new message arrive

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.4.11-1

Reproducible in staging?: No

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6310782_1702404096233.Recording__1545.1.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

lanitochka17 · 2023-12-12T18:50:02Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

IOU- User able to select email id while creating distance request

Action Performed:

Go to https://32679.pr-testing.expensify.com/
Tap fab
Tap distance
Enter start and finish waypoints and tap next
Search for a contact by typing any email id
Note results are displayed when user search for email id
Select the user
Tap request
Note distance request is created with red dot and unexpected error message
Tap on distance request created
Note receipt missing details with red dot is shown in preview.

Expected Result:

For distance request, workspace only user should be allowed to select. When user search for email, no results found message must be displayed. User should be allowed to search and select only workspace while making distance request

Actual Result:

When user search for email, results are shown and user is allowed to select email for making distance request. After selecting email, on tapping request, a distance request is created with red dot and unexpected error message .Opening distance request created displays receipt missing details with red dot is shown in request preview

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.4.11-1

Reproducible in staging?: No

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6310797_1702404779857.full_video.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

lanitochka17 · 2023-12-12T21:53:02Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

IOU-Split bill created in announce room is not displayed

Action Performed:

Go to https://32679.pr-testing.expensify.com/
Tap on announce room
Tap plus icon
Tap split bill
Enter an amount
Tap next
Tap Split

Expected Result:

Split bill created in announce room must be displayed

Actual Result:

Split bill created in announce room is not displayed

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.4.11-1

Reproducible in staging?: No

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6310980_1702417152330.announce.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

…tching

OSBotify · 2023-12-13T19:10:16Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/32679/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/32679/index.html

Desktop 💻	Web 🕸️
❌ FAILED ❌	https://32679.pr-testing.expensify.com
The QR code can't be generated, because the Desktop build failed

grgia · 2023-12-13T19:11:02Z

retrying desktop ^

OSBotify · 2023-12-13T19:19:00Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/32679/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/32679/index.html

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/32679/NewExpensify.dmg	https://32679.pr-testing.expensify.com

grgia

We've done a full regression suite and have addressed or dismissed all bugs linked in this PR.

Lint is failing due to unused styles in style util files that are never touched. I don't think we should remove these in this PR so I will merge with these lint errors as they are non-blocking/not necessary for these files.

…tching

melvin-bot · 2023-12-13T20:12:51Z

@grgia looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

grgia · 2023-12-13T20:13:28Z

^
Lint was failing due to unused styles in style util files that are never touched. I don't think we should remove these in this PR so I merged with these lint errors as they are non-blocking/not necessary for these files.

OSBotify · 2023-12-14T16:05:55Z

🚀 Deployed to staging by https://github.com/grgia in version: 1.4.13-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

OSBotify · 2023-12-14T16:45:43Z

🚀 Deployed to staging by https://github.com/grgia in version: 1.4.13-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-12-19T02:02:04Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.4.13-8 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

chrispader and others added 23 commits December 6, 2023 16:46

add eslitn rule

3090827

rename folder and move themes

e71544b

fix: light theme

1c1be8b

fix

2dd986d

Update .eslintrc.js

f682365

Co-authored-by: Georgia Monahan <38015950+grgia@users.noreply.github.com>

Merge branch 'main' into @chrispader/theme-switching-eslint-rules

3a5ddcb

fix: default values and imports

9fb8f8b

improve rest

9c08aed

Merge branch '@chrispader/theme-switching-eslint-rules' of github.com…

6fe4881

…:margelo/expensify-app-fork into @chrispader/theme-switching-eslint-rules

Merge branch '@chrispader/use-style-utils-hook' into @chrispader/them…

9823a1d

…e-switching-eslint-rules

fix: illustrations

841c613

add illustrations rule

88f1412

rename message

44f81b9

fix: merge conflicts

a2b1e0c

fix: eslint

03005cd

fix: lint errors

4662fc4

fix: more errors

92ccb68

Merge branch '@chrispader/use-style-utils-hook' into @chrispader/them…

0cddf80

…e-switching-eslint-rules

rename

6ca43e1

rename

67fb5cd

update eslint

009a5ea

remove eslint

7fe28ca

Merge branch '@chrispader/use-style-utils-hook' into @chrispader/rest…

3741cf7

…ructure-styles-and-theme-switching

chrispader changed the title ~~Re-structure styles and theme switching components~~ [HOLD on #32498] Re-structure styles and theme switching components Dec 7, 2023

chrispader added 5 commits December 7, 2023 17:09

remove eslint comments

eaacc72

re-structure styles

22c0628

fix: styles

e05e13f

move useThemeStyles

4a9a042

move contextes

7b4f185

This comment was marked as outdated.

Sign in to view

Christoph Pader added 4 commits December 13, 2023 19:15

Merge branch 'main' into @chrispader/restructure-styles-and-theme-swi…

fd71747

…tching

Merge branch 'main' into @chrispader/restructure-styles-and-theme-swi…

7e434eb

…tching

fix: more

c87acff

fix: more

541ee35

grgia removed the request for review from sobitneupane December 13, 2023 18:47

grgia previously approved these changes Dec 13, 2023

View reviewed changes

Merge branch 'main' into @chrispader/restructure-styles-and-theme-swi…

d76eaef

…tching

chrispader dismissed grgia’s stale review via d76eaef December 13, 2023 19:44

grgia approved these changes Dec 13, 2023

View reviewed changes

This comment was marked as resolved.

Sign in to view

grgia merged commit 3df907c into Expensify:main Dec 13, 2023
19 of 21 checks passed

melvin-bot bot added the Emergency label Dec 13, 2023

grgia removed the Emergency label Dec 13, 2023

github-actions bot mentioned this pull request Dec 14, 2023

Deploy Checklist: New Expensify 2023-12-14 #33072

Closed

77 tasks

melvin-bot bot mentioned this pull request Dec 19, 2023

[HOLD for payment 2023-12-26] [Theme Switching] Re-structure theme switching and styles components #32664

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Re-structure styles and theme switching components #32679

Re-structure styles and theme switching components #32679

chrispader commented Dec 7, 2023 •

edited by grgia

Loading

melvin-bot bot commented Dec 7, 2023

This comment was marked as outdated.

This comment was marked as outdated.

OSBotify commented Dec 11, 2023

lanitochka17 commented Dec 12, 2023 •

edited

Loading

lanitochka17 commented Dec 12, 2023 •

edited

Loading

lanitochka17 commented Dec 12, 2023

lanitochka17 commented Dec 12, 2023 •

edited

Loading

OSBotify commented Dec 13, 2023

grgia commented Dec 13, 2023

OSBotify commented Dec 13, 2023

grgia left a comment

This comment was marked as resolved.

melvin-bot bot commented Dec 13, 2023

grgia commented Dec 13, 2023

OSBotify commented Dec 14, 2023

OSBotify commented Dec 14, 2023

OSBotify commented Dec 19, 2023

Re-structure styles and theme switching components #32679

Re-structure styles and theme switching components #32679

Conversation

chrispader commented Dec 7, 2023 • edited by grgia Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Dec 7, 2023

This comment was marked as outdated.

This comment was marked as outdated.

OSBotify commented Dec 11, 2023

lanitochka17 commented Dec 12, 2023 • edited Loading

Web- Chat - Placeholder "Write something..." is not centered in Message Composer

Action Performed:

Expected Result:

Actual Result:

Platforms:

lanitochka17 commented Dec 12, 2023 • edited Loading

Web - Notification - User does not receive notification when new message arrive

Action Performed:

Expected Result:

Actual Result:

Platforms:

lanitochka17 commented Dec 12, 2023

IOU- User able to select email id while creating distance request

Action Performed:

Expected Result:

Actual Result:

Platforms:

lanitochka17 commented Dec 12, 2023 • edited Loading

IOU-Split bill created in announce room is not displayed

Action Performed:

Expected Result:

Actual Result:

Platforms:

OSBotify commented Dec 13, 2023

grgia commented Dec 13, 2023

OSBotify commented Dec 13, 2023

grgia left a comment

Choose a reason for hiding this comment

This comment was marked as resolved.

melvin-bot bot commented Dec 13, 2023

grgia commented Dec 13, 2023

OSBotify commented Dec 14, 2023

OSBotify commented Dec 14, 2023

OSBotify commented Dec 19, 2023

chrispader commented Dec 7, 2023 •

edited by grgia

Loading

lanitochka17 commented Dec 12, 2023 •

edited

Loading

lanitochka17 commented Dec 12, 2023 •

edited

Loading

lanitochka17 commented Dec 12, 2023 •

edited

Loading