feat: floating input label

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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"
         />

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>

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") }}

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"
         />

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"

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

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>

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") }}