refactor: better toast messages + minor ui improvements

components/environments/Add.vue

@@ -41,7 +41,9 @@ export default Vue.extend({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_environment_name").toString())
+        this.$toast.info(this.$t("invalid_environment_name").toString(), {
+          icon: "info",
+        })
         return
       }
       createEnvironment(this.name)

components/environments/Edit.vue

@@ -17,7 +17,7 @@
           </label>
         </div>
         <div class="flex flex-1 justify-between items-center">
-          <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
+          <label for="variableList" class="font-semibold p-4">
             {{ $t("env_variable_list") }}
           </label>
           <div class="flex">
@@ -35,16 +35,11 @@
             />
           </div>
         </div>
-        <div class="border-divider border rounded">
+        <div class="divide-y divide-dividerLight border-divider border rounded">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
-            class="
-              divide-x divide-dividerLight
-              border-b border-dividerLight
-              flex
-            "
-            :class="{ 'border-t': index == 0 }"
+            class="divide-x divide-dividerLight flex"
           >
             <input
               v-model="variable.key"
@@ -55,6 +50,7 @@
                 flex-1
                 py-2
                 px-4
+                truncate
                 focus:outline-none
               "
               :placeholder="$t('count.variable', { count: index + 1 })"
@@ -69,6 +65,7 @@
                 flex-1
                 py-2
                 px-4
+                truncate
                 focus:outline-none
               "
               :placeholder="$t('count.value', { count: index + 1 })"
@@ -169,7 +166,9 @@ export default Vue.extend({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_environment_name").toString())
+        this.$toast.info(this.$t("invalid_environment_name").toString(), {
+          icon: "info",
+        })
         return
       }
 

components/environments/ImportExport.vue

@@ -138,11 +138,11 @@ export default {
           })
           window.open(res.html_url)
         })
-        .catch((error) => {
-          this.$toast.error(this.$t("something_went_wrong"), {
+        .catch((e) => {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
             icon: "error",
           })
-          console.log(error)
+          console.error(e)
         })
     },
     async readEnvironmentGist() {
@@ -159,9 +159,9 @@ export default {
           replaceEnvironments(environments)
           this.fileImported()
         })
-        .catch((error) => {
+        .catch((e) => {
           this.failedImport()
-          console.log(error)
+          console.error(e)
         })
     },
     hideModal() {