Merge pull request #380 from appwrite/fix/onboarding-styles

refactor: onboarding style changes
appwrite · Aug 8, 2023 · be7f306 · be7f306 · vercel · Aug 8, 2023
2 parents a8ec722 + 93721ee
commit be7f306
Show file tree

Hide file tree

Showing 19 changed files with 103 additions and 69 deletions.
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+    - init: npm install && npm run build
+      command: npm run dev
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
@@ -141,15 +141,15 @@
                                 <DropListLink
                                     href={`${base}/console/account`}
                                     on:click={() => (showDropdown = false)}>
-                                    Your Account
+                                    Your account
                                 </DropListLink>
                                 <DropListItem
                                     icon="logout-right"
                                     on:click={() => {
                                         showDropdown = false;
                                         logout();
                                     }}>
-                                    Sign Out
+                                    Sign out
                                 </DropListItem>
                             </ul>
                         </section>

diff --git a/src/routes/console/project-[project]/overview/onboard.svelte b/src/routes/console/project-[project]/overview/onboard.svelte
@@ -14,22 +14,22 @@
 
     const platforms = [
         {
-            title: 'Web App',
+            title: 'Web',
             icon: 'grayscale/code',
             platform: Platform.Web
         },
         {
-            title: 'Flutter App',
+            title: 'Flutter',
             icon: 'color/flutter',
             platform: Platform.Flutter
         },
         {
-            title: 'Apple App',
+            title: 'Apple',
             icon: 'color/apple',
             platform: Platform.Apple
         },
         {
-            title: 'Android App',
+            title: 'Android',
             icon: 'color/android',
             platform: Platform.Android
         }
@@ -48,7 +48,9 @@
     <header class="card-header common-section grid-1-2">
         <div class="grid-1-2-col-1">
             <h2 class="heading-level-5">Getting Started Guide</h2>
-            <p class="u-line-height-1-5">Let's get your project up and running</p>
+            <p class="u-line-height-1-5 u-margin-block-start-12">
+                Here are some next steps to start building
+            </p>
         </div>
         <div class="grid-1-2-col-2 u-flex u-main-end u-cross-end is-not-mobile">
             <img src={onBoardIntro} alt="" class="card-header-image" />
@@ -58,8 +60,8 @@
     <section class="common-section card-separator grid-1-2">
         <div class="grid-1-2-col-1">
             <h3 class="heading-level-7">Add a Platform</h3>
-            <p class="u-line-height-1-5">
-                Our SDK's make it possible to easily add any platform that you want to use.
+            <p class="u-line-height-1-5 u-margin-block-start-16">
+                Our SDKs make it possible to easily integrate with any platform.
             </p>
         </div>
         <div class="grid-1-2-col-2">
@@ -96,8 +98,9 @@
     <section class="common-section grid-1-2">
         <div class="grid-1-2-col-1">
             <h3 class="heading-level-7">Integrate With Your Server</h3>
-            <p class="u-line-height-1-5">
-                Our SDK's make it possible to easily add any platform that you want to use.
+            <p class="u-line-height-1-5 u-margin-block-start-16">
+                Appwrite is designed to adapt to your existing backend. Integrate Appwrite with your
+                backend code base using Server SDKs or Webhooks.
             </p>
         </div>
         <div class="grid-1-2-col-2">
@@ -144,15 +147,15 @@
 
 <article
     class="card u-grid u-width-full-line common-section onboard-cover"
-    style={`background-image: url(${onBoardImage1});`}>
+    style={`background-image: url(${onBoardImage1}); box-shadow: none !important`}>
     <div class="u-flex u-flex-vertical u-cross-center">
         <div class="avatar">
             <i class="icon-lock-closed" />
         </div>
         <div class="common-section">
-            <h7 class="heading-level-7">Add a Platform to View Data About Your Project</h7>
+            <h7 class="heading-level-7">Add a platform to view data about your project</h7>
         </div>
-        <div class="common-section">
+        <div class="u-margin-block-start-16 u-text-center" style:max-width="550px">
             Get insights on bandwidth usage, requests, realtime connections and more after making
             your first API call
         </div>

diff --git a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -26,7 +26,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Register your app',
+        label: 'Register your platform',
         component: Step1
     });
     stepsComponents.set(2, {
@@ -47,8 +47,8 @@
 </script>
 
 <Wizard
-    title="Add an Android Project"
+    title="Add an Android platform"
     steps={stepsComponents}
     on:finish={onFinish}
     on:exit={onFinish}
-    finalAction="Take me to my Dashboard" />
+    finalAction="Go to dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createApple.svelte b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -26,7 +26,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Register your app',
+        label: 'Register your platform',
         component: Step1
     });
     stepsComponents.set(2, {
@@ -47,8 +47,8 @@
 </script>
 
 <Wizard
-    title="Add an Apple Project"
+    title="Add an Apple platform"
     steps={stepsComponents}
     on:finish={onFinish}
     on:exit={onFinish}
-    finalAction="Take me to my Dashboard" />
+    finalAction="Go to dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -26,7 +26,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Register your app',
+        label: 'Register your platform',
         component: Step1
     });
     stepsComponents.set(2, {
@@ -47,8 +47,8 @@
 </script>
 
 <Wizard
-    title="Add a Flutter Project"
+    title="Add a Flutter platform"
     steps={stepsComponents}
     on:finish={onFinish}
     on:exit={onFinish}
-    finalAction="Take me to my Dashboard" />
+    finalAction="Go to dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -26,7 +26,7 @@
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
-        label: 'Register your app',
+        label: 'Register your platform',
         component: Step1
     });
     stepsComponents.set(2, {
@@ -35,7 +35,7 @@
         optional: true
     });
     stepsComponents.set(3, {
-        label: "Let's get coding",
+        label: 'Initialize SDK',
         component: Step3,
         optional: true
     });
