From 78168d47e3b2642bbd0eb6b4d072e9ca8c70ecba Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 10 Jul 2023 17:31:38 -0700
Subject: sprucing up onboarding
---
extension/react-app/src/components/Onboarding.tsx | 146 ++++++++++++++++------
1 file changed, 105 insertions(+), 41 deletions(-)
diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
index 373f7bea..0e188e7a 100644
--- a/extension/react-app/src/components/Onboarding.tsx
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -1,51 +1,115 @@
import { useSelector } from "react-redux";
import { RootStore } from "../redux/store";
-import React, { useState } from 'react';
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import { ArrowLeft, ArrowRight } from "@styled-icons/heroicons-outline";
+import { defaultBorderRadius } from ".";
+const StyledDiv = styled.div`
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #1e1e1e;
+ z-index: 200;
+`;
+
+const StyledSpan = styled.span`
+ padding: 8px;
+ border-radius: ${defaultBorderRadius};
+ &:hover {
+ background-color: #ffffff33;
+ }
+`;
const Onboarding = () => {
- const [counter, setCounter] = useState(0);
+ const [counter, setCounter] = useState(4);
+ const gifs = ["intro", "explain", "edit", "generate"];
+ const topMessages = [
+ "Welcome to Continue!",
+ "Answer coding questions",
+ "Edit in natural language",
+ "Generate files from scratch",
+ ];
+ const bottomMessages = [
+ "",
+ "Ask Continue about a part of your code to get another perspective",
+ "Highlight a section of code and instruct Continue to refactor it",
+ "Let Continue build the scaffolding of Python scripts, React components, and more",
+ ];
- const handleClick = () => {
- setCounter(counter + 1);
- }
+ const vscMediaUrl = useSelector(
+ (state: RootStore) => state.config.vscMediaUrl
+ );
- const vscMediaUrl = useSelector(
- (state: RootStore) => state.config.vscMediaUrl
- );
+ useEffect(() => {
+ const hasVisited = localStorage.getItem("hasVisited");
+ if (hasVisited) {
+ setCounter(4);
+ } else {
+ setCounter(0);
+ localStorage.setItem("hasVisited", "true");
+ }
+ }, []);
- return (
- <div style={{position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', backgroundColor: '#1E1E1E', zIndex: 200 }} onClick={handleClick}>
- {counter === 0 && (
- <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
- <h1>Welcome to Continue!</h1>
- <img src={`${vscMediaUrl}/intro.gif`} alt="Intro" />
- </div>
- )}
- {counter === 1 && (
- <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
- <h1>Answer coding questions</h1>
- <img src={`${vscMediaUrl}/explain.gif`} alt="Explain" />
- <p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Ask Continue about a part of your code to get another perspective</p>
- </div>
- )}
- {counter === 2 && (
- <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
- <h1>Edit in natural language</h1>
- <img src={`${vscMediaUrl}/edit.gif`} alt="Edit" />
- <p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Highlight a section of code and instruct Continue to refactor it</p>
- </div>
- )}
- {counter === 3 && (
- <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
- <h1>Generate files from scratch</h1>
- <img src={`${vscMediaUrl}/generate.gif`} alt="Generate" />
- <p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Let Continue build the scaffolding of Python scripts, React components, and more</p>
- </div>
- )}
- <p style={{ paddingLeft: '50px', paddingRight: '50px', paddingBottom: '50px', textAlign: 'center' }}>Click to learn how to use Continue...</p>
- </div>
- );
-}
+ return (
+ <StyledDiv hidden={counter >= 4}>
+ <div
+ style={{
+ display: "grid",
+ justifyContent: "center",
+ alignItems: "center",
+ height: "100%",
+ textAlign: "center",
+ background: `linear-gradient(
+ 101.79deg,
+ #12887a66 0%,
+ #87245c66 32%,
+ #e1263766 63%,
+ #ffb21566 100%
+ )`,
+ paddingLeft: "16px",
+ paddingRight: "16px",
+ }}
+ >
+ <h1>{topMessages[counter]}</h1>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <img
+ src={`${vscMediaUrl}/${gifs[counter]}.gif`}
+ alt={topMessages[counter]}
+ />
+ </div>
+ <p>{bottomMessages[counter]}</p>
+ <p
+ style={{
+ paddingLeft: "50px",
+ paddingRight: "50px",
+ paddingBottom: "50px",
+ textAlign: "center",
+ }}
+ >
+ <div
+ style={{
+ cursor: "pointer",
+ }}
+ >
+ <StyledSpan
+ hidden={counter === 0}
+ onClick={() => setCounter((prev) => Math.max(prev - 1, 0))}
+ >
+ <ArrowLeft width="18px" strokeWidth="2px" /> Previous
+ </StyledSpan>
+ <span hidden={counter === 0}>{" | "}</span>
+ <StyledSpan onClick={() => setCounter((prev) => prev + 1)}>
+ Click to {counter === 3 || "learn how to"} use Continue{" "}
+ <ArrowRight width="18px" strokeWidth="2px" />
+ </StyledSpan>
+ </div>
+ </p>
+ </div>
+ </StyledDiv>
+ );
+};
export default Onboarding;
--
cgit v1.2.3-70-g09d2