polished display

grafana-plugin/src/assets/img/github_star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#F5B73D">
+  <path d="M8 .2l4.9 15.2L0 6h16L3.1 15.4z"/>
+</svg> 

grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css

@@ -1,20 +1,21 @@
-:root {
-  --orange: #F5B73D;
-}
-
 .navbar-container {
   display: flex;
   align-items: center;
 }
 
 .navbar-star-icon {
-  fill: var(--orange);
+  margin-right: 4px;
 }
 
 .navbar-heading {
   padding: 4px;
-  margin-left: 8px;
+  margin: 0 0 0 8px;
   border: 1px solid var(--gray-9);
   width: initial;
   font-size: 12px;
 }
+
+.navbar-link {
+  display: flex;
+  align-items: center;
+}

grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+
 import cn from 'classnames/bind';
-
 import { Card, Icon } from '@grafana/ui';
-
 import { APP_SUBTITLE } from 'utils/consts';
 
+import gitHubStarSVG from 'assets/img/github_star.svg';
+
 import styles from './NavBarSubtitle.module.css';
 
 const cx = cn.bind(styles);
@@ -14,8 +15,8 @@ function NavBarSubtitle() {
     <div className={cx('navbar-container')}>
       {APP_SUBTITLE}
       <Card heading={undefined} className={cx('navbar-heading')}>
-        <a href="https://github.com/grafana/oncall">
-          <Icon name="star" className={cx('navbar-star-icon')} /> Star us on GitHub
+        <a href="https://github.com/grafana/oncall" className={cx('navbar-link')} target="_blank">
+          <img src={gitHubStarSVG} className={cx('navbar-star-icon')} alt='' /> Star us on GitHub
         </a>
       </Card>
     </div>