added and changed adaptations on transactions

luckydiamond/src/assets/css/PagesStyles/profile.css

@@ -128,6 +128,7 @@
     display: flex;
     align-items: center; /* Center vertically */
     margin-right: 1em; /* Add margin for spacing */
+    width: 15vh;
 }
 .user-name {
     display: flex;
@@ -142,6 +143,20 @@
     font-family: Montserrat;
     font-size: 20px;
 }
+
+.user-name1 {
+    display: flex;
+    flex-direction: column;
+    margin-left: 0.625em;
+    align-items: center; /* Center horizontally */
+    margin-top: -0.5em; /* Adjust this value as needed */
+}
+.user-name1__text h3 {
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat;
+    font-size: 20px;
+}
 .user-name__text p {
     color: #A9A9A9;
     font-weight: 400;
@@ -149,7 +164,7 @@
     font-size: 20px;
 }
 .data-info {
-    margin-left: 17vh; /* Push to the right */
+    margin-left: 20vh; /* Push to the right */
     margin-right: auto; /* Push to the left */
 }
 .data-info__text h3 {
@@ -157,6 +172,7 @@
     font-weight: 400;
     font-family: Montserrat;
     font-size: 17px;
+   
 }
 
 .transaction-info {
@@ -165,13 +181,14 @@
     display: flex;
     justify-content: center;
     align-content: center;
-    width: 25vh;
+    width: 1vh;
+    margin-right: 13.5vh;
 }
 .transaction-info__text {
     display: flex;
     justify-content: center;
     align-content: center;
-    width: 20vh;
+    width: 13vh;
 }
 
 .transaction-info__text h3 {
@@ -184,6 +201,10 @@
 }
 .withdraw-color h3 {
     color: #EA3D38;
+    margin-right: 1vh;
+}
+.withdraw-color1 {
+    margin-left: 1.35em;
 }
 .error-deposit {
     position: absolute;
@@ -235,6 +256,65 @@
     .withdraw {
         padding-right: 56%;
     }
+    .withdraw-color h3 {
+        color: #EA3D38;
+        margin-right: 1vh;
+    }
+    .transaction-info {
+        margin-right: 10em; /* Add margin for spacing */
+        margin-right: 6em; /* Add margin for spacing */
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 1vh;
+        margin-right: 8.5vh;
+    }
+    .transaction-info__text {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 13vh;
+    }
+    .user-name {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.625em;
+        align-items: center; /* Center horizontally */
+        margin-top: -0.5em; /* Adjust this value as needed */
+    }
+    .user-name__text h3 {
+        color: #FFF;
+        font-weight: 700;
+        font-family: Montserrat;
+        font-size: 20px;
+    }
+    .user-name1 {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.625em;
+        align-items: center; /* Center horizontally */
+        margin-top: -0.5em; /* Adjust this value as needed */
+    }
+    .user-name1__text h3 {
+        color: #FFF;
+        font-weight: 700;
+        font-family: Montserrat;
+        font-size: 20px;
+    }
+    .data-info {
+        margin-left: 22.5vh; /* Push to the right */
+        margin-right: auto; /* Push to the left */
+    }
+    .data-info__text h3 {
+        color: #A9A9A9;
+        font-weight: 400;
+        font-family: Montserrat;
+        font-size: 17px;
+       
+    }
+    .withdraw-color1 {
+        margin-left: 1.35em;
+    }
 }
 @media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
     .profile__card h2 {
@@ -246,5 +326,67 @@
     .withdraw {
         padding-right: 66%;
     }
+    
+}
+@media screen and (min-device-width: 1921px) {
+    .withdraw-color h3 {
+        color: #EA3D38;
+        margin-right: 1vh;
+    }
+    .transaction-info {
+        margin-right: 10em; /* Add margin for spacing */
+        margin-right: 6em; /* Add margin for spacing */
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 1vh;
+        margin-right: 20vh;
+    }
+    .transaction-info__text {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 13vh;
+    }
+    .user-name {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.625em;
+        align-items: center; /* Center horizontally */
+        margin-top: -0.5em; /* Adjust this value as needed */
+    }
+    .user-name__text h3 {
+        color: #FFF;
+        font-weight: 700;
+        font-family: Montserrat;
+        font-size: 20px;
+    }
+    .user-name1 {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.625em;
+        align-items: center; /* Center horizontally */
+        margin-top: -0.5em; /* Adjust this value as needed */
+    }
+    .user-name1__text h3 {
+        color: #FFF;
+        font-weight: 700;
+        font-family: Montserrat;
+        font-size: 20px;
+    }
+    .data-info {
+        margin-left: 17vh; /* Push to the right */
+        margin-right: auto; /* Push to the left */
+    }
+    .data-info__text h3 {
+        color: #A9A9A9;
+        font-weight: 400;
+        font-family: Montserrat;
+        font-size: 17px;
+       
+    }
+    .withdraw-color1 {
+        margin-left: 1.35em;
+    }
 }
 /* /Media */

luckydiamond/src/pages/ProfilePage.vue

@@ -14,7 +14,6 @@
       <div class="profile__btns--payments">
         <a href="#" class="text-btn btn-bg btn-margin btn-display" @click="depositClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
         <a href="#" class="withdraw text-btn btn-bg btn-display" @click="withdrawClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
-        
       </div>
     </div>
     <div class="payments">
@@ -37,9 +36,12 @@
           <div class="payments__card" v-for="payment in arrayHistory" :key="payment.id">
             <div class="user-info">
               <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
-              <div class="user-name user-name__text">
+              <div class="user-name user-name__text" :class="{ 'withdraw-color1': payment.name }">
                 <h3>{{ payment.name }}</h3>
               </div>
+              <div class="user-name1 user-name1__text">
+                <h3>{{ payment.name1 }}</h3>
+              </div>
             </div>
             <div class="data-info data-info__text">
               <h3>{{ payment.data }}</h3>
@@ -47,6 +49,7 @@
             <div class="transaction-info transaction-info__text" :class="{ 'withdraw-color': payment.amount < 0, 'deposit-color': payment.amount > 0 }">
               <h3>{{ payment.amount }} АР</h3>
             </div>
+            
           </div>
         </div>
       </div>
@@ -145,7 +148,7 @@ export default {
     },
     claimDataDeposit(amount) {
       const historyPayments = {
-        name: 'Пополнение',
+        name1: 'Пополнение',
         data: this.getCurrentFormattedDate(),
         amount: amount
       }