From 6f79b495a6b79f309520afb602fde3afdbee2ab5 Mon Sep 17 00:00:00 2001
From: anuraghazra <hazru.anurag@gmail.com>
Date: Tue, 14 Jul 2020 13:02:45 +0530
Subject: [PATCH] design: added a rim to circle rank's progress

---
 src/renderStatsCard.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js
index fcffeaf..af2951f 100644
--- a/src/renderStatsCard.js
+++ b/src/renderStatsCard.js
@@ -83,7 +83,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const statItems = Object.keys(STATS)
     .filter((key) => !hide.includes(key))
     .map((key, index) =>
-      // create the text nodes, and pass index so that we can calculate the line spacing 
+      // create the text nodes, and pass index so that we can calculate the line spacing
       createTextNode({ ...STATS[key], index, lineHeight: lheight })
     );
 
@@ -113,6 +113,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     : `<g data-testid="rank-circle" transform="translate(400, ${
         height / 1.85
       })">
+        <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
         <text
           x="0"
@@ -139,6 +140,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         fill: ${iconColor};
         display: ${!!show_icons ? "block" : "none"};
       }
+      .rank-circle-rim {
+        stroke: ${titleColor};
+        fill: none;
+        stroke-width: 6;
+        opacity: 0.2;
+      }
       .rank-circle {
         stroke-dashoffset: 30;
         stroke-dasharray: ${rankProgress};