Improve styling of mobile preview

Author: frozenhelium

manager-dashboard/app/Base/styles.css

@@ -99,7 +99,10 @@ p {
     --width-navbar-content-max: 76rem;
 
     --width-mobile-preview: 22rem;
-    --height-mobile-preview: 30rem;
+    --height-mobile-preview: 40rem;
+    --height-mobile-preview-builarea-content: 30rem;
+    --height-mobile-preview-footprint-content: 22rem;
+    --height-mobile-preview-change-detection-content: 14rem;
 
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;

manager-dashboard/app/components/GeoJsonPreview/index.tsx

@@ -65,6 +65,7 @@ function GeoJsonPreview(props: Props) {
             if (mapContainerRef.current && !mapRef.current) {
                 mapRef.current = createMap(mapContainerRef.current, {
                     zoomSnap: 0,
+                    scrollWheelZoom: false,
                 });
             }
 

manager-dashboard/app/components/MobilePreview/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IoArrowBack } from 'react-icons/io5';
+import { IoArrowBack, IoInformationCircleOutline } from 'react-icons/io5';
 import { _cs } from '@togglecorp/fujs';
 
 import Heading from '#components/Heading';
@@ -15,6 +15,7 @@ interface Props {
     popupDescription?: React.ReactNode;
     popupIcons?: React.ReactNode;
     contentClassName?: string;
+    popupClassName?: string;
 }
 
 function MobilePreview(props: Props) {
@@ -27,6 +28,7 @@ function MobilePreview(props: Props) {
         popupDescription,
         popupIcons,
         contentClassName,
+        popupClassName,
     } = props;
 
     return (
@@ -37,19 +39,23 @@ function MobilePreview(props: Props) {
                 </div>
                 <Heading
                     className={styles.heading}
-                    level={4}
+                    level={5}
                 >
-                    {heading}
-                </Heading>
-                {actions && (
-                    <div className={styles.actions}>
-                        {actions}
+                    <div className={styles.label}>
+                        You are looking for:
                     </div>
-                )}
+                    <div>
+                        {heading}
+                    </div>
+                </Heading>
+                <div className={styles.actions}>
+                    {actions}
+                    <IoInformationCircleOutline className={styles.infoIcon} />
+                </div>
             </div>
-            <div className={_cs(styles.content, contentClassName)}>
+            <div className={styles.contentContainer}>
                 {(popupTitle || popupDescription || popupIcons) && (
-                    <div className={styles.popup}>
+                    <div className={_cs(styles.popup, popupClassName)}>
                         <div className={styles.details}>
                             <div>
                                 {popupTitle}
@@ -63,7 +69,9 @@ function MobilePreview(props: Props) {
                         </div>
                     </div>
                 )}
-                {children}
+                <div className={_cs(styles.content, contentClassName)}>
+                    {children}
+                </div>
             </div>
         </div>
     );

manager-dashboard/app/components/MobilePreview/styles.css

@@ -6,34 +6,56 @@
     background-color: var(--color-black);
     padding: var(--spacing-small) 0;
     width: var(--width-mobile-preview);
+    height: var(--height-mobile-preview);
     color: var(--color-text-on-dark);
 
     .header {
         display: flex;
+        flex-shrink: 0;
         background-color: var(--color-primary);
         padding: var(--spacing-medium);
         gap: var(--spacing-medium);
 
+        .heading {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            text-align: center;
+
+            .label {
+                font-weight: var(--font-weight-medium);
+            }
+        }
+
         .icons {
             .back-icon {
-                font-size: 1.2rem;
+                font-size: 2rem;
             }
+        }
 
-            .heading {
-                flex-grow: 1;
-            }
+        .actions {
+            flex-shrink: 0;
 
-            .actions {
-                flex-shrink: 0;
+            .info-icon {
+                font-size: 1.6rem;
             }
         }
     }
 
-    .content {
+    .content-container {
+        display: flex;
         position: relative;
+        flex-direction: column;
         flex-grow: 1;
         z-index: 0;
         background-color: var(--color-primary);
+        padding: 1rem;
+        overflow: auto;
+
+        .content {
+            flex-grow: 1;
+            overflow: auto;
+        }
 
         .popup {
             display: flex;

manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx

@@ -22,7 +22,7 @@ export default function InformationPagePreview(props: Props) {
         <MobilePreview
             className={styles.informationPreview}
             // FIXME: get this from 'look for'
-            heading="You are looking for: mobile homes"
+            heading="mobile homes"
             contentClassName={styles.content}
         >
             {value?.title || `Intro ${index + 1}`}

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx

@@ -38,6 +38,7 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
             popupTitle={previewPopUp?.title ?? 'Title'}
             popupDescription={previewPopUp?.description ?? 'Description'}
             contentClassName={styles.content}
+            popupClassName={styles.popup}
         >
             <GeoJsonPreview
                 className={styles.mapPreview}

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css

@@ -2,11 +2,18 @@
     .content {
         display: flex;
         flex-direction: column;
-        padding: var(--spacing-medium);
+        justify-content: space-between;
         gap: var(--spacing-extra-large);
 
         .map-preview {
-            height: 16rem;
+            align-self: center;
+            width: var(--height-mobile-preview-change-detection-content);
+            height: var(--height-mobile-preview-change-detection-content);
         }
     }
+
+    .popup {
+        top: 50%!important;
+        transform: translateY(-50%);
+    }
 }

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx

@@ -37,6 +37,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
             popupIcons={Comp && <Comp />}
             popupTitle={previewPopUp?.title ?? 'Title'}
             popupDescription={previewPopUp?.description ?? 'Description'}
+            contentClassName={styles.content}
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
@@ -49,10 +50,14 @@ export default function FootprintGeoJsonPreview(props: Props) {
                     return (
                         <div
                             key={option.id}
-                            className={styles.option}
-                            style={{ backgroundColor: option.iconColor }}
+                            className={styles.optionContainer}
                         >
-                            <Icon />
+                            <div
+                                className={styles.option}
+                                style={{ backgroundColor: option.iconColor }}
+                            >
+                                <Icon />
+                            </div>
                         </div>
                     );
                 })}

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css

@@ -1,22 +1,36 @@
 .footprint-geo-json-preview {
-    .map-preview {
-        position: relative;
-        z-index: 0;
-        height: var(--height-mobile-preview);
-    }
-
-    .options {
+    .content {
         display: flex;
-        justify-content: center;
-        padding: var(--spacing-large);
+        flex-direction: column;
         gap: var(--spacing-large);
 
-        .option {
-            display: flex;
-            align-items: center;
-            border-radius: 50%;
-            padding: var(--spacing-small);
-            font-size: var(--font-size-extra-large);
+        .map-preview {
+            position: relative;
+            z-index: 0;
+            height: var(--height-mobile-preview-footprint-content);
+        }
+
+        .options {
+            display: grid;
+            flex-grow: 1;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: var(--spacing-large);
+
+            .option-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .option {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    font-size: var(--font-size-extra-large);
+                }
+            }
         }
     }
 }

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx

@@ -77,6 +77,7 @@ interface Props {
     url: string | undefined;
     urlB: string | undefined;
     customOptionsPreview?: CustomOptionPreviewType[];
+    scenarioId: number;
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -85,11 +86,12 @@ export default function ScenarioPageInput(props: Props) {
         onChange,
         index,
         error: riskyError,
-        geoJson,
+        geoJson: geoJsonFromProps,
         url,
         projectType,
         urlB,
         customOptionsPreview,
+        scenarioId,
     } = props;
 
     const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instruction');
@@ -105,6 +107,12 @@ export default function ScenarioPageInput(props: Props) {
     const instructionsError = getErrorObject(error?.instruction);
     const hintError = getErrorObject(error?.hint);
     const successError = getErrorObject(error?.success);
+    const geoJson = {
+        ...geoJsonFromProps,
+        features: geoJsonFromProps?.features.filter(
+            (feature) => feature.properties.screen === scenarioId,
+        ),
+    };
 
     const handleScenarioType = React.useCallback((scenarioSegment: ScenarioSegmentType['value']) => {
         setActiveInput(scenarioSegment);