From 5ad5e8d3657b8074305fd1c8b94cebd5c6cb4af2 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Sun, 1 Feb 2026 21:32:08 +0300
Subject: [PATCH] fix: restore page animations, improve checkbox visibility

- Re-enable page transition animations in Telegram Mini App
- Change AnimatePresence mode from popLayout to wait (prevents black squares)
- Add initial={false} to skip animation on first render
- Add custom checkbox styling with better visibility (bg-dark-700, border-dark-600)
- Custom checkmark appearance when checked
- Light theme checkbox support
---
 src/components/layout/AppShell/AppShell.tsx |  6 +--
 src/styles/globals.css                      | 57 +++++++++++++++++++++
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx
index b144a69..238cf51 100644
--- a/src/components/layout/AppShell/AppShell.tsx
+++ b/src/components/layout/AppShell/AppShell.tsx
@@ -503,11 +503,11 @@ export function AppShell({ children }: AppShellProps) {
 
       {/* Main content */}
       <main className="mx-auto max-w-6xl px-4 py-6 pb-28 lg:px-6 lg:pb-8">
-        {/* Disable animations in Telegram Mini App and admin pages to prevent visual glitches */}
-        {isTelegramWebApp || location.pathname.startsWith('/admin') ? (
+        {/* Disable animations in admin pages (scroll restoration conflicts with animations) */}
+        {location.pathname.startsWith('/admin') ? (
           children
         ) : (
-          <AnimatePresence mode="popLayout">
+          <AnimatePresence mode="wait" initial={false}>
             <motion.div
               key={location.pathname}
               variants={slideUp}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 072aa9a..877cc7a 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1290,6 +1290,63 @@ input[type='number'] {
   -moz-appearance: textfield;
 }
 
+/* Custom checkbox styling - more visible */
+input[type='checkbox'] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1.5px solid rgb(var(--color-dark-600));
+  border-radius: 0.375rem;
+  background-color: rgb(var(--color-dark-700));
+  cursor: pointer;
+  transition: all 0.15s ease;
+  position: relative;
+  flex-shrink: 0;
+}
+
+input[type='checkbox']:checked {
+  background-color: rgb(var(--color-accent-500));
+  border-color: rgb(var(--color-accent-500));
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  width: 5px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+input[type='checkbox']:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(var(--color-accent-500), 0.3);
+}
+
+input[type='checkbox']:hover:not(:checked) {
+  border-color: rgb(var(--color-dark-500));
+  background-color: rgb(var(--color-dark-600));
+}
+
+.light input[type='checkbox'] {
+  border-color: rgb(var(--color-champagne-400));
+  background-color: rgb(var(--color-champagne-100));
+}
+
+.light input[type='checkbox']:checked {
+  background-color: rgb(var(--color-accent-500));
+  border-color: rgb(var(--color-accent-500));
+}
+
+.light input[type='checkbox']:hover:not(:checked) {
+  border-color: rgb(var(--color-champagne-500));
+  background-color: rgb(var(--color-champagne-200));
+}
+
 /* Selection color */
 ::selection {
   @apply bg-accent-500/30 text-dark-50;