From bc11b878cbeddde8122ba44c999b7d481336f038 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 2 Apr 2026 14:21:17 +0700
Subject: [PATCH] Apply aqua daisyUI theme and refactor login primitives

---
 app/app.vue         |   2 +-
 app/pages/login.vue | 229 +++++++++++++++++++++-----------------------
 tailwind.config.ts  |  39 +++++++-
 3 files changed, 149 insertions(+), 121 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index d78783e..61d6682 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -4,7 +4,7 @@ const isLoginPage = computed(() => route.path === '/login');
 </script>
 
 <template>
-  <div class="lk-shell">
+  <div class="lk-shell" data-theme="aqua">
     <AppHeader v-if="!isLoginPage" />
     <main class="mx-auto w-full max-w-7xl p-4 md:p-6 lg:p-8">
       <NuxtPage />
diff --git a/app/pages/login.vue b/app/pages/login.vue
index 4f449ac..33548a4 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -31,10 +31,6 @@ const requestCodeMutation = useMutation(RequestLoginCodeDocument);
 const verifyCodeMutation = useMutation(VerifyLoginCodeDocument);
 const consumeLoginTokenMutation = useMutation(ConsumeLoginTokenDocument);
 
-const channelHint = computed(() => {
-  return 'Email адрес';
-});
-
 const telegramBotUrl = computed(() => config.public.telegramBotUrl || '');
 const maxBotUrl = computed(() => config.public.maxBotUrl || '');
 const selectedBotUrl = computed(() =>
@@ -137,131 +133,126 @@ onMounted(async () => {
 
 <template>
   <section class="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-3xl items-center py-8">
-    <div class="surface-card w-full rounded-[34px] p-5 md:p-8">
-      <div class="mb-5 text-center">
-        <h1 class="text-3xl font-extrabold text-[#0f2f20]">Вход в личный кабинет</h1>
-        <p class="mt-1 text-sm text-[#28543f]/80">
+    <div class="card w-full border border-base-300 bg-base-100 shadow-xl">
+      <div class="card-body p-5 md:p-8">
+        <div class="mb-4 text-center">
+          <h1 class="text-3xl font-extrabold">Вход в личный кабинет</h1>
+          <p class="mt-1 text-sm text-base-content/70">
           Email вход по коду. Telegram/Max вход через бота и временный токен.
-        </p>
-      </div>
-
-      <div class="mx-auto mb-5 flex w-full max-w-xl flex-wrap items-center justify-center gap-2">
-        <button
-          class="glass-capsule rounded-full px-4 py-2 text-sm font-semibold text-[#123824] transition hover:scale-[1.01]"
-          :class="{ 'bg-[#139957] text-white': channel === 'EMAIL' }"
-          @click="channel = 'EMAIL'"
-        >
-          Email
-        </button>
-        <button
-          class="glass-capsule rounded-full px-4 py-2 text-sm font-semibold text-[#123824] transition hover:scale-[1.01]"
-          :class="{ 'bg-[#139957] text-white': channel === 'TELEGRAM' }"
-          @click="channel = 'TELEGRAM'"
-        >
-          Telegram
-        </button>
-        <button
-          class="glass-capsule rounded-full px-4 py-2 text-sm font-semibold text-[#123824] transition hover:scale-[1.01]"
-          :class="{ 'bg-[#139957] text-white': channel === 'MAX' }"
-          @click="channel = 'MAX'"
-        >
-          Max
-        </button>
-      </div>
-
-      <div v-if="channel === 'EMAIL' && step === 'request'" class="space-y-3">
-        <label class="form-control">
-          <span class="label-text font-semibold text-[#194631]">{{ channelHint }}</span>
-          <input
-            v-model="destination"
-            type="text"
-            class="input input-bordered border-[#d0e8d8] bg-white/80"
-            :placeholder="channelHint"
-          >
-        </label>
-
-        <button
-          class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-          :disabled="requestCodeMutation.loading.value"
-          @click="requestCode"
-        >
-          {{ requestCodeMutation.loading.value ? 'Отправляем…' : 'Получить код' }}
-        </button>
-      </div>
-
-      <div v-else-if="channel === 'EMAIL'" class="space-y-3">
-        <div class="rounded-xl border border-[#d6ebde] bg-white/75 p-3 text-sm text-[#214735]">
-          Код отправлен на <span class="font-bold">{{ maskedDestination }}</span>.
-          Действителен до: <span class="font-bold">{{ expiresAt }}</span>.
+          </p>
         </div>
 
-        <label class="form-control">
-          <span class="label-text font-semibold text-[#194631]">Код подтверждения</span>
-          <input
-            v-model="code"
-            type="text"
-            maxlength="6"
-            class="input input-bordered border-[#d0e8d8] bg-white/80"
-            placeholder="123456"
-          >
-        </label>
-
-        <button
-          class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-          :disabled="verifyCodeMutation.loading.value"
-          @click="verifyCode"
-        >
-          {{ verifyCodeMutation.loading.value ? 'Проверяем…' : 'Войти' }}
-        </button>
-
-        <button class="btn btn-ghost w-full" @click="step = 'request'">
-          Выбрать другой канал
-        </button>
-      </div>
-
-      <div v-else class="space-y-4">
-        <div class="rounded-xl border border-[#d6ebde] bg-white/75 p-3 text-sm text-[#214735]">
-          Откройте {{ channel === 'TELEGRAM' ? 'Telegram' : 'Max' }}-бота, отправьте команду
-          <span class="font-bold">{{ startCommand }}</span>, затем передайте боту свой <code>user_id</code>.
-          Бот пришлёт кнопку входа в кабинет с временным токеном.
+        <div class="mb-5 flex justify-center">
+          <div class="join">
+            <button class="btn join-item" :class="{ 'btn-primary': channel === 'EMAIL' }" @click="channel = 'EMAIL'">
+              Email
+            </button>
+            <button class="btn join-item" :class="{ 'btn-primary': channel === 'TELEGRAM' }" @click="channel = 'TELEGRAM'">
+              Telegram
+            </button>
+            <button class="btn join-item" :class="{ 'btn-primary': channel === 'MAX' }" @click="channel = 'MAX'">
+              Max
+            </button>
+          </div>
         </div>
 
-        <label class="form-control">
-          <span class="label-text font-semibold text-[#194631]">Ваш user_id (для команды /start)</span>
-          <input
-            v-model="userIdForBot"
-            type="text"
-            class="input input-bordered border-[#d0e8d8] bg-white/80"
-            placeholder="например: cm5abc123xyz"
-          >
-        </label>
+        <div v-if="channel === 'EMAIL' && step === 'request'" class="space-y-4">
+          <fieldset class="fieldset rounded-box border border-base-300 bg-base-200/40 p-4">
+            <legend class="fieldset-legend text-sm font-semibold">Email адрес</legend>
+            <label class="label pb-1">На этот адрес отправим код</label>
+            <input
+              v-model="destination"
+              type="email"
+              class="input input-bordered w-full"
+              placeholder="name@company.com"
+            >
+          </fieldset>
 
-        <div class="grid gap-2 sm:grid-cols-2">
-          <button class="btn btn-outline border-[#139957] text-[#0d854a]" @click="copyStartCommand">
-            Скопировать команду
+          <button
+            class="btn btn-primary w-full"
+            :disabled="requestCodeMutation.loading.value"
+            @click="requestCode"
+          >
+            {{ requestCodeMutation.loading.value ? 'Отправляем…' : 'Получить код' }}
           </button>
-          <a
-            :href="selectedBotUrl || undefined"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="btn border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-            :class="{ 'btn-disabled pointer-events-none': !selectedBotUrl }"
-          >
-            Открыть бота
-          </a>
         </div>
 
-        <p v-if="!selectedBotUrl" class="text-xs text-[#b42318]">
-          Ссылка на {{ channel === 'TELEGRAM' ? 'Telegram' : 'Max' }}-бота не настроена в env.
-        </p>
-      </div>
+        <div v-else-if="channel === 'EMAIL'" class="space-y-4">
+          <div class="alert alert-info">
+            Код отправлен на <span class="font-bold">{{ maskedDestination }}</span>.
+            Действителен до: <span class="font-bold">{{ expiresAt }}</span>.
+          </div>
 
-      <div
-        v-if="feedback"
-        class="alert mt-4"
-        :class="feedbackTone === 'success' ? 'alert-success' : 'alert-error'"
-      >
-        {{ feedback }}
+          <fieldset class="fieldset rounded-box border border-base-300 bg-base-200/40 p-4">
+            <legend class="fieldset-legend text-sm font-semibold">Код подтверждения</legend>
+            <label class="label pb-1">Введите 6-значный код</label>
+            <input
+              v-model="code"
+              type="text"
+              maxlength="6"
+              class="input input-bordered w-full"
+              placeholder="123456"
+            >
+          </fieldset>
+
+          <button
+            class="btn btn-primary w-full"
+            :disabled="verifyCodeMutation.loading.value"
+            @click="verifyCode"
+          >
+            {{ verifyCodeMutation.loading.value ? 'Проверяем…' : 'Войти' }}
+          </button>
+
+          <button class="btn btn-ghost w-full" @click="step = 'request'">
+            Выбрать другой канал
+          </button>
+        </div>
+
+        <div v-else class="space-y-4">
+          <div class="alert alert-info">
+            Откройте {{ channel === 'TELEGRAM' ? 'Telegram' : 'Max' }}-бота, отправьте команду
+            <span class="font-bold">{{ startCommand }}</span>, затем передайте боту свой <code>user_id</code>.
+            Бот пришлёт кнопку входа в кабинет с временным токеном.
+          </div>
+
+          <fieldset class="fieldset rounded-box border border-base-300 bg-base-200/40 p-4">
+            <legend class="fieldset-legend text-sm font-semibold">Ваш user_id</legend>
+            <label class="label pb-1">Для команды /start в боте</label>
+            <input
+              v-model="userIdForBot"
+              type="text"
+              class="input input-bordered w-full"
+              placeholder="например: cm5abc123xyz"
+            >
+          </fieldset>
+
+          <div class="grid gap-2 sm:grid-cols-2">
+            <button class="btn btn-outline" @click="copyStartCommand">
+              Скопировать команду
+            </button>
+            <a
+              :href="selectedBotUrl || undefined"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-primary"
+              :class="{ 'btn-disabled pointer-events-none': !selectedBotUrl }"
+            >
+              Открыть бота
+            </a>
+          </div>
+
+          <p v-if="!selectedBotUrl" class="text-xs text-error">
+            Ссылка на {{ channel === 'TELEGRAM' ? 'Telegram' : 'Max' }}-бота не настроена в env.
+          </p>
+        </div>
+
+        <div
+          v-if="feedback"
+          class="alert mt-2"
+          :class="feedbackTone === 'success' ? 'alert-success' : 'alert-error'"
+        >
+          {{ feedback }}
+        </div>
       </div>
     </div>
   </section>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6c239f0..b718c34 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,43 @@ export default {
   },
   plugins: [daisyui],
   daisyui: {
-    themes: ['light', 'corporate'],
+    themes: [
+      {
+        aqua: {
+          'color-scheme': 'light',
+          'base-100': 'oklch(98% 0.002 247.839)',
+          'base-200': 'oklch(96% 0.003 264.542)',
+          'base-300': 'oklch(92% 0.006 264.531)',
+          'base-content': 'oklch(21% 0.034 264.665)',
+          primary: 'oklch(84% 0.238 128.85)',
+          'primary-content': 'oklch(27% 0.072 132.109)',
+          secondary: 'oklch(71% 0.202 349.761)',
+          'secondary-content': 'oklch(28% 0.109 3.907)',
+          accent: 'oklch(67% 0.182 276.935)',
+          'accent-content': 'oklch(25% 0.09 281.288)',
+          neutral: 'oklch(13% 0.028 261.692)',
+          'neutral-content': 'oklch(98% 0.002 247.839)',
+          info: 'oklch(68% 0.169 237.323)',
+          'info-content': 'oklch(97% 0.013 236.62)',
+          success: 'oklch(76% 0.233 130.85)',
+          'success-content': 'oklch(98% 0.031 120.757)',
+          warning: 'oklch(70% 0.213 47.604)',
+          'warning-content': 'oklch(98% 0.016 73.684)',
+          error: 'oklch(65% 0.241 354.308)',
+          'error-content': 'oklch(97% 0.014 343.198)',
+          '--radius-selector': '2rem',
+          '--radius-field': '2rem',
+          '--radius-box': '2rem',
+          '--size-selector': '0.3125rem',
+          '--size-field': '0.3125rem',
+          '--border': '0.5px',
+          '--depth': '0',
+          '--noise': '1',
+        },
+      },
+      'light',
+      'corporate',
+    ],
+    darkTheme: 'aqua',
   },
 } satisfies Config;