Update Wins overlay to use different SVG

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

@@ -112,7 +112,7 @@
     z-index: 1;
 }
 [data-wins]{
-    font-weight: normal 
+    font-weight: normal
 }
 .wins-text-bubble:before{
     content: "";
@@ -182,7 +182,7 @@
             max-height: 60.5px;
             font-size: 18.5px;
         }
-        
+
     }
 }
 
@@ -413,8 +413,8 @@
         left: 20%;
     }
     .overlay-close-icon {
-        float: right;  
-        padding: 20px 20px 0 0; 
+        float: right;
+        padding: 20px 20px 0 0;
         cursor: pointer;
     }
     .center-screen {
@@ -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
@@ -464,7 +472,6 @@
             z-index: 10;
         }
     }
-    
 }
 
 .wins-card-content > * {
@@ -476,8 +483,6 @@
 	grid-template-columns: repeat(2, 1fr);
 	min-width: 216px;
 	width: 40%;
-
-	
 }
 
 .wins-page-contain > ul.filter-list li ul {

assets/js/wins.js

@@ -469,7 +469,7 @@ function changeSeeMoreBtn(x) {
 
   function updateOverlay(i) {
 
-	window.addEventListener('keydown', (e) => {
+		window.addEventListener('keydown', (e) => {
 		  if (e.key == 'Escape') {
 			  hideOverlay(e.key)
 		  }
@@ -488,8 +488,8 @@ function changeSeeMoreBtn(x) {
 		  }
 	  });
 
-  		let stringData = window.localStorage.getItem("data");
-		  let data = JSON.parse(stringData).reverse();
+		let stringData = window.localStorage.getItem("data");
+		let data = JSON.parse(stringData).reverse();
 
 		const overlayProfileImg = document.querySelector('#overlay-profile-img');
 		overlayProfileImg.src = document.querySelector(`#ghImg-${i}`).src;
@@ -498,17 +498,34 @@ 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];
+			overlayName.textContent = data[i][name];
 
   		const overlayTeams = document.querySelector('#overlay-teams');
   		overlayTeams.textContent = `Team(s): ${data[i][team]}`;
@@ -519,11 +536,11 @@ function changeSeeMoreBtn(x) {
   		const overlayOverview = document.querySelector('#overlay-overview');
   		overlayOverview.textContent = data[i][overview];
 
-		insertIcons('#overlay-info', data[i][win], 'overlay')
+			insertIcons('#overlay-info', data[i][win], 'overlay')
 
   		const overlayProjectCard = document.querySelector('#overlay-project-card');
   		overlayProjectCard.parentNode.classList.add("display-initial");
-  	}
+	}
 
 
 	function hideOverlay(e) {