ux: final fixes to new datasource page

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;
-    }
-
-    let name = plugin.name;
+    const newInstance = {
+      name: plugin.name,
+      type: plugin.id,
+      access: 'proxy',
+      isDefault: dataSources.length === 0,
+    };
 
-    if (nameExits(dataSources, name)) {
-      name = findNewName(dataSources, name);
+    if (nameExits(dataSources, newInstance.name)) {
+      newInstance.name = findNewName(dataSources, newInstance.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}` }));
   };
 }

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

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;
   }
 }
 

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;
   }