Fix #4591: Adds Github Icon to link with challenge repository on UI (#4610)

* Merged challenge.html from upstream/master

* Github Icon

* Github Icon

* Changes

* Changes

* Changes

* Changes

* Changes

* Changes

* Changes

* Changes

* Changes

* Changes

---------

Co-authored-by: Akshat Singh <[email protected]>
Co-authored-by: Gautam Jajoo <[email protected]>

Author: 3 people

frontend/src/css/modules/challenge.scss

@@ -432,3 +432,8 @@ md-select .md-select-value span:first-child:after {
   }
 }
 
+.github-icon-link {
+    margin-right: 10px;
+    display: inline-block;
+    vertical-align: middle;
+}

frontend/src/views/web/challenge/challenge-page.html

@@ -93,6 +93,12 @@ <h4 class="challenge-step-title w-300">{{challenge.page.title}}
                 </div>
             </div>
             <div class="col m2 l2 fs-16 w-300 center">
+                <a ng-if="(challenge.isChallengeHost ) && challenge.page.github_repository"
+                ng-href="{{ 'https://github.com/' + challenge.page.github_repository }}"
+                target="_blank"
+                class="github-icon-link">
+                <i class="fa fa-github fa-2x black-text" aria-hidden="true"></i>
+             </a>   
                 <button class="waves-effect waves-dark btn ev-btn-dark w-300 fs-14" type="submit"
                     ng-click="challenge.starChallenge()" ng-init="challenge.isStarred()"><i class="fa fa-star star"></i>
                     {{challenge.data}}&nbsp;&nbsp;{{challenge.count}}</button>