feat: actions in empty state

components/app/Header.vue

@@ -47,6 +47,7 @@
                 '<br>' +
                 `<sub>${currentUser.email || 'Email not found'}</sub>`
               "
+              :indicator="isOnLine ? 'bg-green-500' : 'bg-red-500'"
             />
             <TabPrimary
               v-else
@@ -82,6 +83,7 @@ export default {
       // prompt.
       showInstallPrompt: null,
       showLogin: false,
+      isOnLine: navigator.onLine,
     }
   },
   subscriptions() {
@@ -90,6 +92,13 @@ export default {
     }
   },
   async mounted() {
+    window.addEventListener("online", () => {
+      this.isOnLine = true
+    })
+    window.addEventListener("offline", () => {
+      this.isOnLine = false
+    })
+
     // Initializes the PWA code - checks if the app is installed,
     // etc.
     this.showInstallPrompt = await intializePwa()

components/collections/graphql/index.vue

@@ -65,9 +65,13 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
-      <span class="text-center">
-        {{ $t("create_new_collection") }}
+      <span class="text-center pb-4">
+        {{ $t("collections_empty") }}
       </span>
+      <ButtonSecondary
+        :label="$t('add_new')"
+        @click.native="displayModalAdd(true)"
+      />
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"

components/collections/index.vue

@@ -100,9 +100,25 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
-      <span class="text-center">
-        {{ $t("create_new_collection") }}
+      <span class="text-center pb-4">
+        {{ $t("collections_empty") }}
       </span>
+      <ButtonSecondary
+        v-if="
+          collectionsType.type == 'team-collections' &&
+          (collectionsType.selectedTeam == undefined ||
+            collectionsType.selectedTeam.myRole == 'VIEWER')
+        "
+        v-tippy="{ theme: 'tooltip' }"
+        disabled
+        :title="$t('disable_new_collection')"
+        :label="$t('add_new')"
+      />
+      <ButtonSecondary
+        v-else
+        :label="$t('add_new')"
+        @click.native="displayModalAdd(true)"
+      />
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"

components/environments/index.vue

@@ -63,9 +63,13 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">library_add</i>
-      <span class="text-center">
-        {{ $t("create_new_environment") }}
+      <span class="text-center pb-4">
+        {{ $t("environments_empty") }}
       </span>
+      <ButtonSecondary
+        :label="$t('add_new')"
+        @click.native="displayModalAdd(true)"
+      />
     </div>
     <div class="flex flex-col">
       <EnvironmentsEnvironment

components/http/Headers.vue

@@ -145,9 +145,10 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">post_add</i>
-      <span class="text-center">
+      <span class="text-center pb-4">
         {{ $t("headers_empty") }}
       </span>
+      <ButtonSecondary :label="$t('add_new')" @click.native="addHeader" />
     </div>
   </AppSection>
 </template>

components/http/Parameters.vue

@@ -166,9 +166,10 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">post_add</i>
-      <span class="text-center">
+      <span class="text-center pb-4">
         {{ $t("parameters_empty") }}
       </span>
+      <ButtonSecondary :label="$t('add_new')" @click.native="addParam" />
     </div>
   </AppSection>
 </template>

components/profile/Picture.vue

@@ -16,18 +16,10 @@
     />
     <div class="rounded-full shadow-inner inset-0 absolute"></div>
     <span
-      v-if="indicator"
-      class="
-        bg-accent
-        border-primary
-        rounded-full
-        border-2
-        h-3
-        -top-1
-        -right-1
-        w-3
-        absolute
-      "
+      :class="[
+        'border-primary rounded-full border-2 h-3 -top-1 -right-1 w-3 absolute',
+        indicator,
+      ]"
     ></span>
   </div>
 </template>
@@ -46,8 +38,8 @@ export default {
       default: "Profile picture",
     },
     indicator: {
-      type: Boolean,
-      default: false,
+      type: String,
+      default: "bg-green-500",
     },
   },
 }

components/smart/AutoComplete.vue

@@ -211,6 +211,7 @@ export default {
       @apply w-full;
       @apply block;
       @apply py-2 px-4;
+      @apply text-secondaryLight;
       @apply font-semibold font-mono;
 
       &:last-child {