fix: adjust margins and typography on start page

packages/app/components/childListItem.component.tsx

@@ -147,11 +147,14 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
           </Text>
         )}
 
-        <Text category="c2" style={styles.label}>
+        {!menu[moment().isoWeekday() - 1] ? null : (
-          {translate('schedule.lunch')}
+          <>
-        </Text>
+            <Text category="c2" style={styles.label}>
-        <Text>{menu[moment().isoWeekday() - 1]?.description}</Text>
+              {translate('schedule.lunch')}
-
+            </Text>
+            <Text>{menu[moment().isoWeekday() - 1]?.description}</Text>
+          </>
+        )}
         <View style={styles.itemFooterAbsence}>
           <Button
             accessible
@@ -160,6 +163,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
             appearance="ghost"
             accessoryLeft={AlertIcon}
             status=""
+            style={styles.absenceButton}
             onPress={() => navigation.navigate('Absence', { child })}
           >
             {translate('abscense.title')}
@@ -212,6 +216,9 @@ const themeStyles = StyleService.create({
     ...Layout.mainAxis.flexStart,
     marginTop: Sizing.t4,
   },
+  absenceButton: {
+    marginLeft: -20,
+  },
   item: {
     marginRight: 12,
     paddingHorizontal: 2,

packages/app/components/daySummary.component.tsx

@@ -33,27 +33,47 @@ export const DaySummary = ({ child, date = moment() }: DaySummaryProps) => {
   const gymBag = lessons.some((lesson) => lesson.code === 'IDH')
 
   return (
-    <>
+    <View style={styles.summary}>
-      <Text category="c2" style={styles.label}>
+      <View style={styles.part}>
-        {translate('schedule.start')} - {translate('schedule.end')}
+        <View>
-      </Text>
+          <Text category="c2" style={styles.label}>
-
+            {translate('schedule.start')}
-      <View style={styles.summary}>
+          </Text>
-        <Text category="s1">
+          <Text category="h5">{lessons[0].timeStart.slice(0, 5)} - </Text>
-          {lessons[0].timeStart.slice(0, 5)}-
+        </View>
-          {lessons[lessons.length - 1].timeEnd.slice(0, 5)}
-          {gymBag
-            ? ` (🤼‍♀️ ${translate('schedule.gymBag', {
-                defaultValue: 'Gympapåse',
-              })})`
-            : ''}
-        </Text>
       </View>
-    </>
+      <View style={styles.part}>
+        <View>
+          <Text category="c2" style={styles.label}>
+            {translate('schedule.end')}
+          </Text>
+          <Text category="h5">
+            {lessons[lessons.length - 1].timeEnd.slice(0, 5)}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.part}>
+        <View>
+          <Text category="c2" style={styles.label}>
+            &nbsp;
+          </Text>
+          <Text category="s2">
+            {gymBag
+              ? ` 🤼‍♀️ ${translate('schedule.gymBag', {
+                  defaultValue: 'Gympapåse',
+                })}`
+              : ''}
+          </Text>
+        </View>
+      </View>
+    </View>
   )
 }
 
 const themedStyles = StyleService.create({
+  part: {
+    flexDirection: 'column',
+  },
   summary: {
     flexDirection: 'row',
   },

packages/app/components/week.component.tsx

@@ -59,16 +59,17 @@ const LessonList = ({ lessons, header, lunch }: LessonListProps) => {
             </View>
           )}
           description={() => (
-            <Text
+            <View style={styles.lesson}>
-              style={styles.lessonDescription}
+              <Text
-              maxFontSizeMultiplier={1}
+                style={styles.lessonDescription}
-            >{`${timeStart.slice(0, 5)}-${timeEnd.slice(0, 5)}  ${
+                maxFontSizeMultiplier={1}
-              code === 'Lunch'
+              >{`${timeStart.slice(0, 5)}-${timeEnd.slice(0, 5)} (${
-                ? lunch?.description
+                location
-                : location
+              })`}</Text>
-                ? `(${location})`
+              <Text style={styles.lessonDescription} maxFontSizeMultiplier={1}>
-                : ''
+                {code === 'Lunch' ? lunch?.description : teacher}
-            } ${teacher}`}</Text>
+              </Text>
+            </View>
           )}
         />
       )}
@@ -166,7 +167,7 @@ const themedStyles = StyleService.create({
     padding: 0,
   },
   item: {
-    height: 45,
+    height: 55,
     backgroundColor: 'background-basic-color-2',
     paddingHorizontal: 0,
     borderRadius: 2,
@@ -213,4 +214,7 @@ const themedStyles = StyleService.create({
   lessonDescription: {
     fontSize: 13,
   },
+  lesson: {
+    flexDirection: 'column',
+  }
 })