Feat/slider info popup (#163)

amosproj · Jan 15, 2025 · 85c7405 · 85c7405
2 parents 7541c4c + 4e19b85
commit 85c7405
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/app/src/components/ContextualQuestionPlayTime.tsx b/app/src/components/ContextualQuestionPlayTime.tsx
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { View } from 'react-native';
 import { Slider } from 'react-native-awesome-slider';
 import { useSharedValue } from 'react-native-reanimated';
+import { InfoAlertIcon } from './InfoAlert';
 
 iconWithClassName(TimerIcon);
 
@@ -31,10 +32,19 @@ export const ContextualQuestionPlayTime: React.FC<ContextualQuestionProps> = ()
         />
       </View>
       <View className='flex flex-1 flex-col items-stretch'>
-        <Text className='text-2xl text-center font-medium mb-6'>
-          How much time can you sneak in today?
-        </Text>
-        <Text className='text-lg text-center' />
+        <View className='mb-6'>
+          <Text className='text-2xl text-center font-medium'>How much time can you sneak in</Text>
+          <View className='flex flex-row items-center justify-center gap-1'>
+            <Text className='text-2xl font-medium text-center'>today?</Text>
+            <InfoAlertIcon
+              title={'What does this mean?'}
+              description={
+                'When set to 30+ minutes, this tailors activities with additional steps or extensions to keep playtime engaging and meaningful for longer sessions.'
+              }
+            />
+          </View>
+        </View>
+
         <View className='items-stretch justify-center mt-12'>
           <Slider
             style={{ width: '80%', alignSelf: 'center' }}

diff --git a/app/src/routes/AuthRoutes.tsx b/app/src/routes/AuthRoutes.tsx
@@ -50,7 +50,7 @@ export const AuthRoutes: React.FC = () => {
   }, []);
 
   if (isLoading) {
-    return <Loading heading="Loading..." description="Please wait while we load the content." />;
+    return <Loading heading='Loading...' description='Please wait while we load the content.' />;
   }
 
   return (