fix: minor color scheme inconsistencies

assets/scss/styles.scss

@@ -35,11 +35,6 @@
   @apply text-primary;
 }
 
-::placeholder {
-  @apply text-secondaryLight;
-  @apply opacity-25;
-}
-
 html {
   scroll-behavior: smooth;
 }
@@ -162,6 +157,7 @@ hr {
   @apply text-secondaryDark text-lg;
 }
 
+.textarea,
 .input,
 .select {
   @apply flex flex-1;
@@ -189,7 +185,7 @@ pre.ace_editor {
   @apply z-0;
 }
 
-select {
+.select {
   @apply appearance-none;
   @apply cursor-pointer;
 
@@ -323,7 +319,6 @@ input[type="checkbox"] {
 .splitpanes__splitter {
   @apply relative;
   @apply bg-primaryLight;
-  @apply transition;
 }
 
 .splitpanes--vertical > .splitpanes__splitter {
@@ -339,7 +334,7 @@ input[type="checkbox"] {
   @apply inset-0;
   @apply bg-dividerLight;
   @apply opacity-0;
-  @apply z-1;
+  @apply z-30;
   @apply transition;
 
   content: "";
@@ -348,7 +343,7 @@ input[type="checkbox"] {
 .splitpanes__splitter::after {
   @apply absolute;
   @apply inset-0;
-  @apply z-1;
+  @apply z-30;
   @apply transition;
   @apply flex;
   @apply items-center;

assets/scss/themes.scss

@@ -16,17 +16,17 @@
   // Light Text color
   --secondary-light-color: theme("colors.true-gray.500");
   // Dark Text color
-  --secondary-dark-color: theme("colors.white");
+  --secondary-dark-color: theme("colors.true-gray.100");
   // Border color
   --divider-color: theme("colors.true-gray.700");
   // Light Border color
-  --divider-light-color: theme("colors.true-gray.800");
+  --divider-light-color: theme("colors.dark.600");
   // Dark Border color
-  --divider-dark-color: theme("colors.true-gray.600");
+  --divider-dark-color: theme("colors.dark.200");
   // Error color
-  --error-color: theme("colors.true-gray.600");
+  --error-color: theme("colors.dark.800");
   // Tooltip color
-  --tooltip-color: theme("colors.true-gray.200");
+  --tooltip-color: theme("colors.true-gray.100");
   // Editor theme
   --editor-theme: "merbivore_soft";
 }
@@ -62,25 +62,25 @@
   // Background color
   --primary-color: theme("colors.dark.900");
   // Light Background color
-  --primary-light-color: theme("colors.dark.700");
+  --primary-light-color: theme("colors.dark.800");
   // Dark Background color
-  --primary-dark-color: theme("colors.dark.800");
+  --primary-dark-color: theme("colors.true-gray.900");
   // Text color
   --secondary-color: theme("colors.true-gray.400");
   // Light Text color
-  --secondary-light-color: theme("colors.true-gray.600");
+  --secondary-light-color: theme("colors.true-gray.500");
   // Dark Text color
   --secondary-dark-color: theme("colors.true-gray.100");
   // Border color
-  --divider-color: theme("colors.dark.800");
+  --divider-color: theme("colors.true-gray.800");
   // Light Border color
-  --divider-light-color: theme("colors.dark.700");
+  --divider-light-color: theme("colors.true-gray.900");
   // Dark Border color
-  --divider-dark-color: theme("colors.dark.600");
+  --divider-dark-color: theme("colors.dark.200");
   // Error color
   --error-color: theme("colors.dark.800");
   // Tooltip color
-  --tooltip-color: theme("colors.true-gray.200");
+  --tooltip-color: theme("colors.true-gray.100");
   // Editor theme
   --editor-theme: "vibrant_ink";
 }

components/button/Secondary.vue

@@ -11,11 +11,12 @@
       items-center
       justify-center
       focus:outline-none
+      hover:bg-primaryDark
     "
     :class="[
       color
         ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
-        : 'text-secondary hover:text-secondaryDark hover:bg-primaryDark focus:text-secondaryDark',
+        : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
       label ? 'px-3' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'opacity-75 cursor-not-allowed': disabled },

components/collections/ChooseType.vue

@@ -27,6 +27,7 @@
                 py-3
                 px-4
                 focus:outline-none
+                select
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >

components/collections/graphql/Collection.vue

@@ -88,6 +88,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/collections/graphql/Folder.vue

@@ -84,6 +84,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/collections/graphql/Request.vue

@@ -80,6 +80,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/collections/my/Collection.vue

@@ -47,6 +47,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('import')"
         icon="check_box_outline_blank"
+        color="green"
         @click.native="$emit('select-collection')"
       />
       <ButtonSecondary
@@ -104,6 +105,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/collections/my/Folder.vue

@@ -89,6 +89,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/collections/my/Request.vue

@@ -91,6 +91,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/collections/teams/Collection.vue

@@ -39,6 +39,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('import')"
         icon="check_box_outline_blank"
+        color="green"
         @click.native="$emit('select-collection')"
       />
       <ButtonSecondary
@@ -101,6 +102,7 @@
         <SmartItem
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/collections/teams/Folder.vue

@@ -86,6 +86,7 @@
         <SmartItem
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/collections/teams/Request.vue

@@ -84,6 +84,7 @@
         />
         <SmartItem
           icon="delete"
+          color="red"
           :label="$t('delete')"
           @click.native="
             confirmRemove = true

components/environments/Edit.vue

@@ -87,6 +87,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
                 icon="delete"
+                color="red"
                 @click.native="removeEnvironmentVariable(index)"
               />
             </div>

components/environments/Environment.vue

@@ -58,6 +58,7 @@
       />
       <SmartItem
         icon="delete"
+        color="red"
         :label="$t('delete')"
         @click.native="
           confirmRemove = true

components/environments/index.vue

@@ -15,6 +15,7 @@
             py-3
             px-4
             focus:outline-none
+            select
           "
         >
           <option :value="-1">No environment</option>

components/history/graphql/Card.vue

@@ -25,9 +25,9 @@
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         icon="delete"
+        color="red"
         :title="$t('delete')"
         class="group-hover:inline-flex hidden"
-        color="red"
         data-testid="delete_history_entry"
         @click.native="$emit('delete-entry')"
       />

components/history/rest/Card.vue

@@ -43,9 +43,9 @@
     <ButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
       icon="delete"
+      color="red"
       :title="$t('delete')"
       class="group-hover:inline-flex hidden"
-      color="red"
       data-testid="delete_history_entry"
       @click.native="$emit('delete-entry')"
     />

components/http/BodyParameters.vue

@@ -103,6 +103,7 @@
                 : 'check_box_outline_blank'
               : 'check_box'
           "
+          color="green"
           @click.native="toggleActive(index, param)"
         />
       </div>
@@ -128,6 +129,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
+          color="red"
           @click.native="removeRequestBodyParam(index)"
         />
       </div>

components/http/Headers.vue

@@ -94,6 +94,7 @@
                 : 'check_box_outline_blank'
               : 'check_box'
           "
+          color="green"
           @click.native="
             updateHeader(index, {
               key: header.key,
@@ -108,6 +109,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
+          color="red"
           @click.native="deleteHeader(index)"
         />
       </div>

components/http/ImportCurl.vue

@@ -7,14 +7,16 @@
       </div>
     </template>
     <template #body>
-      <textarea
+      <div class="flex flex-col px-2">
-        id="import-curl"
+        <textarea
-        v-model="curl"
+          id="import-curl"
-        class="textarea"
+          v-model="curl"
-        autofocus
+          class="textarea"
-        rows="8"
+          autofocus
-        :placeholder="$t('enter_curl')"
+          rows="8"
-      ></textarea>
+          :placeholder="$t('enter_curl')"
+        ></textarea>
+      </div>
     </template>
     <template #footer>
       <span>

components/http/Parameters.vue

@@ -103,6 +103,7 @@
                 : 'check_box_outline_blank'
               : 'check_box'
           "
+          color="green"
           @click.native="
             updateParam(index, {
               key: param.key,
@@ -117,6 +118,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
           icon="delete"
+          color="red"
           @click.native="deleteParam(index)"
         />
       </div>

components/http/TokenList.vue

@@ -49,6 +49,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
               icon="delete"
+              color="red"
               @click.native="removeOAuthToken(index)"
             />
           </li>

components/realtime/Socketio.vue

@@ -109,6 +109,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
               icon="delete"
+              color="red"
               @click.native="removeCommunicationInput({ index })"
             />
           </div>

components/realtime/Websocket.vue

@@ -113,6 +113,7 @@
                       : 'check_box_outline_blank'
                     : 'check_box'
                 "
+                color="green"
                 @click.native="
                   protocol.active = protocol.hasOwnProperty('active')
                     ? !protocol.active
@@ -125,6 +126,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
                 icon="delete"
+                color="red"
                 @click.native="deleteProtocol({ index })"
               />
             </div>

components/smart/AutoComplete.vue

@@ -213,7 +213,7 @@ export default {
     @apply z-50;
     @apply shadow-lg;
 
-    top: calc(100% - 8px);
+    top: calc(100% - 4px);
     border-radius: 0 0 8px 8px;
 
     li {

components/smart/ColorModePicker.vue

@@ -6,7 +6,7 @@
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
       :class="{
-        'bg-primaryLight !text-accent hover:text-accent': color === activeColor,
+        'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
       :icon="getIcon(color)"
       @click.native="setBGMode(color)"
@@ -31,7 +31,7 @@ export default Vue.extend({
   },
   subscriptions() {
     return {
-      activeColor: getSettingSubject("BG_COLOR"),
+      active: getSettingSubject("BG_COLOR"),
     }
   },
   methods: {

components/smart/Toggle.vue

@@ -24,9 +24,9 @@ export default {
 
 <style scoped lang="scss">
 $useBorder: false;
-$borderColor: var(--divider-dark-color);
+$borderColor: var(--divider-color);
 $activeColor: var(--accent-color);
-$inactiveColor: var(--divider-dark-color);
+$inactiveColor: var(--divider-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
 $width: 2rem;

components/teams/Edit.vue

@@ -96,6 +96,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
                 icon="delete"
+                color="red"
                 @click.native="removeExistingTeamMember(member.user.uid)"
               />
             </li>
@@ -173,6 +174,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
                 icon="delete"
+                color="red"
                 @click.native="removeTeamMember(index)"
               />
             </li>

components/teams/Team.vue

@@ -36,6 +36,7 @@
       <SmartItem
         v-if="team.myRole === 'OWNER'"
         icon="delete"
+        color="red"
         :label="$t('delete')"
         @click.native="
           deleteTeam

pages/graphql.vue

@@ -251,6 +251,7 @@
                               : 'check_box_outline_blank'
                             : 'check_box'
                         "
+                        color="green"
                         @click.native="
                           $store.commit('setActiveGQLHeader', {
                             index,
@@ -266,6 +267,7 @@
                         v-tippy="{ theme: 'tooltip' }"
                         :title="$t('delete')"
                         icon="delete"
+                        color="red"
                         @click.native="removeRequestHeader(index)"
                       />
                     </div>

pages/index.vue

@@ -326,6 +326,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
               icon="delete"
+              color="red"
             />
           </div>
         </div>