From af32f20a88f209bdad930df30e8d807350e1c9ee Mon Sep 17 00:00:00 2001
From: Jakub Biesiada <biesiadajakub@icloud.com>
Date: Tue, 2 Mar 2021 23:22:03 +0100
Subject: [PATCH 1/2] feat: add onboarding tips

---
 src/ui/components/Elements/Elements.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/ui/components/Elements/Elements.tsx b/src/ui/components/Elements/Elements.tsx
index db9a1c6..8d195d4 100644
--- a/src/ui/components/Elements/Elements.tsx
+++ b/src/ui/components/Elements/Elements.tsx
@@ -41,6 +41,27 @@ export const Elements = () => {
 
   return (
     <div className={configurators.length > 0 ? undefined : styles.fullLayout}>
+      {/* <Onboarding iconProps={{ iconName: "minus" }}>
+        Select Parts, Nodes and Paints to invert. You can use search field to filter options. By clicking on group heading e.g.: Paints you can toggle all visible items for group.
+      </Onboarding> */}
+
+      {/* TODO */}
+      {/* <Onboarding iconProps={{ iconName: "close" }}>
+        Select Parts, Nodes and Paints to invert.
+      </Onboarding>
+
+      <Onboarding iconProps={{ iconName: "close" }}>
+        You can use search field to filter options. By clicking on group heading e.g.: Paints you can toggle all visible items for group.
+      </Onboarding>
+
+      <Onboarding iconProps={{ iconName: "close" }}>
+        By clicking on group heading e.g.: Paints you can toggle all visible items for group.
+      </Onboarding>
+
+      <Onboarding iconProps={{ iconName: "close" }}>
+        Cancel, Save, Save & Invert
+      </Onboarding> */}
+
       <div className={styles.toolbar}>
         <Input
           value={searchValue}

From c956f31d7cb1360a792c33f8bcfa70a0722845c3 Mon Sep 17 00:00:00 2001
From: Jakub Biesiada <biesiadajakub@icloud.com>
Date: Sun, 16 May 2021 22:46:01 +0200
Subject: [PATCH 2/2] chore: update

---
 src/ui/components/Elements/Elements.tsx | 36 ++++++++++++++++---------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/ui/components/Elements/Elements.tsx b/src/ui/components/Elements/Elements.tsx
index e171f10..d3090d1 100644
--- a/src/ui/components/Elements/Elements.tsx
+++ b/src/ui/components/Elements/Elements.tsx
@@ -1,5 +1,8 @@
 import { useState, useEffect } from 'react';
-import { Input } from 'react-figma-ui';
+import {
+  Input,
+  // Onboarding
+} from 'react-figma-ui';
 
 import { Configurator } from '../Configurator/Configurator';
 import { availableOptions } from '../../../shared/constants/availableOptions';
@@ -37,24 +40,33 @@ export const Elements = () => {
   return (
     // TODO classnames
     <div className={configurators.length > 0 ? undefined : styles.fullLayout}>
-      {/* <Onboarding iconProps={{ iconName: "minus" }}>
-        Select Parts, Nodes and Paints to invert. You can use search field to filter options. By clicking on group heading e.g.: Paints you can toggle all visible items for group.
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'minus' }}>
+        Select Parts, Nodes and Paints to invert. You can use search field to
+        filter options. By clicking on group heading e.g.: Paints you can toggle
+        all visible items for group.
       </Onboarding> */}
 
       {/* TODO */}
-      {/* <Onboarding iconProps={{ iconName: "close" }}>
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'close' }}>
         Select Parts, Nodes and Paints to invert.
-      </Onboarding>
+      </Onboarding> */}
 
-      <Onboarding iconProps={{ iconName: "close" }}>
-        You can use search field to filter options. By clicking on group heading e.g.: Paints you can toggle all visible items for group.
-      </Onboarding>
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'close' }}>
+        You can use search field to filter options. By clicking on group heading
+        e.g.: Paints you can toggle all visible items for group.
+      </Onboarding> */}
 
-      <Onboarding iconProps={{ iconName: "close" }}>
-        By clicking on group heading e.g.: Paints you can toggle all visible items for group.
-      </Onboarding>
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'close' }}>
+        By clicking on group heading e.g.: Paints you can toggle all visible
+        items for group.
+      </Onboarding> */}
 
-      <Onboarding iconProps={{ iconName: "close" }}>
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'close' }}>
         Cancel, Save, Save & Invert
       </Onboarding> */}