farabi/bot-512/tour content sizing and responsiveness on small screen (…

…#9472) * fix: updated content size according to design * refactor: reverted classname changes * fix: tour is made responsive on smaller screen
binary-com · Sep 7, 2023 · f75faba · f75faba
1 parent 485c17c
commit f75faba
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 38 deletions.
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.scss b/packages/bot-web-ui/src/components/dashboard/dashboard.scss
@@ -302,6 +302,13 @@
         }
     }
 
+    &__steps {
+        @media (max-height: 730px) {
+            max-height: 40vh;
+            overflow-y: auto;
+        }
+    }
+
     &__label {
         text-align: left;
         margin-bottom: 2.4rem;
@@ -336,6 +343,11 @@
 }
 
 .joyride-content {
+    font-size: 1.4rem;
+    @media (max-height: 790px) {
+        max-height: 46vh;
+        overflow-y: auto;
+    }
     &__left {
         text-align: left;
 

diff --git a/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx b/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx
@@ -11,12 +11,6 @@ type TJoyrideConfig = Record<
     boolean
 >;
 
-type TStep = {
-    label?: string;
-    content: Array<string | React.ReactElement>;
-    type?: 'list' | 'text';
-};
-
 type TTourStatus = {
     key: string;
     toggle: string;
@@ -39,17 +33,6 @@ export const getTourSettings = (type: string) => {
     return getSetting(`${tour_type.key}_status`);
 };
 
-export const Step = ({ label, content }: TStep) => {
-    return (
-        <div className='db-tour'>
-            <Text line_height='xl' as='p' weight='bold'>
-                {label}
-            </Text>
-            {content.map(item => item)}
-        </div>
-    );
-};
-
 export const tour_type: TTourType = {
     key: 'onboard_tour',
 };

diff --git a/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx b/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx
@@ -39,28 +39,30 @@ const TourGuide = observer(({ content, img, label, step_index }: TTourGuide) =>
                         {localize('Exit tour')}
                     </Text>
                 </div>
-                <div className='onboard__label'>
-                    <Text as='h' line_height='l' weight='bold'>
-                        {label}
-                    </Text>
-                </div>
-
-                {img && (
-                    <div className='onboard__container'>
-                        {has_image_loaded ? <img src={img} loading='eager' /> : <Loading />}
+                <div className='onboard__steps'>
+                    <div className='onboard__label'>
+                        <Text as='h' line_height='l' weight='bold'>
+                            {label}
+                        </Text>
                     </div>
-                )}
 
-                <div className='onboard__content'>
-                    {content.map(content_text => {
-                        return (
-                            <div className='onboard__content__block' key={content_text}>
-                                <Text align='left' as='h' size='xs' line_height='l'>
-                                    {content_text}
-                                </Text>
-                            </div>
-                        );
-                    })}
+                    {img && (
+                        <div className='onboard__container'>
+                            {has_image_loaded ? <img src={img} loading='eager' /> : <Loading />}
+                        </div>
+                    )}
+
+                    <div className='onboard__content'>
+                        {content.map(content_text => {
+                            return (
+                                <div className='onboard__content__block' key={content_text}>
+                                    <Text align='left' as='h' size='xs' line_height='l'>
+                                        {content_text}
+                                    </Text>
+                                </div>
+                            );
+                        })}
+                    </div>
                 </div>
             </div>
         </React.Fragment>

diff --git a/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx b/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx
@@ -159,7 +159,7 @@ const TourTriggrerDialog = observer(() => {
                     </Text>
                 </div>
                 <div className='dc-dialog__content__description'>
-                    <Text size={is_mobile ? 'xxs' : 's'} color='prominent'>
+                    <Text size={is_mobile ? 'xxs' : 'xs'} color='prominent'>
                         {is_tour_dialog_visible && getTourContent('content')}
                     </Text>
                 </div>