refactor(welcome and tour guide): 🎉 update welcome and tour guide wit…

…h new version
robolaunch · Sep 19, 2023 · ce43707 · ce43707
1 parent 13a3003
commit ce43707
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
       <img src="https://img.shields.io/badge/nodejs-18.17.1-dgreen" alt="node">
     </a>
     <a href="https://github.com/robolaunch/ui/releases">
-      <img src="https://img.shields.io/badge/release-v0.14.9-red" alt="release">
+      <img src="https://img.shields.io/badge/release-v0.15.0-red" alt="release">
     </a>
         <a href="#">
       <img src="https://img.shields.io/badge/language-typescript-blue" alt="language">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.14.9",
+  "version": "0.15.0",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",
@@ -46,7 +46,6 @@
     "react-full-screen": "^1.1.1",
     "react-gravatar": "^2.6.3",
     "react-icons": "^4.7.1",
-    "react-joyride": "^2.5.5",
     "react-joystick-component": "^6.2.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.7.0",
@@ -57,7 +56,6 @@
     "react-terminal": "^1.3.1",
     "react-toggle": "^4.1.3",
     "react-top-loading-bar": "^2.3.1",
-    "react-use": "^17.4.0",
     "react-use-size": "^3.0.1",
     "react-zoom-pan-pinch": "^3.0.6",
     "reactour": "^1.19.1",

diff --git a/public/css/style.css b/public/css/style.css
@@ -1457,20 +1457,6 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.scale-105 {
-  --tw-scale-x: 1.05;
-  --tw-scale-y: 1.05;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.scale-110 {
-  --tw-scale-x: 1.1;
-  --tw-scale-y: 1.1;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform {
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2107,21 +2093,6 @@ video {
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
-.\!bg-layer-primary-500 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(184 67 255 / var(--tw-bg-opacity)) !important;
-}
-
-.\!bg-layer-primary-200 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(237 208 255 / var(--tw-bg-opacity)) !important;
-}
-
-.\!bg-layer-primary-100 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(245 229 255 / var(--tw-bg-opacity)) !important;
-}
-
 .\!p-0 {
   padding: 0px !important;
 }
@@ -2534,6 +2505,11 @@ video {
   color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
 }
 
+.\!text-white {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -2764,19 +2740,8 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.\!text-layer-primary-800 {
-  --tw-text-opacity: 1 !important;
-  color: rgb(122 18 183 / var(--tw-text-opacity)) !important;
-}
-
-.\!text-layer-primary-900 {
-  --tw-text-opacity: 1 !important;
-  color: rgb(100 16 147 / var(--tw-text-opacity)) !important;
-}
-
 .underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+  text-decoration-line: underline;
 }
 
 .accent-primary {
@@ -3047,6 +3012,10 @@ td {
   line-height: 1.25rem !important;
 }
 
+.reactour__close {
+  color: white !important;
+}
+
 .flex {
   display: flex;
 }
@@ -3353,6 +3322,11 @@ td {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-layer-primary-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(237 208 255 / var(--tw-text-opacity));
+}
+
 .hover\:text-layer-primary-400:hover {
   --tw-text-opacity: 1;
   color: rgb(203 119 255 / var(--tw-text-opacity));
@@ -3369,8 +3343,7 @@ td {
 }
 
 .hover\:underline:hover {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+  text-decoration-line: underline;
 }
 
 .focus\:ring-2:focus {

diff --git a/src/components/TourGuide/TourGuide.tsx b/src/components/TourGuide/TourGuide.tsx
@@ -6,9 +6,10 @@ import {
   setIsShowedOrganizationGuide,
   setIsShowedRoboticsCloudGuide,
 } from "../../toolkit/GuideSlice";
-import Button from "../Button/Button";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import { useAppDispatch, useAppSelector } from "../../hooks/redux";
+import { FiArrowLeft, FiArrowRight } from "react-icons/fi";
+import Button from "../Button/Button";
 import Tour from "reactour";
 
 interface ITourGuide {
@@ -80,9 +81,15 @@ export default function TourGuide({
         isOpen={handleIsOpen()}
         showNumber={false}
         maskClassName="opacity-50"
-        className="!p-10 text-sm !bg-layer-primary-100 !text-layer-primary-900"
+        className="!p-10 text-sm !bg-primary !text-white"
         rounded={5}
-        accentColor={"#ac2dfe"}
+        accentColor={"#FFFFFF"}
+        prevButton={
+          <FiArrowLeft className="text-white hover:text-layer-primary-200 scale-150 transition-500" />
+        }
+        nextButton={
+          <FiArrowRight className="text-white hover:text-layer-primary-200 scale-150 transition-500" />
+        }
         onAfterOpen={(target: any) => disableBodyScroll(target)}
         onBeforeClose={(target: any) => enableBodyScroll(target)}
       />

diff --git a/src/components/WelcomeGuide/WelcomeGuide.tsx b/src/components/WelcomeGuide/WelcomeGuide.tsx
@@ -2,8 +2,7 @@ import React, { ReactElement } from "react";
 
 export default function WelcomeGuide(): ReactElement {
   return (
-    <div className="flex flex-col items-center text-center gap-2">
-      <img className="w-40 scale-110" src="/images/rocket.svg" alt="logo" />
+    <div className="flex flex-col items-center text-center gap-6">
       <h3 className="text-xl font-semibold ">Welcome to Robolaunch</h3>
       <p>
         robolaunch is a Cloud-Native Robotics Platform that provides the

diff --git a/tailwind.css b/tailwind.css
@@ -73,6 +73,10 @@ td {
   @apply !text-sm;
 }
 
+.reactour__close {
+  color: white !important;
+}
+
 .flex {
   display: flex;
 }