@@ -47,8 +47,8 @@
 </script>
 
 <Wizard
-    title="Add a Web Project"
+    title="Add a web platform"
     steps={stepsComponents}
     on:finish={onFinish}
     on:exit={onFinish}
-    finalAction="Take me to my Dashboard" />
+    finalAction="Go to dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -11,8 +11,8 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
-    <p>First, add this to your root level build.gradle file:</p>
+    <p>First, add this to your root level <code class="inline-code">build.gradle</code> file.</p>
     <Code label="Groovy" labelIcon="android" language="kotlin" code={example1} withCopy />
-    <p class="common-section">And add this to your project's build.gradle file:</p>
+    <p class="common-section">And add this to your project's build.gradle file.</p>
     <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Code } from '$lib/components';
+    import Id from '$lib/components/id.svelte';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
 
@@ -14,12 +15,13 @@ val client = Client(context)
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
 
-    <h2 class="heading-level-7">Init your SDK</h2>
+    <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
-        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
-        can be found in your project settings page.
+        Initialize your SDK by pointing the client to your Appwrite project using your <Id
+            value={project}>Project ID</Id
+        >.
     </p>
     <Code
         label="Android SDK"

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
@@ -48,11 +48,11 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your Apple app</svelte:fragment>
+    <svelte:fragment slot="title">Register your bundle ID</svelte:fragment>
 
     <FormList isCommonSection>
         <FormItem>
