From 2e4a1f317d78822443db38287a80ab6e3a7daa16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 6 Oct 2018 19:22:16 +0200
Subject: [PATCH] ux: final fixes to new datasource page

---
 .../app/features/datasources/state/actions.ts | 23 ++++++++++---------
 public/sass/_variables.dark.scss              |  2 +-
 public/sass/components/_add_data_source.scss  |  3 ++-
 public/sass/components/_cards.scss            |  2 +-
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index f78a8f30e74..33d6b79c5df 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -82,21 +82,22 @@ export function loadDataSources(): ThunkResult<void> {
 
 export function addDataSource(plugin: Plugin): ThunkResult<void> {
   return async (dispatch, getStore) => {
-    let dataSources = getStore().dataSources.dataSources;
+    await dispatch(loadDataSources());
 
-    if (dataSources.length === 0) {
-      dispatch(loadDataSources());
+    const dataSources = getStore().dataSources.dataSources;
 
-      dataSources = getStore().dataSources.dataSources;
+    const newInstance = {
+      name: plugin.name,
+      type: plugin.id,
+      access: 'proxy',
+      isDefault: dataSources.length === 0,
+    };
+
+    if (nameExits(dataSources, newInstance.name)) {
+      newInstance.name = findNewName(dataSources, newInstance.name);
     }
 
-    let name = plugin.name;
-
-    if (nameExits(dataSources, name)) {
-      name = findNewName(dataSources, name);
-    }
-
-    const result = await getBackendSrv().post('/api/datasources', { name: name, type: plugin.id, access: 'proxy' });
+    const result = await getBackendSrv().post('/api/datasources', newInstance);
     dispatch(updateLocation({ path: `/datasources/edit/${result.id}` }));
   };
 }
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 8a012ea0a32..a878db0d9f4 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -120,7 +120,7 @@ $code-tag-border: lighten($code-tag-bg, 2%);
 
 // cards
 $card-background: linear-gradient(135deg, #2f2f32, #262628);
-$card-background-hover: linear-gradient(135deg, $dark-3, $dark-2);
+$card-background-hover: linear-gradient(135deg, #343436, #262628);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
 
 // Lists
diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss
index d46974fe97e..508f7f80d8e 100644
--- a/public/sass/components/_add_data_source.scss
+++ b/public/sass/components/_add_data_source.scss
@@ -28,10 +28,11 @@
   cursor: pointer;
   background: $card-background;
   box-shadow: $card-shadow;
-  color: $headings-color;
+  color: $text-color;
 
   &:hover {
     background: $card-background-hover;
+    color: $text-color-strong;
   }
 }
 
diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss
index 11a8abb7640..f39be84ec04 100644
--- a/public/sass/components/_cards.scss
+++ b/public/sass/components/_cards.scss
@@ -191,6 +191,7 @@
   .card-item-wrapper {
     padding: 0;
     width: 100%;
+    margin-bottom: 3px;
   }
 
   .card-item-wrapper--clickable {
@@ -198,7 +199,6 @@
   }
 
   .card-item {
-    border-bottom: 3px solid $page-bg;
     border-radius: 2px;
   }