feat: design updates (#20)

* Add fonts * Convert fonts to base64 * add fonts to initialisation * Add fontStyle as property to TextItem * Implement fontStyle to doc.setFont * code style * Roboto italic for english subtitle, * Roboto 6px for legal text * font size 6px for labels * font size 10px for values * Edit spacings * Shift value for locale nl * update fold instructions * update base64 for fold instructions * update reference to new image * Fix code style * Fix styling of copy by adding breaks * Remove Liberation (replaced by Roboto) and Rijksoverheid (problems) * Update src/content.js Co-authored-by: Peter-Paul van Gemerden <[email protected]> Co-authored-by: Peter-Paul van Gemerden <[email protected]>
minvws · Jul 5, 2021 · 5efebf0 · 5efebf0
1 parent f444415
commit 5efebf0
Show file tree

Hide file tree

Showing 17 changed files with 64 additions and 45 deletions.
diff --git a/assets/fonts/LiberationSans-Bold.ttf b/assets/fonts/LiberationSans-Bold.ttf
diff --git a/assets/fonts/LiberationSans-Regular.ttf b/assets/fonts/LiberationSans-Regular.ttf
diff --git a/assets/fonts/Roboto-Bold.ttf b/assets/fonts/Roboto-Bold.ttf
diff --git a/assets/fonts/Roboto-Italic.ttf b/assets/fonts/Roboto-Italic.ttf
diff --git a/assets/fonts/Roboto-Regular.ttf b/assets/fonts/Roboto-Regular.ttf
diff --git a/assets/img/fold-instructions-v2.png b/assets/img/fold-instructions-v2.png
diff --git a/assets/img/fold-instructions-v3.jpg b/assets/img/fold-instructions-v3.jpg
diff --git a/src/assets/fonts.js b/src/assets/fonts.js
diff --git a/src/assets/img.js b/src/assets/img.js
diff --git a/src/content.js b/src/content.js
@@ -24,6 +24,7 @@ import { t } from "./i18n";
  * @property {string} text
  * @property {string} fontFamily
  * @property {number} fontWeight
+ * @property {string} [fontStyle]
  * @property {Position} position
  * @property {"left"|"right"|"center"|"justify"} [textAlign]
  * @property {number} [fontSize]
@@ -80,7 +81,7 @@ export const getTextItems = (proof, locale) => {
         },
         {
             text: t(locale, proof.territory + ".intro"),
-            fontFamily: "liberation-sans",
+            fontFamily: "roboto",
             fontWeight: 400,
             fontSize: fontSizeStandard,
             position: [marginLeftIntro, 51],
@@ -103,7 +104,7 @@ export const getTextItems = (proof, locale) => {
                     : t(locale, "eu." + proof.eventType + ".instructions", {
                           date: proof.validUntil,
                       }),
-            fontFamily: "liberation-sans",
+            fontFamily: "roboto",
             fontWeight: 400,
             fontSize: fontSizeStandard,
             position: [rightPartLeft, 27],
@@ -134,9 +135,9 @@ export const getTextItems = (proof, locale) => {
     if (proof.territory === "eu") {
         items.push({
             text: t(locale, "eu.warning"),
-            fontFamily: "montserrat",
+            fontFamily: "roboto",
             fontWeight: 400,
-            fontSize: 5,
+            fontSize: 6,
             position: [leftPartLeft, 280],
             width: partWidth,
             lineHeight: 2.4,
@@ -147,9 +148,10 @@ export const getTextItems = (proof, locale) => {
     if (locale === "nl" && proof.territory === "eu") {
         items.push({
             text: t("en", "eu." + proof.eventType + ".qrTitle"),
-            fontFamily: "montserrat",
+            fontFamily: "roboto",
             fontWeight: 400,
-            fontSize: 18,
+            fontSize: 14,
+            fontStyle: "italic",
             color: lightBlack,
             position: [marginLeftIntro, bottomPartTop + lineHeight * 1.5],
             width: partWidthIntro,
@@ -163,15 +165,15 @@ export const getTextItems = (proof, locale) => {
         items.push(
             {
                 text: t(locale, "nl.propertiesLabel"),
-                fontFamily: "liberation-sans",
+                fontFamily: "roboto",
                 fontWeight: 700,
                 fontSize: 10,
                 position: [rightPartLeft, bottomPartTop],
                 width: partWidth,
             },
             {
                 text: t(locale, "questions"),
-                fontFamily: "liberation-sans",
+                fontFamily: "roboto",
                 fontWeight: 700,
                 fontSize: fontSizeStandard,
                 position: [
@@ -182,7 +184,7 @@ export const getTextItems = (proof, locale) => {
             },
             {
                 text: t(locale, "questionsContent"),
-                fontFamily: "liberation-sans",
+                fontFamily: "roboto",
                 fontWeight: 400,
                 fontSize: fontSizeStandard,
                 position: [
@@ -223,7 +225,7 @@ const getUserDetails = (proof, locale) => {
         return [
             {
                 text: string,
-                fontFamily: "liberation-sans",
+                fontFamily: "roboto",
                 fontWeight: 400,
                 fontSize: fontSizeStandard,
                 position: [rightPartLeft, bottomPartTop + 2 * lineHeight],
@@ -233,10 +235,10 @@ const getUserDetails = (proof, locale) => {
     } else {
         /** @type {TextItem[]} */
         const userDetails = [];
-        const fontSizeSmallCaps = 6.5;
+        const fontSizeSmallCaps = 6;
         const fontSizeTinyCaps = 5;
-        const lineHeightSmallCaps = fontSizeSmallCaps * 0.45;
-        const fieldSpacing = lineHeightSmallCaps * 2.3;
+        const lineHeightSmallCaps = fontSizeSmallCaps * 0.5;
+        const fieldSpacing = lineHeightSmallCaps * 3;
         const fields = ["name", "dateOfBirth"];
         const values = [proof.fullName, proof.birthDateString];
         switch (proof.eventType) {
@@ -310,7 +312,7 @@ const getUserDetails = (proof, locale) => {
         for (const field of fields) {
             userDetails.push({
                 text: t(locale, "eu.userData." + field).toUpperCase(),
-                fontFamily: "liberation-sans",
+                fontFamily: "roboto",
                 fontWeight: 700,
                 fontSize: fontSizeSmallCaps,
                 position: [rightPartLeft, currentY],
@@ -320,7 +322,7 @@ const getUserDetails = (proof, locale) => {
             if (locale !== "en") {
                 userDetails.push({
                     text: t("en", "eu.userData." + field).toUpperCase(),
-                    fontFamily: "liberation-sans",
+                    fontFamily: "roboto",
                     fontWeight: 400,
                     fontSize: fontSizeSmallCaps,
                     position: [rightPartLeft, currentY],
@@ -340,7 +342,7 @@ const getUserDetails = (proof, locale) => {
         }
         userDetails.push({
             text: certificateNumberString,
-            fontFamily: "liberation-sans",
+            fontFamily: "roboto",
             fontWeight: 400,
             fontSize: fontSizeTinyCaps,
             position: [rightPartLeft, currentY],
@@ -349,7 +351,7 @@ const getUserDetails = (proof, locale) => {
         currentY += lineHeightSmallCaps;
         userDetails.push({
             text: proof.certificateNumber,
-            fontFamily: "liberation-sans",
+            fontFamily: "roboto",
             fontWeight: 400,
             fontSize: fontSizeTinyCaps,
             position: [rightPartLeft, currentY],
@@ -358,16 +360,21 @@ const getUserDetails = (proof, locale) => {
 
         // values
         currentY = bottomPartTop;
+        if (locale === "nl") {
+            // when locale is dutch, the fields have 2 lines
+            // for aligning purpose we add a mm to the value starting point
+            currentY += 1;
+        }
         for (let value of values) {
             if (value === "Ministry of Health Welfare and Sport") {
                 value = "Ministry of Health\nWelfare and Sport";
             }
             userDetails.push({
                 text: value,
-                fontFamily: "liberation-sans",
+                fontFamily: "roboto",
                 fontWeight: 700,
-                fontSize: 8,
-                lineHeight: 3.5,
+                fontSize: 10,
+                lineHeight: 4,
                 position: [rightPartRight, currentY],
                 width: userDataColWidth,
                 textAlign: "right",
@@ -405,7 +412,7 @@ export const getImageItems = async (proof, qrSizeInCm) => {
             height: qrSize,
         },
         {
-            url: img.foldInstructionsV2,
+            url: img.foldInstructionsV3,
             x: 165,
             y: 6,
             width: 40,

diff --git a/src/i18n/en.js b/src/i18n/en.js
@@ -2,7 +2,6 @@ export default {
     "eu.negativetest.instructions":
         "1. Print this certificate on A4 (black-and-white allowed)\n\n2. Bring a valid proof of identity to the activity you’re visiting \n\n3. Show the certificate and the proof of identity (and if needed a ticket) at the entrance",
     "eu.negativetest.qrTitle": "Test certificate",
-
     "eu.negativetest.propertiesLabel": "Negative test details",
     "eu.vaccination.instructions":
         "1. Print this certificate on A4 (black-and-white allowed)\n\n2. Bring a valid proof of identity to the activity you’re visiting \n\n3. Show the certificate and the proof of identity (and if needed a ticket) at the entrance",

diff --git a/src/i18n/nl.js b/src/i18n/nl.js
@@ -4,7 +4,7 @@ export default {
     "eu.negativetest.qrTitle": "Testbewijs",
     "eu.negativetest.propertiesLabel": "Gegevens negatieve test",
     "eu.vaccination.instructions":
-        "1. Print dit coronabewijs op A4 (mag in zwart-wit)\n\n2. Neem een geldig identiteitsbewijs mee op reis\n\n3.  Laat het vaccinatiebewijs zien aan de buitenlandse grens of als er in andere landen om gevraagd wordt\n\nDit papieren bewijs is geldig tot: %{date} Daarna kan je een nieuw papieren bewijs maken van je vaccinatie op coronacheck.nl",
+        "1. Print dit coronabewijs op A4 (mag in zwart-wit)\n\n2. Neem een geldig identiteitsbewijs mee op reis\n\n3.  Laat het vaccinatiebewijs zien aan de buitenlandse grens of als er in andere landen om gevraagd wordt\n\nDit papieren bewijs is geldig tot:\n%{date}\nDaarna kan je een nieuw papieren bewijs maken van je vaccinatie op coronacheck.nl",
     "eu.vaccination.qrTitle": "Vaccinatiebewijs",
     "eu.vaccination.propertiesLabel": "Vaccinatiegegevens",
     "eu.recovery.instructions":

diff --git a/src/pdf.js b/src/pdf.js
@@ -3,10 +3,11 @@ import { jsPDF } from "jspdf";
 import { t } from "./i18n";
 
 import {
-    LiberationSansRegular,
-    LiberationSansBold,
     MontserratRegular,
     MontserratBold,
+    RobotoRegular,
+    RobotoBold,
+    RobotoItalic,
 } from "./assets/fonts";
 import { getTextItems, getImageItems, getFrames, getLines } from "./content";
 import {
@@ -30,15 +31,17 @@ const initDoc = (locale, metadata) => {
 
     doc.addFileToVFS("Montserrat-Regular.ttf", MontserratRegular);
     doc.addFileToVFS("Montserrat-Bold.ttf", MontserratBold);
-    doc.addFont("Montserrat-Regular.ttf", "montserrat", "normal");
-    doc.addFont("Montserrat-Bold.ttf", "montserrat", "bold");
+    doc.addFont("Montserrat-Regular.ttf", "montserrat", "normal", 400);
+    doc.addFont("Montserrat-Bold.ttf", "montserrat", "normal", 700);
 
-    doc.addFileToVFS("LiberationSansRegular.ttf", LiberationSansRegular);
-    doc.addFileToVFS("LiberationSansBold.ttf", LiberationSansBold);
-    doc.addFont("LiberationSansRegular.ttf", "liberation-sans", "normal");
-    doc.addFont("LiberationSansBold.ttf", "liberation-sans", "bold");
+    doc.addFileToVFS("Roboto-Regular.ttf", RobotoRegular);
+    doc.addFileToVFS("Roboto-Bold.ttf", RobotoBold);
+    doc.addFileToVFS("Roboto-Italic.ttf", RobotoItalic);
+    doc.addFont("Roboto-Regular.ttf", "roboto", "normal", 400);
+    doc.addFont("Roboto-Bold.ttf", "roboto", "normal", 700);
+    doc.addFont("Roboto-Italic.ttf", "roboto", "italic", 400);
 
-    doc.setFont("liberation-sans");
+    doc.setFont("roboto");
 
     doc.setProperties(
         metadata || {

diff --git a/src/text-helpers.js b/src/text-helpers.js
@@ -26,7 +26,14 @@ export const setFontAndWeight = (doc, textItem, chunk) => {
         : textItem.fontWeight
         ? textItem.fontWeight
         : 400;
-    const properties = [family, "normal", weight];
+    const style = chunk
+        ? chunk.fontStyle
+            ? chunk.fontStyle
+            : "normal"
+        : textItem.fontStyle
+        ? textItem.fontStyle
+        : "normal";
+    const properties = [family, style, weight];
     doc.setFont(...properties);
 };
 

diff --git a/types/assets/fonts.d.ts b/types/assets/fonts.d.ts