refactor: improve ErrorModal.vue

apps/app-frontend/src/components/ui/ErrorModal.vue

@@ -321,9 +321,14 @@ async function onApplyMigrationFix(eol) {
             <template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
             <template v-else> <CopyIcon /> Copy debug info </template>
           </button>
-        <ButtonStyled color="brand">
+        <ButtonStyled class="btn-wrapper neon">
                 <a href="https://me.astralium.su/get/ar/help" target="_blank" rel="noopener noreferrer">
-                  <button>Get AstralRinth support</button>
+                  Get AstralRinth support
+                </a>
+        </ButtonStyled>
+        <ButtonStyled class="btn-wrapper neon" >
+                <a href="https://me.astralium.su/get/ar" target="_blank" rel="noopener noreferrer">
+                  Checkout latest releases
                 </a>
         </ButtonStyled>
         </ButtonStyled>
@@ -344,10 +349,11 @@ async function onApplyMigrationFix(eol) {
             <pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
           </Collapsible>
         </div>
+        <template v-if="errorType === 'state_init'">
           <div class="notice">
             <div class="flex justify-between items-center">
-        <h3 v-if="language === 'en'" class="notice__title">⚠️ Important Notice ⚠️</h3>
+              <h3 v-if="language === 'en'" class="notice__title">⚠️ Migration Issue • Important Notice ⚠️</h3>
-        <h3 v-if="language === 'ru'" class="notice__title">⚠️ Важное уведомление ⚠️</h3>
+              <h3 v-if="language === 'ru'" class="notice__title">⚠️ Проблема миграции • Важное уведомление ⚠️</h3>
               <ButtonStyled>
                 <button @click="toggleLanguage">
                   {{ language === 'en' ? '📖 Русский' : '📖 English' }}
@@ -384,9 +390,9 @@ async function onApplyMigrationFix(eol) {
               <template v-if="language === 'ru'">Возможное исправление в реальном времени:</template>
             </h2>
             <div class="flex justify-between">
-          <ul class="flex flex-col gap-3">
+              <ol class="flex flex-col gap-3">
                 <li>
-              <ButtonStyled color="purple">
+                  <ButtonStyled class="btn-wrapper neon">
                     <button
                       :title="language === 'en' 
                         ? 'Convert all line endings in migration files to LF (Unix-style: \\n)' 
@@ -399,7 +405,7 @@ async function onApplyMigrationFix(eol) {
                   </ButtonStyled>
                 </li>
                 <li>
-              <ButtonStyled color="purple">
+                  <ButtonStyled class="btn-wrapper neon">
                     <button
                       :title="language === 'en' 
                         ? 'Convert all line endings in migration files to CRLF (Windows-style: \\r\\n)' 
@@ -411,9 +417,10 @@ async function onApplyMigrationFix(eol) {
                     </button>
                   </ButtonStyled>
                 </li>
-          </ul>
+              </ol>
             </div>
         </template>
+      </template>
     </div>
   </ModalWrapper>
   <ModalWrapper
@@ -468,6 +475,8 @@ async function onApplyMigrationFix(eol) {
 </style>
 
 <style scoped lang="scss">
+@import '../../../../../packages/assets/styles/neon-button.scss';
+
 .cta-button {
   display: flex;
   align-items: center;

packages/assets/styles/neon-button.scss

@@ -0,0 +1,47 @@
+// [AR] Feature
+.btn-wrapper.neon :deep(:is(button, a, .button-like):first-child),
+.btn-wrapper.neon :slotted(:is(button, a, .button-like):first-child),
+.btn-wrapper.neon :slotted(*) > :is(button, a, .button-like):first-child,
+.btn-wrapper.neon :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
+.btn-wrapper.neon
+  :slotted(*)
+  > *:first-child
+  > *:first-child
+  > :is(button, a, .button-like):first-child {
+  background-color: transparent;
+  border: 1px solid #3e8cde;
+  color: #3e8cde;
+  text-shadow:
+    0 0 4px rgba(79, 173, 255, 0.5),
+    0 0 8px rgba(14, 98, 204, 0.5),
+    0 0 12px rgba(122, 31, 199, 0.5);
+  transition:
+    color 0.25s ease,
+    box-shadow 0.3s ease,
+    transform 0.15s ease;
+  box-shadow: 0 0 4px rgba(79, 173, 255, 0.5);
+}
+
+/* Hover */
+.btn-wrapper.neon
+  :deep(:is(button, a, .button-like):first-child):hover:not([disabled]):not(.disabled),
+.btn-wrapper.neon
+  :slotted(:is(button, a, .button-like):first-child):hover:not([disabled]):not(.disabled),
+.btn-wrapper.neon
+  :slotted(*) > :is(button, a, .button-like):first-child:hover:not([disabled]):not(.disabled),
+.btn-wrapper.neon
+  :slotted(*) > *:first-child > :is(button, a, .button-like):first-child:hover:not([disabled]):not(.disabled),
+.btn-wrapper.neon
+  :slotted(*)
+  > *:first-child
+  > *:first-child
+  > :is(button, a, .button-like):first-child:hover:not([disabled]):not(.disabled) {
+  color: #10fae5;
+  transform: scale(1.02);
+  box-shadow:
+    0 0 4px rgba(16, 250, 229, 0.3),
+    0 0 8px rgba(16, 250, 229, 0.2);
+  text-shadow:
+    0 0 2px rgba(16, 250, 229, 0.4),
+    0 0 4px rgba(16, 250, 229, 0.25);
+}