Fix subscription actions

assets/stylesheets/common/create/listing/imports_options.scss

@@ -18,7 +18,6 @@ $w: $sLayout-width;
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    height: 106px;
   }
 
   &__input {

lib/assets/javascripts/builder/components/modals/add-layer/content/imports/imports-selector/imports-selector-view.js

@@ -82,7 +82,9 @@ module.exports = CoreView.extend({
     this.clearSubViews();
     this.$el.empty();
 
-    this.$el.append(CategoryTitleTemplate({ title: '' }));
+    this.$el.append(CategoryTitleTemplate({
+      title: ''
+    }));
     this._generateImportButtons(IMPORTER_TYPES.dataobservatory);
 
     this.$el.append(CategoryTitleTemplate({

lib/assets/javascripts/new-dashboard/components/Catalog/DatasetActionsBar.vue

@@ -45,7 +45,7 @@ export default {
   border-radius: 4px;
 
   &.grid-cell {
-    padding: 0 16px 0 8px;
+    padding: 0 16px;
   }
 
   .white-separator {

lib/assets/javascripts/new-dashboard/components/Subscriptions/SubscriptionActions.vue

@@ -17,7 +17,7 @@
       </SubscriptionButtonTooltip>
       <SubscriptionButtonTooltip v-else-if="dataset.sync_status === 'unsynced'">
         <button type="button" class="u-mr--8 u-flex u-flex__align--center u-flex__justify--center">
-          <img src="../../assets/icons/catalog/alert-triangle.svg">
+          <img src="../../assets/icons/catalog/alert-triangle.svg" :class="smallClass">
           <div class="tooltip text bgWhite is-small is-txtSoftGrey">
             <h1>Unable to connect</h1>
             <p>{{dataset.unsynced_errors ? `An error ocurred during the synchronization. Error code: ${dataset.unsynced_errors}.` : ''}}</p>
@@ -27,25 +27,25 @@
       <SubscriptionButtonTooltip v-else-if="dataset.sync_status === 'unsyncable'">
         <button type="button" class="u-mr--8 u-flex u-flex__align--center u-flex__justify--center">
           <img src="../../assets/icons/catalog/information-circle.svg">
-          <div class="tooltip text bgWhite is-small is-txtSoftGrey">
+          <div class="tooltip text bgWhite is-small is-txtSoftGrey" :class="smallClass">
             <h1>Insufficient storage</h1>
             <p>{{dataset.unsyncable_reason}}</p>
           </div>
         </button>
       </SubscriptionButtonTooltip>
-      <a class="is-caption text" :href="`${user.base_url}/dashboard/datasets/?id=${dataset.sync_table}&create=true`">Create map</a>  <span class="u-ml--8 u-mr--8">|</span>
-      <a class="is-caption text" :href="`${user.base_url}/dataset/${dataset.sync_table}`">View dataset</a>
+      <a class="text is-caption" :class="smallClass" :href="`${user.base_url}/dashboard/datasets/?id=${dataset.sync_table}&create=true`">Create map</a>  <span class="u-ml--8 u-mr--8">|</span>
+      <a class="text is-caption" :class="smallClass" :href="`${user.base_url}/dataset/${dataset.sync_table}`">View dataset</a>
     </div>
     <div v-if="dataset.sync_status === 'syncing'" class="u-flex u-flex__align--center">
       <span class="loading u-mr--12 u-flex u-flex__align--center">
-        <img svg-inline src="../../assets/icons/catalog/loading.svg" class="loading__svg"/>
+        <img svg-inline src="../../assets/icons/catalog/loading.svg" class="loading__svg" :class="smallClass"/>
       </span>
-      <span class="text is-txtSoftGrey is-caption">
+      <span class="text is-txtSoftGrey is-caption" :class="smallClass">
         Connecting dataset…
       </span>
     </div>
     <div v-if="mode !== 'column'" class="white-separator u-ml--12 u-mr--12"></div>
-    <a class="text is-caption" :class="{'u-mt--12': mode === 'column'}" href="#" @click="downloadNotebook">
+    <a class="text is-caption" :class="{ 'u-mt--12': mode === 'column', ...smallClass }" href="#" @click="downloadNotebook">
       Explore with CARTOFrames
     </a>
   </div>
@@ -77,12 +77,17 @@ export default {
   computed: {
     ...mapState({
       user: state => state.user
-    })
+    }),
+    smallClass () {
+      return {
+        'small': this.mode !== 'column'
+      };
+    }
   },
   methods: {
     downloadNotebook (e) {
       e.preventDefault();
-      this.$store.dispatch('catalog/downloadNotebook', this.dataset.slug, this.dataset.type);
+      this.$store.dispatch('catalog/downloadNotebook', { id: this.dataset.slug, type: this.dataset.type });
     },
     async connect () {
       await this.$store.dispatch('catalog/fetchSubscriptionSync', this.dataset.id);
@@ -146,4 +151,14 @@ export default {
     }
   }
 }
+
+.is-caption.small {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+img.small {
+  height: 20px;
+}
+
 </style>

lib/assets/javascripts/new-dashboard/store/actions/catalog.js

@@ -218,7 +218,7 @@ export async function fetchSubscriptionUnSync (context, id) {
   }
 }
 
-export async function downloadNotebook (context, id, type) {
+export async function downloadNotebook (context, { id, type }) {
   const params = [
     `id=${id}`,
     `type=${type}`,