Liu Song’s Projects

diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 0537952e630fbc443a2042598604966314391ac1..9cee6d2eb8fccf7ec2c16381c1c018708083327f 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -39,12 +39,12 @@   --primary-light-color: theme("colors.gray.50");
   // 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
+@mixin baseTheme {
   --font-mono: "Roboto Mono", "monospace";
-  // Background color
   // Border color
   --divider-color: theme("colors.gray.200");
   // Light Border color




diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 82e6a47d425a8984506185603f39b496609348b9..6d6cc2e69566cf3a26ad6721e35e3a4bee0351cb 100644
--- a/components/button/Secondary.vue
+++ b/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 },




diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 8ea2dd58536c59bcf54d83e31c493ef6b880cd33..72434c831391f11b1acc13201102e9ec4e7a7311 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -1,71 +1,101 @@
 <template>
+  <div class="flex items-center group">
+    <span
+      class="
+        flex
+          :label="environment.name"
   <div>
+          :label="environment.name"
     <div class="flex flex-1">
+          :label="environment.name"
       <div>
+          :label="environment.name"
         <ButtonSecondary
+          :label="environment.name"
           icon="layers"
+          :label="environment.name"
           :label="environment.name"
+          :label="environment.name"
           @click.native="$emit('edit-environment')"
+          :label="environment.name"
         />
-<template>
+          @click.native="$emit('edit-environment')"
-<template>
+          @click.native="$emit('edit-environment')"
 <template>
-<template>
+          @click.native="$emit('edit-environment')"
   <div>
-<template>
+    <span
+      class="
+          @click.native="$emit('edit-environment')"
     <div class="flex flex-1">
-<template>
+        cursor-pointer
+          @click.native="$emit('edit-environment')"
       <div>
-<template>
+          @click.native="$emit('edit-environment')"
         <ButtonSecondary
-<template>
+          @click.native="$emit('edit-environment')"
           icon="layers"
-<template>
+        text-xs
+        group-hover:text-secondaryDark
+        transition
+      "
           :label="environment.name"
+        />
-<template>
           @click.native="$emit('edit-environment')"
-<template>
+          @click.native="$emit('edit-environment')"
         />
-  <div>
+        />
-  <div>
+        />
 <template>
-  <div>
+          @click.native="$emit('edit-environment')"
   <div>
+        />
   <div>
+        />
     <div class="flex flex-1">
-  <div>
+        />
       <div>
-  <div>
+        />
         <ButtonSecondary
-  <div>
+        />
           icon="layers"
-  <div>
+        />
           :label="environment.name"
-  <div>
+      arrow
           @click.native="$emit('edit-environment')"
-  <div>
+        />
         />
-    <div class="flex flex-1">
+        <ButtonSecondary
+      </div>
-    <div class="flex flex-1">
+      </div>
 <template>
-    <div class="flex flex-1">
+      </div>
   <div>
         />
-  <div>
+      </template>
+      <SmartItem
+        icon="create"
+      </div>
           icon="layers"
-          icon="delete"
+        @click.native="
-    <div class="flex flex-1">
+          $emit('edit-environment')
+          $refs.options.tippy().hide()
+        "
+      />
+      </div>
       <div>
+      <tippy
   <div>
-        />
+      <tippy
     <div class="flex flex-1">
-        <ButtonSecondary
-    <div class="flex flex-1">
 <template>
+          :label="environment.name"
-          "
+          confirmRemove = true
+      </div>
         />
-      </tippy>
+        "
-    </div>
+      />
+    </tippy>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('are_you_sure_remove_environment')"




diff --git a/components/environments/index.vue b/components/environments/index.vue
index 8e510db90ec1b1b24b23642bf188946cf1feeb2f..d0b49f148b310df3dfa599cdeb62de1ed512b7d9 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,32 +1,59 @@
 <template>
   <AppSection label="environments">
