FIX | fixed profile inputs (BANK-508)

src/containers/Logs/components/Data/style.scss

@@ -1,50 +1,50 @@
-.table-task td{
+.table-task td {
   // white-space: nowrap;
 }
 
-.table-task{
-  tr{
-    td:nth-child(2){
+.table-task {
+  tr {
+    td:nth-child(2) {
       padding: 0;
     }
-    th:nth-child(2){
+    th:nth-child(2) {
       padding: 0;
     }
   }
 }
 
-.row-cursor{
+.row-cursor {
   cursor: pointer;
 }
 
-.table-task tbody tr td:first-child{
+.table-task tbody tr td:first-child {
   text-align: center;
 }
 
-.table-task tbody tr td .lnr{
+.table-task tbody tr td .lnr {
   color: rgba(0, 0, 0, 0.65);
 }
 
-.table-task tbody tr td .fas{
+.table-task tbody tr td .fas {
   // color: rgba(0, 0, 0, 0.65);
 }
 
-.table-task tbody tr td .fa-star{
+.table-task tbody tr td .fa-star {
   // color: black;
   color: #f6da6e;
   cursor: pointer;
 }
 
-.table-row-red{
+.table-row-red {
   color: #ba0000;
 }
 
-.table-row-bold{
-  font-weight: bold
+.table-row-bold {
+  font-weight: bold;
 }
 
-.table-row-gray{
-  color: #c6c3c6
+.table-row-gray {
+  color: #c6c3c6;
 }
 
 .popup {
@@ -65,12 +65,11 @@
   -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-.fa-paperclip{
-
+.fa-paperclip {
 }
 
-.DataLogs{
-  .filter{
+.DataLogs {
+  .filter {
     display: flex;
     align-items: center;
     flex-direction: row;
@@ -79,35 +78,31 @@
     .logs__date_item {
       margin-right: 20px;
       width: 248px;
-      
 
       .ant-calendar-picker-icon {
         left: 221px;
         top: 30px;
-        color: #7A7A7A;
+        color: #7a7a7a;
       }
 
-      .ant-calendar-picker-clear{
-        background-color: #F8F8F8;
+      .ant-calendar-picker-clear {
+        background-color: #f8f8f8;
       }
 
       .ant-calendar-picker-input.ant-input {
         border-radius: 10px;
         height: 46px;
         padding-left: 15px !important;
-        
       }
-
     }
-    .form__form-group + .form__form-group{
+    .form__form-group + .form__form-group {
       margin-left: 20px;
-     
     }
     .form__form-group {
       max-width: 200px;
     }
-    button{
+    button {
       min-width: 200px;
     }
   }
-}
+}

src/containers/Profile/components/form-user/form-user.component.tsx

@@ -4,7 +4,12 @@ import _ from "lodash";
 import "./style.scss";
 import { DateField, InputPhone } from "@/components/Fields";
 import { Controller } from "react-hook-form";
-import { InputField, InputPasswordField, IUser, InputMaskField} from "@/shared";
+import {
+  InputField,
+  InputPasswordField,
+  IUser,
+  InputMaskField,
+} from "@/shared";
 import { useProfileForm } from "./hooks";
 
 import { loginValidate } from "./helpers/login-validation.helper";
@@ -216,10 +221,12 @@ export const FormUser: FC<IProps> = ({
       </div>
 
       <div className="col-md-3" style={{ paddingLeft: 0, marginTop: 30 }}>
-
-     
         {/* <ButtonToolbar className="form__button-toolbar"> */}
-        <Button color="primary" type="submit" className="icon btn save-profile__btn">
+        <Button
+          color="primary"
+          type="submit"
+          className="icon btn save-profile__btn"
+        >
           Зберегти
         </Button>
 

src/containers/Profile/components/form-user/style.scss

@@ -1,14 +1,13 @@
-.row-profile-user{
-    width: "100%"; 
-    margin: 0;
-    margin-top: 20px;
+.row-profile-user {
+  width: "100%";
+  margin: 0;
+  margin-top: 20px;
 
-    .ant-calendar-picker-icon {
-        content: url(/assets/img/icon-calendar-custom.svg);
-        left: 5px;
-        top: 27px;
-        height: 25px;
-        width: 25px;
-    }
-    
-}
+  .ant-calendar-picker-icon {
+    content: url(/assets/img/icon-calendar-custom.svg);
+    left: 5px;
+    top: 27px;
+    height: 25px;
+    width: 25px;
+  }
+}

src/scss/containers/profile.scss

@@ -1,6 +1,6 @@
 .profile {
-//  margin: 10px 10px;
-    margin-left: 10px;
+  //  margin: 10px 10px;
+  margin-left: 10px;
 }
 
 .profile__card {
@@ -10,10 +10,8 @@
   border-radius: 20px;
   padding: 0;
 
-  
-
   @include themify($themes) {
-    background-color: themed('colorBackground');
+    background-color: themed("colorBackground");
   }
 
   .nav-item {
@@ -29,27 +27,22 @@
   }
 
   .timeline__content {
-
     @include themify($themes) {
-      background: themed('colorBackgroundBody');
+      background: themed("colorBackgroundBody");
     }
 
     &:after {
-
       @include themify($themes) {
-        border-left-color: themed('colorBackgroundBody');
+        border-left-color: themed("colorBackgroundBody");
       }
     }
   }
 
   .timeline .timeline__item:nth-child(even) {
-
     .timeline__content {
-
       &:after {
-
         @include themify($themes) {
-          border-right-color: themed('colorBackgroundBody');
+          border-right-color: themed("colorBackgroundBody");
         }
       }
     }
@@ -57,8 +50,8 @@
 
   &--calendar {
     .rbc-toolbar {
-      -webkit-flex-wrap: nowrap!important;
-      flex-wrap: nowrap!important;
+      -webkit-flex-wrap: nowrap !important;
+      flex-wrap: nowrap !important;
     }
   }
 }
@@ -73,7 +66,7 @@
   flex-direction: column;
 
   @include themify($themes) {
-    border-bottom: 1px solid themed('colorBorder');
+    border-bottom: 1px solid themed("colorBorder");
   }
 
   @media screen and (max-width: 320px) {
@@ -103,13 +96,11 @@
   margin: 5px auto 20px;
   border-width: 1px solid;
   img {
-    
     height: 150px;
     width: auto;
   }
 
-  .avatar-img{
-    
+  .avatar-img {
     height: 100px;
     width: 100px;
     border-radius: 50%;
@@ -121,17 +112,16 @@
 .profile__stats {
   display: flex;
   justify-content: space-around;
-  
 }
 
 .profile__stat {
   text-align: center;
   padding-top: 15px;
   padding-bottom: 20px;
-  border-top: 0.5px solid #E5E5E5;
-  border-right: 0.5px solid #E5E5E5;
+  border-top: 0.5px solid #e5e5e5;
+  border-right: 0.5px solid #e5e5e5;
   width: 100%;
-   &:last-child {
+  &:last-child {
     border-right: none;
   }
 }
@@ -158,30 +148,28 @@
 .profile__data {
   padding: 5px;
   // width: calc(100% - 140px);
-  
 }
 
 .profile__name {
   font-weight: 500;
-  font-size: 22px;  
+  font-size: 22px;
   line-height: 22px;
   text-align: center;
   // text-transform: uppercase;
-  
 }
 
 .profile__work {
   font-weight: 400;
   margin-bottom: 30px;
   margin-top: 5px;
-  font-size: 14px;  
+  font-size: 14px;
   line-height: 14px;
   text-align: center;
 }
 
 .profile__data_card {
   width: 100%;
-  
+
   // color: #7f7f7f
 }
 
@@ -206,7 +194,6 @@
   flex-direction: column;
   padding: 15px 15px;
   // justify-content: center;
-  
 }
 
 .profile__action-status {
@@ -220,7 +207,6 @@
 .profile__action-btns {
   display: flex;
   justify-content: space-between;
-  
 }
 
 .profile__btn {
@@ -295,7 +281,7 @@
   margin: 0;
 
   @include themify($themes) {
-    border-bottom: 1px solid themed('colorBorder');
+    border-bottom: 1px solid themed("colorBorder");
   }
 
   span {
@@ -316,7 +302,7 @@
   position: relative;
 
   @include themify($themes) {
-    border-bottom: 1px solid themed('colorBorder');
+    border-bottom: 1px solid themed("colorBorder");
   }
 
   &:last-of-type {

src/scss/main.scss

@@ -247,11 +247,12 @@ span {
 }
 
 .ant-input {
-  // border: 1px solid rgba(162,162,162,.65) !important;
+  // border: 1px solid rgba(162, 162, 162, 0.65) !important;
   font-size: 13px !important;
   font-weight: 400 !important;
   margin: 10px 10px 10px 0px;
-  padding: 15px 20px !important;
+  padding-left: 15px !important;
+  // padding: 15px 20px !important;
 }
 
 .sidebar__link-icon {

src/shared/components/fields/input-mask-field.component.tsx

@@ -27,7 +27,7 @@ export const InputMaskField: FC<IProps> = ({
 }) => {
   return (
     <div className="input-mask-field" style={style}>
-      <span className="label">{label}</span>
+      <p className="input-label">{label}</p>
       <div className="input-container">
         <InputMask
           required={required}

src/shared/components/fields/styles.scss

@@ -1,4 +1,5 @@
 $bg-color: rgba(248, 248, 248, 1);
+$color-label: rgba(127, 127, 127, 1);
 $placeholder-color: rgba(198, 198, 198, 1);
 $border-radius: 10px;
 
@@ -29,19 +30,24 @@ $border-radius: 10px;
       font-size: 12px;
     }
   }
-
 }
 
 .input-mask-field {
   width: 100%;
   margin-bottom: 20px;
-  
+
+  .input-label {
+    font-size: 12px;
+    line-height: 1.7;
+    color: $color-label !important;
+  }
+
   .input-container {
     width: 100%;
     margin: 10px 10px 10px 0px;
   }
+
   input {
-    
     border: none !important;
     border-radius: $border-radius !important;
     font-size: 13px !important;
@@ -62,19 +68,19 @@ $border-radius: 10px;
 
     @extend .select-field_custom;
 
-    .ant-select-selection--multiple .ant-select-selection__choice{
+    .ant-select-selection--multiple .ant-select-selection__choice {
       display: flex;
       align-items: center;
       border: none !important;
-      background: rgba(235, 235, 235, 1) ;
-      margin: 5px; 
+      background: rgba(235, 235, 235, 1);
+      margin: 5px;
       border-radius: 5px;
 
-      &> div {
+      & > div {
         background: rgba(235, 235, 235, 1);
       }
     }
-    
+
     .open-select-btn {
       display: flex;
       align-items: center;
@@ -96,19 +102,19 @@ $border-radius: 10px;
 .select-field_custom {
   .select {
     width: 100%;
-    
-    div  {
+
+    div {
       background: $bg-color;
       overflow: hidden;
       border: none !important;
       border-radius: $border-radius !important;
 
-     & > div {
-      padding: 0 13px 0 13px;
+      & > div {
+        padding: 0 13px 0 13px;
       }
 
       span /* DOWN ARROW */ {
-        align-items:flex-end;
+        align-items: flex-end;
         color: rgba(122, 122, 122, 1);
       }
     }
@@ -137,11 +143,11 @@ $border-radius: 10px;
     font-size: 14px;
     padding: 0 13px 0 13px;
     -webkit-appearance: none;
-    
+
     &::placeholder {
       color: $placeholder-color;
     }
-    
+
     &:focus {
       outline: none !important;
     }
@@ -152,8 +158,8 @@ $border-radius: 10px;
   display: flex;
   align-items: center;
   position: relative;
-  
-  input[type=checkbox] {
+
+  input[type="checkbox"] {
     border-radius: 2px;
     -webkit-appearance: none;
     background: rgba(158, 39, 67, 0.1);