adata-ui 0.1.49 → 0.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.49",
+  "version": "0.1.52",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -15,6 +15,5 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

package/src/assets/style.scss

@@ -1 +1 @@
-@import "text_field";
+@import "text_field";

package/src/components/Header/Header.vue

@@ -1,85 +1,93 @@
 <template>
-  <header class="a-header" :class="[{'bordered': isBordered}, {'fixed': isFixed}]">
-    <div class="container">
-      <div class="a-header__left">
-        <a class="logo" :href="main[mode]">
-          <svg class="adata-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 48">
-            <path d="M62.926 38.22v-28h10.316c10.342 0 15.511 4.55 15.508 13.652 0 4.36-1.41 7.843-4.232 10.448-2.822 2.605-6.58 3.907-11.276 3.904l-10.316-.004zm6.56-22.868v17.752h3.248c2.839 0 5.069-.82 6.69-2.46 1.622-1.64 2.43-3.873 2.424-6.7 0-2.667-.8-4.767-2.403-6.3-1.602-1.533-3.853-2.297-6.752-2.292h-3.206zM118.5 38.22h-7.131l-2.079-6.228H98.958l-2.079 6.228h-7.093l10.598-28h7.775l10.341 28zm-10.723-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.162c-.07.83-.24 1.649-.508 2.44l-3.168 9.492h7.451zm31.833-11.796h-8.316V38.22h-6.557V15.352h-8.274v-5.136h23.147v5.136zM166 38.22h-7.143l-2.079-6.228h-10.349l-2.05 6.228h-7.106l10.598-28h7.776l10.353 28zm-10.719-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.163c-.069.83-.239 1.649-.507 2.44l-3.168 9.492h7.451zM24.553 15.252h-.163c-.069.83-.24 1.649-.507 2.44L20.715 27.2h7.45l-3.126-9.412a12.02 12.02 0 01-.486-2.536z"></path>
-            <path d="M44.905 0H4.99a5.091 5.091 0 00-3.528 1.406A4.71 4.71 0 000 4.8v38.4a4.71 4.71 0 001.461 3.394A5.091 5.091 0 004.99 48h39.916a5.091 5.091 0 003.528-1.406 4.71 4.71 0 001.462-3.394V4.8a4.71 4.71 0 00-1.462-3.394A5.091 5.091 0 0044.905 0zM31.737 38.26l-2.079-6.232H19.305l-2.05 6.232h-7.097l10.598-28h7.776l10.353 28h-7.148z"></path>
-          </svg>
-        </a>
-        <div class="menu" v-if="subheaderItems.length > 0">
-          <a v-for="(item, index) in subheaderItems"
-               :key="index"
-               class="menu__wrapper menu__items"
-               :class="{active: item.key === activeTabKey}"
-               :href="item[mode]"
-          >
-            {{ item.name }}
-          </a>
-        </div>
-      </div>
-      <div class="a-header__right">
-        <slot name="chooseCountry"></slot>
-        <Profile
-            v-bind:profileDropDown="profileDropDown"
-            :mode="mode"
-            :isAuthenticated="isAuthenticated"
-            :requestCount="requestCount"
-            :daysRemaining="daysRemaining"
-            :email="email"
-            :loginUrl="loginUrl"
-            :activeTabKey="activeTabKey"
-            @showBalanceModal="(val) => { $emit('showBalanceModal', val) }"
-            @setShowModal="(val) => { $emit('setShowModal', val) }"
-            @logout="$emit('logout')"
-            @setIsReplenishModal="(val) => { $emit('setIsReplenishModal', val) }"
-        />
-        <div class="menu_mobile--switcher" @click="changeValue">
-          <!-- icon_hamburger -->
-          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4h20v2H2V4zm0 14h20v2H2v-2zm0-7h20v2H2v-2z"
-                  fill="#2C3E50"></path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <MobileToggle v-slot="{ animationClass }">
-      <div
-          class="menu_mobile"
-          :class="animationClass"
-          v-show="subheaderItems.length > 0 && isOpen"
-      >
-        <div @click.stop="changeValue" class="mobile-table-head">
-          <!-- close_hamburger -->
-          <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.414 18.142L18.556 4l1.415 1.414L5.828 19.556l-1.414-1.414z"
-                  fill="#2C3E50"></path>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.414 4l14.142 14.142-1.414 1.414L4 5.414 5.414 4z"
-                  fill="#2C3E50"></path>
-          </svg>
-        </div>
-        <a
-            v-for="(item, index) in subheaderItems"
-            :key="index"
-            class="menu_mobile-wrapper"
-            :class="{'active-burger-tab': item.key === activeTabKey}"
-            :href="item[mode]"
-        >
-          {{ item.name }}
-        </a>
-      </div>
-    </MobileToggle>
-  </header>
+ <header :class="{'sticky': isSticky}">
+   <InfoHeader
+       :requestCount="requestCount"
+       :daysRemaining="daysRemaining"
+       :isAuthenticated="isAuthenticated"
+   />
+   <div class="header" :class="{'bordered': isBordered}">
+     <div class="container">
+       <div class="header__left">
+         <a class="logo" :href="main[mode]">
+           <svg class="adata-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 48">
+             <path d="M62.926 38.22v-28h10.316c10.342 0 15.511 4.55 15.508 13.652 0 4.36-1.41 7.843-4.232 10.448-2.822 2.605-6.58 3.907-11.276 3.904l-10.316-.004zm6.56-22.868v17.752h3.248c2.839 0 5.069-.82 6.69-2.46 1.622-1.64 2.43-3.873 2.424-6.7 0-2.667-.8-4.767-2.403-6.3-1.602-1.533-3.853-2.297-6.752-2.292h-3.206zM118.5 38.22h-7.131l-2.079-6.228H98.958l-2.079 6.228h-7.093l10.598-28h7.775l10.341 28zm-10.723-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.162c-.07.83-.24 1.649-.508 2.44l-3.168 9.492h7.451zm31.833-11.796h-8.316V38.22h-6.557V15.352h-8.274v-5.136h23.147v5.136zM166 38.22h-7.143l-2.079-6.228h-10.349l-2.05 6.228h-7.106l10.598-28h7.776l10.353 28zm-10.719-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.163c-.069.83-.239 1.649-.507 2.44l-3.168 9.492h7.451zM24.553 15.252h-.163c-.069.83-.24 1.649-.507 2.44L20.715 27.2h7.45l-3.126-9.412a12.02 12.02 0 01-.486-2.536z"></path>
+             <path d="M44.905 0H4.99a5.091 5.091 0 00-3.528 1.406A4.71 4.71 0 000 4.8v38.4a4.71 4.71 0 001.461 3.394A5.091 5.091 0 004.99 48h39.916a5.091 5.091 0 003.528-1.406 4.71 4.71 0 001.462-3.394V4.8a4.71 4.71 0 00-1.462-3.394A5.091 5.091 0 0044.905 0zM31.737 38.26l-2.079-6.232H19.305l-2.05 6.232h-7.097l10.598-28h7.776l10.353 28h-7.148z"></path>
+           </svg>
+         </a>
+         <div class="menu" v-if="subheaderItems.length > 0">
+           <a v-for="(item, index) in subheaderItems"
+              :key="index"
+              class="menu__wrapper menu__items"
+              :class="{active: item.key === activeTabKey}"
+              :href="item[mode]"
+           >
+             {{ item.name }}
+           </a>
+         </div>
+       </div>
+       <div class="header__right">
+         <slot name="chooseCountry"></slot>
+         <Profile
+             v-bind:profileDropDown="profileDropDown"
+             :mode="mode"
+             :isAuthenticated="isAuthenticated"
+             :email="email"
+             :loginUrl="loginUrl"
+             :activeTabKey="activeTabKey"
+             @showBalanceModal="(val) => { $emit('showBalanceModal', val) }"
+             @setShowModal="(val) => { $emit('setShowModal', val) }"
+             @logout="$emit('logout')"
+             @setIsReplenishModal="(val) => { $emit('setIsReplenishModal', val) }"
+         />
+         <div class="menu_mobile--switcher" @click="changeValue">
+           <!-- icon_hamburger -->
+           <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+             <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4h20v2H2V4zm0 14h20v2H2v-2zm0-7h20v2H2v-2z"
+                   fill="#2C3E50"></path>
+           </svg>
+         </div>
+       </div>
+     </div>
+     <MobileToggle v-slot="{ animationClass }">
+       <div
+           class="menu_mobile"
+           :class="animationClass"
+           v-show="subheaderItems.length > 0 && isOpen"
+       >
+         <div @click.stop="changeValue" class="mobile-table-head">
+           <!-- close_hamburger -->
+           <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+             <path fill-rule="evenodd" clip-rule="evenodd" d="M4.414 18.142L18.556 4l1.415 1.414L5.828 19.556l-1.414-1.414z"
+                   fill="#2C3E50"></path>
+             <path fill-rule="evenodd" clip-rule="evenodd" d="M5.414 4l14.142 14.142-1.414 1.414L4 5.414 5.414 4z"
+                   fill="#2C3E50"></path>
+           </svg>
+         </div>
+         <a
+             v-for="(item, index) in subheaderItems"
+             :key="index"
+             class="menu_mobile-wrapper"
+             :class="{'active-burger-tab': item.key === activeTabKey}"
+             :href="item[mode]"
+         >
+           {{ item.name }}
+         </a>
+       </div>
+     </MobileToggle>
+   </div>
+ </header>
 </template>
 
 <script>