-    <div class="flex">
-      <span class="select-wrapper">
+          <option :value="-1">No environment</option>
         <select
+          <option :value="-1">No environment</option>
           v-model="selectedEnvironmentIndex"
+          <option :value="-1">No environment</option>
           :disabled="environments.length == 0"
+          <option :value="-1">No environment</option>
           class="select rounded-t-lg"
+          <option :value="-1">No environment</option>
         >
+<template>
           <option :value="-1">No environment</option>
           <option v-if="environments.length === 0" value="0">
+<template>
+<template>
             {{ $t("create_new_environment") }}
 <template>
+<template>
     <div class="flex">
+<template>
           <option
 <template>
+<template>
         <select
+<template>
             :key="index"
+<template>
             :value="index"
 <template>
+<template>
           class="select rounded-t-lg"
+<template>
             {{ environment.name }}
 <template>
+        </select>
+      </option>
+      <option
+            {{ $t("create_new_environment") }}
     <div class="flex">
+<template>
   <AppSection label="environments">
+      <span class="select-wrapper">
+<template>
   <AppSection label="environments">
+        <select
 <template>
+    />
+<template>
   <AppSection label="environments">
+          :disabled="environments.length == 0"
+<template>
   <AppSection label="environments">
+<template>
+    </select>
     <EnvironmentsAdd
       :show="showModalAdd"
       @hide-modal="displayModalAdd(false)"
@@ -40,55 +68,64 @@            :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">
+<template>
     <div class="flex">
-          v-model="selectedEnvironmentIndex"
+<template>
     <div class="flex">
-          :disabled="environments.length == 0"
+<template>
+<template>
     <div class="flex">
-          class="select rounded-t-lg"
+  <AppSection label="environments">
+          </option>
     <div class="flex">
-        >
+          </option>
       <span class="select-wrapper">
-      <span class="select-wrapper">
 <template>
+      :editing-environment-index="editingEnvironmentIndex"
-      </div>
+        v-tippy="{ theme: 'tooltip' }"
+<template>
       <div>
-      <span class="select-wrapper">
+<template>
     <div class="flex">
+          :disabled="environments.length == 0"
-        {{ $t("import_export") }}
+        @click.native="displayModalImportExport(true)"
+          </option>
       <span class="select-wrapper">
-  <AppSection label="environments">
     </div>
-    <p v-if="environments.length === 0">
+    <div
+<template>
       <span class="select-wrapper">
-          v-model="selectedEnvironmentIndex"
+<template>
       <span class="select-wrapper">
+<template>
+          <option v-if="environments.length === 0" value="0">
           :disabled="environments.length == 0"
+<template>
       <span class="select-wrapper">
-          class="select rounded-t-lg"
+  <AppSection label="environments">
+<template>
       <span class="select-wrapper">
-        >
+    <div class="flex">
-        <select
+            {{ $t("create_new_environment") }}
-        <select
+  <AppSection label="environments">
 <template>
-        <select
+  <AppSection label="environments">
   <AppSection label="environments">
-          :key="environment.name"
+    <div class="flex flex-col">
-        >
-        <select
+<template>
       <span class="select-wrapper">
-        <select
         <select
-        <select
+        v-for="(environment, index) in environments"
+          <option
           v-model="selectedEnvironmentIndex"
-        <select
+          <option
           :disabled="environments.length == 0"
-        <select
+          <option
           class="select rounded-t-lg"
-        <select
+          <option
         >
-      </ul>
+      />
     </div>
   </AppSection>
 </template>




diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index ef7ce9fdb8f94fcfd25bf154d81793d6b960dc0c..8034f544f5041cfd017713b88947a962501d53e5 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -24,8 +24,8 @@         cursor-pointer
         pr-3
         flex flex-1
         min-w-0
-        text-secondaryLight text-xs
+        text-xs
-  <div class="flex items-center group">
+        flex
         font-mono font-bold
         transition
       "