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,46 +1,68 @@
 <template>
-  <div>
+  <div class="flex items-center group">
-    <div class="flex flex-1">
+    <span
-      <div>
+      class="
+        flex
+        justify-center
+        items-center
+        text-xs
+        w-10
+        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
+      tabindex="-1"
+      trigger="click"
+      theme="popover"
+      arrow
+    >
+      <template #trigger>
         <ButtonSecondary
-          icon="layers"
+          v-tippy="{ theme: 'tooltip' }"
-          :label="environment.name"
+          :title="$t('more')"
-          @click.native="$emit('edit-environment')"
+          icon="more_vert"
         />
-      </div>
+      </template>
-      <tippy
+      <SmartItem
-        ref="options"
+        icon="create"
-        interactive
+        :label="$t('edit')"
-        tabindex="-1"
+        @click.native="
-        trigger="click"
+          $emit('edit-environment')
-        theme="popover"
+          $refs.options.tippy().hide()
-        arrow
+        "
-      >
+      />
-        <template #trigger>
+      <SmartItem
-          <TabPrimary
+        icon="delete"
-            v-tippy="{ theme: 'tooltip' }"
+        :label="$t('delete')"
-            :title="$t('more')"
+        @click.native="
-            icon="more_vert"
+          confirmRemove = true
-          />
+          $refs.options.tippy().hide()
-        </template>
+        "
-        <SmartItem
+      />
-          icon="create"
+    </tippy>
-          :label="$t('edit')"
-          @click.native="
-            $emit('edit-environment')
-            $refs.options.tippy().hide()
-          "
-        />
-        <SmartItem
-          icon="delete"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
-    </div>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('are_you_sure_remove_environment')"

components/environments/index.vue

@@ -1,26 +1,30 @@
 <template>
   <AppSection label="environments">
-    <div class="flex">
+    <select
-      <span class="select-wrapper">
+      v-model="selectedEnvironmentIndex"
-        <select
+      :disabled="environments.length == 0"
-          v-model="selectedEnvironmentIndex"
+      class="
-          :disabled="environments.length == 0"
+        flex
-          class="select rounded-t-lg"
+        w-full
-        >
+        px-4
-          <option :value="-1">No environment</option>
+        text-xs
-          <option v-if="environments.length === 0" value="0">
+        py-2
-            {{ $t("create_new_environment") }}
+        focus:outline-none
-          </option>
+        border-b border-dividerLight
-          <option
+      "
-            v-for="(environment, index) in environments"
+    >
-            :key="index"
+      <option :value="-1">No environment</option>
-            :value="index"
+      <option v-if="environments.length === 0" value="0">
-          >
+        {{ $t("create_new_environment") }}
-            {{ environment.name }}
+      </option>
-          </option>
+      <option
-        </select>
+        v-for="(environment, index) in environments"
-      </span>
+        :key="index"
-    </div>
+        :value="index"
+      >
+        {{ environment.name }}
+      </option>
+    </select>
     <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
-        <ButtonSecondary
+        icon="add"
-          icon="add"
+        :label="$t('new')"
-          :label="$t('new')"
+        @click.native="displayModalAdd(true)"
-          @click.native="displayModalAdd(true)"
+      />
-        />
+      <ButtonSecondary
-      </div>
+        v-tippy="{ theme: 'tooltip' }"
-      <div>
+        icon="import_export"
-        <ButtonSecondary @click.native="displayModalImportExport(true)" />
+        :title="$t('import_export')"
-        {{ $t("import_export") }}
+        @click.native="displayModalImportExport(true)"
-      </div>
+      />
     </div>
-    <p v-if="environments.length === 0">
+    <div
-      <i class="material-icons">help_outline</i>
+      v-if="environments.length === 0"
-      {{ $t("create_new_environment") }}
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
-    </p>
+    >
-    <div class="overflow-auto">
+      <i class="material-icons opacity-50 pb-2">library_add</i>
-      <ul class="flex-col">
+      <span class="text-xs">
-        <li
+        {{ $t("create_new_environment") }}
-          v-for="(environment, index) in environments"
+      </span>
-          :key="environment.name"
+    </div>
-        >
+    <div class="flex flex-col">
-          <EnvironmentsEnvironment
+      <EnvironmentsEnvironment
-            :environment-index="index"
+        v-for="(environment, index) in environments"
-            :environment="environment"
+        :key="environment.name"
-            @edit-environment="editEnvironment(environment, index)"
+        :environment-index="index"
-          />
+        :environment="environment"
-        </li>
+        @edit-environment="editEnvironment(environment, index)"
-      </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')"