feat: revamp environments ui

assets/scss/themes.scss

@@ -39,11 +39,11 @@
   // Dark Background color
   --primary-dark-color: theme("colors.gray.100");
   // Text color
-  --secondary-color: theme("colors.gray.600");
+  --secondary-color: theme("colors.gray.500");
   // Light Text color
   --secondary-light-color: theme("colors.gray.400");
   // Dark Text color
-  --secondary-dark-color: theme("colors.gray.700");
+  --secondary-dark-color: theme("colors.gray.600");
   // Border color
   --divider-color: theme("colors.gray.200");
   // Light Border color

components/button/Secondary.vue

@@ -15,7 +15,7 @@
     :class="[
       color
         ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
-        : 'text-secondaryLight hover:text-secondary focus:text-secondary',
+        : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
       label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
       rounded ? 'rounded-full' : 'rounded-lg',
       { 'opacity-50 cursor-not-allowed': disabled },

components/environments/Environment.vue

@@ -1,13 +1,36 @@
 <template>
-  <div>
+  <div class="flex items-center group">
-    <div class="flex flex-1">
+    <span
-      <div>
+      class="
-        <ButtonSecondary
+        flex
-          icon="layers"
+        justify-center
-          :label="environment.name"
+        items-center
-          @click.native="$emit('edit-environment')"
+        text-xs
-        />
+        w-10
-      </div>
+        truncate
+        cursor-pointer
+      "
+      @click="$emit('edit-environment')"
+    >
+      <i class="material-icons">layers</i>
+    </span>
+    <span
+      class="
+        py-3
+        cursor-pointer
+        pr-3
+        flex flex-1
+        min-w-0
+        text-xs
+        group-hover:text-secondaryDark
+        transition
+      "
+      @click="$emit('edit-environment')"
+    >
+      <span class="truncate">
+        {{ environment.name }}
+      </span>
+    </span>
     <tippy
       ref="options"
       interactive
@@ -17,7 +40,7 @@
       arrow
     >
       <template #trigger>
-          <TabPrimary
+        <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('more')"
           icon="more_vert"
@@ -40,7 +63,6 @@
         "
       />
     </tippy>
-    </div>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('are_you_sure_remove_environment')"

components/environments/index.vue

@@ -1,11 +1,17 @@
 <template>
   <AppSection label="environments">
-    <div class="flex">
-      <span class="select-wrapper">
     <select
       v-model="selectedEnvironmentIndex"
       :disabled="environments.length == 0"
-          class="select rounded-t-lg"
+      class="
+        flex
+        w-full
+        px-4
+        text-xs
+        py-2
+        focus:outline-none
+        border-b border-dividerLight
+      "
     >
       <option :value="-1">No environment</option>
       <option v-if="environments.length === 0" value="0">
@@ -19,8 +25,6 @@
         {{ environment.name }}
       </option>
     </select>
-      </span>
-    </div>
     <EnvironmentsAdd
       :show="showModalAdd"
       @hide-modal="displayModalAdd(false)"
@@ -35,36 +39,36 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="border-b flex flex-1 border-divider">
+    <div class="border-b flex justify-between flex-1 border-dividerLight">
-      <div>
       <ButtonSecondary
         icon="add"
         :label="$t('new')"
         @click.native="displayModalAdd(true)"
       />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        icon="import_export"
+        :title="$t('import_export')"
+        @click.native="displayModalImportExport(true)"
+      />
     </div>
-      <div>
+    <div
-        <ButtonSecondary @click.native="displayModalImportExport(true)" />
+      v-if="environments.length === 0"
-        {{ $t("import_export") }}
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
-      </div>
+    >
-    </div>
+      <i class="material-icons opacity-50 pb-2">library_add</i>
-    <p v-if="environments.length === 0">
+      <span class="text-xs">
-      <i class="material-icons">help_outline</i>
         {{ $t("create_new_environment") }}
-    </p>
+      </span>
-    <div class="overflow-auto">
+    </div>
-      <ul class="flex-col">
+    <div class="flex flex-col">
-        <li
+      <EnvironmentsEnvironment
         v-for="(environment, index) in environments"
         :key="environment.name"
-        >
-          <EnvironmentsEnvironment
         :environment-index="index"
         :environment="environment"
         @edit-environment="editEnvironment(environment, index)"
       />
-        </li>
-      </ul>
     </div>
   </AppSection>
 </template>

components/history/rest/Card.vue

@@ -24,8 +24,8 @@
         pr-3
         flex flex-1
         min-w-0
-        text-secondaryLight text-xs
+        text-xs
-        group-hover:text-secondary
+        group-hover:text-secondaryDark
         transition
       "
       @click="$emit('use-entry')"