From 6cdadefe437e0c7a1afe28da424982ebe72b3654 Mon Sep 17 00:00:00 2001 From: Daniel Marques Date: Thu, 7 Dec 2023 08:57:16 +0000 Subject: [PATCH] Onboarding UI Fixes (#58788) * Adds Release Labels to IDEs and Changes VSCode instructions * Modal Styles * Style Fixes * Hover state on grid * Adds JetBrains instructions placeholder and links SVG Ide Icons * Adds Breathing Animation * Adds video, adds rounded corners and color stroke * Copy and SVG icons on mngmt page * Typos * Fix Linting * Fix Linting * Fix Linting --------- Co-authored-by: Naman Kumar --- client/web/BUILD.bazel | 1 + .../CodyMarketingPage/CodyMarketingPage.tsx | 2 + .../src/cody/components/GettingStarted.tsx | 2 + .../cody/management/CodyManagementPage.tsx | 2 +- .../onboarding/CodyOnboarding.module.scss | 167 +++++++++++++- .../src/cody/onboarding/CodyOnboarding.tsx | 54 +++-- .../onboarding/instructions/JetBrains.tsx | 207 ++++++++++++++++++ .../cody/onboarding/instructions/VsCode.tsx | 202 +++++++++++------ .../pages/CodyConfigurationPage.tsx | 2 + client/web/src/get-cody/GetCodyPage.tsx | 2 + docsite_run.sh | 11 + 11 files changed, 562 insertions(+), 90 deletions(-) create mode 100644 client/web/src/cody/onboarding/instructions/JetBrains.tsx create mode 100755 docsite_run.sh diff --git a/client/web/BUILD.bazel b/client/web/BUILD.bazel index 9b755658700..3816e2daeea 100644 --- a/client/web/BUILD.bazel +++ b/client/web/BUILD.bazel @@ -241,6 +241,7 @@ ts_project( "src/cody/isCodyEnabled.tsx", "src/cody/management/CodyManagementPage.tsx", "src/cody/onboarding/CodyOnboarding.tsx", + "src/cody/onboarding/instructions/JetBrains.tsx", "src/cody/onboarding/instructions/VsCode.tsx", "src/cody/search/CodySearchPage.tsx", "src/cody/search/api.ts", diff --git a/client/web/src/cody/components/CodyMarketingPage/CodyMarketingPage.tsx b/client/web/src/cody/components/CodyMarketingPage/CodyMarketingPage.tsx index e3ddf070779..a1364d6c78e 100644 --- a/client/web/src/cody/components/CodyMarketingPage/CodyMarketingPage.tsx +++ b/client/web/src/cody/components/CodyMarketingPage/CodyMarketingPage.tsx @@ -24,6 +24,8 @@ interface CodyPlatformCardProps { illustration: string } +/* eslint-disable @sourcegraph/sourcegraph/check-help-links */ + const onSpeakToAnEngineer = (): void => eventLogger.log(EventName.SPEAK_TO_AN_ENGINEER_CTA) const onClickCTAButton = (type: string): void => eventLogger.log('SignupInitiated', { type, source: 'cody-signed-out' }, { type, page: 'cody-signed-out' }) diff --git a/client/web/src/cody/components/GettingStarted.tsx b/client/web/src/cody/components/GettingStarted.tsx index dd7b93e726d..1577cbc4c7e 100644 --- a/client/web/src/cody/components/GettingStarted.tsx +++ b/client/web/src/cody/components/GettingStarted.tsx @@ -18,6 +18,8 @@ type ConversationScope = 'general' | 'repo' const DEFAULT_VERTICAL_OFFSET = '1rem' +/* eslint-disable @sourcegraph/sourcegraph/check-help-links */ + export const GettingStarted: React.FC< Pick< CodyChatStore, diff --git a/client/web/src/cody/management/CodyManagementPage.tsx b/client/web/src/cody/management/CodyManagementPage.tsx index 987470a71e2..0361a25261d 100644 --- a/client/web/src/cody/management/CodyManagementPage.tsx +++ b/client/web/src/cody/management/CodyManagementPage.tsx @@ -232,7 +232,7 @@ export const CodyManagementPage: React.FunctionComponent {editor.name} diff --git a/client/web/src/cody/onboarding/CodyOnboarding.module.scss b/client/web/src/cody/onboarding/CodyOnboarding.module.scss index 460b1933aef..b07ae80bd25 100644 --- a/client/web/src/cody/onboarding/CodyOnboarding.module.scss +++ b/client/web/src/cody/onboarding/CodyOnboarding.module.scss @@ -1,7 +1,90 @@ .modal { - width: 50rem; + width: 54rem; + border-radius: 6px; + background-image: repeating-conic-gradient( + rgba(112, 72, 232, 0.5) 50%, + rgba(0, 203, 236, 0.5) 75%, + rgba(161, 18, 255, 0.5) 100%, + rgba(255, 85, 67, 0.5) 125%, + rgba(112, 72, 232, 0.5) 150% + ); + background-origin: border-box; + + /* to allow a gradient stroke, this is actually where the color of the background is set */ + box-shadow: inset 0 100vw var(--theme-bg-plain); + + /* to let the gradient on the background act as a stroke */ + border: 1px solid transparent; + + /* to let gradient shadow be behind the modal */ + transform-style: preserve-3d; } +/* Colorful shadow on the modali */ +.modal::after { + content: ''; + position: absolute; + width: 90%; + height: 2.8125rem; + background: linear-gradient(90deg, #7048e8 0%, #4ac1e8 32.21%, #4d0b79 65.39%, #ff5543 104.43%), #eff2f5; + transform: translateZ(-1px); + filter: blur(30px); + opacity: 0.9; + animation: modal-shadow 6s ease-in-out infinite; +} + +@keyframes modal-shadow { + 0% { + transform: translateY(0) translateZ(-1px); + opacity: 0.4; + } + 50% { + transform: translateY(-25px) translateZ(-1px); + opacity: 0.9; + } + 100% { + transform: translateY(0) translateZ(-1px); + opacity: 0.4; + } +} + +@media (prefers-color-scheme: dark) { + [data-reach-dialog-overlay] { + background: linear-gradient(180deg, rgba(17, 20, 27, 0.92) 0%, rgba(13, 16, 25, 0.92) 100%); + backdrop-filter: blur(7px); + } + + .highlight-step { + background: radial-gradient(50% 100% at 50% 100%, var(--gray-09) 0%, transparent 100%); + } + + .modal { + background-image: repeating-conic-gradient( + rgba(112, 72, 232, 0.3) 50%, + rgba(0, 203, 236, 0.3) 75%, + rgba(161, 18, 255, 0.5) 100%, + rgba(255, 85, 67, 0.3) 125%, + #7048e8 150% + ); + } +} + +@media (prefers-color-scheme: light) { + [data-reach-dialog-overlay] { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 244, 244, 0.9) 100%); + backdrop-filter: blur(7px); + } + + .highlight-step { + background: radial-gradient(50% 100% at 50% 100%, var(--gray-04) 0%, transparent 100%); + } +} + +.release-stage { + color: var(--gray-07); +} + +/* Step section on instructions */ .step { background: #343a4d; color: #ffffff; @@ -9,6 +92,17 @@ border-radius: 50%; } +.ide-grid:hover { + background: var(--subtle-bg); + transition: all 0.25s ease; +} + +.instructions-container { + /* adds vertical scroll to long instructions and prevents "next" and "back buttons" to be under the fold */ + max-height: 80vh; + overflow-y: auto; +} + .responsive-container { @media (--sm-breakpoint-down) { flex-direction: column; @@ -24,3 +118,74 @@ .ide-name { font-size: 1rem; } + +/* Initial welcome */ + +.welcome-title { + font-size: 2rem; + font-weight: 500; + letter-spacing: -0.2px; +} + +.welcome-subtitle { + font-size: 1.1rem; + font-weight: 300; +} + +.fade-in { + animation: 2.5s fadeInUp; +} + +.fade-first { + animation-delay: 3s; + opacity: 0; + + /* to keep opacity */ + animation-fill-mode: forwards; +} + +.fade-second { + animation-delay: 3.2s; + opacity: 0; + + /* to keep opacity */ + animation-fill-mode: forwards; +} + +.fade-third { + animation-delay: 4s; + opacity: 0; + + /* to keep opacity */ + animation-fill-mode: forwards; +} + +.welcome-video { + animation: 2.5s moveUp 3s; + transform: translateY(70%); + animation-fill-mode: forwards; +} + +@keyframes moveUp { + 0% { + transform: translateY(70%); + } + 100% { + transform: translateY(0%); + } +} + +@keyframes fadeInUp { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0%); + opacity: 1; + } +} + +.fade-in-up-animation { + animation: 1.5s fadeInUp; +} diff --git a/client/web/src/cody/onboarding/CodyOnboarding.tsx b/client/web/src/cody/onboarding/CodyOnboarding.tsx index 539028dedb0..740e3dce872 100644 --- a/client/web/src/cody/onboarding/CodyOnboarding.tsx +++ b/client/web/src/cody/onboarding/CodyOnboarding.tsx @@ -3,12 +3,12 @@ import React, { useState, useEffect } from 'react' import classNames from 'classnames' import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary' -import { Modal, H1, H2, H3, Text, Button, useSearchParameters } from '@sourcegraph/wildcard' +import { Modal, H5, H2, H3, Text, Button, useSearchParameters } from '@sourcegraph/wildcard' import { eventLogger } from '../../tracking/eventLogger' import { EventName } from '../../util/constants' -import { CodyColorIcon } from '../chat/CodyPageIcon' +import { JetBrainsInstructions } from './instructions/JetBrains' import { VSCodeInstructions } from './instructions/VsCode' import styles from './CodyOnboarding.module.scss' @@ -17,31 +17,37 @@ export interface IEditor { icon: string name: string publisher: string + releaseStage: string instructions?: React.FC<{ onBack?: () => void; onClose: () => void; showStep?: number }> } export const editorGroups: IEditor[][] = [ [ { - icon: 'VSCode', + icon: 'VsCode', name: 'VS Code', publisher: 'Microsoft', + releaseStage: 'Stable', instructions: VSCodeInstructions, }, { icon: 'IntelliJ', name: 'IntelliJ IDEA', publisher: 'JetBrains', + releaseStage: 'Beta', + instructions: JetBrainsInstructions, }, { - icon: 'Neovim', + icon: 'NeoVim', name: 'Neovim', publisher: 'Neovim Team', + releaseStage: 'Experimental', }, { icon: 'AndroidStudio', name: 'Android Studio', publisher: 'Google', + releaseStage: 'Beta', }, ], [ @@ -49,21 +55,25 @@ export const editorGroups: IEditor[][] = [ icon: 'PhpStorm', name: 'PhpStorm ', publisher: 'JetBrains', + releaseStage: 'Beta', }, { icon: 'PyCharm', name: 'PyCharm', publisher: 'Jetbrains', + releaseStage: 'Beta', }, { icon: 'WebStorm', name: 'WebStorm', publisher: 'JetBrains', + releaseStage: 'Beta', }, { icon: 'RubyMine', name: 'RubyMine', publisher: 'JetBrains', + releaseStage: 'Beta', }, ], [ @@ -71,11 +81,13 @@ export const editorGroups: IEditor[][] = [ icon: 'GoLand', name: 'GoLand', publisher: 'JetBrains', + releaseStage: 'Beta', }, { icon: 'Emacs', name: 'Emacs', publisher: 'Free Software Foundation', + releaseStage: 'Coming Soon', }, ], ] @@ -111,12 +123,21 @@ function WelcomeStep({ onNext, pro }: { onNext: () => void; pro: boolean }): JSX }, [pro]) return ( -
- -

Welcome {pro ? 'to Cody Pro Trial' : 'to Cody by Sourcegraph!'}

- Let's walk through a few quick steps to get you started with Cody. -
) @@ -131,7 +152,7 @@ function PurposeStep({ onNext, pro }: { onNext: () => void; pro: boolean }): JSX <>

