Feat add read more button part II (#701)

Add missing changes
corona-school · Nov 4, 2024 · c20af8f · c20af8f
1 parent 71e47eb
commit c20af8f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 17 deletions.
diff --git a/src/pages/pupil/Group.tsx b/src/pages/pupil/Group.tsx
@@ -1,4 +1,4 @@
-import { Text, Heading, useTheme, VStack, useBreakpointValue, Stack } from 'native-base';
+import { Heading, useTheme, VStack, useBreakpointValue, Stack } from 'native-base';
 import { useTranslation } from 'react-i18next';
 import WithNavigation from '../../components/WithNavigation';
 import NotificationAlert from '../../components/notifications/NotificationAlert';
@@ -16,6 +16,8 @@ import AllSubcourses from '../subcourse/AllSubcourses';
 import { Course_Category_Enum } from '../../gql/graphql';
 import SwitchLanguageButton from '../../components/SwitchLanguageButton';
 import { Breadcrumb } from '@/components/Breadcrumb';
+import TruncatedText from '@/components/TruncatedText';
+import { Typography } from '@/components/Typography';
 
 type Props = {};
 
@@ -247,9 +249,11 @@ const PupilGroup: React.FC<Props> = () => {
                     <VStack paddingX={space['1']} marginBottom={space['1']} marginX="auto" width="100%" maxWidth={ContainerWidth}>
                         <Breadcrumb />
                         <VStack space={space['1']}>
-                            <VStack space={space['0.5']} maxWidth={ContentContainerWidth}>
+                            <VStack space={space['0.5']} maxWidth={ContentContainerWidth} alignItems={'flex-start'} marginBottom={space['0.5']}>
                                 <Heading>{t('matching.group.pupil.title')}</Heading>
-                                <Text marginBottom={space['0.5']}>{t('matching.group.pupil.content')}</Text>
+                                <TruncatedText asChild maxLines={2}>
+                                    <Typography>{t('matching.group.pupil.content')}</Typography>
+                                </TruncatedText>
                             </VStack>
 
                             <VStack maxWidth={ContentContainerWidth} marginBottom={space['1']}>

diff --git a/src/pages/pupil/Matching.tsx b/src/pages/pupil/Matching.tsx
@@ -19,6 +19,8 @@ import DisableableButton from '../../components/DisablebleButton';
 import { DEACTIVATE_PUPIL_MATCH_REQUESTS } from '../../config';
 import ConfirmationModal from '@/modals/ConfirmationModal';
 import { Breadcrumb } from '@/components/Breadcrumb';
+import TruncatedText from '@/components/TruncatedText';
+import { Typography } from '@/components/Typography';
 
 type Props = {};
 
@@ -112,11 +114,6 @@ const Matching: React.FC<Props> = () => {
         return data?.me?.pupil?.matches.filter((match) => match.dissolved === true);
     }, [data?.me?.pupil?.matches]);
 
-    const ContainerWidth = useBreakpointValue({
-        base: '100%',
-        lg: sizes['containerWidth'],
-    });
-
     const ContentContainerWidth = useBreakpointValue({
         base: '100%',
         lg: sizes['contentContainerWidth'],
@@ -148,15 +145,25 @@ const Matching: React.FC<Props> = () => {
                     </Stack>
                 }
             >
-                <VStack space={space['0.5']} paddingX={space['1']} width="100%" maxWidth={ContainerWidth}>
+                <VStack
+                    space={space['0.5']}
+                    paddingX={space['1']}
+                    width="100%"
+                    maxWidth={ContentContainerWidth}
+                    alignItems={'flex-start'}
+                    paddingBottom={space['0.5']}
+                >
                     <Breadcrumb />
                     <Heading paddingBottom={space['0.5']}>{t('matching.request.check.title')}</Heading>
-                    <Text maxWidth={ContentContainerWidth} paddingBottom={space['0.5']}>
-                        {t('matching.blocker.firstContent')}{' '}
-                        <Link style={{ color: colors.primary[900], textDecoration: 'underline' }} target="_blank" to="/hilfebereich">
-                            {t('moreInfoButton')}
-                        </Link>
-                    </Text>
+                    <TruncatedText asChild maxLines={2}>
+                        <Typography>
+                            {t('matching.blocker.firstContent')}
+                            <br />
+                            <Link style={{ color: colors.primary[900], textDecoration: 'underline' }} target="_blank" to="/hilfebereich">
+                                {t('moreInfoButton')}
+                            </Link>
+                        </Typography>
+                    </TruncatedText>
                 </VStack>
                 <NavigationTabs
                     tabs={[

diff --git a/src/pages/student/MatchingStudent.tsx b/src/pages/student/MatchingStudent.tsx
@@ -142,7 +142,7 @@ const MatchingStudent: React.FC<Props> = () => {
                     <VStack paddingX={space['1']} maxWidth={ContainerWidth} width="100%" marginX="auto">
                         <Breadcrumb />
                         <Heading paddingBottom={space['0.5']}>{t('matching.request.check.title')}</Heading>
-                        <VStack space={space['0.5']} paddingBottom={space['0.5']} alignItems={'flex-start'}>
+                        <VStack space={space['0.5']} paddingBottom={space['0.5']} alignItems={'flex-start'} maxWidth={ContentContainerWidth}>
                             <TruncatedText asChild maxLines={2}>
                                 <Typography>{t('matching.request.check.content')}</Typography>
                             </TruncatedText>
@@ -199,6 +199,7 @@ const MatchingStudent: React.FC<Props> = () => {
                                                                         state: { edit: true },
                                                                     })
                                                                 }
+                                                                key={i}
                                                             />
                                                         ))) || <AlertMessage content={t('matching.request.check.noRequestsTutor')} />}
                                                 </Flex>

diff --git a/src/pages/student/StudentGroup.tsx b/src/pages/student/StudentGroup.tsx
@@ -121,6 +121,11 @@ const StudentGroup: React.FC = () => {
         lg: sizes['containerWidth'],
     });
 
+    const ContentContainerWidth = useBreakpointValue({
+        base: '100%',
+        lg: sizes['contentContainerWidth'],
+    });
+
     const ButtonContainer = useBreakpointValue({
         base: '100%',
         lg: sizes['desktopbuttonWidth'],
@@ -203,7 +208,7 @@ const StudentGroup: React.FC = () => {
 
                     {!loading && (
                         <VStack space={space['1']}>
-                            <VStack space={space['0.5']} alignItems={'flex-start'}>
+                            <VStack space={space['0.5']} alignItems={'flex-start'} maxWidth={ContentContainerWidth}>
                                 <Heading>{t('matching.group.helper.title')}</Heading>
                                 <TruncatedText asChild maxLines={2}>
                                     <Typography>{t('matching.group.helper.content')}</Typography>