chore: make error scrollable

animo · Dec 4, 2024 · 06b15ec · 06b15ec
1 parent 7c8c971
commit 06b15ec
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/apps/easypid/src/features/menu/FunkeSettingsScreen.tsx b/apps/easypid/src/features/menu/FunkeSettingsScreen.tsx
@@ -1,4 +1,4 @@
-import { FlexPage, Heading, ScrollView, Stack, Switch, YStack } from '@package/ui'
+import { FlexPage, Heading, HeroIcons, ScrollView, Stack, Switch, YStack } from '@package/ui'
 import React from 'react'
 
 import { TextBackButton } from 'packages/app/src'
@@ -28,15 +28,15 @@ export function FunkeSettingsScreen() {
       >
         <YStack fg={1} px="$4" jc="space-between">
           <YStack gap="$4" py="$2">
-            <LocalAiContainer />
             <Switch
               id="development-mode"
               label="Development Mode"
+              icon={<HeroIcons.CommandLineFilled />}
               value={isDevelopmentModeEnabled ?? false}
               onChange={setIsDevelopmentModeEnabled}
             />
+            <LocalAiContainer />
           </YStack>
-
           <YStack btw="$0.5" borderColor="$grey-200" pt="$4" mx="$-4" px="$4" bg="$background">
             <TextBackButton />
           </YStack>

diff --git a/apps/easypid/src/features/receive/slides/CredentialErrorSlide.tsx b/apps/easypid/src/features/receive/slides/CredentialErrorSlide.tsx
@@ -1,15 +1,18 @@
-import { Button, Heading, HeroIcons, Paragraph, Stack, XStack, YStack } from '@package/ui'
+import { Button, Heading, HeroIcons, Paragraph, ScrollView, Stack, XStack, YStack } from '@package/ui'
+import { useState } from 'react'
 
 interface CredentialErrorSlideProps {
   reason?: string
   onCancel: () => void
 }
 
 export const CredentialErrorSlide = ({ reason, onCancel }: CredentialErrorSlideProps) => {
+  const [scrollViewHeight, setScrollViewHeight] = useState(0)
+
   return (
     <YStack fg={1} jc="space-between">
-      <YStack gap="$6">
-        <YStack gap="$2">
+      <YStack gap="$6" fg={1} onLayout={(event) => setScrollViewHeight(event.nativeEvent.layout.height)}>
+        <ScrollView gap="$2" fg={1} maxHeight={scrollViewHeight}>
           <YStack gap="$4">
             <Heading>Something went wrong</Heading>
             <Stack alignSelf="flex-start">
@@ -22,13 +25,15 @@ export const CredentialErrorSlide = ({ reason, onCancel }: CredentialErrorSlideP
               again later.
             </Paragraph>
           </YStack>
-          {reason && (
-            <Paragraph variant="sub">
-              <Paragraph variant="caption">Reason: </Paragraph>
-              {reason}
-            </Paragraph>
+          {reason && scrollViewHeight !== 0 && (
+            <YStack>
+              <Paragraph variant="sub">
+                <Paragraph variant="caption">Reason: </Paragraph>
+                {reason}
+              </Paragraph>
+            </YStack>
           )}
-        </YStack>
+        </ScrollView>
       </YStack>
       <Stack borderTopWidth="$0.5" borderColor="$grey-200" py="$4" mx="$-4" px="$4">
         <Button.Solid scaleOnPress onPress={onCancel}>

diff --git a/packages/ui/src/content/Icon.tsx b/packages/ui/src/content/Icon.tsx
@@ -64,6 +64,7 @@ import {
   CircleStackIcon as CircleStackFilledIcon,
   ClockIcon as ClockFilledIcon,
   Cog8ToothIcon as Cog8ToothFilledIcon,
+  CommandLineIcon,
   CpuChipIcon as CpuChipFilledIcon,
   CreditCardIcon as CreditCardFilledIcon,
   ExclamationCircleIcon as ExclamationCircleFilledIcon,
@@ -177,6 +178,7 @@ export const HeroIcons = {
   Link: wrapHeroIcon(LinkIcon),
   Cloud: wrapHeroIcon(CloudIcon),
   CpuChipFilled: wrapHeroIcon(CpuChipFilledIcon),
+  CommandLineFilled: wrapHeroIcon(CommandLineIcon),
 } as const
 
 export const CustomIcons = {