From 3d963a7719546b24476c79cf56bd91b6b35bc1bb Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 7 Aug 2021 14:51:13 +0530
Subject: [PATCH] feat: floating input label

---
 assets/scss/styles.scss                       | 23 ++++++++
 components/collections/Add.vue                | 10 ++--
 components/collections/AddFolder.vue          | 10 ++--
 components/collections/Edit.vue               | 10 ++--
 components/collections/EditFolder.vue         |  9 ++--
 components/collections/EditRequest.vue        | 10 ++--
 components/collections/SaveRequest.vue        | 21 ++++----
 components/collections/graphql/Add.vue        | 10 ++--
 components/collections/graphql/AddFolder.vue  | 10 ++--
 components/collections/graphql/Edit.vue       | 10 ++--
 components/collections/graphql/EditFolder.vue | 11 ++--
 .../collections/graphql/EditRequest.vue       | 10 ++--
 .../collections/graphql/ImportExport.vue      |  2 -
 components/environments/Add.vue               | 10 ++--
 components/environments/Edit.vue              | 10 ++--
 components/environments/ImportExport.vue      |  2 -
 components/firebase/Login.vue                 | 12 ++---
 components/smart/Modal.vue                    |  2 +-
 components/teams/Add.vue                      | 10 ++--
 components/teams/Edit.vue                     | 10 ++--
 helpers/oauth.js                              |  3 ++
 lang/en-US.json                               |  1 +
 newstore/settings.ts                          |  2 +-
 pages/settings.vue                            | 52 ++++++-------------
 24 files changed, 132 insertions(+), 128 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 9101d08f6..2e07608e7 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -198,6 +198,29 @@ button {
   @apply hidden;
 }
 
+.floating-input ~ label {
+  @apply font-semibold;
+  @apply py-0.5;
+  @apply px-2;
+  @apply m-2;
+  @apply rounded;
+  @apply transition;
+  @apply absolute;
+}
+
+.floating-input:focus-within ~ label,
+.floating-input:not(:placeholder-shown) ~ label {
+  @apply bg-primary;
+  @apply transform;
+  @apply origin-center;
+  @apply scale-75;
+  @apply -translate-y-6;
+}
+
+.floating-input:focus-within ~ label {
+  @apply text-accent;
+}
+
 pre.ace_editor {
   @apply font-mono;
   @apply resize-none;
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index ab9d0391e..efa177c44 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelAdd" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelAdd"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="$t('collection.name')"
           @keyup.enter="addNewCollection"
         />
+        <label for="selectLabelAdd">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index b0f24520f..dcb6a24f0 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelAddFolder" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelAddFolder"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="$t('folder.new')"
           @keyup.enter="addFolder"
         />
+        <label for="selectLabelAddFolder">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index e900f51e9..b1b590f94 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEdit" class="font-semibold px-4 pb-4">{{
-          $t("label")
-        }}</label>
         <input
           id="selectLabelEdit"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="placeholderCollName"
           @keyup.enter="saveCollection"
         />
+        <label for="selectLabelEdit">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 56d0f8fbb..0b8d3f210 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -6,16 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEditFolder" class="font-semibold px-4 pb-4">{{
-          $t("label")
-        }}</label>
         <input
           id="selectLabelEditFolder"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
           @keyup.enter="editFolder"
         />
+        <label for="selectLabelEditFolder">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index 1092dad56..4c7fe93fc 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEditReq" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelEditReq"
           v-model="requestUpdateData.name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="placeholderReqName"
           @keyup.enter="saveRequest"
         />
+        <label for="selectLabelEditReq">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 831ac803e..a4dfcacc3 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -6,15 +6,18 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelSaveReq" class="font-semibold px-4 pb-4">
-          {{ $t("request.name") }}
-        </label>
-        <input
-          id="selectLabelSaveReq"
-          v-model="requestName"
-          class="input"
-          type="text"
-        />
+        <div class="flex relative">
+          <input
+            id="selectLabelSaveReq"
+            v-model="requestName"
+            class="input floating-input"
+            placeholder=" "
+            type="text"
+          />
+          <label for="selectLabelSaveReq">
+            {{ $t("request.name") }}
+          </label>
+        </div>
         <label class="font-semibold px-4 pt-4 pb-4">
           {{ $t("collection.select_location") }}
         </label>
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 588a5769d..2b8edaca4 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlAdd" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlAdd"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="$t('collection.name')"
           @keyup.enter="addNewCollection"
         />
