From ef38cef746c7bc2c6bfb696d316efb0bd9a23d93 Mon Sep 17 00:00:00 2001
From: liza-pohranichna <haemoglobin0@gmail.com>
Date: Tue, 30 Jul 2024 20:34:43 +0300
Subject: [PATCH 1/3] fix: changed styles for settings and settings components
 [WTEL-4814]

---
 package-lock.json                             |  12 +-
 .../settings/components/change-password.vue   |  10 +-
 .../settings/components/custom-ringtone.vue   |  29 ++--
 .../settings/components/the-settings.vue      | 144 +++++++++---------
 4 files changed, 108 insertions(+), 87 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b1453f4a..f3c93584d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,19 @@
 {
   "name": "web-client",
-  "version": "24.04.1",
+  "version": "24.04-1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "web-client",
-      "version": "24.04.1",
+      "version": "24.04-1.0",
       "dependencies": {
         "@vue/compat": "^3.2.47",
         "@vuelidate/core": "^2.0.0",
         "@vuelidate/validators": "^2.0.0",
         "@vueuse/core": "^10.3.0",
         "@webitel/flow-ui-sdk": "^0.1.14",
-        "@webitel/ui-sdk": "^24.6.59",
+        "@webitel/ui-sdk": "^24.8.7",
         "axios": "^1.6.8",
         "clipboard-copy": "^4.0.1",
         "cron-validator": "^1.3.1",
@@ -2250,9 +2250,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "24.6.59",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.6.59.tgz",
-      "integrity": "sha512-taisUQNZxhUp8/JpzV1PFJhOCfNC0J6BQcxhcS1zjyUlmQcXI7kk7WOzGivSDBs9SnwTXdRNmJkSsiF7okR/sw==",
+      "version": "24.8.7",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.8.7.tgz",
+      "integrity": "sha512-PASpgPkCuSZElLv9oNDNq+S1isdQibIACnkHGfAr2fTB3xlFmPMO+emtiw1gjr/bT3kK82okctsiQzpZ+yWaBQ==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@morev/vue-transitions": "^3.0.2",
diff --git a/src/modules/settings/components/change-password.vue b/src/modules/settings/components/change-password.vue
index 21c4f848f..ec2d192b3 100644
--- a/src/modules/settings/components/change-password.vue
+++ b/src/modules/settings/components/change-password.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="change-password">
+  <article class="change-password settings-section-item">
     <header class="content-header">
       <h3 class="content-title">
         {{ $t('settings.changePassword') }}
@@ -86,6 +86,14 @@ async function changePassword() {
 
 <style lang="scss" scoped>
 .change-password {
+  .content-title {
+    @extend %typo-heading-4;
+  }
+}
 
+.wt-button {
+  display: block;
+  margin: 0 0 0 auto;
 }
+
 </style>
diff --git a/src/modules/settings/components/custom-ringtone.vue b/src/modules/settings/components/custom-ringtone.vue
index b0702512e..1532e24a9 100644
--- a/src/modules/settings/components/custom-ringtone.vue
+++ b/src/modules/settings/components/custom-ringtone.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="custom-ringtone settings-section__setting">
+    <section class="custom-ringtone settings-section-item">
       <header class="content-header">
         <h3 class="content-title">
           {{ $t('settings.ringtones.title') }}
@@ -92,15 +92,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.custom-ringtone__wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
+.custom-ringtone {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+  }
+
+  .content-title {
+    @extend %typo-heading-4;
+  }
+
+  .wt-button {
+    display: block;
+    margin: 0 0 0 auto;
+  }
 
-.wt-button {
-  display: block;
-  margin: 0 0 0 auto;
+  .wt-player {
+    position: relative;
+    bottom: auto;
+  }
 }
 </style>
 
diff --git a/src/modules/settings/components/the-settings.vue b/src/modules/settings/components/the-settings.vue
index edd5422e9..cd267321e 100644
--- a/src/modules/settings/components/the-settings.vue
+++ b/src/modules/settings/components/the-settings.vue
@@ -6,79 +6,78 @@
       </wt-page-header>
     </template>
     <template #main>
-      <!--This wrapper "settings-section" is needed to place the "settings-section__setting"
-      in a column and give them half the width of the screen-->
       <section class="settings-section">
-        <article class="settings-section__setting">
+        <!--This wrapper is needed to set height and place the settings-section-items
+        in 2 columns and have flexible background for this at the same time-->
+        <div class="settings-section__content">
           <change-password />
-        </article>
-        <section class="settings-section__setting">
-          <header class="content-header">
-            <h3 class="content-title">
-              {{ $t('settings.language') }}
-            </h3>
-          </header>
-          <form>
-            <wt-select
-              :label="$t('settings.language')"
-              :options="languageOptions"
-              :value="language"
-              class="language-list"
-              @input="changeLanguage"
-              :clearable="false"
-            />
-          </form>
-        </section>
-        <section class="settings-section__setting">
-          <header class="content-header">
-            <h3 class="content-title">
-              {{ $t('settings.webPhone') }}
-            </h3>
-          </header>
-          <form>
-            <div class="settings-section__wrapper settings-section__switcher">
-              <p>{{ $t('settings.useWebPhone') }}</p>
-              <wt-switcher
-                v-model="webrtc"
-                @change="changeWebrtc"
+          <section class="settings-section-item">
+            <header class="content-header">
+              <h3 class="content-title">
+                {{ $t('settings.language') }}
+              </h3>
+            </header>
+            <form>
+              <wt-select
+                :label="$t('settings.language')"
+                :options="languageOptions"
+                :value="language"
+                class="language-list"
+                @input="changeLanguage"
+                :clearable="false"
               />
-            </div>
-            <div
-              v-show="webrtc"
-              class="settings-section__wrapper"
-            >
-              <p>{{ $t('settings.useStun') }}</p>
-              <wt-switcher
-                v-model="stun"
-                @change="changeStun"
-              />
-            </div>
-          </form>
-        </section>
-        <section class="settings-section__setting">
-          <header class="content-header">
-            <h3 class="content-title">
-              {{ $t('settings.callEnd') }}
-            </h3>
-          </header>
-          <form>
-            <div class="settings-section__wrapper">
-              <p>{{ $t('objects.status') }}</p>
-              <wt-switcher
-                :value="callEndSound"
-                @change="changeCallEndSoundState"
-              />
-            </div>
-          </form>
-        </section>
-        <custom-ringtone />
+            </form>
+          </section>
+          <section class="settings-section-item">
+            <header class="content-header">
+              <h3 class="content-title">
+                {{ $t('settings.webPhone') }}
+              </h3>
+            </header>
+            <form>
+              <div class="settings-section__wrapper settings-section__switcher">
+                <p>{{ $t('settings.useWebPhone') }}</p>
+                <wt-switcher
+                  v-model="webrtc"
+                  @change="changeWebrtc"
+                />
+              </div>
+              <div
+                v-show="webrtc"
+                class="settings-section__wrapper"
+              >
+                <p>{{ $t('settings.useStun') }}</p>
+                <wt-switcher
+                  v-model="stun"
+                  @change="changeStun"
+                />
+              </div>
+            </form>
+          </section>
+          <section class="settings-section-item">
+            <header class="content-header">
+              <h3 class="content-title">
+                {{ $t('settings.callEnd') }}
+              </h3>
+            </header>
+            <form>
+              <div class="settings-section__wrapper">
+                <p>{{ $t('objects.status') }}</p>
+                <wt-switcher
+                  :value="callEndSound"
+                  @change="changeCallEndSoundState"
+                />
+              </div>
+            </form>
+          </section>
+          <custom-ringtone />
+        </div>
       </section>
     </template>
   </wt-page-wrapper>
 </template>
 
 <script>
-import { required, sameAs } from '@vuelidate/validators';
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
 import { mapState } from 'vuex';
 import { changeWebPhone, getWebPhone } from '../api/settings';
@@ -196,20 +195,23 @@ export default {
 
 <style lang="scss" scoped>
 .settings-section {
-  display: block;
-  columns: 2;
-  column-gap: var(--spacing-sm);
   width: 100%;
-  min-width: 200px;
 
-  &__setting {
+  &__content {
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--spacing-sm);
+    flex-wrap: wrap;
+    max-height: 650px; // we need it to place blocks in 2 columns and have flexible background for this at the same time
+    gap: var(--spacing-sm);
+  }
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    width: calc(50% - var(--spacing-sm));
     padding: 0 var(--spacing-sm) var(--spacing-sm);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-5);
-    break-inside: avoid-column;
   }
 
   .content-title {

From 92d5ed8c765e3a7e0faf4e1affe832b5a818e52c Mon Sep 17 00:00:00 2001
From: liza-pohranichna <haemoglobin0@gmail.com>
Date: Wed, 31 Jul 2024 14:48:04 +0300
Subject: [PATCH 2/3] fix: remove v-model in settings after review [WTEL-4814]

---
 src/modules/settings/components/the-settings.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/settings/components/the-settings.vue b/src/modules/settings/components/the-settings.vue
index cd267321e..d0dcb7925 100644
--- a/src/modules/settings/components/the-settings.vue
+++ b/src/modules/settings/components/the-settings.vue
@@ -38,7 +38,7 @@
               <div class="settings-section__wrapper settings-section__switcher">
                 <p>{{ $t('settings.useWebPhone') }}</p>
                 <wt-switcher
-                  v-model="webrtc"
+                  :value="webrtc"
                   @change="changeWebrtc"
                 />
               </div>
@@ -48,7 +48,7 @@
               >
                 <p>{{ $t('settings.useStun') }}</p>
                 <wt-switcher
-                  v-model="stun"
+                  :value="stun"
                   @change="changeStun"
                 />
               </div>

From 28168eec7b1216735763e087842123224120eaa1 Mon Sep 17 00:00:00 2001
From: liza-pohranichna <haemoglobin0@gmail.com>
Date: Thu, 1 Aug 2024 14:52:16 +0300
Subject: [PATCH 3/3] fix: change styles after review [WTEL-4816]

---
 src/modules/settings/components/the-settings.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/modules/settings/components/the-settings.vue b/src/modules/settings/components/the-settings.vue
index d0dcb7925..184d2ec63 100644
--- a/src/modules/settings/components/the-settings.vue
+++ b/src/modules/settings/components/the-settings.vue
@@ -7,9 +7,7 @@
     </template>
     <template #main>
       <section class="settings-section">
-        <!--This wrapper is needed to set height and place the settings-section-items
-        in 2 columns and have flexible background for this at the same time-->
-        <div class="settings-section__content">
+        <div class="settings-section__column">
           <change-password />
           <section class="settings-section-item">
             <header class="content-header">
@@ -54,6 +52,8 @@
               </div>
             </form>
           </section>
+        </div>
+        <div class="settings-section__column">
           <section class="settings-section-item">
             <header class="content-header">
               <h3 class="content-title">
@@ -196,19 +196,19 @@ export default {
 <style lang="scss" scoped>
 .settings-section {
   width: 100%;
+  display: flex;
+  gap: var(--spacing-sm);
 
-  &__content {
+  &__column {
     display: flex;
     flex-direction: column;
-    flex-wrap: wrap;
-    max-height: 650px; // we need it to place blocks in 2 columns and have flexible background for this at the same time
+    flex: 1;
     gap: var(--spacing-sm);
   }
 
   &-item {
     display: flex;
     flex-direction: column;
-    width: calc(50% - var(--spacing-sm));
     padding: 0 var(--spacing-sm) var(--spacing-sm);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-5);