From 4dad8d946e0523838139e27a93283120529ff13f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 31 Oct 2018 13:40:58 -0700
Subject: [PATCH 1/2] Updated login page logo & wordmark and responsive
 behavior

---
 pkg/api/dtos/index.go               |  1 +
 pkg/api/index.go                    | 12 ++++++
 pkg/setting/setting.go              | 12 +++---
 public/app/partials/login.html      |  2 +-
 public/sass/components/_footer.scss |  6 +--
 public/sass/pages/_login.scss       | 60 +++++++++++++----------------
 public/views/index.template.html    |  2 +-
 7 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go
index 77004899fc3..bd3ac76eec8 100644
--- a/pkg/api/dtos/index.go
+++ b/pkg/api/dtos/index.go
@@ -14,6 +14,7 @@ type IndexViewData struct {
 	NewGrafanaVersionExists bool
 	NewGrafanaVersion       string
 	AppName                 string
+	AppNameBodyClass        string
 }
 
 type PluginCss struct {
diff --git a/pkg/api/index.go b/pkg/api/index.go
index e61620f9586..fe7c9e79a17 100644
--- a/pkg/api/index.go
+++ b/pkg/api/index.go
@@ -83,6 +83,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 		NewGrafanaVersion:       plugins.GrafanaLatestVersion,
 		NewGrafanaVersionExists: plugins.GrafanaHasUpdate,
 		AppName:                 setting.ApplicationName,
+		AppNameBodyClass:        getAppNameBodyClass(setting.ApplicationName),
 	}
 
 	if setting.DisableGravatar {
@@ -377,3 +378,14 @@ func (hs *HTTPServer) NotFoundHandler(c *m.ReqContext) {
 
 	c.HTML(404, "index", data)
 }
+
+func getAppNameBodyClass(name string) string {
+	switch name {
+	case setting.APP_NAME:
+		return "app-grafana"
+	case setting.APP_NAME_ENTERPRISE:
+		return "app-enterprise"
+	default:
+		return ""
+	}
+}
diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go
index 077822a37a4..3750e95e6a4 100644
--- a/pkg/setting/setting.go
+++ b/pkg/setting/setting.go
@@ -31,9 +31,11 @@ const (
 )
 
 const (
-	DEV  string = "development"
-	PROD string = "production"
-	TEST string = "test"
+	DEV                 = "development"
+	PROD                = "production"
+	TEST                = "test"
+	APP_NAME            = "Grafana"
+	APP_NAME_ENTERPRISE = "Grafana Enterprise"
 )
 
 var (
@@ -531,9 +533,9 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error {
 	// Temporary keep global, to make refactor in steps
 	Raw = cfg.Raw
 
-	ApplicationName = "Grafana"
+	ApplicationName = APP_NAME
 	if IsEnterprise {
-		ApplicationName += " Enterprise"
+		ApplicationName = APP_NAME_ENTERPRISE
 	}
 
 	Env = iniFile.Section("").Key("app_mode").MustString("development")
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 260de80e389..a2bc8173766 100644
--- a/public/app/partials/login.html
+++ b/public/app/partials/login.html
@@ -2,7 +2,7 @@
   <div class="login-content">
     <div class="login-branding">
       <img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
-      <i class="icon-gf icon-gf-grafana_wordmark"></i>
+      <div class="logo-wordmark" />
     </div>
     <div class="login-outer-box">
       <div class="login-inner-box" id="login-view">
diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index 3c30f5a5798..ff759732d40 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -40,15 +40,15 @@
 
 .login-page {
   .footer {
+    bottom: $spacer;
+    position: absolute;
     padding: 1rem 0 1rem 0;
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(sn) {
   .login-page {
     .footer {
-      bottom: $spacer;
-      position: absolute;
       padding: 5rem 0 1rem 0;
     }
   }
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 8e5c8f33e37..4baff47b2a8 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -1,7 +1,7 @@
 $login-border: #8daac5;
 
 .login {
-  min-height: 85vh;
+  min-height: 100vh;
   background-position: center;
   background-repeat: no-repeat;
   min-width: 100%;
@@ -97,6 +97,7 @@ select:-webkit-autofill:focus {
 
 .login-content {
   max-width: 700px;
+  width: 100%;
   display: flex;
   align-items: stretch;
   flex-direction: column;
@@ -120,18 +121,29 @@ select:-webkit-autofill:focus {
     width: 70px;
     margin-bottom: 15px;
   }
+}
 
-  .icon-gf-grafana_wordmark {
-    color: darken($white, 11%);
-    position: relative;
-    font-size: 2rem;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+.app-grafana {
+  .logo-wordmark {
+    background: url('../img/grafana_typelogo.svg') top center no-repeat;
+    width: 100%;
+    height: 70px;
+  }
+}
+
+.app-enterprise {
+  .logo-wordmark {
+    background: url('../img/grafana_enterprise_typelogo.svg') top center no-repeat;
+    width: 100%;
+    height: 70px;
   }
 }
 
 .login-outer-box {
   display: flex;
   overflow-y: hidden;
+  align-items: center;
+  justify-content: center;
 }
 
 .login-inner-box {
@@ -143,6 +155,7 @@ select:-webkit-autofill:focus {
   justify-content: center;
   flex-grow: 1;
   max-width: 415px;
+  width: 100%;
   transform: tranlate(0px, 0px);
   transition: 0.25s ease;
 
@@ -324,23 +337,19 @@ select:-webkit-autofill:focus {
 }
 
 @include media-breakpoint-up(sm) {
-  .login-content {
-    flex-direction: row;
-  }
-
   .login-branding {
-    width: 35%;
-    padding: 4rem 2rem;
-    border-right: 1px solid $login-border;
+    padding: 1rem;
 
     .logo-icon {
       width: 80px;
     }
   }
+}
 
-  .login-inner-box {
-    width: 65%;
-    padding: 1rem 2rem;
+@include media-breakpoint-up(md) {
+  .login-content {
+    flex-direction: row;
+    flex: 1 0 100%;
   }
 
   .login-divider {
@@ -348,29 +357,16 @@ select:-webkit-autofill:focus {
       width: 110px;
     }
   }
-}
-
-@include media-breakpoint-up(md) {
-  .login {
-    min-height: 100vh;
-  }
-
-  .login-content {
-    flex: 1 0 100%;
-  }
 
   .login-branding {
     width: 45%;
-    padding: 2rem 4rem;
+    padding: 2rem;
     flex-grow: 1;
+    border-right: 1px solid $login-border;
 
     .logo-icon {
       width: 130px;
     }
-
-    .icon-gf-grafana_wordmark {
-      font-size: 3.2rem;
-    }
   }
 
   .login-inner-box {
@@ -386,9 +382,7 @@ select:-webkit-autofill:focus {
     padding-top: 0;
     padding-left: 10px;
   }
-}
 
-@include media-breakpoint-up(lg) {
   .login-form-input {
     min-width: 300px;
   }
diff --git a/public/views/index.template.html b/public/views/index.template.html
index 0717908c84c..1f6e511784d 100644
--- a/public/views/index.template.html
+++ b/public/views/index.template.html
@@ -23,7 +23,7 @@
   <meta name="msapplication-config" content="public/img/browserconfig.xml">
 </head>
 
-<body class="theme-[[ .Theme ]]">
+<body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]">
 
   <style>
     .preloader {

From ed0f5212795e9a98f0bd2cf2eedf8bf95a5f129c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 31 Oct 2018 13:44:22 -0700
Subject: [PATCH 2/2] fix for responsive rule for footer

---
 public/sass/components/_footer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index ff759732d40..9bc99c30d1d 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -46,7 +46,7 @@
   }
 }
 
-@include media-breakpoint-up(sn) {
+@include media-breakpoint-up(sm) {
   .login-page {
     .footer {
       padding: 5rem 0 1rem 0;