From ce4370703dae4f59109e62b4d553370e956d2cc5 Mon Sep 17 00:00:00 2001 From: gokhangunduz Date: Tue, 19 Sep 2023 18:03:11 +0300 Subject: [PATCH] refactor(welcome and tour guide): :tada: update welcome and tour guide with new version --- README.md | 2 +- package.json | 4 +- public/css/style.css | 59 ++++++-------------- src/components/TourGuide/TourGuide.tsx | 13 ++++- src/components/WelcomeGuide/WelcomeGuide.tsx | 3 +- tailwind.css | 4 ++ 6 files changed, 33 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 69b896e6..0f89bcfc 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ node - release + release language diff --git a/package.json b/package.json index 72cb8579..905770c1 100644 --- 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 index 72f2bdc0..5a0fedcb 100644 --- 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 index b61c3cf1..c1ce3aad 100644 --- 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={ + + } + nextButton={ + + } onAfterOpen={(target: any) => disableBodyScroll(target)} onBeforeClose={(target: any) => enableBodyScroll(target)} /> diff --git a/src/components/WelcomeGuide/WelcomeGuide.tsx b/src/components/WelcomeGuide/WelcomeGuide.tsx index 367cdc81..e0000a73 100644 --- 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 ( -
- logo +

Welcome to Robolaunch

robolaunch is a Cloud-Native Robotics Platform that provides the diff --git a/tailwind.css b/tailwind.css index 51e917c5..5472ad79 100644 --- a/tailwind.css +++ b/tailwind.css @@ -73,6 +73,10 @@ td { @apply !text-sm; } +.reactour__close { + color: white !important; +} + .flex { display: flex; }