From be79fe405107bf76a19a1de7d33578ce084f04b5 Mon Sep 17 00:00:00 2001
From: anuraghazra <hazru.anurag@gmail.com>
Date: Sat, 18 Jul 2020 20:20:36 +0530
Subject: [PATCH 1/2] feat: show archive badge if repo is archive

---
 src/fetchRepo.js             |  1 +
 src/renderRepoCard.js        | 16 +++++++++++++++-
 tests/renderRepoCard.test.js | 11 +++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/fetchRepo.js b/src/fetchRepo.js
index 8f7c83d..0c730ea 100644
--- a/src/fetchRepo.js
+++ b/src/fetchRepo.js
@@ -9,6 +9,7 @@ const fetcher = (variables, token) => {
         name
         nameWithOwner
         isPrivate
+        isArchived
         stargazers {
           totalCount
         }
diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js
index 383d357..a153e87 100644
--- a/src/renderRepoCard.js
+++ b/src/renderRepoCard.js
@@ -8,6 +8,7 @@ const renderRepoCard = (repo, options = {}) => {
     description,
     primaryLanguage,
     stargazers,
+    isArchived,
     forkCount,
   } = repo;
   const { title_color, icon_color, text_color, bg_color, show_owner } = options;
@@ -31,19 +32,32 @@ const renderRepoCard = (repo, options = {}) => {
 
   const totalStars = kFormatter(stargazers.totalCount);
   const totalForks = kFormatter(forkCount);
+
+  const archiveBadge = isArchived
+    ? `
+    <g data-testid="archive-badge" class="archive-badge" transform="translate(320, 38)">
+      <rect stroke="#e1e4e8" stroke-width="1.2" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
+      <text fill="#586069">Archived</text>
+    </g>
+    `
+    : "";
+
   return `
-    <svg width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg version="1.1" width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
       <style>
       .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
       .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
       .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
       .icon { fill: ${iconColor} }
+      .archive-badge { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; }
       </style>
       <rect data-testid="card-border" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
       <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         ${icons.contribs}
       </svg>
 
+      ${archiveBadge}
+
       <text x="50" y="38" class="header">${header}</text>
       <text class="description" x="25" y="70">${encodeHTML(desc)}</text>
       
diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js
index 5fa84ef..27ca23b 100644
--- a/tests/renderRepoCard.test.js
+++ b/tests/renderRepoCard.test.js
@@ -147,4 +147,15 @@ describe("Test renderRepoCard", () => {
       "#252525"
     );
   });
+
+  it("should render archive badge if repo is archived", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      isArchived: true,
+    });
+
+    expect(queryByTestId(document.body, "archive-badge")).toHaveTextContent(
+      "Archived"
+    );
+  });
 });

From b6aa4628814a9f58542efb5a83091997d518bb3e Mon Sep 17 00:00:00 2001
From: anuraghazra <hazru.anurag@gmail.com>
Date: Sat, 18 Jul 2020 20:28:01 +0530
Subject: [PATCH 2/2] design: make badge look good on different colors

---
 src/renderRepoCard.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js
index a153e87..56fb7cd 100644
--- a/src/renderRepoCard.js
+++ b/src/renderRepoCard.js
@@ -36,8 +36,8 @@ const renderRepoCard = (repo, options = {}) => {
   const archiveBadge = isArchived
     ? `
     <g data-testid="archive-badge" class="archive-badge" transform="translate(320, 38)">
-      <rect stroke="#e1e4e8" stroke-width="1.2" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
-      <text fill="#586069">Archived</text>
+      <rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
+      <text fill="${textColor}">Archived</text>
     </g>
     `
     : "";
@@ -50,6 +50,7 @@ const renderRepoCard = (repo, options = {}) => {
       .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
       .icon { fill: ${iconColor} }
       .archive-badge { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; }
+      .archive-badge rect { opacity: 0.2 }
       </style>
       <rect data-testid="card-border" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
       <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">