Update Wins overlay to use different SVG (#8378)

Author: myronchen-git

_includes/wins-page/wins-overlay.html

@@ -9,7 +9,14 @@
           <div class="wins-card-top-right">
             <div class="wins-card-title project-card-inner">
               <span id="overlay-name" class="wins-card-name">Blank</span>
-              <span id="overlay-icons" class="wins-card-icons" alt=""></span>
+              <span id="overlay-icons" class="wins-card-icons" alt="">
+                <a target="_blank" class="wins-card-linkedin-icon"></a>
+                <a target="_blank" class="wins-card-github-icon" style="color:black">
+                  <div role="img" class="github-icon">
+                    {% include svg/icon-github.svg %}
+                  </div>
+                </a>
+              </span>
             </div>
             <div id="overlay-teams" class="project-inner wins-card-team">Team(s): Blank</div>
             <div id="overlay-roles" class="project-inner wins-card-team">Role(s): Blank</div>

_sass/components/_wins-page.scss

@@ -442,8 +442,16 @@
 			}
 		}
 	}
-
-
+    #overlay-icons {
+        .linkedin-icon, .github-icon {
+            height: 32px;
+            width: 32px;
+        }
+        .linkedin-icon > svg, .github-icon > svg {
+            height: 100%;
+            width: 100%;
+        }
+    }
 }
 
 //mobile see more

assets/js/wins.js

@@ -498,14 +498,31 @@ function changeSeeMoreBtn(x) {
 	  	const bigQuoteImg = document.querySelector('.wins-card-big-quote');
 	  	bigQuoteImg.alt = "Quote from " + data[i][name];
 
-  		const overlayIcons = document.querySelector('#overlay-icons');
-  		overlayIcons.textContent = "";
-
-  		if (data[i][linkedin_url].length > 0) {
-  			makeIcon(data[i][linkedin_url], overlayIcons, 'linkedin-icon', '/assets/images/wins-page/icon-linkedin-small.svg', 'LinkedIn profile for ' + data[i][name]);
-  		} if (data[i][github_url].length > 0) {
-  			makeIcon(data[i][github_url], overlayIcons, 'github-icon', '/assets/images/wins-page/icon-github-small.svg', 'GitHub profile for ' + data[i][name]);
-  		}
+			const overlayIcons = document.querySelector('#overlay-icons');
+      overlayIcons.querySelector('.wins-card-linkedin-icon').textContent = '';
+
+      if (data[i][linkedin_url].length > 0) {
+        makeIcon(
+          data[i][linkedin_url],
+          overlayIcons.querySelector('.wins-card-linkedin-icon'),
+          'linkedin-icon',
+          '/assets/images/wins-page/icon-linkedin-small.svg',
+          'LinkedIn profile for ' + data[i][name]
+        );
+      }
+
+			const winsCardGithubIcon = overlayIcons.querySelector('.wins-card-github-icon');
+
+      if (data[i][github_url].length > 0) {
+        winsCardGithubIcon.href = data[i][github_url];
+        winsCardGithubIcon.removeAttribute('hidden');
+        winsCardGithubIcon.querySelector('div.github-icon').setAttribute(
+          'aria-label',
+          'GitHub profile for ' + data[i][name]
+        );
+      } else {
+        winsCardGithubIcon.setAttribute('hidden', 'true');
+      }
 
   		const overlayName = document.querySelector('#overlay-name');
 		overlayName.textContent = data[i][name];