From be285cb33e5af1046b240fac6e0fbb993eec9b78 Mon Sep 17 00:00:00 2001
From: Nathan Chu <63111210+nthnchu@users.noreply.github.com>
Date: Wed, 29 Jul 2020 09:19:47 -0400
Subject: [PATCH] Fix gradient themes

---
 src/renderRepoCard.js     | 9 ++++-----
 src/renderStatsCard.js    | 9 ++++-----
 src/renderTopLanguages.js | 9 ++++-----
 src/utils.js              | 2 +-
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js
index a99fc32..2e7583d 100644
--- a/src/renderRepoCard.js
+++ b/src/renderRepoCard.js
@@ -44,7 +44,6 @@ const renderRepoCard = (repo, options = {}) => {
   const multiLineDescription = wrapTextMultiline(desc);
   const descriptionLines = multiLineDescription.length;
   const lineHeight = 10;
-  const isGradient = !(bg_color == undefined || bg_color.length == 6 || bg_color.length == 3)
   const height =
     (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
 
@@ -56,7 +55,7 @@ const renderRepoCard = (repo, options = {}) => {
     bg_color,
     theme,
   });
-  const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
+  const isGradient = typeof bgColor == 'object';
   const totalStars = kFormatter(stargazers.totalCount);
   const totalForks = kFormatter(forkCount);
 
@@ -76,9 +75,9 @@ const renderRepoCard = (repo, options = {}) => {
   `;
   const gradient = isGradient ? `
     <defs>
-      <linearGradient id="gradient" gradientTransform="rotate(${gradientBgColor[0]})">
-        <stop offset="0%"  stop-color="#${gradientBgColor[1]}" />
-        <stop offset="100%" stop-color="#${gradientBgColor[2]}" />
+      <linearGradient id="gradient" gradientTransform="rotate(${bgColor[0]})">
+        <stop offset="0%"  stop-color="#${bgColor[1]}" />
+        <stop offset="100%" stop-color="#${bgColor[2]}" />
       </linearGradient>
     </defs>`
     : undefined
diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js
index ad78b8f..93c39eb 100644
--- a/src/renderStatsCard.js
+++ b/src/renderStatsCard.js
@@ -54,7 +54,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
 
   const lheight = parseInt(line_height);
 
-  const isGradient = !(bg_color == undefined || bg_color.length == 6 || bg_color.length == 3)
 
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, iconColor, bgColor } = getCardColors({
@@ -65,7 +64,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     theme,
   });
 
-const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
+  const isGradient = typeof bgColor == 'object';
   // Meta data for creating text nodes with createTextNode function
   const STATS = {
     stars: {
@@ -154,9 +153,9 @@ const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
 
   const gradient = isGradient ? `
     <defs>
-      <linearGradient id="gradient" gradientTransform="rotate(${gradientBgColor[0]})">
-        <stop offset="0%"  stop-color="#${gradientBgColor[1]}" />
-        <stop offset="100%" stop-color="#${gradientBgColor[2]}" />
+      <linearGradient id="gradient" gradientTransform="rotate(${bgColor[0]})">
+        <stop offset="0%"  stop-color="#${bgColor[1]}" />
+        <stop offset="100%" stop-color="#${bgColor[2]}" />
       </linearGradient>
     </defs>`
     : undefined
diff --git a/src/renderTopLanguages.js b/src/renderTopLanguages.js
index 5b4dfd0..8c1b0a9 100644
--- a/src/renderTopLanguages.js
+++ b/src/renderTopLanguages.js
@@ -93,7 +93,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
   const totalLanguageSize = langs.reduce((acc, curr) => {
     return acc + curr.size;
   }, 0);
-  const isGradient = !(bg_color == undefined || bg_color.length == 6 || bg_color.length == 3)
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, bgColor } = getCardColors({
     title_color,
@@ -101,7 +100,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     bg_color,
     theme,
   });
-  const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
+  const isGradient = typeof bgColor == 'object';
   let width = isNaN(card_width) ? 300 : card_width;
   let height = 45 + (langs.length + 1) * 40;
 
@@ -175,9 +174,9 @@ const renderTopLanguages = (topLangs, options = {}) => {
   }
   const gradient = isGradient ? `
   <defs>
-    <linearGradient id="gradient" gradientTransform="rotate(${gradientBgColor[0]})">
-      <stop offset="0%"  stop-color="#${gradientBgColor[1]}" />
-      <stop offset="100%" stop-color="#${gradientBgColor[2]}" />
+    <linearGradient id="gradient" gradientTransform="rotate(${bgColor[0]})">
+      <stop offset="0%"  stop-color="#${bgColor[1]}" />
+      <stop offset="100%" stop-color="#${bgColor[2]}" />
     </linearGradient>
   </defs>`
   : undefined
diff --git a/src/utils.js b/src/utils.js
index fe101c8..7858e11 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -61,7 +61,7 @@ function clampValue(number, min, max) {
 }
 
 function fallbackColor(color, fallbackColor) {
-  return (isValidHexColor(color) && `#${color}`) || fallbackColor;
+  return (isValidHexColor(color) && `#${color}`) || (color.includes(',') && color.split(',')) || fallbackColor;
 }
 
 function request(data, headers) {