1 files changed, 69 insertions, 17 deletions
diff --git a/src/views/_sila/Login/Login.vue b/src/views/_sila/Login/Login.vue
index 3c330362..1b8715c9 100644
--- a/src/views/_sila/Login/Login.vue
+++ b/src/views/_sila/Login/Login.vue
@@ -5,15 +5,30 @@
         {{ $t('pageLogin.alert.message') }}
       </p>
     </alert>
-    <b-form-group label-for="language" :label="$t('pageLogin.language')">
+    <!-- <b-form-group label-for="language" :label="$t('pageLogin.language')">
       <b-form-select
         id="language"
         v-model="$i18n.locale"
         :options="languages"
         data-test-id="login-select-language"
       ></b-form-select>
-    </b-form-group>
-    <b-form-group label-for="username" :label="$t('pageLogin.username')">
+    </b-form-group> -->
+    <b-form-group
+      class="bold-24px"
+      label-for="auth"
+      :label="$t('pageLogin.auth')"
+    ></b-form-group>
+
+    <b-form-group
+      label-for="auth"
+      class="auth-description"
+      :label="$t('pageLogin.authDescription')"
+    ></b-form-group>
+
+    <b-form-group>
+      <label class="regular-12px tretiatry" for="username">{{
+        $t('pageLogin.username')
+      }}</label>
       <b-form-input
         id="username"
         v-model="userInfo.username"
@@ -22,6 +37,7 @@
         type="text"
         autofocus="autofocus"
         data-test-id="login-input-username"
+        class="form-control-with-button username-input"
         @input="$v.userInfo.username.$touch()"
       >
       </b-form-input>
@@ -31,9 +47,12 @@
         </template>
       </b-form-invalid-feedback>
     </b-form-group>
-    <div class="login-form__section mb-3">
-      <label for="password">{{ $t('pageLogin.password') }}</label>
+
+    <b-form-group>
       <input-password-toggle>
+        <label class="regular-12px tretiatry" for="password">{{
+          $t('pageLogin.password')
+        }}</label>
         <b-form-input
           id="password"
           v-model="userInfo.password"
@@ -41,19 +60,20 @@
           :state="getValidationState($v.userInfo.password)"
           type="password"
           data-test-id="login-input-password"
-          class="form-control-with-button"
+          class="form-control-with-button password-input"
           @input="$v.userInfo.password.$touch()"
         >
         </b-form-input>
+        <b-form-invalid-feedback id="password-required" role="alert">
+          <template v-if="!$v.userInfo.password.required">
+            {{ $t('global.form.fieldRequired') }}
+          </template>
+        </b-form-invalid-feedback>
       </input-password-toggle>
-      <b-form-invalid-feedback id="password-required" role="alert">
-        <template v-if="!$v.userInfo.password.required">
-          {{ $t('global.form.fieldRequired') }}
-        </template>
-      </b-form-invalid-feedback>
-    </div>
+    </b-form-group>
+
     <b-button
-      class="mt-3"
+      class="login-button"
       type="submit"
       variant="primary"
       data-test-id="login-button-submit"
@@ -83,6 +103,10 @@ export default {
       disableSubmitButton: false,
       languages: [
         {
+          value: 'ru-RU',
+          text: 'Русский',
+        },
+        {
           value: 'en-US',
           text: 'English',
         },
@@ -90,10 +114,6 @@ export default {
           value: 'es',
           text: 'Español',
         },
-        {
-          value: 'ru-RU',
-          text: 'Русский',
-        },
       ],
     };
   },
@@ -144,3 +164,35 @@ export default {
   },
 };
 </script>
+<style scoped>
+.regular-12px {
+  margin-left: 10px;
+}
+.username-input,
+.password-input {
+  height: 56px;
+  margin: -30px 0 0 0;
+  padding-top: 30px;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0em;
+}
+
+.text-input {
+  margin: 0 0 0 50px;
+  padding: 0 0 0 5px;
+}
+
+.login-button {
+  height: 36px;
+  width: 380px;
+}
+
+@media (max-width: 576px) {
+  .login-button {
+    width: 100%;
+  }
+}
+</style>