diff --git a/src/helper/LoaderUi.tsx b/src/helper/LoaderUi.tsx
index c118cb4..0113300 100644
--- a/src/helper/LoaderUi.tsx
+++ b/src/helper/LoaderUi.tsx
@@ -1,19 +1,22 @@
+import { LuSignature } from "react-icons/lu";
interface StyleProps {
- classStyle : string
+ classStyle?: string;
}
-const LoaderUi = ({ classStyle }:StyleProps) => {
- return (
-
-
-
- )
-}
+const LoaderUi = ({ classStyle = '' }: StyleProps) => {
+ return (
+
+ {/* Overlay */}
+
-export default LoaderUi
\ No newline at end of file
+ {/* Loader box */}
+
+
+ );
+};
+
+export default LoaderUi;
diff --git a/src/index.css b/src/index.css
index c140aab..e4f589e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -113,14 +113,14 @@ canvas {
left: 50%;
transform: translateX(-50%);
z-index: 50;
- background-color: var(--primary);
+ background-color: var(--primary);
color: var(--primaryLight);
padding: 2px 8px;
border-radius: 5px;
}
.bottom-border>div:hover {
- background-color: var(--primaryLight2) ;
+ background-color: var(--primaryLight2);
opacity: 0.9;
transition: all 0.3s ease-in-out;
cursor: pointer;
@@ -129,8 +129,8 @@ canvas {
/* Group Border - END */
- /* Loader CSS */
- /* From Uiverse.io by Juanes200122 */
+/* Loader CSS */
+/* From Uiverse.io by Juanes200122 */
.pl {
width: 6em;
height: 6em;
@@ -158,10 +158,12 @@ canvas {
animation-name: ringD;
stroke: #41644A;
}
-
- /* Animations */
+
+/* Animations */
@keyframes ringA {
- from, 4% {
+
+ from,
+ 4% {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -330;
@@ -179,7 +181,8 @@ canvas {
stroke-dashoffset: -595;
}
- 40%, 54% {
+ 40%,
+ 54% {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -660;
@@ -197,7 +200,8 @@ canvas {
stroke-dashoffset: -925;
}
- 90%, to {
+ 90%,
+ to {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -990;
@@ -205,7 +209,9 @@ canvas {
}
@keyframes ringB {
- from, 12% {
+
+ from,
+ 12% {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -110;
@@ -223,7 +229,8 @@ canvas {
stroke-dashoffset: -195;
}
- 48%, 62% {
+ 48%,
+ 62% {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -220;
@@ -241,7 +248,8 @@ canvas {
stroke-dashoffset: -305;
}
- 98%, to {
+ 98%,
+ to {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -330;
@@ -267,7 +275,8 @@ canvas {
stroke-dashoffset: -175;
}
- 36%, 58% {
+ 36%,
+ 58% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -220;
@@ -285,7 +294,8 @@ canvas {
stroke-dashoffset: -395;
}
- 94%, to {
+ 94%,
+ to {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -440;
@@ -293,7 +303,9 @@ canvas {
}
@keyframes ringD {
- from, 8% {
+
+ from,
+ 8% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: 0;
@@ -311,7 +323,8 @@ canvas {
stroke-dashoffset: -175;
}
- 44%, 50% {
+ 44%,
+ 50% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -220;
@@ -329,14 +342,16 @@ canvas {
stroke-dashoffset: -395;
}
- 86%, to {
+ 86%,
+ to {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -440;
}
}
+
.bottom-border>div:hover {
- background-color: var(--primaryLight2) ;
+ background-color: var(--primaryLight2);
opacity: 0.9;
transition: all 0.3s ease-in-out;
cursor: pointer;
@@ -344,3 +359,11 @@ canvas {
/* Group Border - END */
+
+
+/* JoyRide - START */
+.__floater__body > div > button:last-child {
+ display: none !important;
+}
+
+/* JoyRide - END */
\ No newline at end of file
diff --git a/src/utlity/JoyRideTour.tsx b/src/utlity/JoyRideTour.tsx
new file mode 100644
index 0000000..b564cc6
--- /dev/null
+++ b/src/utlity/JoyRideTour.tsx
@@ -0,0 +1,244 @@
+import { useLocation } from "react-router-dom";
+import { useEffect, useState } from "react";
+import Joyride, { CallBackProps, STATUS, Step } from "react-joyride";
+
+const JoyrideController = () => {
+ const location = useLocation();
+ const [runTour, setRunTour] = useState(false);
+ const [steps, setSteps] = useState
([]);
+ const [stepIndex, setStepIndex] = useState(0);
+
+ useEffect(() => {
+ let timeout: NodeJS.Timeout;
+
+ const tryStartTour = () => {
+ let currentSteps: Step[] = [];
+
+ if (location.pathname === "/") {
+ currentSteps = [
+ {
+ target: "body", // This makes the welcome step show in center of screen
+ content: "π Welcome to the SME! Let's take a quick tour.",
+ placement: "center",
+ disableBeacon: true,
+ },
+ {
+ target: "#user-details-avatar",
+ content: "User Details",
+ placement: "left",
+ disableBeacon: true,
+
+ },
+ {
+ target: "#send-for-sign-self-sign-btn",
+ content: "Send document for signature, or for Self Sign",
+ placement: "left",
+ disableBeacon: true,
+
+ },
+ {
+ target: "#nav-link-dash",
+ content: (
+
+
Easy Navigation to see transaction and templates.
+
+ Templates: you can save all recipient documents and tags and
+ use them multiple times on one click.
+
+
+
Let's Start Some Action
+
+ Click On Start Now To upload your first document for signature
+
+
+
π Welcome To process step one
+
+ Here we have to add core two ingredients Document, Recipient to start cooking
+
+
+
π This is Final Step
+
+
Here we can add tags in documents and assign them to recipients
+
+
When setisfied with all the change, Click on Send
+
+
π Hi there! Welcome to SME. Letβs start signing.
+
+
Drag and drop tags onto the document to fill or sign.
+
+
Check your document carefully When you're satisfied Click on Sign button
+