Migration flow stylistic updates (#3132)

packages/insomnia-app/app/ui/components/onboarding-container.js

@@ -3,13 +3,12 @@ import React from 'react';
 import type { WrapperProps } from './wrapper';
 import PageLayout from './page-layout';
 import coreLogo from '../images/insomnia-core-logo.png';
-import { getAppLongName, getAppSynopsis } from '../../common/constants';
 
 type Props = {
   wrapperProps: WrapperProps,
 };
 
-const OnboardingContainer = ({ wrapperProps, children }: Props) => (
+const OnboardingContainer = ({ wrapperProps, children, header, subHeader }: Props) => (
   <PageLayout
     wrapperProps={wrapperProps}
     renderPageBody={() => (
@@ -20,8 +19,8 @@ const OnboardingContainer = ({ wrapperProps, children }: Props) => (
             <img src={coreLogo} alt="Kong" />
           </div>
           <header className="onboarding__content__header">
-            <h1>Welcome to {getAppLongName()}</h1>
-            <h2>{getAppSynopsis()}</h2>
+            <h1>{header}</h1>
+            <h2>{subHeader}</h2>
           </header>
           <div className="onboarding__content__body">{children}</div>
         </div>

packages/insomnia-app/app/ui/components/wrapper-migration.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import type { WrapperProps } from './wrapper';
-import { ToggleSwitch } from 'insomnia-components';
+import { ToggleSwitch, Button } from 'insomnia-components';
 import type { MigrationOptions } from '../../common/migrate-from-designer';
 import migrateFromDesigner, { restartApp } from '../../common/migrate-from-designer';
 import { getDataDirectory, getDesignerDataDir } from '../../common/misc';
@@ -91,13 +91,9 @@ const Options = ({ start, cancel }: OptionsProps) => {
   return (
     <>
       <p>
-        <strong>Migrate from Insomnia Designer</strong>
+        From the list below, select the individual items you would like to migrate from Designer.
       </p>
-      <p>
-        Insomnia Designer and Core are now Insomnia! Select the items below you'd like to migrate
-        from Designer.
-      </p>
-      <div className="text-left margin-top">
+      <div className="text-left">
         <BooleanSetting
           label="Copy Workspaces"
           name="copyWorkspaces"
@@ -141,13 +137,16 @@ const Options = ({ start, cancel }: OptionsProps) => {
       </div>
 
       <div className="margin-top">
-        <button
+        <Button
           key="start"
-          className="btn btn--clicky"
+          bg="surprise"
+          radius="3px"
+          size="medium"
+          variant="contained"
           onClick={() => start(options)}
           disabled={!canStart}>
           Start Migration
-        </button>
+        </Button>
         <button key="cancel" className="btn btn--super-compact" onClick={cancel}>
           Skip for now
         </button>
@@ -261,7 +260,10 @@ type Props = {|
 |};
 
 const WrapperMigration = ({ wrapperProps }: Props) => (
-  <OnboardingContainer wrapperProps={wrapperProps}>
+  <OnboardingContainer
+    wrapperProps={wrapperProps}
+    header="Migrate from Insomnia Designer"
+    subHeader="Insomnia Designer and Core are now Insomnia!">
     <MigrationBody />
   </OnboardingContainer>
 );

packages/insomnia-app/app/ui/components/wrapper-onboarding.js

@@ -2,10 +2,11 @@
 import * as React from 'react';
 import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import 'swagger-ui-react/swagger-ui.css';
+import { Button } from 'insomnia-components';
 import { showPrompt } from './modals';
 import type { BaseModel } from '../../models';
 import * as models from '../../models';
-import { AUTOBIND_CFG, getAppLongName, getAppName } from '../../common/constants';
+import { AUTOBIND_CFG, getAppLongName, getAppName, getAppSynopsis } from '../../common/constants';
 import type { HandleImportFileCallback, HandleImportUriCallback, WrapperProps } from './wrapper';
 import * as db from '../../common/database';
 import chartSrc from '../images/chart.svg';
@@ -17,6 +18,8 @@ type Props = {|
   wrapperProps: WrapperProps,
   handleImportFile: HandleImportFileCallback,
   handleImportUri: HandleImportUriCallback,
+  header: string,
+  subHeader: string,
 |};
 
 type State = {|
@@ -126,9 +129,15 @@ class WrapperOnboarding extends React.PureComponent<Props, State> {
           Help us understand how <strong>you</strong> use {getAppLongName()} so we can make it
           better.
         </p>
-        <button key="enable" className="btn btn--clicky" onClick={this._handleClickEnableAnalytics}>
+        <Button
+          key="enable"
+          bg="surprise"
+          radius="3px"
+          size="medium"
+          variant="contained"
+          onClick={this._handleClickEnableAnalytics}>
           Share Usage Analytics
-        </button>
+        </Button>
         <button
           key="disable"
           className="btn btn--super-compact"
@@ -178,7 +187,12 @@ class WrapperOnboarding extends React.PureComponent<Props, State> {
     }
 
     return (
-      <OnboardingContainer wrapperProps={this.props.wrapperProps}>{stepBody}</OnboardingContainer>
+      <OnboardingContainer
+        wrapperProps={this.props.wrapperProps}
+        header={'Welcome to ' + getAppLongName()}
+        subHeader={getAppSynopsis()}>
+        {stepBody}
+      </OnboardingContainer>
     );
   }
 }

packages/insomnia-app/app/ui/css/components/onboarding.less

@@ -46,8 +46,8 @@
       border-bottom: 1px solid var(--hl-sm);
 
       h1 {
-        color: var(--brand-purple);
-        font-size: var(--font-size-xxxl);
+        color: var(--color-font);
+        font-size: var(--font-size-xxl);
         margin-bottom: var(--padding-sm);
       }
 
@@ -65,9 +65,21 @@
       padding: var(--padding-md) var(--padding-lg) var(--padding-md);
       color: var(--color-font);
 
+			h1 {
+        color: var(--color-font);
+        font-size: var(--font-size-xxl);
+        margin-bottom: var(--padding-sm);
+      }
+
+      h2 {
+        color: var(--hl-xl);
+        font-size: var(--font-size-lg);
+        margin-top: 0;
+        margin-bottom: var(--padding-md);
+      }
+
       p {
         font-size: var(--font-size-lg);
-
         strong {
           font-weight: 600;
         }

packages/insomnia-smoke-test/modules/migration.js

@@ -1,6 +1,6 @@
 export const migrationMessageShown = async app => {
   await app.client.waitUntilTextExists(
-    '.onboarding__content__body p strong',
+    '.onboarding__content__header h1',
     'Migrate from Insomnia Designer',
   );
 };