Videopress onboarding v2 global style #67736

thedebian · 2022-09-13T13:38:15Z

Proposed Changes

This PR adds a global videopress.scss stylesheet to customize VideoPress onboarding styling.

Testing Instructions

Apply this PR
Go to http://calypso.localhost:3000/setup/intro?flow=videopress
✅ The global style should be applied
✅ A "powered by VideoPress" logo should be visible at the bottom of the page
✅ When navigating, the step progress should be applied (yellow bar on top of the page)

github-actions · 2022-09-13T13:38:34Z

	https://calypso.live?image=registry.a8c.com/calypso/app:build-43057

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-43057&env=jetpack

matticbot · 2022-09-13T13:52:37Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~48945 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-stepper            +199026 B  (+5.1%)   +52605 B  (+5.1%)
entry-gutenboarding        +3309 B  (+0.2%)     +939 B  (+0.1%)
entry-main                 +1209 B  (+0.1%)     +131 B  (+0.0%)
entry-domains-landing       +673 B  (+0.1%)     +134 B  (+0.1%)
entry-browsehappy           +673 B  (+0.7%)     +134 B  (+0.5%)
entry-login                 +565 B  (+0.1%)      +94 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~18666 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
signup                      +947 B  (+0.3%)      -55 B  (-0.1%)
accept-invite               +812 B  (+0.2%)     -192 B  (-0.2%)
jetpack-connect             +802 B  (+0.1%)     -306 B  (-0.1%)
plans                       +303 B  (+0.0%)    +1408 B  (+0.5%)
jetpack-cloud-pricing       -256 B  (-0.0%)     -794 B  (-0.5%)
backup                      +157 B  (+0.0%)    +1212 B  (+0.5%)
domains                     +139 B  (+0.0%)    +1524 B  (+0.4%)
site-purchases              +136 B  (+0.0%)     +963 B  (+0.3%)
purchases                   +136 B  (+0.0%)     +963 B  (+0.2%)
gutenberg-editor             -48 B  (-0.0%)     +105 B  (+0.1%)
settings-discussion          -39 B  (-0.0%)      +14 B  (+0.0%)
themes                       -26 B  (-0.0%)      -18 B  (-0.0%)
checkout                     -20 B  (-0.0%)      -36 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~2406 bytes added 📈 [gzipped])

name                                              parsed_size           gzip_size
async-load-signup-steps-domains                        +405 B  (+0.1%)    +1186 B  (+1.0%)
async-load-masterbar-cart-masterbar-cart-wrapper       -196 B  (-0.1%)     -707 B  (-1.4%)
async-load-calypso-layout-masterbar-checkout-tsx       -196 B  (-0.2%)     -819 B  (-2.6%)
async-load-calypso-layout-masterbar-checkout           -196 B  (-0.4%)     -772 B  (-4.4%)
async-load-signup-steps-plans                           +47 B  (+0.0%)      -50 B  (-0.1%)
async-load-calypso-blocks-editor-checkout-modal         -47 B  (-0.0%)      +44 B  (+0.0%)
async-load-calypso-blocks-app-banner                    +43 B  (+0.0%)      +80 B  (+0.1%)
async-load-signup-steps-plans-atomic-store              +13 B  (+0.0%)       +7 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal              +13 B  (+0.0%)      +57 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

jgcaruso · 2022-09-14T18:46:10Z

I think this is a duplication of work (or at least partially) of what is being done in #67613

Might want to confirm which one should stay or not before merging either one.

roundhill

Let's merge and I'll adjust #67613 to match up :D

* VideoPress onboarding theme * VideoPress powered logo * Update flow progress and fix svg properties in videopress logo

