From dcba5ba5430e49b131d02ffe8915600ea0fa67c4 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Thu, 18 Aug 2022 16:29:20 +0300
Subject: [PATCH] polished display

---
 grafana-plugin/src/assets/img/github_star.svg       |  3 +++
 .../src/components/NavBar/NavBarSubtitle.module.css | 13 +++++++------
 .../src/components/NavBar/NavBarSubtitle.tsx        |  9 +++++----
 3 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 grafana-plugin/src/assets/img/github_star.svg

diff --git a/grafana-plugin/src/assets/img/github_star.svg b/grafana-plugin/src/assets/img/github_star.svg
new file mode 100644
index 00000000..9a69aed0
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css b/grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css
index 360f2acc..61c1346a 100644
--- a/grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx b/grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx
index 8edf9c3d..283e7807 100644
--- a/grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx
+++ b/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>