Merge pull request #6 from docknetwork/fix/styling

Fix up template styling
docknetwork · Mar 29, 2022 · 3e2cd3e · 3e2cd3e
2 parents aae2e2d + a817910
commit 3e2cd3e
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 65 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -23,6 +23,7 @@
     "no-return-await": "off",
     "no-nested-ternary": "off",
     "import/no-extraneous-dependencies": "off",
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "sonarjs/cognitive-complexity": "off"
   }
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@docknetwork/prettyvc",
   "description": "Render pretty verifiable credentials",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "main": "lib/index.js",
   "license": "MIT",
   "repository": {

diff --git a/src/index.js b/src/index.js
@@ -156,11 +156,13 @@ function getSubjectDocuments({ credentialSubject }) {
   const subjects = Array.isArray(credentialSubject) ? credentialSubject : [credentialSubject];
   return subjects.map((s) => {
     const docs = [];
-    Object.keys(s).forEach((k) => {
-      if (typeof s[k] === 'object') {
-        docs.push(s[k]);
-      }
-    });
+    if (s && typeof s === 'object') {
+      Object.keys(s).forEach((k) => {
+        if (typeof s[k] === 'object') {
+          docs.push(s[k]);
+        }
+      });
+    }
     return docs;
   });
 }

diff --git a/src/templates/credential.js b/src/templates/credential.js
@@ -5,8 +5,8 @@ export default function TemplateCredential({
 }) {
   const attributesTableRows = attributes.map((attribute) => (`
     <tr>
-      <td>${attribute.name}</td>
-      <td>${attribute.value}</td>
+      <td><strong>${sanitize(attribute.name)}</strong></td>
+      <td>${sanitize(attribute.value)}</td>
     </tr>
   `)).join('\n');
   return `
@@ -25,11 +25,8 @@ export default function TemplateCredential({
         </h3>
       ` : ''}
 
-      ${qrImage ? `
-        <img src="${sanitize(qrImage)}" class="prettyVC-diploma-qrimage" />
-      ` : ''}
-
       ${attributes.length ? `
+        <br />
         <table>
           <tr>
             <th>Attribute</th>
@@ -41,18 +38,23 @@ export default function TemplateCredential({
       ` : ''}
 
       <div class="prettyVC-diploma-footer">
-        <div class="prettyVC-diploma-footersubject">
-          <strong>${sanitize(title)}</strong><br />
-          Issued on: ${sanitize(date)}
-          ${expiryDate ? `
-            <br />
-            Expire at: ${sanitize(expiryDate)}
+        <div class="prettyVC-diploma-footersubject-wrap">
+          ${image ? `
+            <div class="prettyVC-diploma-logo">
+              <img src="${sanitize(image)}" />
+            </div>
           ` : ''}
-        </div>
-        ${image ? `
-          <div class="prettyVC-diploma-logo">
-            <img src="${sanitize(image)}" />
+          <div class="prettyVC-diploma-footersubject">
+            <strong>${sanitize(title)}</strong>
+            <span>Issued on: ${sanitize(date)}</span>
+            ${expiryDate ? `
+              <span>Expire at: ${sanitize(expiryDate)}</span>
+            ` : ''}
           </div>
+        </div>
+
+        ${qrImage ? `
+          <img src="${sanitize(qrImage)}" class="prettyVC-diploma-qrimage" />
         ` : ''}
       </div>
     </div>

diff --git a/src/templates/diploma.js b/src/templates/diploma.js
@@ -29,32 +29,28 @@ export default function TemplateDiploma({
         ${sanitize(issuerName)}
       </h2>
       <p class="prettyVC-diploma-subtext">
-        has awarded a verifiable credential in the degree of a
+        has issued a <strong>${sanitize(degreeName || title)}</strong> to
       </p>
+
+      <br />
       <h3 class="prettyVC-diploma-subtitle">
-        ${sanitize(degreeName)}
+        ${sanitize(personName || 'Unnamed Person')}
       </h3>
-      ${personName ? `
-        <p class="prettyVC-diploma-subtext">
-          to the subject
-        </p>
-        <h3 class="prettyVC-diploma-subtitle">
-          ${sanitize(personName)}
-        </h3>
-      ` : ''}
+      <br />
 
       ${qrImage ? `
-        <img src="${sanitize(qrImage)}" class="prettyVC-diploma-qrimage" />
+        <img src="${sanitize(qrImage)}" class="prettyVC-diploma-qrimage-center" />
       ` : ''}
-      
+
       <div class="prettyVC-diploma-footer">
-        <div class="prettyVC-diploma-footersubject">
-          <strong>${sanitize(title)}</strong><br />
-          Issued on: ${sanitize(date)}
-          ${expiryDate ? `
-            <br />
-            Expire at: ${sanitize(expiryDate)}
-          ` : ''}
+        <div class="prettyVC-diploma-footersubject-wrap">
+          <div class="prettyVC-diploma-footersubject">
+            <strong>${sanitize(title)}</strong>
+            <span>Issued on: ${sanitize(date)}</span>
+            ${expiryDate ? `
+              <span>Expire at: ${sanitize(expiryDate)}</span>
+            ` : ''}
+          </div>
         </div>
         ${image ? `
           <div class="prettyVC-diploma-logo">

diff --git a/src/templates/hackathon.js b/src/templates/hackathon.js
@@ -45,9 +45,9 @@ export default function TemplateHackathon(data) {
           <br />
 
           ${attributes.map((attribute, index) => ((attribute.name === 'Name' || index >= 3) ? '' : `
-            <span>${attribute.name}</span>
+            <span>${sanitize(attribute.name)}</span>
             <br />
-            <strong>${attribute.value}</strong>
+            <strong>${sanitize(attribute.value)}</strong>
             <br />
           `)).join(' ')}
         </h3>

diff --git a/styles/diploma.css b/styles/diploma.css
@@ -26,35 +26,44 @@
 
 .prettyVC-diploma-subtext {
   font-style: normal;
-  font-weight: normal;
-  font-size: 1em;
-  line-height: 1.25em;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 20px;
   color: #27272A;
   text-overflow: ellipsis;
   overflow: hidden;
+  margin-top: 0.5em;
 }
 
 .prettyVC-diploma-footer {
   margin-top: auto;
   display: flex;
   text-align: left;
+  padding-top: 2em;
 }
 
 .prettyVC-diploma-footersubject {
-  margin-right: auto;
   font-style: normal;
   font-weight: normal;
-  font-size: 0.8em;
-  line-height: 1.4em;
+  font-size: 0.9em;
+  line-height: 1.45em;
   color: #71717A;
-  margin-top: auto;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  margin-left: 1em;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.prettyVC-diploma-footersubject-wrap {
+  display: flex;
+  margin-top: auto;
   margin-right: 1em;
 }
 
-.prettyVC-diploma-footersubject > strong {
+.prettyVC-diploma-footersubject-wrap > strong {
   font-style: normal;
   font-weight: bold;
   color: #27272A;
@@ -63,37 +72,40 @@
 .prettyVC-diploma-title {
   font-style: normal;
   font-weight: 600;
-  font-size: 2.5em;
-  line-height: 1.5em;
+  font-size: 1.25em;
+  line-height: 28px;
   color: inherit;
   flex: none;
   flex-grow: 0;
   margin: 0.25em 0;
   text-overflow: ellipsis;
-  word-break: break-all;
 }
 
 .prettyVC-diploma-subtitle {
   font-style: normal;
   font-weight: 600;
-  font-size: 1.5em;
-  line-height: 1.75em;
+  font-size: 2.25em;
+  line-height: 1.25em;
   color: inherit;
   flex: none;
   flex-grow: 0;
   margin: 0.25em 0;
-  word-break: break-all;
 }
 
 .prettyVC-diploma-headerimage {
   margin: 15px auto 20px auto;
   border-radius: 100%;
-  width: 8em;
+  width: 6em;
 }
 
 .prettyVC-diploma-qrimage {
-  margin: 10px auto 20px auto;
+  margin-left: auto;
+  width: 8em;
+}
+
+.prettyVC-diploma-qrimage-center {
   width: 8em;
+  margin: 20px auto 0 auto;
 }
 
 .prettyVC-diploma-logo {
@@ -125,17 +137,33 @@
 .prettyVC-diploma td,
 .prettyVC-diploma th {
   border: 1px solid #ddd;
-  padding: 0.5em;
-  overflow-wrap: break-all;
+  padding: 0.75em;
+  height: 2.5em;
+  letter-spacing: 0.05em;
+  color: #71717A;
+  font-size: 0.875em;
+  line-height: 1.5em;
+  word-wrap: break-word;
+}
+
+.prettyVC-diploma tr {
+  background-color: transparent;
+  height: 3.1875em;
 }
 
-.prettyVC-diploma tr:nth-child(odd) {
-  background-color: rgb(249 249 249);
+.prettyVC-diploma tr strong {
+  font-weight: 600;
+  color: #3F3F46;
 }
 
 .prettyVC-diploma th {
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   text-align: left;
-  background-color: rgb(227 227 227);
+  background-color: #FAFAFA;
+  font-style: normal;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  font-size: 0.75em;
 }