adata-ui 2.1.41-beta.11 → 2.1.41-beta.13

package/components/modals/id/IdRegistrationModal.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import AIconLock from '#adata-ui/icons/lock.vue'
+import AIconMail from '#adata-ui/icons/mail.vue'
 import { PAGES } from '#adata-ui/shared/constans/pages'
+import { apiErrorMessage } from '#adata-ui/utils/apiErrorMessage'
+import { PASSWORD_MIN_LENGTH, PASSWORD_RULES } from '#adata-ui/utils/passwordRules'
 import * as z from 'zod'
-import { useUrls } from '#adata-ui/composables/useUrls'
 
 const { $toast } = useNuxtApp()
 const route = useRoute()
@@ -30,18 +34,28 @@ const form = reactive<RegistrationForm>({
 const agreement = ref(false)
 const loading = ref(false)
 
+const uid = useId()
+const emailFieldId = `register-email-${uid}`
+const passwordFieldId = `register-password-${uid}`
+const confirmationFieldId = `register-password-confirmation-${uid}`
+const agreementLabelId = `register-agreement-${uid}`
+
+/* Правила берутся из PASSWORD_RULES — того же источника, что и чеклист
+   <a-password-requirements>, поэтому валидация и подсказки не расходятся. */
+function passwordField() {
+  return PASSWORD_RULES.reduce(
+    (schema: z.ZodType<string>, rule) => schema.refine(
+      rule.test,
+      t(`modals.id.register.errors.${rule.key}`, { length: PASSWORD_MIN_LENGTH }),
+    ),
+    z.string().nonempty(t('error.required')) as z.ZodType<string>,
+  )
+}
+
 const registerSchema = z.object({
   email: z.string().nonempty(t('error.required')).email(t('error.email')),
-  password: z
-    .string()
-    .nonempty(t('error.required'))
-    .min(8, t('modals.id.register.errors.low_security', { length: 8 }))
-    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('modals.id.register.errors.low_security')),
-  password_confirmation: z
-    .string()
-    .nonempty(t('error.required'))
-    .min(8, t('modals.id.register.errors.low_security', { length: 8 }))
-    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('modals.id.register.errors.low_security')),
+  password: passwordField(),
+  password_confirmation: passwordField(),
 }).refine(
   data => data.password === data.password_confirmation,
   {
@@ -71,7 +85,7 @@ async function onSubmit() {
 
   try {
     loading.value = true
-    const { success, message } = await $fetch(`${removeTrailingSlash(authApiURL)}/v2/register`, {
+    const { success } = await $fetch(`${removeTrailingSlash(authApiURL)}/v2/register`, {
       method: 'POST',
       credentials: 'include',
       headers: {
@@ -88,7 +102,7 @@ async function onSubmit() {
     }
   }
   catch (error) {
-    $toast.error(error.data.message.email || error.data.message.password[0])
+    $toast.error(apiErrorMessage(error, t('error.validation')))
   }
   finally {
     loading.value = false
@@ -99,10 +113,6 @@ if (route.query.url) {
   redirectUrl.value = route.query.url as string
 }
 
-// onMounted(() => {
-//   v$.value.$touch();
-// });
-
 function getUrl() {
   return navigateTo(locale.value !== 'ru'
     ? landing + localePath('/') + PAGES.userAgreement
@@ -114,12 +124,6 @@ function getUrl() {
   })
 }
 
-function handleEnter(event: KeyboardEvent) {
-  if (event.key === 'Enter') {
-    onSubmit()
-  }
-}
-
 function onLogin() {
   registrationModal.value = false
   loginModal.value = true
@@ -133,83 +137,121 @@ watch(registrationModal, (value) => {
     agreement.value = false
   }
 })
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
 </script>
 
 <template>
+  <!-- Enter отправляет форму нативно: документного keyup-слушателя здесь быть не должно,
+       иначе один Enter даёт два запроса -->
   <form
-    class="flex flex-col items-stretch gap-5"
+    class="flex flex-col gap-6 p-6"
     novalidate
     @submit.prevent="onSubmit"
   >
-    <h2 class="text-center text-h2">
-      {{ t('modals.id.register.title') }}
-    </h2>
-    <p class="text-center text-body-md">
-      {{ t('modals.id.register.subtitle') }}
-    </p>
-    <a-input-standard
-      v-model="form.email"
-      :label="t('modals.id.register.labels.email')"
-      :error="getError('email')"
-      type="email"
-    />
-
-    <a-input-password
-      v-model="form.password"
-      :label="t('modals.id.register.labels.password')"
-      :error="getError('password')"
-    />
-
-    <a-input-password
-      v-model="form.password_confirmation"
-      :label="t('modals.id.register.labels.password_confirmation')"
-      :error="getError('password_confirmation')"
-    />
-    <a-alert color="blue">
-      {{ t('modals.id.register.alert') }}
-      <template #icon>
-        <a-icon-info-circle />
-      </template>
-    </a-alert>
-    <a-checkbox
-      v-model="agreement"
-      side="right"
-      name="confirm-agreement"
-    >
-      <i18n-t keypath="modals.id.register.agreement.text">
-        <template #link>
-          <nuxt-link-locale
-            class="text-brand"
-            @click="getUrl"
-          >
-            {{ t('modals.id.register.agreement.link') }}
-          </nuxt-link-locale>
-        </template>
-      </i18n-t>
-    </a-checkbox>
-    <a-button
-      :disabled="!agreement"
-      :loading="loading"
-    >
-      {{ t('modals.id.register.continue') }}
-    </a-button>
-    <p class="text-center text-body-md">
-      {{ t('modals.id.register.haveAcc') }}
-    </p>
-    <a-button
-      type="button"
-      view="outline"
-      @click="onLogin"
-    >
-      {{ t('modals.id.register.enter') }}
-    </a-button>
+    <div class="flex flex-col gap-1">
+      <h2 class="text-center text-h2 text-primary">
+        {{ t('modals.id.register.title') }}
+      </h2>
+      <p class="text-center text-body-md text-secondary">
+        {{ t('modals.id.register.subtitle') }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1.5">
+        <label :for="emailFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.register.labels.email') }}
+        </label>
+        <a-input-v2
+          v-model="form.email"
+          :input-id="emailFieldId"
+          type="email"
+          size="lg"
+          autocomplete="email"
+          :start-icon="AIconMail"
+          :placeholder="t('modals.id.register.placeholders.email')"
+          :error="getError('email')"
+        />
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <label :for="passwordFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.register.labels.password') }}
+        </label>
+        <a-input-password-v2
+          v-model="form.password"
+          :input-id="passwordFieldId"
+          size="lg"
+          autocomplete="new-password"
+          :start-icon="AIconLock"
+          :placeholder="t('modals.id.register.placeholders.password')"
+          :error="getError('password')"
+        />
+      </div>
+
+      <a-password-requirements :password="form.password" />
+
+      <div class="flex flex-col gap-1.5">
+        <label :for="confirmationFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.register.labels.password_confirmation') }}
+        </label>
+        <a-input-password-v2
+          v-model="form.password_confirmation"
+          :input-id="confirmationFieldId"
+          size="lg"
+          autocomplete="new-password"
+          :start-icon="AIconLock"
+          :placeholder="t('modals.id.register.placeholders.password_confirmation')"
+          :error="getError('password_confirmation')"
+        />
+      </div>
+
+      <!-- Чекбокс и текст рядом, а не вложенно: корень ACheckboxV2 — <button>, а ссылка
+           внутри кнопки невалидна; подпись привязана через aria-labelledby -->
+      <div class="flex items-start gap-2">
+        <a-checkbox-v2
+          v-model="agreement"
+          name="confirm-agreement"
+          :aria-labelledby="agreementLabelId"
+        />
+        <p :id="agreementLabelId" class="text-body-md text-primary">
+          <i18n-t keypath="modals.id.register.agreement.text">
+            <template #link>
+              <nuxt-link-locale
+                class="text-link underline transition-colors hover:text-link-hover"
+                @click="getUrl"
+              >
+                {{ t('modals.id.register.agreement.link') }}
+              </nuxt-link-locale>
+            </template>
+          </i18n-t>
+        </p>
+      </div>
+
+      <a-button-v2
+        type="submit"
+        size="lg"
+        block
+        :disabled="!agreement"
+        :loading="loading"
+      >
+        {{ t('modals.id.register.continue') }}
+      </a-button-v2>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <span class="h-px w-full bg-(--border-color-default)" />
+      <p class="text-center text-body-md text-secondary">
+        {{ t('modals.id.register.haveAcc') }}
+      </p>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        block
+        @click="onLogin"
+      >
+        {{ t('modals.id.register.enter') }}
+      </a-button-v2>
+    </div>
   </form>
 </template>

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { apiErrorMessage } from '#adata-ui/utils/apiErrorMessage'
 
 const { $toast } = useNuxtApp()
 const { t, locale } = useI18n()
@@ -73,16 +74,13 @@ async function onResend() {
     })
     resetOtp()
     runTimer()
-    isResendLoading.value = false
   }
   catch (error) {
-    $toast.error(error.data.message)
+    $toast.error(apiErrorMessage(error, t('error.validation')))
   }
-}
-
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onConfirm()
+  finally {
+    // без finally сбой resend оставлял кнопку заблокированной навсегда
+    isResendLoading.value = false
   }
 }
 
@@ -98,17 +96,12 @@ function runTimer() {
 
 onMounted(() => {
   runTimer()
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
 })
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-4 text-center">
-    <h2 class="text-h2">
+  <div class="flex flex-col items-center gap-4 p-6 text-center">
+    <h2 class="text-h2 text-primary">
       {{ t('modals.id.resetPasswordOtp.title') }}
     </h2>
 
@@ -116,24 +109,22 @@ onBeforeUnmount(() => {
     <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
     <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
 
-    <div class="text-body-md">
+    <div class="text-body-md text-secondary">
       <p class="mb-1">
         {{ t('modals.id.resetPasswordOtp.content') }}
       </p>
 
-      <div v-if="timer > 0" class="text-h2">
+      <div v-if="timer > 0" class="text-h2 text-primary">
         {{ timer }} {{ t('modals.id.resetPasswordOtp.seconds') }}
       </div>
       <button
         v-else
-        class="text-brand flex items-center gap-2 mx-auto"
-        @click="onResend"
+        type="button"
+        class="mx-auto flex items-center gap-2 text-body-md text-link transition-colors hover:text-link-hover"
         :disabled="isResendLoading"
+        @click="onResend"
       >
-        <a-icon-loader-circle
-          v-if="isResendLoading"
-          class="animate-spin"
-        ></a-icon-loader-circle>
+        <a-icon-loader-circle v-if="isResendLoading" class="size-4 animate-spin" />
         <span>{{ t('actions.resend') }}</span>
       </button>
     </div>
@@ -144,16 +135,14 @@ onBeforeUnmount(() => {
       @on-completed="onConfirm"
     />
 
-    <a-button
-      block
+    <a-button-v2
       view="outline"
+      color="gray"
+      size="lg"
+      block
       @click="onClose"
     >
       {{ t('actions.close') }}
-    </a-button>
+    </a-button-v2>
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/components/modals/id/IdTwoFactorModal.vue

@@ -12,7 +12,7 @@ const { pk } = useUrls()
 const { twoFactorModal, intermediateState } = useIdModals()
 
 const authApiURL = commonAuth.authApiURL
-const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/;
+const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/
 
 const otp = ref(['', '', '', '', '', ''])
 const otpFormatted = computed(() => {
@@ -62,11 +62,12 @@ async function onConfirm() {
     $toast.success(t('login.successfully'))
     twoFactorModal.value = false
 
-    const path = window.location.pathname;
+    const path = window.location.pathname
 
     if (regex.test(path)) {
-      navigateTo(`${pk}/company/${path.split("/")[4]}`, { external: true })
-    } else {
+      navigateTo(`${pk}/company/${path.split('/')[4]}`, { external: true })
+    }
+    else {
       window.location.reload()
     }
   }
@@ -78,27 +79,13 @@ function onClose() {
   showError.value = false
   twoFactorModal.value = false
 }
-
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onConfirm()
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-4">
-    <p class="text-h2 text-center">
+  <div class="flex flex-col items-center gap-4 p-6">
+    <h2 class="text-center text-h2 text-primary">
       {{ t('modals.id.twoFactor.title') }}
-    </p>
+    </h2>
     <!-- осознанно константный: пара light/dark-ассетов, тема переключается dark:-классами -->
     <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
     <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
@@ -107,20 +94,18 @@ onBeforeUnmount(() => {
       v-model:error="showError"
       @on-completed="onConfirm"
     />
-    <p class="text-body-md text-center">
+    <p class="text-center text-body-md text-secondary">
       {{ t('modals.id.twoFactor.code') }}
     </p>
 
-    <a-button
-      class="w-full"
+    <a-button-v2
       view="outline"
+      color="gray"
+      size="lg"
+      block
       @click="onClose"
     >
       {{ t('actions.close') }}
-    </a-button>
+    </a-button-v2>
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/components/navigation/header/ProductMenu.vue

@@ -2,20 +2,14 @@
 import NavList from '#adata-ui/components/navigation/header/NavList.vue'
 import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
 import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import { useUrls } from '#adata-ui/composables/useUrls'
-import AIconArrowRight from '#adata-ui/icons/arrow/arrow-right.vue'
-import AIconDownloadRounded from '#adata-ui/icons/download-rounded.vue'
-import { PAGES } from '#adata-ui/shared/constans/pages'
 
 defineProps<{ url?: string }>()
 defineEmits(['outerClick', 'mouseOver'])
 
-const urls = useUrls()
-const { t, locale } = useI18n()
 const modules = useHeaderNavigationLinks()
 const { isActiveModule } = useActiveNavigation()
 
-const COLUMN_KEYS = [['edo'], ['pk'], ['compliance', 'fines'], ['tenders', 'analytics'], ['fea', 'work']]
+const COLUMN_KEYS = [['edo', 'export'], ['pk'], ['compliance', 'fines'], ['tenders', 'analytics'], ['fea', 'work']]
 const catalogColumns = computed(() =>
   COLUMN_KEYS.map(keys =>
     keys
@@ -23,14 +17,6 @@ const catalogColumns = computed(() =>
       .filter((module): module is NonNullable<typeof module> => module !== undefined),
   ),
 )
-
-function handleExportClick() {
-  navigateToLocalizedPage({
-    locale: locale.value,
-    projectUrl: urls.pk,
-    path: PAGES.pk.unload,
-  })
-}
 </script>
 
 <template>
@@ -57,41 +43,7 @@ function handleExportClick() {
                 :icon="module.icon"
                 :badge="module.is_new"
                 :data-test-id="module.data_attribute"
-              >
-                <template
-                  v-if="module.key === 'edo'"
-                  #bottom
-                >
-                  <!-- осознанно константный: белый текст на брендовой solid-карточке bg-brand -->
-                  <div class="mt-4 flex flex-col gap-4 rounded-lg bg-brand p-4 normal-case text-white">
-                    <div class="flex items-center gap-3">
-                      <span class="rounded-[10px] bg-main p-[10px]">
-                        <a-icon-download-rounded class="size-5 text-brand" />
-                      </span>
-                      <span class="font-semibold text-white">
-                        {{ t('header.products.exportCard.title') }}
-                      </span>
-                    </div>
-
-                    <div class="text-body-sm text-white">
-                      {{ t('header.products.exportCard.subTitle') }}
-                    </div>
-
-                    <a-button-v2
-                      view="soft"
-                      class="!h-9 w-fit !bg-main text-brand"
-                      size="sm"
-                      :icon="AIconArrowRight"
-                      icon-right
-                      @click="handleExportClick"
-                    >
-                      <span class="text-body-md-strong">
-                        {{ t('header.products.exportCard.receive') }}
-                      </span>
-                    </a-button-v2>
-                  </div>
-                </template>
-              </nav-list>
+              />
             </div>
           </div>
         </div>

package/composables/useHeaderNavigationLinks.ts

@@ -14,6 +14,7 @@ import CheckSb from '#adata-ui/icons/check-sb.vue'
 import IconCheckCircle from '#adata-ui/icons/check/check-circle.vue'
 import IconCompany from '#adata-ui/icons/company.vue'
 import IconDollar from '#adata-ui/icons/currency/currency-dollar.vue'
+import AIconDownloadRounded from '#adata-ui/icons/download-rounded.vue'
 import IconFilePen from '#adata-ui/icons/file-pen.vue'
 import IconFileStack from '#adata-ui/icons/file-stack.vue'
 import IconGitCompare from '#adata-ui/icons/git-compare.vue'
@@ -305,6 +306,21 @@ export function useHeaderNavigationLinks() {
           },
         ],
       },
+      {
+        key: 'export',
+        name: t('header.products.export.label'),
+        link: buildLocalizedUrl(locale, urls.pk, PAGES.pk.unload),
+        icon: AIconDownloadRounded,
+        data_attribute: 'navigation-menu-export-block',
+        items: [
+          {
+            title: t('header.products.export.items.clients.title'),
+            subtitle: t('header.products.export.items.clients.subtitle'),
+            icon: IconSearch,
+            to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.unload),
+          },
+        ],
+      },
       {
         key: 'compliance',
         is_new: true,

package/icons/file/file-scan.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.6 7.8V6.6M13.6 6.6C13.6003 6.41007 13.563 6.22195 13.4903 6.04648C13.4176 5.87101 13.3109 5.71166 13.1764 5.5776L11.0236 3.4248C10.8895 3.2899 10.73 3.1829 10.5543 3.10999C10.3786 3.03707 10.1902 2.99969 10 3M13.6 6.6H10.6C10.4409 6.6 10.2883 6.53679 10.1757 6.42427C10.0632 6.31174 10 6.15913 10 6V3M10 3H5.2C4.88174 3 4.57652 3.12643 4.35147 3.35147C4.12643 3.57652 4 3.88174 4 4.2V13.8C4 14.1183 4.12643 14.4235 4.35147 14.6485C4.57652 14.8736 4.88174 15 5.2 15H7.81M11.2 10.2C10.8817 10.2 10.5765 10.3264 10.3515 10.5515C10.1264 10.7765 10 11.0817 10 11.4M11.2 15C10.8817 15 10.5765 14.8736 10.3515 14.6485C10.1264 14.4235 10 14.1183 10 13.8M13.6 10.2C13.9183 10.2 14.2235 10.3264 14.4485 10.5515C14.6736 10.7765 14.8 11.0817 14.8 11.4M13.6 15C13.9183 15 14.2235 14.8736 14.4485 14.6485C14.6736 14.4235 14.8 14.1183 14.8 13.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template>

package/icons/google.vue

@@ -1,41 +1,19 @@
-
-
 <script lang="ts" setup>
 </script>
 
 <template>
+  <!-- осознанно константные: фирменные цвета логотипа Google -->
   <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
   >
-    <rect
-      x="0.5"
-      y="0.5"
-      width="31"
-      height="31"
-      rx="5.5"
-      stroke="#9DA3AC"
-    />
-    <path
-      d="M26.501 16.2332C26.501 15.3699 26.4296 14.7399 26.2748 14.0865H16.2153V17.9832H22.12C22.001 18.9515 21.3582 20.4099 19.9296 21.3898L19.9096 21.5203L23.0902 23.935L23.3106 23.9565C25.3343 22.1249 26.501 19.4298 26.501 16.2332Z"
-      fill="#4285F4"
-    />
-    <path
-      d="M16.2147 26.5C19.1075 26.5 21.5361 25.5666 23.3099 23.9566L19.929 21.3898C19.0242 22.0082 17.8099 22.4399 16.2147 22.4399C13.3814 22.4399 10.9767 20.6082 10.1195 18.0765L9.99382 18.087L6.68656 20.5954L6.64331 20.7132C8.40519 24.1432 12.0242 26.5 16.2147 26.5Z"
-      fill="#34A853"
-    />
-    <path
-      d="M10.12 18.0766C9.89379 17.4233 9.76289 16.7232 9.76289 15.9999C9.76289 15.2765 9.89379 14.5766 10.1081 13.9232L10.1021 13.7841L6.75337 11.2355L6.64381 11.2865C5.91765 12.7099 5.50098 14.3083 5.50098 15.9999C5.50098 17.6916 5.91765 19.2899 6.64381 20.7132L10.12 18.0766Z"
-      fill="#FBBC05"
-    />
-    <path
-      d="M16.2148 9.55997C18.2267 9.55997 19.5838 10.4116 20.3576 11.1233L23.3814 8.23C21.5243 6.53834 19.1076 5.5 16.2148 5.5C12.0243 5.5 8.4052 7.85665 6.64331 11.2866L10.1076 13.9233C10.9767 11.3917 13.3815 9.55997 16.2148 9.55997Z"
-      fill="#EB4335"
-    />
+    <path fill="#4285F4" d="M23.52 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.46a5.52 5.52 0 0 1-2.4 3.62v3.01h3.88c2.27-2.09 3.58-5.17 3.58-8.82Z" />
+    <path fill="#34A853" d="M12 24c3.24 0 5.96-1.08 7.94-2.91l-3.88-3.01c-1.08.72-2.45 1.15-4.06 1.15-3.12 0-5.77-2.11-6.71-4.95H1.28v3.1A12 12 0 0 0 12 24Z" />
+    <path fill="#FBBC05" d="M5.29 14.28a7.2 7.2 0 0 1 0-4.56v-3.1H1.28a12 12 0 0 0 0 10.76l4.01-3.1Z" />
+    <path fill="#EA4335" d="M12 4.77c1.76 0 3.35.61 4.6 1.8l3.44-3.44C17.95 1.19 15.24 0 12 0A12 12 0 0 0 1.28 6.62l4.01 3.1C6.23 6.88 8.88 4.77 12 4.77Z" />
   </svg>
 </template>
-
-<style scoped></style>