feat: Redesigning the Onboarding experience (#1425)

* Added card with buttons with functionality to creategoals component. * Continuing to update CreateGoals component with new onboarding flow. * Updated CreateApp to use styled component and set CreateGoals cards to be greyed out when button is disabled. * Updated text in cards to be a p tag instead of an h1. Need clarification on where to put newly created styled components. * Moved styled components for CreateGoals into container file. * Updating CreateGoals with new Onboarding flow. Commented out step 3 of Onboarding flow and will continue to work on that in a new issue. * Adding TODO issue number.
open-sauced · May 6, 2022 · afbbbf6 · afbbbf6
1 parent 6b0885c
commit afbbbf6
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 58 deletions.
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -1,7 +1,8 @@
 import React from "react";
-import {FittedCard, Card} from "../styles/Card";
+import {FittedCard, DisabledCard, Card} from "../styles/Card";
 
-function Cards({fitted, children}) {
-  return fitted ? <FittedCard data-testid="fitted-card">{children}</FittedCard> : <Card data-testid="card">{children}</Card>;
+function Cards({fitted, disabled, children}) {
+  return fitted ? <FittedCard data-testid="fitted-card">{children}</FittedCard> :
+         disabled ? <DisabledCard data-testid="card">{children}</DisabledCard> : <Card data-testid="card">{children}</Card>;
 }
 export default Cards;
diff --git a/src/components/CreateGoals.jsx b/src/components/CreateGoals.jsx
@@ -2,50 +2,29 @@ import React, {useState} from "react";
 import Button from "../styles/Button";
 import Illustration from "../styles/Illustration";
 import {ContextStyle} from "../styles/Card";
-import {FlexColumn, SpaceBetweenTop} from "../styles/Grid";
+import {SpaceBetweenTop, SpaceBetween} from "../styles/Grid";
 import api from "../lib/apiGraphQL";
 import {goalsReducer} from "../lib/reducers";
 import {devProductive} from "../illustrations";
+import Cards from "./Card";
+import {CreateGoalsContainer, OnBoardingText} from "../styles/Container"
 
 function CreateApp() {
   return (
-    <React.Fragment>
-      <h1>Create your goals workspace</h1>
-      <p>
-        Open Sauced is a tool to help track your open source contributions. You can get started by creating a goal
-        workspace below.
-      </p>
-      <p>A public repository named "open-sauced-goals" will be created on your GitHub account to store data about your goals.</p>
-      <small>
-        <em>You own all your data saved while saucin.</em>
-      </small>
-    </React.Fragment>
-  );
-}
-
-function InstallApp({user}) {
-  const repoUrl = `https://github.com/${user.login}/open-sauced-goals`;
-  return (
-    <React.Fragment>
-      <h1>Install the GitHub App</h1>
-      <p>
-        GitHub Apps are the officially recommended way to integrate with GitHub because they offer much more granular
-        permissions to access data.
-      </p>
-      <p>
-        The Open Sauced App needs to be installed on your newly
-        created <a href={repoUrl} target="_blank" rel="noreferrer">open-sauced-goals</a> public
-        repository.
-      </p>
-      <img
-        style={{textAlign: "center", width: "80%"}}
-        src="https://user-images.githubusercontent.com/20134767/86527180-4a83c700-be51-11ea-8eaf-660298cf3c66.png"
-        alt="Install and Authorize"
-      />
-      <small>
-        <em>The installation grants access storing note data and tracking open source contributions.</em>
-      </small>
-    </React.Fragment>
+    <>
+      <CreateGoalsContainer>
+        <h1>Create your goals workspace</h1>
+        <p>
+          Open Sauced is a tool to help track your open source contributions. You can get started by creating a goal
+          workspace below.
+        </p>
+        <p>A public repository named "open-sauced-goals" will be created on your GitHub account to store data about your goals.</p>
+        <small>
+          <em>You own all your data saved while saucin.</em>
+        </small>
+      </CreateGoalsContainer>
+      <Illustration className="productive-developer" alt="productive developer image" src={devProductive} />
+    </>
   );
 }
 
@@ -92,23 +71,47 @@ function CreateGoals({installNeeded, user, onRepoCreation}) {
     <React.Fragment>
       <ContextStyle>
         <SpaceBetweenTop>
-          <FlexColumn>{installReady ? <InstallApp user={user} /> : <CreateApp />}</FlexColumn>
-          <Illustration alt="productive developer image" src={devProductive} />
+          <SpaceBetween>
+              <CreateApp />
+          </SpaceBetween>
         </SpaceBetweenTop>
+        <Cards disabled={installReady}>
+          <SpaceBetween>
+            <OnBoardingText>
+              <h1>1</h1>
+              <p>Let's sync Open Sauced with your GitHub Repos</p>
+            </OnBoardingText>
+            <Button primary minWidth={175} maxWidth={175} onClick={_handleRepoCreation} disabled={installReady}>
+              Sync Repos
+            </Button>
+          </SpaceBetween>
+        </Cards>
+        <Cards disabled={!installReady}>
+          <SpaceBetween>
+            <OnBoardingText>
+              <h1>2</h1>
+              <p>Now let's create the Open Sauced database on GitHub</p>
+            </OnBoardingText>
+            <a
+              rel="noreferrer"
+              target="_blank"
+              href={`https://github.com/apps/open-sauced/installations/new/permissions?target_id=${user && user.id}`}>
+              <Button primary minWidth={175} maxWidth={175} disabled={!installReady}>Create database</Button>
+            </a>
+          </SpaceBetween>
+        </Cards>
+        {/* TODO: issue #1428
+        
+        <Cards disabled={true}>
+          <SpaceBetween>
+            <OnBoardingText>
+              <h1>3</h1>
+              <p>And finally, it's time to follow some repos</p>
+            </OnBoardingText>
+              <Button primary minWidth={175} disabled={true}>Add Repos</Button>
+          </SpaceBetween>
+        </Cards> */}
       </ContextStyle>
-      <br style={{marginTop: 8}} />
-      {installReady ? (
-        <a
-          rel="noreferrer"
-          target="_blank"
-          href={`https://github.com/apps/open-sauced/installations/new/permissions?target_id=${user.id}`}>
-          <Button primary>Finish initializing {user.login}/open-sauced-goals</Button>
-        </a>
-      ) : (
-        <Button primary onClick={_handleRepoCreation}>
-          Create your goal workspace
-        </Button>
-      )}
     </React.Fragment>
   );
 }

diff --git a/src/components/Repository.jsx b/src/components/Repository.jsx
@@ -2,7 +2,6 @@ import React, {useState, useEffect} from "react";
 import DangerZone from "../components/DangerZone";
 import Card from "../components/Card";
 import Issues from "../components/Issues";
-import Contributions from "../components/Contributions";
 import DetailInfo from "../components/DetailInfo";
 import api from "../lib/apiGraphQL";
 import RepositoryAvatar from "../styles/RepositoryAvatar";

diff --git a/src/styles/Button.jsx b/src/styles/Button.jsx
@@ -19,7 +19,8 @@ const Button = styled.button`
   font-size: ${fontSize.default};
   font-weight: 600;
   min-height: 35px;
-  min-width: 68px;
+  min-width: ${props => props.minWidth ? `${props.minWidth}px` : "68px"};
+  ${props => props.maxWidth && `max-width: ${props.maxWidth}px`};
   margin-bottom: ${size.tiny};
   margin-right: ${size.micro};
   outline: none;

diff --git a/src/styles/Card.jsx b/src/styles/Card.jsx
@@ -86,6 +86,10 @@ const FittedCard = styled(Card)`
   padding: 0;
 `;
 
+const DisabledCard = styled(Card)`
+  opacity: 0.5
+`;
+
 const ButtonBoard = styled.div`
   flex: 1;
   padding: ${size.tiny} ${margin.gutter};
@@ -315,6 +319,7 @@ export {
   CardPadding,
   CardHeader,
   FittedCard,
+  DisabledCard,
   ContextStyle,
   HintStyle,
   OnBoardStyle,

diff --git a/src/styles/Container.jsx b/src/styles/Container.jsx
@@ -13,4 +13,21 @@ export const Container = styled.div`
   `};
 `;
 
+export const CreateGoalsContainer = styled.div`
+  max-width: 60%;
+
+  ${MEDIA.TABLET`
+    max-width: 100%;
+  `};
+`;
+export const OnBoardingText = styled.div`
+  h1 {
+    width: auto;
+    padding-right: 20px;
+  };
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
 export default Container;
diff --git a/src/styles/Grid/Flex.js b/src/styles/Grid/Flex.js
@@ -45,6 +45,9 @@ const SpaceBetween = styled.div`
   -webkit-justify-content: space-between;
 
   ${MEDIA.TABLET`
+    .productive-developer {
+      display: none;
+    }
     flex-direction: column;
   `};
 `;