Revert "Remove references to old onboarding service" and restore the components and strings it needs

.vscode/settings.json

@@ -1,5 +1,24 @@
 {
   "typescript.tsdk": "./node_modules/typescript/lib",
   "i18n-ally.localesPaths": ["app/i18n"],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
+  "workbench.colorCustomizations": {
+    "terminal.border": "#ffffff",
+    "panel.border": "#ffffff",
+    "panelTitle.activeBorder": "#ffc600",
+    "terminal.tab.activeBorder": "#ffc600",
+    "terminalCursor.foreground": "#ffc600",
+    "terminal.selectionBackground": "#ffc60055",
+    "activityBar.background": "#053241",
+    "titleBar.activeBackground": "#07465B",
+    "titleBar.activeForeground": "#F3FBFE",
+    "titleBar.inactiveBackground": "#053241",
+    "titleBar.inactiveForeground": "#F3FBFE",
+    "statusBar.background": "#053241",
+    "statusBar.foreground": "#F3FBFE",
+    "statusBar.debuggingBackground": "#053241",
+    "statusBar.debuggingForeground": "#F3FBFE",
+    "statusBar.noFolderBackground": "#053241",
+    "statusBar.noFolderForeground": "#F3FBFE"
+  }
 }

app/app-services.ts

@@ -20,6 +20,7 @@ export { ShortcutsService } from 'services/shortcuts';
 export { CustomizationService } from 'services/customization';
 export { LayoutService } from 'services/layout';
 export { NotificationsService } from 'services/notifications';
+export { OnboardingService } from 'services/onboarding';
 export { NavigationService } from 'services/navigation';
 export { PerformanceService } from 'services/performance';
 export { SettingsService, OutputSettingsService, EncoderQueryService } from 'services/settings';
@@ -165,6 +166,7 @@ import { MediaBackupService } from './services/media-backup';
 import { HotkeysService } from './services/hotkeys';
 import { WidgetsService } from './services/widgets';
 import { HostsService } from './services/hosts';
+import { OnboardingService } from './services/onboarding';
 import { CacheUploaderService } from './services/cache-uploader';
 import { StreamlabelsService } from './services/streamlabels';
 import { SceneCollectionsService } from './services/scene-collections';
