Merge pull request anuraghazra#48 from anuraghazra/fix-circl-rank-rim

anuraghazra · web-flow · commit cbd0e583ff2c · 2020-07-14T13:12:56.000+05:30
design: added a rim to circle rank's progress
diff --git 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};
