Merge pull request #442 from sakshii00/fixing-start-tour-for-issue-423

Fixed the start tour/tutorial
singodiyashubham87 · Jul 7, 2024 · 1c2eb92 · 1c2eb92
2 parents 9fe90dc + 261e2ab
commit 1c2eb92
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 39 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -89,7 +89,7 @@ function App() {
  <p className="text-gray-500 text-xs">All you need is a canvas to craft your ideas.</p>
  </div>
 
- <button className="absolute top-7 right-6 p-3 bg-gray-800 rounded-full text-white hover:bg-gray-600 transition duration-300">
+ <button id="guideLines" className="absolute top-7 right-6 p-3 bg-gray-800 rounded-full text-white hover:bg-gray-600 transition duration-300">
  <FaBookOpen
  size={28}
  color="white"
@@ -102,7 +102,7 @@ function App() {
  <div className="bg-[#d3d4d9] dark:bg-black pb-3"></div>
  <div className="bg-[#CBCCCF] flex flex-col min-w-full justify-evenly gsm:flex-row dark:bg-zinc-800 dark:bg-blend-luminosity dark:text-white transform transition duration-500 ease-in-out">
  <Joyride
- steps={steps}
+ steps={tourSteps}
  continuous
  showSkipButton={true}
  locale={{
@@ -141,6 +141,7 @@ function App() {
  <div className="flex flex-row justify-center align-center items-center md:absolute top-0 md:right-4 right-2">
  {/* Eye button */}
  <div
+ id="eye"
  className={`bg-[#CBCCCF] scale-[0.7] p-[1rem] text-[1.5rem] w-80% rounded-[50%] shadow-black shadow-md transform transition duration-300 ease-in-out text-black hover:bg-gray-400 cursor-pointer dark:bg-slate-800 dark:text-[#ffffff] hover:md:scale-[0.8] ${!showMenuAndBgColor && "mt-10"
  }`}
  onClick={() => {
@@ -152,6 +153,7 @@ function App() {
 
  {/* Theme Changer */}
  <div
+ id="mode"
  className={`p-[1rem] text-[1.5rem] scale-[0.7] rounded-[50%] shadow-md hover:bg-gray-1000 transform transition duration-300 ease-in-out hover:md:scale-[0.8] cursor-pointer bg-black dark:bg-amber-400 shadow-black dark:shadow-black dark:shadow-md ${!showMenuAndBgColor && "mt-10"
  }`}
  onClick={toggleDarkMode}
@@ -187,6 +189,7 @@ function App() {
  {showMenuAndBgColor && <BgColorSidePanel canvasRef={canvasRef} setBgColor={setBgColor} />}
 
  <div
+ id="reset"
  className="bg-[#CBCCCF] p-[1rem] text-[2rem] rounded-[50%] shadow-black shadow-vsm dark:shadow-black dark:shadow-lg hover:bg-gray-400 cursor-pointer transform transition duration-300 ease-in-out dark:text-[#111111] hover:md:scale-110"
  onClick={() => {
  setBgColor("#B7BABF");

diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
@@ -50,9 +50,8 @@ function Brush(props) {
  return (
  <div className="relative" ref={dropdownRef}>
  <PiPencilSimpleFill
- className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer text-black bg-[#CBCCCF] hover:bg-[#B7BABF] ${
- isDropdownOpen ? "bg-gray-400" : ""
- } ${isVisible ? "bg-gray-400" : ""}`}
+ className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer text-black bg-[#CBCCCF] hover:bg-[#B7BABF] ${isDropdownOpen ? "bg-gray-400" : ""
+ } ${isVisible ? "bg-gray-400" : ""}`}
  onClick={() => {
  toggleDropdown();
  toggleVisible();
@@ -61,16 +60,14 @@ function Brush(props) {
  title="Draw"
  />
  <div
- className={`absolute top-full bg-[#CBCCCF] mx-auto rounded-[0.5rem] left-1/2 transform -translate-x-1/2 ${
- isDropdownOpen ? "block" : "hidden"
- }`}
+ className={`absolute top-full bg-[#CBCCCF] mx-auto rounded-[0.5rem] left-1/2 transform -translate-x-1/2 ${isDropdownOpen ? "block" : "hidden"
+ }`}
  >
  {/* Dropdown content */}
  <div className={`py-2 bg-[#CBCCCF] text-black`}>
  <button
- className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${
- brushStyle === "solid" ? "font-bold" : ""
- }`}
+ className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${brushStyle === "solid" ? "font-bold" : ""
+ }`}
  onClick={() => {
  setBrushStyle("solid");
  setIsDropdownOpen(!isDropdownOpen);
@@ -79,9 +76,8 @@ function Brush(props) {
  Solid
  </button>
  <button
- className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${
- brushStyle === "dotted" ? "font-bold" : ""
- }`}
+ className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${brushStyle === "dotted" ? "font-bold" : ""
+ }`}
  onClick={() => {
  setBrushStyle("dotted");
  setIsDropdownOpen(!isDropdownOpen);
@@ -90,9 +86,8 @@ function Brush(props) {
  Dotted
  </button>
  <button
- className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${
- brushStyle === "dashed" ? "font-bold" : ""
- }`}
+ className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${brushStyle === "dashed" ? "font-bold" : ""
+ }`}
  onClick={() => {
  setBrushStyle("dashed");
  setIsDropdownOpen(!isDropdownOpen);
@@ -101,9 +96,8 @@ function Brush(props) {
  Dashed
  </button>
  <button
- className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${
- brushStyle === "faded" ? "font-bold" : ""
- }`}
+ className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${brushStyle === "faded" ? "font-bold" : ""
+ }`}
  onClick={() => {
  setBrushStyle("faded");
  setIsDropdownOpen(!isDropdownOpen);
@@ -177,7 +171,7 @@ const Menu = ({
 
  return (
  <>
- <div className="scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem]">
+ <div id="toolbar" className="scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem]">
  <Brush
  isDropdownOpen={isDropdownOpen}
  toggleDropdown={toggleDropdown}
@@ -216,9 +210,8 @@ const Menu = ({
  <div className="flex flex-col relative">
  <button className="relative">
  <FaFeatherPointed
- className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm mx-auto rounded-[0.5rem] text-black bg-[#CBCCCF] cursor-pointer hover:bg-[#B7BABF] transform transition duration-300 ease-in-out ${
- isVisible ? "block" : "hidden"
- } ${pencilWidth ? "bg-gray-200" : ""}`}
+ className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm mx-auto rounded-[0.5rem] text-black bg-[#CBCCCF] cursor-pointer hover:bg-[#B7BABF] transform transition duration-300 ease-in-out ${isVisible ? "block" : "hidden"
+ } ${pencilWidth ? "bg-gray-200" : ""}`}
  onClick={() => {
  setPencilWidth(!pencilWidth);
  setSelectedTool("brush");
@@ -236,9 +229,8 @@ const Menu = ({
  onChange={(e) => {
  setThickness(e.target.value);
  }}
- className={`cursor-pointer absolute bottom-[-40px] ${
- isVisible ? "block" : "hidden"
- }`}
+ className={`cursor-pointer absolute bottom-[-40px] ${isVisible ? "block" : "hidden"
+ }`}
  />
  )}
  </div>
@@ -281,9 +273,8 @@ const Menu = ({
  </button>
 
  <div
- className={`absolute z-10 ${
- isOpen ? "" : "hidden"
- } divide-y bg-[#CBCCCF] rounded-lg shadow w-59 top-[3.1rem] `}
+ className={`absolute z-10 ${isOpen ? "" : "hidden"
+ } divide-y bg-[#CBCCCF] rounded-lg shadow w-59 top-[3.1rem] `}
  >
  <ul
  className="text-sm text-gray-700 flex space-y-5 md:space-x-5 p-5 justify-center items-center flex flex-col md:flex-row"

diff --git a/src/utils/helpers.js b/src/utils/helpers.js
@@ -9,33 +9,76 @@ export const rainbowColors = [
 
 export const tourSteps = [
  {
+ title: "Lets Get Started",
+ content:
+ "Welcome! You can follow this quick walkthrough to learn how get around. ",
  target: "body",
  placement: "center",
- title: "Lets Get Started",
+ disableBeacon: true,
+ },
+ {
+ title: "Toolbar",
  content:
- "Seems like it's your first time here. Follow this quick walkthrough to know how get around. ",
+ "You can use different tools from here that will help you in drawing.",
+ target: "#toolbar",
+ placement: "bottom",
  disableBeacon: true,
  },
  {
- target: ".board",
- content: "Click here to select a tool.",
+ title: "Canvas",
+ content:
+ "This is the canvas where you can draw.",
+ target: ".whiteboard",
+ placement: "top",
  disableBeacon: true,
  },
  {
+ title: "Background Color",
+ content:
+ "Chosen background color is given to the canvas. ",
  target: ".color-pallet",
- placement: "right",
- content: "Select a Color from Here.",
+ placement: "top",
  disableBeacon: true,
  },
  {
- target: "#draw",
- content: "Explore your Inner Picasso here.",
+ title: "Clear canvas",
+ content:
+ "This button can be used to clear the canvas.",
+ target: "#reset",
+ placement: "top",
  disableBeacon: true,
  },
  {
+ title: "Toggle Toolbar",
+ content:
+ "This button can be used for hiding/unhiding the toolbar.",
+ target: "#eye",
+ placement: "bottom",
+ disableBeacon: true,
+ },
+ {
+ title: "Toggle Mode",
+ content:
+ "This button can be used for changing to light/dark mode.",
+ target: "#mode",
+ placement: "bottom",
+ disableBeacon: true,
+ },
+ {
+ title: "Guidelines",
+ content:
+ "This button can be used for further guidelines.",
+ target: "#guideLines",
+ placement: "bottom",
+ disableBeacon: true,
+ },
+ {
+ title: "End",
+ content:
+ "Now you're all set. Lets Draw It Out! :)",
  target: "body",
  placement: "center",
- content: "Now All Set :)",
  disableBeacon: true,
  },
+
 ];