What are you using Cody for?

- + This will allow us to understand our audience better and guide your journey
@@ -203,7 +224,7 @@ function EditorStep({ <>

Choose your editor

- + Most of Cody experience happens in the IDE. Let's get that set up.
@@ -218,7 +239,7 @@ function EditorStep({ {group.map((editor, index) => (
-
+
{editor.name}
@@ -253,6 +274,7 @@ function EditorStep({ {editor.publisher} {editor.name} +
{editor.releaseStage}
diff --git a/client/web/src/cody/onboarding/instructions/JetBrains.tsx b/client/web/src/cody/onboarding/instructions/JetBrains.tsx new file mode 100644 index 00000000000..531c7a7deaa --- /dev/null +++ b/client/web/src/cody/onboarding/instructions/JetBrains.tsx @@ -0,0 +1,207 @@ +import { useState } from 'react' + +import classNames from 'classnames' + +import { H2, Text, Button, ButtonLink, Link } from '@sourcegraph/wildcard' + +import styles from '../CodyOnboarding.module.scss' + +export function JetBrainsInstructions({ + onBack, + onClose, + showStep, +}: { + onBack?: () => void + onClose: () => void + showStep?: number +}): JSX.Element { + const [step, setStep] = useState(showStep || 0) + + return ( + <> + {step === 0 && ( + <> +
+

Setup instructions for JetBrains

+
+ +
+
+
+
+
1
+
+
+ + Open the Plugins Page + + + Click the Cog icon in the top right corner of your IDE and select{' '} + Plugins + Alternatively you can go to the settings option (use ⌘ + , for macOS, or File → + Settings for Windows), then select "Plugins" from the menu on the left. + +
+
+
+ + Open Marketplace + +
+
+
+
+
+
2
+
+
+ + Install the Cody Plugin + + + Type "Cody" in the search bar and install the plugin. + +
+
+
+
+
+
+
3
+
+
+ + Open the Plugin and Login + + + Cody will be available on the right side of your IDE. Click the Cody icon to + open the sidebar and login. Alternatively, you should get a notification + that you need to login to Cody. + +
+
+
+
+
+
+ + {showStep === undefined ? ( +
+ + +
+ ) : ( +
+ +
+ )} + + )} + {step === 1 && ( + <> +
+

Cody Features

+
+
+
+ + Autocomplete + + + Cody will autocomplete your code as you type + + Cody Autocomplete +
+
+ + Chat + + + Cody will autocomplete your code as you type + + Cody Chat +
+
+
+
+ + Commands + + + Cody will autocomplete your code as you type + + Cody Commands +
+
+ + Feedback + + + Cody will autocomplete your code as you type + + + Discord Feedback + + + GitHub Feedback + +
+
+ {showStep === undefined ? ( +
+ + +
+ ) : ( +
+ +
+ )} + + )} + + ) +} diff --git a/client/web/src/cody/onboarding/instructions/VsCode.tsx b/client/web/src/cody/onboarding/instructions/VsCode.tsx index 30e3ee98527..9ade3e48c87 100644 --- a/client/web/src/cody/onboarding/instructions/VsCode.tsx +++ b/client/web/src/cody/onboarding/instructions/VsCode.tsx @@ -2,7 +2,7 @@ import { useState } from 'react' import classNames from 'classnames' -import { H2, Text, Button, ButtonLink } from '@sourcegraph/wildcard' +import { H2, Text, Button, ButtonLink, Link } from '@sourcegraph/wildcard' import styles from '../CodyOnboarding.module.scss' @@ -21,70 +21,91 @@ export function VSCodeInstructions({ <> {step === 0 && ( <> -
+

Setup instructions for VS Code

-
-
-
-
1
+ +
+
+
+
+
1
+
+
+ + Install Cody + + + Alternatively, you can reach this page by clicking{' '} + View {'>'} Extensions and searching for{' '} + Cody AI + +
-
- - Install Cody - - - Alternatively, you can reach this page by clicking{' '} - View {'>'} Extensions and searching for Cody AI - +
+ + Open Marketplace + + VS Code Marketplace
-
- - Open Marketplace - - VS Code Marketplace -
-
-
-
-
-
2
-
-
- - Open Cody from the Sidebar on the Left - -
-
-
- VS Code Marketplace -
-
-
-
-
3
-
-
- - Login - - - Choose the same login method you used when you created your account - +
+
+
+
2
+
+
+ + Open Cody from the Sidebar on the Left + + + Typically Cody will be the last item in the sidebar + +
+
+
+ VS Code Marketplace +
+
+
+
+
+
3
+
+
+ + Login + + + Choose the same login method you used when you created your account + +
+
+
+ VS Code Marketplace +
+ {showStep === undefined ? (