-            <p>Choose a platform</p>
+            <p>Choose an Apple platform</p>
             <div class="u-flex u-gap-16 u-margin-block-start-8">
                 <Pill
                     button

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -42,7 +42,9 @@
         {#if method === Method.Xcode}
             <ol class="numeric-list">
                 <li class="numeric-list-item">
-                    <span class="text"> Select File > Add Packages </span>
+                    <span class="text">
+                        In the menu bar under Select File, select Add Packages
+                    </span>
                 </li>
                 <li class="numeric-list-item">
                     <span class="text">
@@ -70,9 +72,9 @@
                 </li>
             </ol>
         {:else if method === Method.Swift}
-            <p>Add this to your Package.swift file:</p>
+            <p>Add this to your <code class="inline-code">Package.swift</code> file.</p>
             <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
-            <p class="common-section">Then add the dependency to your target:</p>
+            <p class="common-section">Then add the dependency to your target.</p>
             <Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
         {/if}
     </div>

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
@@ -3,6 +3,7 @@
     import { WizardStep } from '$lib/layout';
     import { Mode, MODE } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
+    import Id from '$lib/components/id.svelte';
 
     const { endpoint, project } = sdk.forProject.client.config;
     const code = `import Appwrite
@@ -16,24 +17,22 @@ let client = Client()
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
 
-    <h2 class="heading-level-7">Init your SDK</h2>
+    <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
-        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
-        can be found in your project settings page.
+        Initialize your SDK by pointing the client to your Appwrite project using your <Id
+            value={project}>Project ID</Id
+        >.
     </p>
     <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
-    <p>
+    <p class="u-margin-block-start-24">
         Before sending any API calls to your new Appwrite project, make sure your device or emulator
         has network access to your Appwrite project's hostname or IP address.
     </p>
-    {#if showAlert}
+    {#if showAlert && MODE === Mode.SELF_HOSTED}
         <div class="common-section">
-            <Alert
-                type="info"
-                dismissible={MODE === Mode.CLOUD}
-                on:dismiss={() => (showAlert = false)}>
+            <Alert type="info" dismissible on:dismiss={() => (showAlert = false)}>
                 <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
                 When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
                 you should use the private IP of the device running your Appwrite project as the hostname

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
@@ -106,10 +106,19 @@
         $createPlatform.$id = response.$id;
         $createPlatform.type = platform;
     }
+
+    $: registee = {
+        [Platform.Android]: 'package name',
+        [Platform.Ios]: 'bundle ID',
+        [Platform.Linux]: 'package name',
+        [Platform.Macos]: 'bundle ID',
+        [Platform.Windows]: 'package name',
+        [Platform.Web]: 'hostname'
+    }[platform];
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
+    <svelte:fragment slot="title">Register your {registee}</svelte:fragment>
     <svelte:fragment slot="subtitle">
         <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
             <Pill

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -11,10 +11,13 @@
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
 
-    <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
+    <p>
+        Add Appwrite SDK to your package's <code class="inline-code">pubspec.yaml</code> file. You can
+        view an example here.
+    </p>
     <Code label="YAML" language="yml" code={example1} withCopy />
     <p class="common-section">
-        You can also install the SDK using the Dart package manager from your terminal:
+        You can also install the SDK using the Dart package manager from your terminal.
     </p>
     <Code label="Bash" language="sh" code={example2} withCopy />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
@@ -3,6 +3,7 @@
     import { WizardStep } from '$lib/layout';
     import { Mode, MODE } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
+    import Id from '$lib/components/id.svelte';
 
     const { endpoint, project } = sdk.forProject.client.config;
     const code = `import 'package:appwrite/appwrite.dart';
@@ -17,12 +18,12 @@ client
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
 
-    <h2 class="heading-level-7">Init your SDK</h2>
+    <h2 class="heading-level-7">Initialize your SDK</h2>
     <p>
-        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
-        can be found in your project settings page.
+        Initialize your SDK by pointing the client to your Appwrite project using your <Id
+            value={project}>Project ID</Id>
     </p>
     <Code label="Flutter SDK" labelIcon="flutter" language="dart" {code} withCopy withLineNumbers />
     <p class="common-section">

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
+    import { page } from '$app/stores';
     import { WizardStep } from '$lib/layout';
+
+    $: isFirstProject = $page.data.platforms.total === 0;
 </script>
 
 <WizardStep>
     <svelte:fragment slot="title">You're ready to go 🎉</svelte:fragment>
     <p>
-        Congrats, you've just added your first platform to your Appwrite dashboard! Are you ready to
-        give it a go? Why not add a database to your project, or start uploading files? The choice
-        is up to you.
+        {#if isFirstProject}
+            Congratulations on adding the first platform to your project! Start exploring by
+            creating users, adding a database to your project, or uploading files to a bucket.
+        {:else}
+            Congratulations on adding another platform to your project! Start building by adding a
+            database, uploading files to a bucket and more via your dashboard.
+        {/if}
     </p>
 </WizardStep>