@@ -260,6 +262,7 @@ export const AppServices = {
   HotkeysService,
   WidgetsService,
   HostsService,
+  OnboardingService,
   CacheUploaderService,
   StreamlabelsService,
   SceneCollectionsService,

app/components-react/highlighter/Export/StorageUpload.tsx

@@ -110,7 +110,7 @@ export default function StorageUpload(p: { onClose: () => void; platform: EUploa
 }
 
 export function GetSLID(p: { onLogin?: () => void }) {
-  const { UserService, OnboardingV2Service } = Services;
+  const { UserService, OnboardingService } = Services;
 
   async function clickLink(signup?: boolean) {
     let resp: EPlatformCallResult;
@@ -126,7 +126,7 @@ export function GetSLID(p: { onLogin?: () => void }) {
     if (platform) {
       UserService.actions.setPrimaryPlatform(platform);
     } else {
-      OnboardingV2Service.actions.showLogin();
+      OnboardingService.actions.start({ isLogin: true });
     }
     if (p.onLogin) p.onLogin();
   }

app/components-react/modals/onboarding/Themes.tsx

@@ -52,7 +52,13 @@ const THEME_MAP = {
 };
 
 export function Themes(p: IOnboardingStepProps) {
-  const { OnboardingV2Service, SceneCollectionsService, NavigationService, UserService } = Services;
+  const {
+    OnboardingV2Service,
+    OnboardingService,
+    SceneCollectionsService,
+    NavigationService,
+    UserService,
+  } = Services;
 
   const [installing, setInstalling] = useState(false);
   const [progress, setProgress] = useState(0);
@@ -78,7 +84,7 @@ export function Themes(p: IOnboardingStepProps) {
     if (themeMetadata.current) return;
     Promise.all(
       idList.map(id => {
-        return OnboardingV2Service.actions.return.fetchThemeData(id);
+        return OnboardingService.actions.return.fetchThemeData(id);
       }),
     )
       .then(metadata => {

app/components-react/pages/index.ts

@@ -4,6 +4,7 @@ export { default as BrowseOverlays } from './BrowseOverlays';
 export { default as Highlighter } from './Highlighter';
 export { default as LayoutEditor } from './layout-editor/LayoutEditor';
 export { default as Loader } from './Loader';
+export { default as Onboarding } from './onboarding/Onboarding';
 export { default as PatchNotes } from './PatchNotes';
 export { default as PlatformAppMainPage } from './PlatformAppMainPage';
 export { default as PlatformAppStore } from './PlatformAppStore';

app/components-react/pages/onboarding/Common.m.less

@@ -0,0 +1,60 @@
+.title-container {
+  width: 100%;
+  text-align: center;
+  font-size: 52px;
+
+  h1 {
+    display: inline-block;
+    font-size: 52px;
+  }
+
+  margin-bottom: 40px;
+  // margin-top: 144px;
+}
+
+.subtitle-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 35px;
+}
+
+.option-card {
+  position: relative;
+  background: var(--teal);
+  padding: 16px;
+  overflow: hidden;
+  height: 80px;
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 280px;
+  border: none;
+  color: var(--action-button-text);
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  h2 {
+    font-size: 20px;
+    margin-bottom: 0;
+  }
+
+  svg,
+  i {
+    position: absolute;
+    bottom: -50%;
+    right: 0;
+    opacity: 0.25;
+  }
+
+  i {
+    color: #000;
+  }
+}
+
+.onboarding-button {
+  padding: 12px 24px !important;
+  line-height: normal !important;
+}

app/components-react/pages/onboarding/Connect.m.less

@@ -0,0 +1,192 @@
+@import '../../../styles/index';
+
+.page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+
+  :global(.twitter) {
+    height: 16px;
+  }
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  z-index: 1;
+
+  h1 {
+    margin-bottom: 8px;
+  }
+
+  :global(.list-input),
+  :global(.section) {
+    width: 400px;
+  }
+
+  @media (max-height: 600px) {
+
+    &>h1,
+    &>p {
+      display: none;
+    }
+  }
+}
+
+.select-another {
+  .margin-v-sides(2);
+}
+
+.progress-cover {
+  position: absolute;
+  background: var(--background);
+  width: 700px;
+  height: 32px;
+  top: -30px;
+  left: -16px;
+  z-index: 10;
+}
+
+.signup-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :global(.button--youtube) {
+    overflow: hidden;
+  }
+
+  :global(.youtube) {
+    max-height: 160px !important;
+    max-width: 200px !important;
+    width: 200px !important;
+    height: 92px !important;
+    background-size: cover;
+    background-position-x: -33px;
+  }
+}
+
+.loginButton {
+  height: 80px;
+  width: 80px;
+  border-radius: 40px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 16px !important;
+  flex-shrink: 0;
+  line-height: 0px !important;
+
+  i {
+    font-size: 40px;
+    margin: 0 !important;
+  }
+}
+
+.footer {
+  position: absolute;
+  display: flex;
+  justify-content: flex-end;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  // TODO: fix once we add pagination container
+  margin: 80px;
+}
+
+.svg-backgrounds {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+
+  #oval-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  #oval-left {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+:global(#oval-left) {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+:global(#oval-right) {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.streamlabs-platform-container {
+  margin-bottom: 55px;
+}
+
+.third-party-platforms {
+  width: 100%;
+
+  p {
+    text-align: center;
+  }
+}
+
+.streamlabs-platform-container,
+.third-party-platforms-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 20px;
+  width: 100%;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    background: var(--border);
+
+    :global(.fa-spinner) {
+      margin-right: 32px;
+    }
+  }
+}
+
+.extra-platforms-container {
+  display: flex;
+  flex-direction: row;
+  column-gap: 20px;
+  margin-top: 20px;
+  justify-content: center;
+}
+
+.signup-link-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+
+  a {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}