-import Profile from "./Profile";
 import { profileDropDown } from "../../configs/profileDropDown"
+
+import Profile from "./Profile";
 import MobileToggle from "../transitions/VerticalMobileToggle";
+import InfoHeader from "@/components/Header/InfoHeader";
 
 export default {
   components: {
+    InfoHeader,
     Profile,
     MobileToggle,
   },
@@ -99,16 +107,16 @@ export default {
       type: Boolean,
       default: false
     },
-    isFixed: {
+    isSticky: {
       type: Boolean,
       default: false
     },
     requestCount: {
-      type: Number,
+      type: [String, Number],
       default: null
     },
     daysRemaining: {
-      type: String,
+      type: [String, Number],
       default: null
     },
     email: {
@@ -216,8 +224,13 @@ export default {
   padding: 0;
 }
 
-.a-header {
-  width: 100vw;
+.sticky {
+  position: sticky;
+  z-index: 1000;
+  top: 0;
+}
+
+.header {
   background: #ffffff;
   max-height: 62px;
   height: 62px;
@@ -232,13 +245,6 @@ export default {
     border-bottom: 1px solid #2C3E5026;
   }
 
-  &.fixed {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-  }
-
   & > .container {
     width: 100%;
     display: flex;

package/src/components/Header/InfoHeader.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="info">
+    <transition name="fade">
+      <div class="info-notification" v-if="showNotification">
+        <div class="container">
+          <div class="info-notification__wrapper">
+            <div class="info-notification__content">
+              <svg id="note-svg" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8" cy="8" r="6" stroke="white"/>
+                <path d="M9.6613 11.1367L9.54952 11.5936C9.21418 11.726 8.94631 11.8267 8.74685 11.896C8.54716 11.9654 8.31514 12 8.05079 12C7.64483 12 7.32906 11.9006 7.10386 11.703C6.87865 11.5047 6.76601 11.2534 6.76601 10.9485C6.76601 10.8305 6.77418 10.7091 6.79117 10.5854C6.80831 10.4616 6.83556 10.3222 6.87284 10.1663L7.29192 8.68297C7.32921 8.54094 7.3609 8.40636 7.38628 8.27909C7.41202 8.15261 7.42442 8.03624 7.42442 7.93149C7.42442 7.74206 7.3852 7.60956 7.30712 7.53507C7.22904 7.46079 7.08005 7.42307 6.85886 7.42307C6.75052 7.42307 6.63917 7.44042 6.52567 7.47398C6.41167 7.50768 6.31423 7.54023 6.23242 7.57049L6.34449 7.11319C6.61902 7.00141 6.88144 6.90569 7.13246 6.82625C7.38348 6.74659 7.62066 6.70672 7.84501 6.70672C8.24818 6.70672 8.55928 6.80416 8.77775 6.99904C8.99622 7.19406 9.10542 7.44688 9.10542 7.75841C9.10542 7.82287 9.09825 7.93644 9.08283 8.09877C9.06777 8.26145 9.03974 8.41051 8.99887 8.5461L8.58158 10.0235C8.54738 10.1421 8.51662 10.2778 8.48988 10.4304C8.46227 10.5821 8.44908 10.6979 8.44908 10.7757C8.44908 10.9718 8.49282 11.1058 8.5805 11.177C8.66884 11.2482 8.82098 11.2836 9.03709 11.2836C9.13854 11.2836 9.25398 11.2656 9.38225 11.2302C9.51016 11.1949 9.60344 11.1638 9.6613 11.1367ZM9.76713 4.93424C9.76713 5.19164 9.67012 5.41147 9.47517 5.59223C9.28072 5.77363 9.04641 5.8644 8.7723 5.8644C8.49733 5.8644 8.26245 5.77363 8.06577 5.59223C7.86946 5.4114 7.77109 5.19164 7.77109 4.93424C7.77109 4.67734 7.86946 4.45716 8.06577 4.27411C8.26209 4.09134 8.4974 4 8.7723 4C9.04634 4 9.28072 4.09156 9.47517 4.27411C9.67026 4.45716 9.76713 4.67742 9.76713 4.93424Z" fill="white"/>
+              </svg>
+              <span>{{systemMessage}}</span>
+            </div>
+            <div class="info-notification__close" @click="closeNotification">
+              <svg id="close-notification" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2.99902 2.99951L12.9997 13.0002" stroke="white" stroke-linecap="round"/>
+                <path d="M13 2.99951L2.99934 13.0002" stroke="white" stroke-linecap="round"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <div class="info-header" v-if="!showNotification">
+      <div class="container">
+        <div class="info-header__list">
+          <div class="info-header__item">
+            <div class="info-header__item-elem first-elem">
+              <svg id="rate" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="2" y="4" width="12" height="7.50184" stroke="#2C3E50" stroke-linejoin="round"/>
+                <path d="M7 5.99902H9" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M7 7.50586H9" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M8 9.99902L8 7.50563" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <p>Курс валют</p>
+            </div>
+            <div class="info-header__item-elem">
+              <div class="info-header__inner-item">
+                <svg id="dollar" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M5.59863 9.40234C5.59863 9.01497 5.47559 8.69596 5.22949 8.44531C4.9834 8.1901 4.57324 7.96224 3.99902 7.76172C3.4248 7.55664 2.97819 7.36751 2.65918 7.19434C1.59733 6.62467 1.06641 5.78158 1.06641 4.66504C1.06641 3.90853 1.29655 3.28646 1.75684 2.79883C2.21712 2.3112 2.84147 2.02181 3.62988 1.93066V0.44043H4.72363V1.94434C5.5166 2.05827 6.12956 2.39551 6.5625 2.95605C6.99544 3.51204 7.21191 4.23665 7.21191 5.12988H5.55762C5.55762 4.55566 5.42773 4.10449 5.16797 3.77637C4.91276 3.44368 4.56413 3.27734 4.12207 3.27734C3.68457 3.27734 3.34277 3.39583 3.09668 3.63281C2.85059 3.86979 2.72754 4.20931 2.72754 4.65137C2.72754 5.04785 2.84831 5.36686 3.08984 5.6084C3.33594 5.84538 3.75065 6.07096 4.33398 6.28516C4.91732 6.49935 5.37533 6.69759 5.70801 6.87988C6.04069 7.06217 6.32096 7.27181 6.54883 7.50879C6.77669 7.74121 6.95215 8.01009 7.0752 8.31543C7.19824 8.62077 7.25977 8.97852 7.25977 9.38867C7.25977 10.1589 7.02279 10.7832 6.54883 11.2617C6.07943 11.7402 5.42318 12.0228 4.58008 12.1094V13.4424H3.49316V12.1162C2.59082 12.016 1.89583 11.6924 1.4082 11.1455C0.92513 10.5986 0.683594 9.87402 0.683594 8.97168H2.34473C2.34473 9.5459 2.48828 9.99023 2.77539 10.3047C3.06706 10.6191 3.47721 10.7764 4.00586 10.7764C4.52539 10.7764 4.9196 10.651 5.18848 10.4004C5.46191 10.1497 5.59863 9.81706 5.59863 9.40234Z" fill="#2C3E50"/>
+                </svg>
+                <p v-if="currency">{{ currency.sell }}</p>
+<!--                <svg id="arrow-up" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">-->
+<!--                  <path d="M3 9.5L8 6L13 9.5" stroke="#00B92D" stroke-linecap="round" stroke-linejoin="round"/>-->
+<!--                </svg>-->
+              </div>
+              <div class="info-header__inner-item">
+                <svg id="dollar" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M5.59863 9.40234C5.59863 9.01497 5.47559 8.69596 5.22949 8.44531C4.9834 8.1901 4.57324 7.96224 3.99902 7.76172C3.4248 7.55664 2.97819 7.36751 2.65918 7.19434C1.59733 6.62467 1.06641 5.78158 1.06641 4.66504C1.06641 3.90853 1.29655 3.28646 1.75684 2.79883C2.21712 2.3112 2.84147 2.02181 3.62988 1.93066V0.44043H4.72363V1.94434C5.5166 2.05827 6.12956 2.39551 6.5625 2.95605C6.99544 3.51204 7.21191 4.23665 7.21191 5.12988H5.55762C5.55762 4.55566 5.42773 4.10449 5.16797 3.77637C4.91276 3.44368 4.56413 3.27734 4.12207 3.27734C3.68457 3.27734 3.34277 3.39583 3.09668 3.63281C2.85059 3.86979 2.72754 4.20931 2.72754 4.65137C2.72754 5.04785 2.84831 5.36686 3.08984 5.6084C3.33594 5.84538 3.75065 6.07096 4.33398 6.28516C4.91732 6.49935 5.37533 6.69759 5.70801 6.87988C6.04069 7.06217 6.32096 7.27181 6.54883 7.50879C6.77669 7.74121 6.95215 8.01009 7.0752 8.31543C7.19824 8.62077 7.25977 8.97852 7.25977 9.38867C7.25977 10.1589 7.02279 10.7832 6.54883 11.2617C6.07943 11.7402 5.42318 12.0228 4.58008 12.1094V13.4424H3.49316V12.1162C2.59082 12.016 1.89583 11.6924 1.4082 11.1455C0.92513 10.5986 0.683594 9.87402 0.683594 8.97168H2.34473C2.34473 9.5459 2.48828 9.99023 2.77539 10.3047C3.06706 10.6191 3.47721 10.7764 4.00586 10.7764C4.52539 10.7764 4.9196 10.651 5.18848 10.4004C5.46191 10.1497 5.59863 9.81706 5.59863 9.40234Z" fill="#2C3E50"/>
+                </svg>
+                <p v-if="currency">{{ currency.buy }}</p>
+              </div>
+<!--              <div class="info-header&#45;&#45;inner-item">-->
+<!--                 <svg id="ruble" width="10" height="14" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">-->
+<!--                    <path d="M5.49869 7.85079H3.66439V9.16671H2.22884V7.85079H1.06104V6.69437H2.22884V6.08484H1.06104V4.92842H2.22884V0.872437H5.40185C6.31711 0.872437 7.04818 1.11169 7.59505 1.59021C8.14193 2.06492 8.41536 2.69725 8.41536 3.48718C8.41536 4.29231 8.15522 4.92463 7.63493 5.38416C7.11464 5.83988 6.39117 6.07345 5.46452 6.08484H3.66439V6.69437H5.49869V7.85079ZM3.66439 4.92842H5.37907C5.89556 4.92842 6.29053 4.8088 6.56396 4.56954C6.8374 4.33028 6.97412 3.97329 6.97412 3.49857C6.97412 3.07323 6.8393 2.72573 6.56966 2.4561C6.30382 2.18646 5.93544 2.04594 5.46452 2.03455H3.66439V4.92842Z" fill="#2C3E50"/>-->
+<!--                 </svg>-->
+<!--                <p>5.92</p>-->
+<!--              <svg id="arrow-down" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">-->
+<!--                <path d="M3 6.5L8 10L13 6.5" stroke="#FF2E43" stroke-linecap="round" stroke-linejoin="round"/>-->
+<!--              </svg>-->
+<!--              </div>-->
+            </div>
+          </div>
+<!--            <div class="info-header__item">-->
+<!--              <div class="info-header__item-elem first-elem">-->
+<!--            <svg id="sun" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">-->
+<!--              <path d="M8.99995 12.7777C11.0864 12.7777 12.7777 11.0864 12.7777 8.99995C12.7777 6.91354 11.0864 5.22217 8.99995 5.22217C6.91354 5.22217 5.22217 6.91354 5.22217 8.99995C5.22217 11.0864 6.91354 12.7777 8.99995 12.7777Z" stroke="#2C3E50" stroke-miterlimit="10"/>-->
+<!--              <path d="M9 1V3.22222" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
+<!--              <path d="M9 14.7778V17.0001" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
+<!--              <path d="M17.0001 9H14.7778" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
+<!--              <path d="M3.22222 9H1" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
+<!--              <path d="M14.6669 3.33337L13.1113 4.88893" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
+<!--              <path d="M4.88905 13.1111L3.3335 14.6666" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
+<!--              <path d="M14.6669 14.6666L13.1113 13.1111" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
+<!--              <path d="M4.88905 4.88893L3.3335 3.33337" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
+<!--            </svg>-->
+<!--                <p>Погода</p>-->
+<!--              </div>-->
+<!--              <div class="info-header__item-elem">-->
+<!--                <div class="info-header&#45;&#45;inner-item weather">-->
+<!--                  <span>Алматы </span>-->
+<!--                  <p>+29 С</p>-->
+<!--                </div>-->
+<!--                <div class="info-header&#45;&#45;inner-item weather">-->
+<!--                  <span>Нур-Султан </span>-->
+<!--                  <p>+29 С</p>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--            </div>-->
+          <div v-if="isAuthenticated" class="info-header__item last-header-item">
+            <div class="info-header__item-elem">
+              <svg id="clock" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6.93821 13.2567C10.4279 13.2567 13.2568 10.4277 13.2568 6.93809C13.2568 3.44843 10.4279 0.619507 6.93821 0.619507C3.44855 0.619507 0.619629 3.44843 0.619629 6.93809C0.619629 10.4277 3.44855 13.2567 6.93821 13.2567Z" stroke="#2C3E50" stroke-miterlimit="100"/>
+                <path d="M6.93799 3.46899V6.93802L11.1504 9.292" stroke="#2C3E50" stroke-miterlimit="100" stroke-linecap="round"/>
+              </svg>
+              <div class="info-header__inner-item">
+                <p>Cуточный лимит запросов:
+                  <span>{{ requestCount }}</span>
+                </p>
+              </div>
+              <div class="info-header__inner-item">
+                <p>остаток дней:
+                  <span>{{ daysRemaining }}</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "InfoHeader",
+  props: {
+    requestCount: {
+      type: [String, Number],
+      default: null
+    },
+    daysRemaining: {
+      type: [String, Number],
+      default: null
+    },
+    isAuthenticated: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      showNotification: false,
+      systemMessage: null,
+      currency: null,
+      timer: null,
+    }
+  },
+  created() {
+    this.fetchCurrency();
+  },
+  mounted() {
+    this.timer = setTimeout(this.fetchNotification, 3000);
+  },
+  watch: {
+    showNotification() {
+      if(!this.showNotification) {
+        clearTimeout(this.timer);
+      }
+    }
+  },
+  methods: {
+    async fetchNotification() {
+      try {
+        const response = await fetch('https://users.adtdev.kz/api/v1/system-messages/active-list/?module_name=counterparty');
+        const { data } = await response.json();
+
+        if (data.details.length) {
+          this.systemMessage = data.details[0].message;
+          this.showNotification = true;
+        }
+
+      } catch(e) {
+        console.log(e.message)
+      }
+    },
+    async fetchCurrency() {
+      try {
+        const response = await fetch('https://users.adtdev.kz/api/v1/information/currency');
+        const { data } = await response.json();
+
+        if(data.USD) {
+          this.currency = data.USD;
+        }
+
+      } catch(e) {
+        console.log(e.message)
+      }
+    },
+    async fetchWeather() {
+      try {
+        const response = await fetch('https://users.adtdev.kz/api/v1/information/weather');
+        const result = await response.json();
+
+        if(result) {
+          console.log(result);
+        }
+
+      } catch(e) {
+        console.log(e.message)
+      }
+    },
+    closeNotification() {
+      this.showNotification = !this.showNotification
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.info {
+  position: relative;
+  @media (min-width: 850px) {
+    height: 30px;
+  }
+  &-notification {
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+    top: 0;
+    color: #FFFFFF;
+    background: #007AFF;
+    padding: 7px 0;
+    font-size: 14px;
+    @media(max-width: 850px) {
+      position: relative;
+      height: 30px;
+    }
+    &__wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &__content {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    &__close {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+  &-header {
+    background: #FFFFFF;
+    padding: 7px 0;
+    border-bottom: 0.5px solid rgba(189, 199, 206, 0.5);
+    @media (max-width: 850px) {
+      display: none;
+    }
+    &__list {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &__item {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      &-elem {
+        display: flex;
+        align-items: center;
+      }
+      .first-elem {
+        font-weight: 700;
+        font-size: 10px;
+        gap: 5px;
+      }
+    }
+    &__inner-item {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      &:after {
+        content: "";
+        background: #2C3E50;
+        width: 1px;
+        height: 10px;
+        margin: 0 10px;
+        transform: rotate(20deg);
+      }
+      &:last-child:after {
+        content: none;
+      }
+      &.weather {
+        span {
+          font-weight: 600;
+          font-size: 10px;
+          padding-right: 3px;
+        }
+      }
+    }
+    .last-header-item {
+      .info-header__inner-item:nth-child(2) {
+        margin-left: 5px;
+      }
+      span {
+        font-weight: 700;
+        color: #2c3e50;
+      }
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  top: -30px;
+}
+</style>

package/src/components/Header/Profile.vue

@@ -2,12 +2,6 @@
   <div class="profile" :class="{ active: active }">
     <div v-click-outside="() => {active = false}">
       <div class="profile__inner">
-        <div class="requests__link" v-if="requestCount !== null && isAuthenticated">
-          Суточный лимит запросов:
-          <span>
-              {{ requestCount }} {{ (daysRemaining === null || daysRemaining === '-') ? '' : `(${daysRemaining})` }}
-            </span>
-        </div>
         <div class="profile__item" @click="active = !active">
           <div v-show="isAuthenticated" class="profile__item-link">
             <span class="desktop">{{ email }}</span>
@@ -256,14 +250,6 @@ export default {
       type: Boolean,
       default: false
     },
-    requestCount: {
-      type: Number,
-      default: null
-    },
-    daysRemaining: {
-      type: String,
-      default: null
-    },
     email: {
       type: String,
       default: ""

package/src/components/MailTo/MailTo.vue

@@ -6,7 +6,72 @@
       <a class="mail__link" href="mailto:info@adata.kz">info@adata.kz</a>
     </p>
     <div class="mail__img-wrapper">
-      <img class="mail__img" src="../../assets/images/mail.png" alt="mail" />
+      <svg
+        width="126"
+        height="120"
+        viewBox="0 0 126 120"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="63" cy="60" r="60" fill="#BDC7CE" fill-opacity="0.15" />
+        <g clip-path="url(#clip0_2878_18164)">
+          <path
+            d="M103.97 17.2671L5.64253 38.4363C2.12229 39.1942 -0.117059 42.6623 0.640828 46.1825L13.8374 107.478C14.5953 110.998 18.0634 113.238 21.5837 112.48L119.911 91.3105C123.431 90.5526 125.67 87.0845 124.912 83.5643L111.716 22.2687C110.958 18.7485 107.49 16.5092 103.97 17.2671Z"
+            fill="white"
+            stroke="#9DA3AC"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            opacity="0.6"
+            d="M61.5601 77.2102C56.4501 78.3102 52.2901 72.8102 43.4901 67.3502C25.6601 56.3002 9.6001 45.6602 9.6001 45.6602L11.9101 56.6602L49.0601 80.2402C55.0601 83.3502 65.0601 81.7402 70.3101 75.0202C69.1401 74.7002 67.7001 75.8902 61.5601 77.2102Z"
+            fill="#BDC7CE"
+            fill-opacity="0.4"
+          />
+          <path
+            opacity="0.6"
+            d="M28.77 97.0891C27.7509 97.3094 26.6984 97.3266 25.6726 97.1397C24.6468 96.9528 23.6679 96.5654 22.792 95.9998C21.9161 95.4341 21.1604 94.7013 20.568 93.8432C19.9757 92.9851 19.5584 92.0186 19.34 90.9991L9.41003 44.8891L3.28002 41.5391C2.42002 41.7291 0.0200244 43.2791 0.940024 47.5391L13.55 106.069C13.7685 107.088 14.1854 108.053 14.7771 108.91C15.3688 109.768 16.1236 110.5 16.9984 111.066C17.8732 111.631 18.8508 112.019 19.8754 112.206C20.9001 112.394 21.9516 112.378 22.97 112.159L118.53 91.5891C120.58 91.1313 122.367 89.8858 123.507 88.1215C124.646 86.3572 125.046 84.2157 124.62 82.1591L123.44 76.6891L28.77 97.0891Z"
+            fill="#BDC7CE"
+            fill-opacity="0.4"
+          />
+          <path
+            d="M2.46973 40.9509L55.2897 75.1109C56.7268 76.0398 58.3331 76.6758 60.0164 76.9825C61.6998 77.2892 63.4272 77.2606 65.0995 76.8983C66.7718 76.536 68.3561 75.8471 69.7616 74.8711C71.1671 73.8951 72.366 72.6513 73.2897 71.2109L107.19 18.2109"
+            stroke="#9DA3AC"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M82.5601 56.9102L122.68 88.5802"
+            stroke="#9DA3AC"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M39.2497 65.2207L17.4297 111.241"
+            stroke="#9DA3AC"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M107.69 30.8C114.538 30.8 120.09 25.2483 120.09 18.4C120.09 11.5517 114.538 6 107.69 6C100.842 6 95.29 11.5517 95.29 18.4C95.29 25.2483 100.842 30.8 107.69 30.8Z"
+            fill="#E83949"
+          />
+          <path
+            d="M110.67 24.1891L108.6 24.6391L106.82 16.3391C106.6 15.3391 106.46 14.5591 106.38 13.9691C106.27 14.1391 106.14 14.3291 105.98 14.5391C105.82 14.7491 105.28 15.4391 104.36 16.5391L103.04 15.4491L106.18 11.6691L107.9 11.2891L110.67 24.1891Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2878_18164">
+            <rect
+              width="125.56"
+              height="107.12"
+              fill="white"
+              transform="translate(0 6)"
+            />
+          </clipPath>
+        </defs>
+      </svg>
     </div>
     <p class="mail__text">
       Мы обязательно ответим вам <br />