etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: restore page animations, improve checkbox visibility

Browse Source 
- 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
This commit is contained in:
c0mrade
2026-02-01 21:32:08 +03:00
parent 768b340c35
commit 5ad5e8d365
2 changed files with 60 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/layout/AppShell/AppShell.tsx
View File

@@ -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}

57
src/styles/globals.css
View File

@@ -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;