From 66d8871415502de187b96f9cbaee490844e4864e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 17 Jan 2020 16:02:43 +0100
Subject: [PATCH] Minor style changes on upgrade page (#21566)

---
 public/app/features/admin/LicenseChrome.tsx | 12 ++---------
 public/app/features/admin/UpgradePage.tsx   | 23 ++++++++++++++++-----
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/public/app/features/admin/LicenseChrome.tsx b/public/app/features/admin/LicenseChrome.tsx
index 526dd620e07..3b0c87f8ec7 100644
--- a/public/app/features/admin/LicenseChrome.tsx
+++ b/public/app/features/admin/LicenseChrome.tsx
@@ -6,7 +6,6 @@ import { GrafanaTheme } from '@grafana/data';
 const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const background = theme.colors.panelBg;
   const backgroundUrl = theme.isDark
     ? '/public/img/licensing/header_dark.svg'
     : '/public/img/licensing/header_light.svg';
@@ -14,15 +13,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 
   return {
     container: css`
-      display: grid;
-      grid-template-columns: 100%;
-      column-gap: 20px;
-      row-gap: 40px;
-      padding: 42px 20px 0 77px;
-      background-color: ${background};
-      @media (min-width: 1050px) {
-        grid-template-columns: 50% 50%;
-      }
+      padding: 36px 79px;
+      background: ${theme.colors.panelBg};
     `,
     footer: css`
       text-align: center;
diff --git a/public/app/features/admin/UpgradePage.tsx b/public/app/features/admin/UpgradePage.tsx
index c24692ae11c..88926cd588e 100644
--- a/public/app/features/admin/UpgradePage.tsx
+++ b/public/app/features/admin/UpgradePage.tsx
@@ -33,17 +33,30 @@ interface UpgradeInfoProps {
 }
 
 export const UpgradeInfo: React.FC<UpgradeInfoProps> = ({ editionNotice }) => {
+  const columnStyles = css`
+    display: grid;
+    grid-template-columns: 100%;
+    column-gap: 20px;
+    row-gap: 40px;
+
+    @media (min-width: 1050px) {
+      grid-template-columns: 50% 50%;
+    }
+  `;
+
   return (
     <LicenseChrome header="Grafana Enterprise" subheader="Get your free trial" editionNotice={editionNotice}>
-      <FeatureInfo />
-      <ServiceInfo />
+      <div className={columnStyles}>
+        <FeatureInfo />
+        <ServiceInfo />
+      </div>
     </LicenseChrome>
   );
 };
 
 const GetEnterprise: React.FC = () => {
   return (
-    <div style={{ marginTop: '60px', marginBottom: '60px' }}>
+    <div style={{ marginTop: '40px', marginBottom: '30px' }}>
       <h2 style={titleStyles}>Get Grafana Enterprise</h2>
       <CallToAction />
       <p style={{ paddingTop: '12px' }}>
@@ -72,7 +85,7 @@ const ServiceInfo: React.FC = () => {
       <h4>At your service</h4>
 
       <List>
-        <Item title="Premium Plugins" image="/public/img/licensing/plugin_enterprise.svg" />
+        <Item title="Enterprise Plugins" image="/public/img/licensing/plugin_enterprise.svg" />
         <Item title="Critical SLA: 2 hours" image="/public/img/licensing/sla.svg" />
         <Item title="Unlimited Expert Support" image="/public/img/licensing/customer_support.svg">
           24x7x365 support via
@@ -116,7 +129,7 @@ const FeatureListing: React.FC = () => {
       <Item title="Enhanced LDAP Integration" />
       <Item title="Team Sync">LDAP, GitHub OAuth, Auth Proxy</Item>
       <Item title="White labeling" />
-      <Item title="Premium Plugins">
+      <Item title="Enterprise Plugins">
         <List nested={true}>
           <Item title="Oracle" />
           <Item title="Splunk" />