+        <label for="selectLabelGqlAdd">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index 59859f875..8794c66ff 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlAddFolder" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlAddFolder"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="$t('folder.new')"
           @keyup.enter="addFolder"
         />
+        <label for="selectLabelGqlAddFolder">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index ccb54675e..efa5ba0d6 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEdit" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlEdit"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="editingCollection.name"
           @keyup.enter="saveCollection"
         />
+        <label for="selectLabelGqlEdit">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 1661b8ede..1d48a7328 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -6,17 +6,16 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEditFolder" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlEditFolder"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="folder.name"
-          @keyup.enter="editFolder"
         />
+        <label for="selectLabelGqlEditFolder">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index 1eafd8d18..90ceb18f1 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEditReq" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelGqlEditReq"
           v-model="requestUpdateData.name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="request.name"
           @keyup.enter="saveRequest"
         />
+        <label for="selectLabelGqlEditReq">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 35b47f69e..f6743ec84 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -59,7 +59,6 @@
           ref="inputChooseFileToReplaceWith"
           class="input"
           type="file"
-          style="display: none"
           accept="application/json"
           @change="replaceWithJSON"
         />
@@ -74,7 +73,6 @@
           ref="inputChooseFileToImportFrom"
           class="input"
           type="file"
-          style="display: none"
           accept="application/json"
           @change="importFromJSON"
         />
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index f9115578e..7f0bd7bda 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEnvAdd" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelEnvAdd"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="$t('my_new_environment')"
           @keyup.enter="addNewEnvironment"
         />
+        <label for="selectLabelEnvAdd">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 7f6a6dd44..59a11e50a 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEnvEdit" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelEnvEdit"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="editingEnvironment.name"
           @keyup.enter="saveEnvironment"
         />
+        <label for="selectLabelEnvEdit">
+          {{ $t("label") }}
+        </label>
         <div class="flex flex-1 justify-between items-center">
           <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
             {{ $t("env_variable_list") }}
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 5a9d59645..48c37cdcf 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -61,7 +61,6 @@
           ref="inputChooseFileToReplaceWith"
           class="input"
           type="file"
-          style="display: none"
           accept="application/json"
           @change="replaceWithJSON"
         />
@@ -76,7 +75,6 @@
           ref="inputChooseFileToImportFrom"
           class="input"
           type="file"
-          style="display: none"
           accept="application/json"
           @change="importFromJSON"
         />
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 82ca4da8e..a98345e0d 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -25,23 +25,23 @@
         />
       </div>
       <div v-if="mode === 'email'" class="flex flex-col space-y-2">
-        <div class="flex relative items-center">
-          <label for="email" class="flex px-4 absolute items-center">
-            <i class="opacity-75 material-icons">mail</i>
-          </label>
+        <div class="flex items-center relative">
           <input
             id="email"
             v-model="form.email"
-            class="input !pl-12"
+            class="input floating-input"
+            placeholder=" "
             type="email"
             name="email"
-            :placeholder="$t('email')"
             autocomplete="email"
             required
             spellcheck="false"
             autofocus
             @keyup.enter="signInWithEmail"
           />
+          <label for="email">
+            {{ $t("auth.email") }}
+          </label>
         </div>
         <ButtonPrimary
           :loading="signingInWithEmail"
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 69cca985e..7606d0b5f 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -50,7 +50,7 @@
             <div class="flex pl-2 items-center justify-between">
               <slot name="header"></slot>
             </div>
-            <div class="flex flex-col my-4 overflow-auto">
+            <div class="flex flex-col my-4">
               <slot name="body"></slot>
             </div>
             <div
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index 24ee269eb..3ae0d979d 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelTeamAdd" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelTeamAdd"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="$t('team.new_name')"
           @keyup.enter="addNewTeam"
         />
