chore: update user guide style (#2536)

packages/component/src/components/tour-modal/index.css.ts

@@ -190,3 +190,7 @@ export const tabContainerStyle = style({
   alignItems: 'center',
   justifyContent: 'center',
 });
+export const buttonDisableStyle = style({
+  cursor: 'not-allowed',
+  color: 'var(--affine-text-disable-color)',
+});

packages/component/src/components/tour-modal/tour-modal.tsx

@@ -7,6 +7,7 @@ import { useState } from 'react';
 import { Modal, ModalCloseButton, ModalWrapper } from '../..';
 import {
   arrowStyle,
+  buttonDisableStyle,
   containerStyle,
   descriptionContainerStyle,
   descriptionStyle,
@@ -79,7 +80,7 @@ export const TourModal: FC<TourModalProps> = ({ open, onClose }) => {
 
           <div className={containerStyle}>
             <div
-              className={arrowStyle}
+              className={clsx(arrowStyle, { [buttonDisableStyle]: step !== 1 })}
               onClick={() => step === 1 && setStep(0)}
               data-testid="onboarding-modal-pre-button"
             >
@@ -118,7 +119,7 @@ export const TourModal: FC<TourModalProps> = ({ open, onClose }) => {
               </div>
             </div>
             <div
-              className={arrowStyle}
+              className={clsx(arrowStyle, { [buttonDisableStyle]: step === 1 })}
               onClick={() => setStep(1)}
               data-testid="onboarding-modal-next-button"
             >