From 46d2e61879c0ba0ac942c98246e8d1a84862a7d7 Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Wed, 13 Jul 2022 17:00:55 +0200
Subject: [PATCH] custom styles for plugin were placed in the file

---
 grafana-plugin/src/GrafanaPluginRootPage.tsx  | 13 ++++---
 .../src/img/grafanaGlobalStyles.css           | 39 +++++++++++++++++++
 grafana-plugin/src/index.css                  | 32 ---------------
 3 files changed, 46 insertions(+), 38 deletions(-)
 create mode 100644 grafana-plugin/src/img/grafanaGlobalStyles.css

diff --git a/grafana-plugin/src/GrafanaPluginRootPage.tsx b/grafana-plugin/src/GrafanaPluginRootPage.tsx
index b6f0cc65..e258d30e 100644
--- a/grafana-plugin/src/GrafanaPluginRootPage.tsx
+++ b/grafana-plugin/src/GrafanaPluginRootPage.tsx
@@ -97,14 +97,15 @@ export const Root = observer((props: AppRootProps) => {
   }, []);
 
   useEffect(() => {
-    const style = document.createElement('style');
-    document.head.appendChild(style);
-    const index = style.sheet.insertRule('.page-body {max-width: unset !important}');
-    const index2 = style.sheet.insertRule('.page-container {max-width: unset !important}');
+    let link = document.createElement('link');
+    link.type = 'text/css';
+    link.rel = 'stylesheet';
+    link.href = '/public/plugins/grafana-oncall-app/img/grafanaGlobalStyles.css';
+
+    document.head.appendChild(link);
 
     return () => {
-      style.sheet.removeRule(index);
-      style.sheet.removeRule(index2);
+      document.head.removeChild(link);
     };
   }, []);
 
diff --git a/grafana-plugin/src/img/grafanaGlobalStyles.css b/grafana-plugin/src/img/grafanaGlobalStyles.css
new file mode 100644
index 00000000..87ff62d1
--- /dev/null
+++ b/grafana-plugin/src/img/grafanaGlobalStyles.css
@@ -0,0 +1,39 @@
+.page-body {
+  max-width: unset !important;
+}
+
+.page-container {
+  max-width: unset !important;
+}
+
+/* This is for Grafana 8, remove later */
+@media (max-width: 1540px) {
+  .page-header__tabs > ul > li > a > div {
+    display: none;
+  }
+}
+
+@media (max-width: 1540px) {
+  .page-header__tabs > div > div > a > div {
+    display: none;
+  }
+}
+
+@media (max-width: 1300px) {
+  .sidemenu {
+    position: fixed !important;
+    height: 100%;
+  }
+
+  .grafana-app {
+    position: relative !important;
+  }
+
+  .main-view {
+    padding-left: 50px;
+  }
+
+  .page-header__tabs li a {
+    white-space: nowrap;
+  }
+}
diff --git a/grafana-plugin/src/index.css b/grafana-plugin/src/index.css
index bdfece87..0a948ad3 100644
--- a/grafana-plugin/src/index.css
+++ b/grafana-plugin/src/index.css
@@ -29,35 +29,3 @@
 .highlighted-row {
   background: var(--highlighted-row-bg);
 }
-
-/* This is for Grafana 8, remove later */
-@media (max-width: 1540px) {
-  .page-header__tabs > ul > li > a > div {
-    display: none;
-  }
-}
-
-@media (max-width: 1540px) {
-  .page-header__tabs > div > div > a > div {
-    display: none;
-  }
-}
-
-@media (max-width: 1300px) {
-  .sidemenu {
-    position: fixed !important;
-    height: 100%;
-  }
-
-  .grafana-app {
-    position: relative !important;
-  }
-
-  .main-view {
-    padding-left: 50px;
-  }
-
-  .page-header__tabs li a {
-    white-space: nowrap;
-  }
-}