tweak(views): refine S-89 styles and typography

Co-authored-by: ux-git <ux-git@users.noreply.github.com>

Author: ux-git

public/assets/fonts/Inter-Bold.ttf

@@ -46,7 +46,7 @@ const TemplateS89Doc4in1 = ({ s89Data, lang }: S89Doc4in1Type) => {
           >
             {formatData().map((groupedData, groupedIndex) => {
               return (
-                <Fragment key={groupedIndex}>
+                <Fragment key={groupedData.map((d) => d.id).join('-')}>
                   {groupedData.map((data, index) => (
                     <View
                       key={data.id}
@@ -86,11 +86,12 @@ const TemplateS89Doc4in1 = ({ s89Data, lang }: S89Doc4in1Type) => {
                           aux_class_1={data.aux_class_1}
                           aux_class_2={data.aux_class_2}
                         />
+                      </View>
 
+                      <View style={styles.bottomSection}>
                         <S89StudentNote lang={lang} />
+                        <S89Footer lang={lang} />
                       </View>
-
-                      <S89Footer lang={lang} />
                     </View>
                   ))}
                 </Fragment>

public/assets/fonts/Inter-ExtraBold.ttf

@@ -59,11 +59,12 @@ const TemplateS89 = ({ data, lang }: S89Type) => {
               aux_class_1={data.aux_class_1}
               aux_class_2={data.aux_class_2}
             />
+          </View>
 
+          <View style={styles.bottomSection}>
             <S89StudentNote lang={lang} />
+            <S89Footer lang={lang} />
           </View>
-
-          <S89Footer lang={lang} />
         </View>
       </Page>
     </Document>

public/assets/fonts/Inter-Italic.ttf

@@ -1,14 +1,38 @@
-import { Text, View } from '@react-pdf/renderer';
+import { Text as PdfText, View } from '@react-pdf/renderer';
 import { useAppTranslation } from '@hooks/index';
 import { S89StudentNoteProps } from './index.types';
 import styles from './index.styles';
 
+const RICH_TEXT_REGEX = /((?:<b>.*?<\/b>)|(?:<i>.*?<\/i>))/g;
+
 const S89StudentNote = ({ lang }: S89StudentNoteProps) => {
   const { t } = useAppTranslation();
+  const text = t('tr_s89DescFooter', { lng: lang });
+
+  const parts = text.split(RICH_TEXT_REGEX).filter(Boolean);
 
   return (
     <View style={styles.studentNote}>
-      <Text>{t('tr_s89DescFooter', { lng: lang })}</Text>
+      <PdfText>
+        {parts.map((part, index) => {
+          let content = part;
+          let style = {};
+
+          if (part.startsWith('<b>')) {
+            content = part.replaceAll(/<\/?b>/g, '');
+            style = { fontWeight: 700 };
+          } else if (part.startsWith('<i>')) {
+            content = part.replaceAll(/<\/?i>/g, '');
+            style = { fontStyle: 'italic' };
+          }
+
+          return (
+            <PdfText key={`${index}-${part}`} style={style}>
+              {content}
+            </PdfText>
+          );
+        })}
+      </PdfText>
     </View>
   );
 };

src/views/meetings/midweek/S89/4in1/index.tsx

@@ -13,11 +13,12 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   header: {
-    fontWeight: 'bold',
+    fontWeight: 800,
     marginBottom: '8px',
-    lineHeight: 1.2,
+    lineHeight: 1.1,
     textAlign: 'center',
-    fontSize: '12px',
+    fontSize: '11.5px',
+    letterSpacing: -0.28,
   },
   details: {
     display: 'flex',
@@ -27,26 +28,27 @@ const styles = StyleSheet.create({
   detailsRow: {
     display: 'flex',
     flexDirection: 'row',
-    gap: '5px',
+    gap: '4px',
     alignItems: 'flex-end',
   },
   field: {
-    fontWeight: 'bold',
-    fontSize: '12px',
+    fontWeight: 800,
+    fontSize: '11px',
+    paddingBottom: '2px',
   },
   fieldValue: {
     flex: '1 0 0',
   },
   fieldValueText: {
-    marginBottom: '3px',
     paddingBottom: '1px',
-    borderBottom: '1px dotted black',
-    fontSize: '9px',
+    paddingLeft: '5px',
+    borderBottom: '1px dashed black',
+    fontSize: '11px',
   },
   toBeGiven: {
-    marginTop: '12px',
+    marginTop: '16px',
     fontSize: '12px',
-    fontWeight: 'bold',
+    fontWeight: 800,
   },
   classes: {
     marginTop: '2px',
@@ -66,15 +68,24 @@ const styles = StyleSheet.create({
     fontWeight: 'normal',
   },
   studentNote: {
-    fontSize: '9px',
-    marginTop: '12px',
+    fontSize: '8.5px',
+    marginTop: '16px',
     lineHeight: 1.1,
+    letterSpacing: -0.4,
+    textAlign: 'justify',
+  },
+  bottomSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+    marginTop: 'auto',
   },
   footer: {
-    fontSize: '8px',
+    fontSize: '7px',
     display: 'flex',
     flexDirection: 'row',
     gap: '10px',
+    fontWeight: 300,
   },
 });
 

src/views/meetings/midweek/S89/default/index.tsx

@@ -1,6 +1,9 @@
 import { Font } from '@react-pdf/renderer';
 
-import FontBold from '/assets/fonts/Inter-SemiBold.ttf';
+import FontItalic from '/assets/fonts/Inter-Italic.ttf';
+import FontExtraBold from '/assets/fonts/Inter-ExtraBold.ttf';
+import FontBold from '/assets/fonts/Inter-Bold.ttf';
+import FontSemiBold from '/assets/fonts/Inter-SemiBold.ttf';
 import FontLight from '/assets/fonts/Inter-Light.ttf';
 import FontMedium from '/assets/fonts/Inter-Medium.ttf';
 import FontRegular from '/assets/fonts/Inter-Regular.ttf';
@@ -16,33 +19,43 @@ import NotoSansJPFontRegular from '/assets/fonts/NotoSansJP-Regular.ttf';
 
 Font.register({
   family: 'Inter',
-  format: 'truetype',
+
   fonts: [
     { src: FontLight, fontWeight: 300 },
     { src: FontRegular, fontWeight: 400 },
+    { src: FontItalic, fontWeight: 400, fontStyle: 'italic' },
     { src: FontMedium, fontWeight: 500 },
+    { src: FontSemiBold, fontWeight: 600 },
     { src: FontBold, fontWeight: 700 },
+    { src: FontExtraBold, fontWeight: 800 },
   ],
 });
 
 Font.register({
   family: 'NotoSans',
-  format: 'truetype',
-  fonts: [{ src: NotoSansFontRegular }, { src: NotoSansFontBold }],
+
+  fonts: [
+    { src: NotoSansFontRegular, fontWeight: 400 },
+    { src: NotoSansFontBold, fontWeight: 700 },
+  ],
 });
 
 Font.register({
   family: 'NotoSansSC',
-  format: 'truetype',
-  fonts: [{ src: NotoSansSCFontRegular }, { src: NotoSansSCFontBold }],
+
+  fonts: [
+    { src: NotoSansSCFontRegular, fontWeight: 400 },
+    { src: NotoSansSCFontBold, fontWeight: 700 },
+  ],
 });
 
 Font.register({
   family: 'NotoSansJP',
-  format: 'truetype',
-  fonts: [{ src: NotoSansJPFontRegular }, { src: NotoSansJPFontBold }],
-});
 
-Font.registerHyphenationCallback((word) => [word]);
+  fonts: [
+    { src: NotoSansJPFontRegular, fontWeight: 400 },
+    { src: NotoSansJPFontBold, fontWeight: 700 },
+  ],
+});
 
 export default () => {};