* Create VideoPress Onboarding v2 stepper structure. (#67454) * VideoPress site options step (WIP) (#67501) * VideoPress site options step (WIP) * Submit options step * VideoPress Onboarding v2: Account Step (#67552) * VideoPress Onboarding v2: Create account. * Adjust the flow steps slightly and remove nonexistent ones. * Videopress onboarding v2: domain selection (#67596) * Submit options step * VideoPress onboarding, domain selection step * Choose a domain styling * Add video, studio, productions, com as suggested tlds * Videopress onboarding: plan selection (#67643) * Submit options step * VideoPress onboarding, domain selection step * Choose a domain styling * Add video, studio, productions, com as suggested tlds * VideoPress site options step (WIP) * Submit options step * VideoPress onboarding: select a plan (WIP) * Update how we store site title, description and domain by using onboarding store * VideoPress onboarding: choose a plan step * Add translation for choose a domain step * Rebase * Videopress onboarding v2 global style (#67736) * VideoPress onboarding theme * VideoPress powered logo * Update flow progress and fix svg properties in videopress logo * VideoPress Onboarding v2: Site options refined (#67790) * Update flow progress and fix svg properties in videopress logo * Site options refined * Populate existing site title and description in site options onboarding * VideoPress onboarding v2 : choose a domain step refined (#67857) * VideoPress onboarding theme * VideoPress powered logo * Update flow progress and fix svg properties in videopress logo * Site options refined * Populate existing site title and description in site options onboarding * Allow passing the products list down to the domain search results * Choose a domain styling WIP * Choose a domain asides and styling * Domain styling * Domain step, style placeholders * Add classname to body so we can target VideoPress stepper specifically (#67894) * Actually create a site on VideoPress Onboarding flow v2. (#67912) * VideoPress Onboarding V2: Intro View (#67613) * Adding intro view styles for new VideoPress flow. Refactors "Jetpack powered" to be more inclusive of different "powered by" products so that we can show the V ideoPress logo there instead of Jetpack. * New VP logo, aligned vertically * More updates to new design iteration. * Seeing if playsinline helps with mobile safari autoplay. * Fix merge conflict for showing jetpack powered badge. * No longer need z-index hack! * Adjustments to the triangles * Restore previous CSS classname. * Restoring code, unintentional change. * Move color styles out of body so they aren`t applied globally. * Fixing CSS after bad merge. * remove top margin to fix centering. Co-authored-by: Eduardo Villuendas <eduardo.villuendas@automattic.com> * Videopress onboarding v2 : plan selection refined (#67916) * VideoPress Onboarding V2: plan selection refined * Mobile layout for choose a plan * VP Onboarding: clear onboarding site options on flow start and flow completion (#68162) * clear onboarding site options on flow start and flow completion * clear domain as well when starting or completing videopress flow * Update/videopress onboarding v2 site creation (#68196) * Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * One more step: got it to the checkout page. * Cleanup * Cleanup * Less parameters = more fun * Add domain to cart Co-authored-by: Panos Kountanis <panosktn@gmail.com> * VideoPress onboarding v2 : steps validation (#68280) * Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * One more step: got it to the checkout page. * Cleanup * Cleanup * Less parameters = more fun * Add domain to cart * Steps proxy on useStepNavigation * Upate validation rules Co-authored-by: Panos Kountanis <panosktn@gmail.com> * VideoPress onboarding v2 : buttons feedback (#68336) * Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * One more step: got it to the checkout page. * Cleanup * Cleanup * Less parameters = more fun * Add domain to cart * Steps proxy on useStepNavigation * Upate validation rules * Disable form button if site title is not set * Add button feedback for plan selection * Update style.scss Co-authored-by: Panos Kountanis <panosktn@gmail.com> * Update/videopress onboarding v2 processing step (#68349) * Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * Cleanup * VP Onboarding: clear onboarding site options on flow start and flow completion (#68162) * clear onboarding site options on flow start and flow completion * clear domain as well when starting or completing videopress flow * Upate validation rules * Disable form button if site title is not set * VideoPress processing step WIP * Processing step Co-authored-by: John Caruso <johncaruso@gmail.com> * Use plan product for checkout URL instead of periodAgnosticSlug (#68438) * Adding new launchpad flow for VideoPress! (#67692) * Adding new launchpad flow for VideoPress! * Updating to i2 of design. * Moving styles to videopress.scss so all styles live in one place and can use the same color vars. * Set text-overflow: ellipsis for long domains. * Correcting `completing-purchase` path to use camel case. * Adding new launchpad flow for VideoPress! * Updating to i2 of design. * Moving styles to videopress.scss so all styles live in one place and can use the same color vars. * Set text-overflow: ellipsis for long domains. * Fix redirect URI from checkout page * Add plan to cart in order to add extra data for videomaker activation * Fixing launchpad settings for VideoPress flow. * Update client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/task-helper.ts Co-authored-by: John Caruso <johncaruso@gmail.com> * Update client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/task-helper.ts Co-authored-by: John Caruso <johncaruso@gmail.com> * Update client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/translations.tsx Co-authored-by: John Caruso <johncaruso@gmail.com> Co-authored-by: thedebian <thedebian@users.noreply.github.com> Co-authored-by: John Caruso <johncaruso@gmail.com> * Videomaker Onboarding: Add theme selection step (#68721) * New styles and nearly there with functionality. Need to rebase to test fully. * Set the site_vertical_name option so the theme choice gets set properly. * Clear the selected design when finishing or starting over the flow. * Added responsive styles for small screen. * Add min height for large screens, fixes continue button from jumping. * User better import paths. * Changes to design based on feedback. * Add transitions to the VideoPress flow (#68913) * Fix launchpad to use actionDispatch and not immediately redirect * Adding changes from #68787 due to merge conflict mess. * Code style fixes. * Handling currentUser in case of null. * Disabling typescript "any" warnings. * More eslint "any" disables for code not changed in this PR. * Style lint fixes. * Add skip action to "already own a domain" * VideoPress Onboarding intro: Display first video frame while video is loading (#69078) * Fixed issue where site options were not being set which caused the launchpad video upload step to stop working. * Unintentionally removed an import line. * Addressing design feedback for intro page. * Style adjustments * Style adjustments for theme picker * Revert powered by videopress absolute position * Header margin adjustments * Customize processing step page * Launchpad, use computer as default preview device if window width >= 1430 px * Launchpad, yellowize the thing * Powered by VideoPress always at bottom. This solution is flexbox based, the main ingredient being that .step-container is a flexbox (column) and that content flex-grows to fill all the space. * Goto /start/videopress-account/user for account creation. We render the old signup page on that url.. * Show the progress bar on the VideoPress user account view. * VideoPress Launchpad: enable preview interactions. Only when VideoPress is the flow, we allow interactions in the launchpad preview. Useful if users want to play the homepage videos. * Fixed stacked theme buttons when screen was medium to large size. * Substract 10px to 100vh to compute the stepper min height * Video Onboarding: Add video upload celebration modal 🎉 (#69394) * Initial kind-of-working redirect after saving site with videopress intent. * Adding check that redirect has occurred. Disabled for atomic sites. * Removing deleted store item. * Deleting stylesheet, unused. * Remove style import, set redirect to wp.com host. * Adding a hopefully helpful comment about the comonents goal. * Changed from using a redirect to showing a celebration modal. * Use window location to get the site slug * Fix component naming and removed unrelated commits. * Linting fixes... not sure why as did not touch this code. * Fix errors introduced from upstream. * Update packages/data-stores/src/onboard/actions.ts Co-authored-by: John Caruso <johncaruso@gmail.com> * Removing unused i18n import. * Adding config for VideoPress flow. Enabled for dev, horizon, staging and wpcalypso. * Fixing styles for `is-primary` button. * Update client/landing/stepper/declarative-flow/internals/videopress.scss Co-authored-by: Mikey Arce <mikeyarce@gmail.com> * Style lint fix. * Add type cast to help with tests. * Fix redirect urls to use new path structure instead of using the `flow` parameter. * Style the new email activation banner to fit with the VideoPress onboarding theme. Co-authored-by: Pierre <thedebian@users.noreply.github.com> Co-authored-by: Dan Roundhill <dan@automattic.com> Co-authored-by: Eduardo Villuendas <eduardo.villuendas@automattic.com> Co-authored-by: John Caruso <johncaruso@gmail.com> Co-authored-by: Mikey Arce <mikeyarce@gmail.com>

VideoPress onboarding theme

11fd429

roundhill changed the base branch from trunk to add/videopress-onboarding-v2 September 13, 2022 17:23

VideoPress powered logo

9d8be9e

thedebian requested review from pgk, jgcaruso and roundhill September 14, 2022 08:16

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 14, 2022

thedebian self-assigned this Sep 14, 2022

thedebian marked this pull request as ready for review September 14, 2022 08:16

Update flow progress and fix svg properties in videopress logo

8fe0401

jgcaruso mentioned this pull request Sep 14, 2022

VideoPress Onboarding V2: Intro View #67613

Merged

5 tasks

roundhill approved these changes Sep 15, 2022

View reviewed changes

roundhill added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Sep 15, 2022

thedebian merged commit f4d987f into add/videopress-onboarding-v2 Sep 15, 2022

thedebian deleted the update/videopress-onboarding-v2-global-style branch September 15, 2022 14:50

github-actions bot removed the [Status] Ready to Merge label Sep 15, 2022

thedebian added a commit that referenced this pull request Oct 12, 2022

Videopress onboarding v2 global style (#67736)

bc3b533

* VideoPress onboarding theme * VideoPress powered logo * Update flow progress and fix svg properties in videopress logo

roundhill pushed a commit that referenced this pull request Nov 1, 2022

Videopress onboarding v2 global style (#67736)

379e200

* VideoPress onboarding theme * VideoPress powered logo * Update flow progress and fix svg properties in videopress logo

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Videopress onboarding v2 global style #67736

Videopress onboarding v2 global style #67736

thedebian commented Sep 13, 2022 •

edited

github-actions bot commented Sep 13, 2022 •

edited by matticbot

matticbot commented Sep 13, 2022 •

edited

jgcaruso commented Sep 14, 2022

roundhill left a comment

Videopress onboarding v2 global style #67736

Videopress onboarding v2 global style #67736

Conversation

thedebian commented Sep 13, 2022 • edited

Proposed Changes

Testing Instructions

github-actions bot commented Sep 13, 2022 • edited by matticbot

matticbot commented Sep 13, 2022 • edited

jgcaruso commented Sep 14, 2022

roundhill left a comment

Choose a reason for hiding this comment

thedebian commented Sep 13, 2022 •

edited

github-actions bot commented Sep 13, 2022 •

edited by matticbot

matticbot commented Sep 13, 2022 •

edited