+        <label for="selectLabelTeamAdd">
+          {{ $t("label") }}
+        </label>
       </div>
     </template>
     <template #footer>
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index fb5ba0a73..4f2a24352 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -6,17 +6,17 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelTeamEdit" class="font-semibold px-4 pb-4">
-          {{ $t("label") }}
-        </label>
         <input
           id="selectLabelTeamEdit"
           v-model="name"
-          class="input"
+          class="input floating-input"
+          placeholder=" "
           type="text"
-          :placeholder="editingTeam.name"
           @keyup.enter="saveTeam"
         />
+        <label for="selectLabelTeamEdit">
+          {{ $t("label") }}
+        </label>
         <div class="flex flex-1 justify-between items-center">
           <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
             {{ $t("team.members") }}
diff --git a/helpers/oauth.js b/helpers/oauth.js
index 8e67ce202..6cc656948 100644
--- a/helpers/oauth.js
+++ b/helpers/oauth.js
@@ -154,9 +154,12 @@ const tokenRequest = async ({
 }) => {
   // Check oauth configuration
   if (oidcDiscoveryUrl !== "") {
+    // eslint-disable-next-line camelcase
     const { authorization_endpoint, token_endpoint } =
       await getTokenConfiguration(oidcDiscoveryUrl)
+    // eslint-disable-next-line camelcase
     authUrl = authorization_endpoint
+    // eslint-disable-next-line camelcase
     accessTokenUrl = token_endpoint
   }
 
diff --git a/lang/en-US.json b/lang/en-US.json
index 088999f70..e401c80b5 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -135,6 +135,7 @@
     "gist_created": "Gist created"
   },
   "auth": {
+    "email": "Email",
     "account_exists": "Account exists with different credential - Login to link both accounts",
     "send_magic_link": "Send a magic link",
     "we_sent_magic_link": "We sent you a magic link!",
diff --git a/newstore/settings.ts b/newstore/settings.ts
index 6bbf4f659..5604fb4dd 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -83,7 +83,7 @@ export const defaultSettings: SettingsType = {
     httpPassword: true,
     bearerToken: true,
   },
-  THEME_COLOR: "green",
+  THEME_COLOR: "blue",
   BG_COLOR: "system",
   TELEMETRY_ENABLED: true,
   SHORTCUT_INDICATOR: false,
diff --git a/pages/settings.vue b/pages/settings.vue
index 53b244e66..9a703a481 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -282,46 +282,24 @@
               >.
             </div>
             <div class="space-y-4 mt-4">
-              <div class="flex items-center">
+              <div class="flex space-x-2 items-center">
                 <SmartToggle
                   :on="PROXY_ENABLED"
                   @change="toggleSetting('PROXY_ENABLED')"
                 />
-                <label
-                  for="url"
-                  class="
-                    bg-primaryLight
-                    border border-divider
-                    rounded-l
-                    ml-2
-                    py-2
-                    px-4
-                    truncate
-                  "
-                >
-                  {{ `${$t("proxy")} ${$t("url")}` }}
-                </label>
-                <input
-                  id="url"
-                  v-model="PROXY_URL"
-                  class="
-                    bg-primaryLight
-                    border border-divider
-                    rounded-r
-                    flex
-                    font-semibold font-mono
-                    flex-1
-                    mr-2
-                    py-2
-                    px-4
-                    block
-                    focus:(border-accent
-                    outline-none)
-                  "
-                  type="url"
-                  :disabled="!PROXY_ENABLED"
-                  :placeholder="$t('url')"
-                />
+                <div class="flex flex-1 items-center relative">
+                  <input
+                    id="url"
+                    v-model="PROXY_URL"
+                    class="input floating-input"
+                    placeholder=" "
+                    type="url"
+                    :disabled="!PROXY_ENABLED"
+                  />
+                  <label for="url">
+                    {{ `${$t("proxy")} ${$t("url")}` }}
+                  </label>
+                </div>
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('reset_default')"
@@ -406,7 +384,7 @@ export default defineComponent({
 
       showLogin: false,
 
-      active: getLocalConfig("THEME_COLOR") || "green",
+      active: getLocalConfig("THEME_COLOR") || "blue",
       confirmRemove: false,
     }
   },