adata-ui 0.3.64 → 0.3.66

package/src/components/Header/ProfileMenu.vue

@@ -1,276 +1,276 @@
-<template>
-  <div class="profile-menu">
-    <div class="profile-menu__header">
-      <div class="tariff">
-        <div class="tariff__label">
-          Тариф
-        </div>
-        <div class="tariff__value">
-          <div class="tariff__text">
-            {{ rate || "Базовый" }}
-          </div>
-          <div class="tariff__badge">
-            Подключен
-          </div>
-        </div>
-      </div>
-
-      <div class="balance">
-        <div class="balance__wrapper">
-          <div class="balance__title">Текущий баланс:</div>
-          <div class="balance__badge">{{ balance || 0 }} ₸</div>
-        </div>
-        <a-button size="extra_sm" variant="blue_outlined" :url="links.balance[mode]">Пополнить</a-button>
-      </div>
-    </div>
-
-    <div class="profile-menu__main">
-      <div class="profile-links">
-        <a :href="links.profile[mode]" onclick="`return false`" class="profile-link">
-          <div class="profile-link__icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="12" cy="7.5" r="4.5" stroke="#2C3E50" stroke-width="2"/>
-              <path
-                  d="M20 21C20 21.5523 20.4477 22 21 22C21.5523 22 22 21.5523 22 21H20ZM2 21C2 21.5523 2.44772 22 3 22C3.55228 22 4 21.5523 4 21H2ZM12 13C16.4183 13 20 16.5817 20 21H22C22 15.4772 17.5228 11 12 11V13ZM4 21C4 16.5817 7.58172 13 12 13V11C6.47715 11 2 15.4772 2 21H4Z"
-                  fill="#2C3E50"/>
-            </svg>
-          </div>
-          <div class="profile-link__text">Личный кабинет</div>
-        </a>
-        <a :href="links.tenders[mode]" onclick="`return false`" class="profile-link">
-          <div class="profile-link__icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                  d="M20.083 15.2001L21.285 15.9211C21.3591 15.9655 21.4205 16.0283 21.4631 16.1035C21.5058 16.1787 21.5282 16.2636 21.5282 16.3501C21.5282 16.4365 21.5058 16.5214 21.4631 16.5966C21.4205 16.6718 21.3591 16.7347 21.285 16.7791L12.515 22.0411C12.3594 22.1345 12.1814 22.1839 12 22.1839C11.8185 22.1839 11.6405 22.1345 11.485 22.0411L2.71498 16.7791C2.64082 16.7347 2.57944 16.6718 2.53682 16.5966C2.4942 16.5214 2.4718 16.4365 2.4718 16.3501C2.4718 16.2636 2.4942 16.1787 2.53682 16.1035C2.57944 16.0283 2.64082 15.9655 2.71498 15.9211L3.91698 15.2001L12 20.0501L20.083 15.2001ZM20.083 10.5001L21.285 11.2211C21.3591 11.2655 21.4205 11.3283 21.4631 11.4035C21.5058 11.4787 21.5282 11.5636 21.5282 11.6501C21.5282 11.7365 21.5058 11.8214 21.4631 11.8966C21.4205 11.9718 21.3591 12.0347 21.285 12.0791L12 17.6501L2.71498 12.0791C2.64082 12.0347 2.57944 11.9718 2.53682 11.8966C2.4942 11.8214 2.4718 11.7365 2.4718 11.6501C2.4718 11.5636 2.4942 11.4787 2.53682 11.4035C2.57944 11.3283 2.64082 11.2655 2.71498 11.2211L3.91698 10.5001L12 15.3501L20.083 10.5001ZM12.514 1.30907L21.285 6.57107C21.3591 6.61546 21.4205 6.67832 21.4631 6.75351C21.5058 6.82869 21.5282 6.91364 21.5282 7.00007C21.5282 7.0865 21.5058 7.17145 21.4631 7.24663C21.4205 7.32182 21.3591 7.38468 21.285 7.42907L12 13.0001L2.71498 7.42907C2.64082 7.38468 2.57944 7.32182 2.53682 7.24663C2.4942 7.17145 2.4718 7.0865 2.4718 7.00007C2.4718 6.91364 2.4942 6.82869 2.53682 6.75351C2.57944 6.67832 2.64082 6.61546 2.71498 6.57107L11.485 1.30907C11.6405 1.21563 11.8185 1.16626 12 1.16626C12.1814 1.16626 12.3594 1.21563 12.515 1.30907H12.514ZM12 3.33207L5.88698 7.00007L12 10.6681L18.113 7.00007L12 3.33207Z"
-                  fill="#2C3E50"/>
-            </svg>
-          </div>
-          <div class="profile-link__text">Тендеры Шаблоны</div>
-        </a>
-        <a :href="links.work[mode]" onclick="`return false`" class="profile-link">
-          <div class="profile-link__icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M7 5V2C7 1.73478 7.10536 1.48043 7.29289 1.29289C7.48043 1.10536 7.73478 1 8 1H16C16.2652 1 16.5196 1.10536 16.7071 1.29289C16.8946 1.48043 17 1.73478 17 2V5H21C21.2652 5 21.5196 5.10536 21.7071 5.29289C21.8946 5.48043 22 5.73478 22 6V20C22 20.2652 21.8946 20.5196 21.7071 20.7071C21.5196 20.8946 21.2652 21 21 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V6C2 5.73478 2.10536 5.48043 2.29289 5.29289C2.48043 5.10536 2.73478 5 3 5H7ZM20 13H4V19H20V13ZM20 7H4V11H7V9H9V11H15V9H17V11H20V7ZM9 3V5H15V3H9Z" fill="#2C3E50"/>
-            </svg>
-          </div>
-          <div class="profile-link__text">Профиль Работа</div>
-        </a>
-        <a :href="links.favourites[mode] + `${tab ? '?tab=' + tab : ''}`" onclick="`return false`" class="profile-link" target="_blank">
-          <div class="profile-link__icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V22.143C20.0001 22.2324 19.9763 22.3202 19.9309 22.3973C19.8855 22.4743 19.8204 22.5378 19.7421 22.5811C19.6639 22.6244 19.5755 22.6459 19.4861 22.6434C19.3968 22.641 19.3097 22.6146 19.234 22.567L12 18.03L4.766 22.566C4.69037 22.6135 4.60339 22.6399 4.5141 22.6424C4.42482 22.6449 4.33649 22.6235 4.2583 22.5803C4.1801 22.5371 4.11491 22.4738 4.06948 22.3969C4.02406 22.32 4.00007 22.2323 4 22.143V3C4 2.73478 4.10536 2.48043 4.29289 2.29289C4.48043 2.10536 4.73478 2 5 2ZM18 4H6V19.432L12 15.671L18 19.432V4Z" fill="#2C3E50"/>
-            </svg>
-          </div>
-          <div class="profile-link__text">Избранные</div>
-        </a>
-      </div>
-
-      <div class="exit" @click="$emit('logout')">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M4 18H6V20H18V4H6V6H4V3C4 2.73478 4.10536 2.48043 4.29289 2.29289C4.48043 2.10536 4.73478 2 5 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V21C20 21.2652 19.8946 21.5196 19.7071 21.7071C19.5196 21.8946 19.2652 22 19 22H5C4.73478 22 4.48043 21.8946 4.29289 21.7071C4.10536 21.5196 4 21.2652 4 21V18ZM6 11H13V13H6V16L1 12L6 8V11Z" fill="white"/>
-        </svg>
-        <div class="exit__text">Выход</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    mode: {
-      type: String,
-      required: true,
-    },
-    rate: {
-      type: String,
-      required: true
-    },
-    balance: {
-      type: String,
-      required: true
-    },
-    tab: {
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      links: {
-        balance: {
-          'prod': 'https://adata.kz/profile?modal=show',
-          'dev': 'https://adtdev.kz/profile?modal=show',
-          'staging': 'https://adada.kz/profile?modal=show',
-        },
-        profile: {
-          'prod': 'https://adata.kz/profile',
-          'dev': 'https://adtdev.kz/profile',
-          'staging': 'https://adada.kz/profile',
-        },
-        tenders: {
-          'prod': 'https://tender.adata.kz/profile/search-profile',
-          'dev': 'https://tender.adtdev.kz/profile/search-profile',
-          'staging': 'https://tender.adada.kz/profile/search-profile',
-        },
-        work: {
-          'prod': 'https://work.adata.kz/profile/account',
-          'dev': 'https://work.adtdev.kz/profile/account' ,
-          'staging': 'https://work.adada.kz/profile/account',
-        },
-        favourites: {
-          'prod': 'https://adata.kz/favourites',
-          'dev': 'https://adtdev.kz/favourites' ,
-          'staging': 'https://adada.kz/favourites',
-        },
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.profile-menu {
-  width: 400px;
-  background: #fff;
-  box-shadow: 0 4px 8px rgba(157, 163, 172, 0.4);
-  border-radius: 2px;
-
-  &__header {
-    padding: 16px 16px 16px 32px;
-    background: rgba(189, 199, 206, 0.3);
-  }
-
-  &__main {
-    background: #fff;
-    padding: 16px;
-  }
-}
-
-.tariff {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 16px;
-
-  &__label {
-    font-weight: 500;
-    font-size: 14px;
-    color: #71757A;
-  }
-
-  &__value {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    font-weight: 600;
-    font-size: 16px;
-    color: #2C3E50;
-  }
-
-  &__badge {
-    padding: 4px;
-    background: #4CAF50;
-    border: 0.5px solid #4CAF50;
-    border-radius: 2px;
-
-    font-weight: 400;
-    font-size: 10px;
-    color: #FFFFFF;
-  }
-}
-
-.balance {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &__wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  &__title {
-    font-weight: 400;
-    font-size: 12px;
-    color: #2C3E50;
-  }
-
-  &__badge {
-    padding: 4px 10px;
-    background: #007AFF;
-    border-radius: 100px;
-    font-weight: 400;
-    font-size: 12px;
-    color: #FFFFFF;
-  }
-}
-
-.profile-links {
-  display: flex;
-  flex-direction: column;
-}
-
-.profile-link {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  padding: 10px 16px;
-  border-radius: 2px;
-  transition: .3s;
-
-  font-weight: 500;
-  font-size: 14px;
-  color: #2C3E50;
-
-  &:hover {
-    background: rgba(0, 122, 255, 0.12);
-  }
-}
-
-.exit {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 16px;
-  padding-left: 16px;
-  background: #007AFF;
-  height: 40px;
-  border-radius: 0 0 2px 2px;
-  cursor: pointer;
-  gap: 10px;
-
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: #fff;
-
-  &:hover {
-    background: #9da3ac;
-    color: #fff;
-  }
-
-  &:hover svg {
-    stroke: #fff;
-    background: #9da3ac;
-  }
-
-  svg {
-    margin-right: 8px;
-    background: #007AFF;
-    fill: none !important;
-    transition: all 0s;
-  }
-
-  &:active {
-    background: #0055bb;
-    color: #fff;
-  }
-
-  &:active svg {
-    stroke: #fff;
-    background: #0055bb;
-  }
-}
+<template>
+  <div class="profile-menu">
+    <div class="profile-menu__header">
+      <div class="tariff">
+        <div class="tariff__label">
+          Тариф
+        </div>
+        <div class="tariff__value">
+          <div class="tariff__text">
+            {{ rate || "Базовый" }}
+          </div>
+          <div class="tariff__badge">
+            Подключен
+          </div>
+        </div>
+      </div>
+
+      <div class="balance">
+        <div class="balance__wrapper">
+          <div class="balance__title">Текущий баланс:</div>
+          <div class="balance__badge">{{ balance || 0 }} ₸</div>
+        </div>
+        <a-button size="extra_sm" variant="blue_outlined" :url="links.balance[mode]">Пополнить</a-button>
+      </div>
+    </div>
+
+    <div class="profile-menu__main">
+      <div class="profile-links">
+        <a :href="links.profile[mode]" onclick="`return false`" class="profile-link">
+          <div class="profile-link__icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="12" cy="7.5" r="4.5" stroke="#2C3E50" stroke-width="2"/>
+              <path
+                  d="M20 21C20 21.5523 20.4477 22 21 22C21.5523 22 22 21.5523 22 21H20ZM2 21C2 21.5523 2.44772 22 3 22C3.55228 22 4 21.5523 4 21H2ZM12 13C16.4183 13 20 16.5817 20 21H22C22 15.4772 17.5228 11 12 11V13ZM4 21C4 16.5817 7.58172 13 12 13V11C6.47715 11 2 15.4772 2 21H4Z"
+                  fill="#2C3E50"/>
+            </svg>
+          </div>
+          <div class="profile-link__text">Личный кабинет</div>
+        </a>
+        <a :href="links.tenders[mode]" onclick="`return false`" class="profile-link">
+          <div class="profile-link__icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                  d="M20.083 15.2001L21.285 15.9211C21.3591 15.9655 21.4205 16.0283 21.4631 16.1035C21.5058 16.1787 21.5282 16.2636 21.5282 16.3501C21.5282 16.4365 21.5058 16.5214 21.4631 16.5966C21.4205 16.6718 21.3591 16.7347 21.285 16.7791L12.515 22.0411C12.3594 22.1345 12.1814 22.1839 12 22.1839C11.8185 22.1839 11.6405 22.1345 11.485 22.0411L2.71498 16.7791C2.64082 16.7347 2.57944 16.6718 2.53682 16.5966C2.4942 16.5214 2.4718 16.4365 2.4718 16.3501C2.4718 16.2636 2.4942 16.1787 2.53682 16.1035C2.57944 16.0283 2.64082 15.9655 2.71498 15.9211L3.91698 15.2001L12 20.0501L20.083 15.2001ZM20.083 10.5001L21.285 11.2211C21.3591 11.2655 21.4205 11.3283 21.4631 11.4035C21.5058 11.4787 21.5282 11.5636 21.5282 11.6501C21.5282 11.7365 21.5058 11.8214 21.4631 11.8966C21.4205 11.9718 21.3591 12.0347 21.285 12.0791L12 17.6501L2.71498 12.0791C2.64082 12.0347 2.57944 11.9718 2.53682 11.8966C2.4942 11.8214 2.4718 11.7365 2.4718 11.6501C2.4718 11.5636 2.4942 11.4787 2.53682 11.4035C2.57944 11.3283 2.64082 11.2655 2.71498 11.2211L3.91698 10.5001L12 15.3501L20.083 10.5001ZM12.514 1.30907L21.285 6.57107C21.3591 6.61546 21.4205 6.67832 21.4631 6.75351C21.5058 6.82869 21.5282 6.91364 21.5282 7.00007C21.5282 7.0865 21.5058 7.17145 21.4631 7.24663C21.4205 7.32182 21.3591 7.38468 21.285 7.42907L12 13.0001L2.71498 7.42907C2.64082 7.38468 2.57944 7.32182 2.53682 7.24663C2.4942 7.17145 2.4718 7.0865 2.4718 7.00007C2.4718 6.91364 2.4942 6.82869 2.53682 6.75351C2.57944 6.67832 2.64082 6.61546 2.71498 6.57107L11.485 1.30907C11.6405 1.21563 11.8185 1.16626 12 1.16626C12.1814 1.16626 12.3594 1.21563 12.515 1.30907H12.514ZM12 3.33207L5.88698 7.00007L12 10.6681L18.113 7.00007L12 3.33207Z"
+                  fill="#2C3E50"/>
+            </svg>
+          </div>
+          <div class="profile-link__text">Тендеры Шаблоны</div>
+        </a>
+        <a :href="links.work[mode]" onclick="`return false`" class="profile-link">
+          <div class="profile-link__icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M7 5V2C7 1.73478 7.10536 1.48043 7.29289 1.29289C7.48043 1.10536 7.73478 1 8 1H16C16.2652 1 16.5196 1.10536 16.7071 1.29289C16.8946 1.48043 17 1.73478 17 2V5H21C21.2652 5 21.5196 5.10536 21.7071 5.29289C21.8946 5.48043 22 5.73478 22 6V20C22 20.2652 21.8946 20.5196 21.7071 20.7071C21.5196 20.8946 21.2652 21 21 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V6C2 5.73478 2.10536 5.48043 2.29289 5.29289C2.48043 5.10536 2.73478 5 3 5H7ZM20 13H4V19H20V13ZM20 7H4V11H7V9H9V11H15V9H17V11H20V7ZM9 3V5H15V3H9Z" fill="#2C3E50"/>
+            </svg>
+          </div>
+          <div class="profile-link__text">Профиль Работа</div>
+        </a>
+        <a :href="links.favourites[mode] + `${tab ? '?tab=' + tab : ''}`" onclick="`return false`" class="profile-link" target="_blank">
+          <div class="profile-link__icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V22.143C20.0001 22.2324 19.9763 22.3202 19.9309 22.3973C19.8855 22.4743 19.8204 22.5378 19.7421 22.5811C19.6639 22.6244 19.5755 22.6459 19.4861 22.6434C19.3968 22.641 19.3097 22.6146 19.234 22.567L12 18.03L4.766 22.566C4.69037 22.6135 4.60339 22.6399 4.5141 22.6424C4.42482 22.6449 4.33649 22.6235 4.2583 22.5803C4.1801 22.5371 4.11491 22.4738 4.06948 22.3969C4.02406 22.32 4.00007 22.2323 4 22.143V3C4 2.73478 4.10536 2.48043 4.29289 2.29289C4.48043 2.10536 4.73478 2 5 2ZM18 4H6V19.432L12 15.671L18 19.432V4Z" fill="#2C3E50"/>
+            </svg>
+          </div>
+          <div class="profile-link__text">Избранные</div>
+        </a>
+      </div>
+
+      <div class="exit" @click="$emit('logout')">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 18H6V20H18V4H6V6H4V3C4 2.73478 4.10536 2.48043 4.29289 2.29289C4.48043 2.10536 4.73478 2 5 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V21C20 21.2652 19.8946 21.5196 19.7071 21.7071C19.5196 21.8946 19.2652 22 19 22H5C4.73478 22 4.48043 21.8946 4.29289 21.7071C4.10536 21.5196 4 21.2652 4 21V18ZM6 11H13V13H6V16L1 12L6 8V11Z" fill="white"/>
+        </svg>
+        <div class="exit__text">Выход</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mode: {
+      type: String,
+      required: true,
+    },
+    rate: {
+      type: String,
+      required: true
+    },
+    balance: {
+      type: String,
+      required: true
+    },
+    tab: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      links: {
+        balance: {
+          'prod': 'https://adata.kz/profile?modal=show',
+          'dev': 'https://adtdev.kz/profile?modal=show',
+          'staging': 'https://adada.kz/profile?modal=show',
+        },
+        profile: {
+          'prod': 'https://adata.kz/profile',
+          'dev': 'https://adtdev.kz/profile',
+          'staging': 'https://adada.kz/profile',
+        },
+        tenders: {
+          'prod': 'https://tender.adata.kz/profile/search-profile',
+          'dev': 'https://tender.adtdev.kz/profile/search-profile',
+          'staging': 'https://tender.adada.kz/profile/search-profile',
+        },
+        work: {
+          'prod': 'https://work.adata.kz/profile/account',
+          'dev': 'https://work.adtdev.kz/profile/account' ,
+          'staging': 'https://work.adada.kz/profile/account',
+        },
+        favourites: {
+          'prod': 'https://adata.kz/favourites',
+          'dev': 'https://adtdev.kz/favourites' ,
+          'staging': 'https://adada.kz/favourites',
+        },
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.profile-menu {
+  width: 400px;
+  background: #fff;
+  box-shadow: 0 4px 8px rgba(157, 163, 172, 0.4);
+  border-radius: 2px;
+
+  &__header {
+    padding: 16px 16px 16px 32px;
+    background: rgba(189, 199, 206, 0.3);
+  }
+
+  &__main {
+    background: #fff;
+    padding: 16px;
+  }
+}
+
+.tariff {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 16px;
+
+  &__label {
+    font-weight: 500;
+    font-size: 14px;
+    color: #71757A;
+  }
+
+  &__value {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    font-weight: 600;
+    font-size: 16px;
+    color: #2C3E50;
+  }
+
+  &__badge {
+    padding: 4px;
+    background: #4CAF50;
+    border: 0.5px solid #4CAF50;
+    border-radius: 2px;
+
+    font-weight: 400;
+    font-size: 10px;
+    color: #FFFFFF;
+  }
+}
+
+.balance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__title {
+    font-weight: 400;
+    font-size: 12px;
+    color: #2C3E50;
+  }
+
+  &__badge {
+    padding: 4px 10px;
+    background: #007AFF;
+    border-radius: 100px;
+    font-weight: 400;
+    font-size: 12px;
+    color: #FFFFFF;
+  }
+}
+
+.profile-links {
+  display: flex;
+  flex-direction: column;
+}
+
+.profile-link {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 10px 16px;
+  border-radius: 2px;
+  transition: .3s;
+
+  font-weight: 500;
+  font-size: 14px;
+  color: #2C3E50;
+
+  &:hover {
+    background: rgba(0, 122, 255, 0.12);
+  }
+}
+
+.exit {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 16px;
+  padding-left: 16px;
+  background: #007AFF;
+  height: 40px;
+  border-radius: 0 0 2px 2px;
+  cursor: pointer;
+  gap: 10px;
+
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #fff;
+
+  &:hover {
+    background: #9da3ac;
+    color: #fff;
+  }
+
+  &:hover svg {
+    stroke: #fff;
+    background: #9da3ac;
+  }
+
+  svg {
+    margin-right: 8px;
+    background: #007AFF;
+    fill: none !important;
+    transition: all 0s;
+  }
+
+  &:active {
+    background: #0055bb;
+    color: #fff;
+  }
+
+  &:active svg {
+    stroke: #fff;
+    background: #0055bb;
+  }
+}
 </style>