Adjust spacing and icons

Author: steven-steven

src/cards/stats-card.js

@@ -24,19 +24,19 @@ const createTextNode = ({
   const labelOffset = showIcons ? `x="25"` : "";
   const iconSvg = showIcons
     ? `
-    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+    <svg data-testid="icon" class="icon" y="2" viewBox="0 0 16 16" version="1.1" width="16" height="16">
       ${icon}
     </svg>
   `
     : "";
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
       ${iconSvg}
-      <text class="stat bold" ${labelOffset} y="12.5">${label}:</text>
+      <text class="stat bold" ${labelOffset} y="15">${label}:</text>
       <text 
         class="stat" 
-        x="${(showIcons ? 140 : 120) + 85}" 
-        y="12.5" 
+        x="${(showIcons ? 140 : 120) + 70}" 
+        y="15" 
         data-testid="${id}"
       >${kValue}</text>
     </g>
@@ -64,7 +64,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     hide_title = false,
     hide_border = false,
     hide_rank = false,
-    line_height = 25,
+    line_height = 30,
     title_color,
     icon_color,
     text_color,
@@ -92,37 +92,37 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   // Meta data for creating text nodes with createTextNode function
   const STATS = {
     cg: {
-      icon: icons.star,
+      icon: icons.book,
       label: "Total Games Played",
       value: cg,
       id: "cg",
     },
     gamesWon: {
-      icon: icons.commits,
+      icon: icons.book,
       label: "Total Games Won",
       value: gamesWon,
       id: "gamesWon",
     },
     bestGameWpm: {
-      icon: icons.prs,
+      icon: icons.star,
       label: "High score",
       value: `${bestGameWpm} WPM`,
       id: "bestGameWpm",
     },
-    WPM: {
-      icon: icons.issues,
+    wpm: {
+      icon: icons.star,
       label: "Avg speed (all time)",
       value: `${wpm} WPM`,
       id: "wpm",
     },
     recentAvgWpm: {
-      icon: icons.contribs,
+      icon: icons.star,
       label: "Avg speed (last 10 races)",
       value: `${recentAvgWpm} WPM`,
       id: "recentAvgWpm",
     },
     recentScores: {
-      icon: icons.contribs,
+      icon: icons.book,
       label: "Last 10 races",
       value: `[${recentScores.toString()}]`,
       id: "recentScores",
@@ -145,7 +145,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   // but if rank circle is visible clamp the minimum height to `150`
   let height = Math.max(
     45 + (statItems.length + 1) * lheight,
-    hide_rank ? 0 : 150,
+    hide_rank ? 0 : 170,
   );
 
   // Conditionally rendered elements

src/common/icons.js

@@ -57,7 +57,7 @@ describe("Card", () => {
   });
 
   it("title should have prefix icon", () => {
-    const card = new Card({ title: "ok", titlePrefixIcon: icons.contribs });
+    const card = new Card({ title: "ok", titlePrefixIcon: icons.book });
 
     document.body.innerHTML = card.render(``);
     expect(document.getElementsByClassName("icon")[0]).toBeInTheDocument();

tests/card.test.js

@@ -29,7 +29,7 @@ describe("Test renderStatsCard", () => {
 
     expect(
       document.body.getElementsByTagName("svg")[0].getAttribute("height"),
-    ).toBe("220");
+    ).toBe("255");
     expect(getByTestId(document.body, "cg").textContent).toBe("9.1k");
     expect(getByTestId(document.body, "gamesWon").textContent).toBe("1.9k");
     expect(getByTestId(document.body, "bestGameWpm").textContent).toBe("110 WPM");
@@ -47,7 +47,7 @@ describe("Test renderStatsCard", () => {
 
     expect(
       document.body.getElementsByTagName("svg")[0].getAttribute("height"),
-    ).toBe("150"); // height should be 150 because we clamped it.
+    ).toBe("170"); // height should be 150 because we clamped it.
 
     expect(queryByTestId(document.body, "wpm")).toBeDefined();
     expect(queryByTestId(document.body, "bestGameWpm")).toBeDefined();