fix: minor color scheme inconsistencies

2021-07-25 16:23:29 +05:30
parent 56c2e1094d
commit 3862a926ab
32 changed files with 66 additions and 37 deletions
--- a/assets/scss/styles.scss
+++ b/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;
--- a/assets/scss/themes.scss
+++ b/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";
 }
--- a/components/button/Secondary.vue
+++ b/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 },
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -27,6 +27,7 @@
                py-3
                px-4
                focus:outline-none
+                select
              "
              @change="updateSelectedTeam(myTeams[$event.target.value])"
            >
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -88,6 +88,7 @@
        />
        <SmartItem
          icon="delete"
+          color="red"
          :label="$t('delete')"
          @click.native="
            confirmRemove = true
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -84,6 +84,7 @@
        />
        <SmartItem
          icon="delete"
+          color="red"
          :label="$t('delete')"
          @click.native="
            confirmRemove = true
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -80,6 +80,7 @@
        />
        <SmartItem
          icon="delete"
+          color="red"
          :label="$t('delete')"
          @click.native="
            confirmRemove = true
--- a/components/collections/my/Collection.vue
+++ b/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
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -89,6 +89,7 @@
        />
        <SmartItem
          icon="delete"
+          color="red"
          :label="$t('delete')"
          @click.native="
            confirmRemove = true
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -91,6 +91,7 @@
        />
        <SmartItem
          icon="delete"
+          color="red"
          :label="$t('delete')"
          @click.native="
            confirmRemove = true
--- a/components/collections/teams/Collection.vue
+++ b/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
--- a/components/collections/teams/Folder.vue
+++ b/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
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -84,6 +84,7 @@
        />
        <SmartItem
          icon="delete"
+          color="red"
          :label="$t('delete')"
          @click.native="
            confirmRemove = true
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -87,6 +87,7 @@
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('delete')"
                icon="delete"
+                color="red"
                @click.native="removeEnvironmentVariable(index)"
              />
            </div>
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -58,6 +58,7 @@
      />
      <SmartItem
        icon="delete"
+        color="red"
        :label="$t('delete')"
        @click.native="
          confirmRemove = true
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -15,6 +15,7 @@
            py-3
            px-4
            focus:outline-none
+            select
          "
        >
          <option :value="-1">No environment</option>
--- a/components/history/graphql/Card.vue
+++ b/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')"
      />
--- a/components/history/rest/Card.vue
+++ b/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')"
    />
--- a/components/http/BodyParameters.vue
+++ b/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>
--- a/components/http/Headers.vue
+++ b/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>
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -7,14 +7,16 @@
      </div>
    </template>
    <template #body>
-      <textarea
-        id="import-curl"
-        v-model="curl"
-        class="textarea"
-        autofocus
-        rows="8"
-        :placeholder="$t('enter_curl')"
-      ></textarea>
+      <div class="flex flex-col px-2">
+        <textarea
+          id="import-curl"
+          v-model="curl"
+          class="textarea"
+          autofocus
+          rows="8"
+          :placeholder="$t('enter_curl')"
+        ></textarea>
+      </div>
    </template>
    <template #footer>
      <span>
--- a/components/http/Parameters.vue
+++ b/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>
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -49,6 +49,7 @@
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
              icon="delete"
+              color="red"
              @click.native="removeOAuthToken(index)"
            />
          </li>
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -109,6 +109,7 @@
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
              icon="delete"
+              color="red"
              @click.native="removeCommunicationInput({ index })"
            />
          </div>
--- a/components/realtime/Websocket.vue
+++ b/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>
--- a/components/smart/AutoComplete.vue
+++ b/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 {
--- a/components/smart/ColorModePicker.vue
+++ b/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: {
--- a/components/smart/Toggle.vue
+++ b/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;
--- a/components/teams/Edit.vue
+++ b/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>
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -36,6 +36,7 @@
      <SmartItem
        v-if="team.myRole === 'OWNER'"
        icon="delete"
+        color="red"
        :label="$t('delete')"
        @click.native="
          deleteTeam
--- a/pages/graphql.vue
+++ b/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>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -326,6 +326,7 @@
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
              icon="delete"
+              color="red"
            />
          </div>
        </div>