feat: actions in empty state

assets/scss/themes.scss

@@ -241,27 +241,35 @@
 :root[data-accent="blue"] {
   @include blueTheme;
 }
+
 :root[data-accent="green"] {
   @include greenTheme;
 }
+
 :root[data-accent="teal"] {
   @include tealTheme;
 }
+
 :root[data-accent="indigo"] {
   @include indigoTheme;
 }
+
 :root[data-accent="purple"] {
   @include purpleTheme;
 }
+
 :root[data-accent="orange"] {
   @include orangeTheme;
 }
+
 :root[data-accent="pink"] {
   @include pinkTheme;
 }
+
 :root[data-accent="red"] {
   @include redTheme;
 }
+
 :root[data-accent="yellow"] {
   @include yellowTheme;
 }

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 {

lang/en-US.json

@@ -119,7 +119,7 @@
   "no_prerequest_script": "No pre-request script",
   "search": "Search",
   "history_empty": "History is empty",
-  "history_deleted": "History Deleted",
+  "history_deleted": "History deleted",
   "clear": "Clear",
   "clear_all": "Clear All",
   "cleared": "Cleared",
@@ -356,5 +356,7 @@
   "script": "Script",
   "results": "Results",
   "add_test_scripts": "Add test script",
-  "protocols_empty": "Protocols are empty"
+  "protocols_empty": "Protocols are empty",
+  "environments_empty": "Environments are empty",
+  "collections_empty": "Collections are empty"
 }

newstore/settings.ts

@@ -67,7 +67,7 @@ export const defaultSettings: SettingsType = {
     httpPassword: true,
     bearerToken: true,
   },
-  THEME_COLOR: "green",
+  THEME_COLOR: "indigo",
   BG_COLOR: "system",
   TELEMETRY_ENABLED: true,
   SHORTCUT_INDICATOR: false,

pages/graphql.vue

@@ -204,6 +204,15 @@
                       :spellcheck="false"
                       :value="header.key"
                       autofocus
+                      styles="
+                        bg-primaryLight
+                        flex
+                        font-semibold font-mono
+                        flex-1
+                        py-1
+                        px-4
+                        focus:outline-none
+                      "
                       @input="
                         $store.commit('setGQLHeaderKey', {
                           index,
@@ -216,8 +225,8 @@
                         bg-primaryLight
                         flex
                         font-semibold font-mono
-                        flex-1
-                        py-2
+                        w-full
+                        py-1
                         px-4
                         focus:outline-none
                       "
@@ -281,9 +290,13 @@
                     "
                   >
                     <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="addRequestHeader"
+                    />
                   </div>
                 </AppSection>
               </SmartTab>

pages/settings.vue

@@ -299,10 +299,10 @@
                     bg-primaryLight
                     border border-divider
                     rounded-r
+                    flex
                     font-semibold font-mono
                     flex-1
                     mr-2
-                    w-full
                     py-2
                     px-4
                     block
@@ -396,7 +396,7 @@ export default defineComponent({
 
       showLogin: false,
 
-      active: getLocalConfig("THEME_COLOR") || "green",
+      active: getLocalConfig("THEME_COLOR") || "indigo",
       confirmRemove: false,
     }
   },