FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-23 11:35:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Redesign the UI

Browse Source
This commit is contained in:
denis0001-dev
2025-11-07 11:44:27 +03:00
Unverified
parent 4f79e03fd0
commit 59472ea1d7
21 changed files with 1306 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/auth/Auth.tsx
+107 -10
View File
@@ -1,12 +1,30 @@
import type React from "react";
import { motion, AnimatePresence } from "motion/react";
import styles from "./auth.module.scss";
export function AuthContainer({ children }: { children?: React.ReactNode }) {
return (
<div className={styles.authContainer}>
<div className={styles.authCard}>
<div className={styles.gradientBackground} />
<motion.div
className={styles.authCard}
initial={{
opacity: 0,
scale: 0.95,
y: 10
}}
animate={{
opacity: 1,
scale: 1,
y: 0
}}
transition={{
duration: 0.4,
ease: "easeInOut"
}}
>
{children}
</div>
</motion.div>
</div>
)
}
@@ -29,13 +47,63 @@ export function AuthHeader({ title, icon, subtitle }: AuthHeaderProps) {
const iconName = typeof icon == "string" ? icon : icon.name;
return (
<div className={styles.authHeader}>
<motion.div
className={styles.authHeader}
initial={{
opacity: 0,
y: -10
}}
animate={{
opacity: 1,
y: 0
}}
transition={{
duration: 0.4,
delay: 0.1,
ease: "easeInOut"
}}
>
<h2>
<span className={`material-symbols ${iconType} large`}>{iconName}</span>
<motion.span
className={`material-symbols ${iconType} large`}
initial={{
opacity: 0,
scale: 0.8,
rotate: -10
}}
animate={{
opacity: 1,
scale: 1,
rotate: 0
}}
transition={{
duration: 0.5,
delay: 0.2,
ease: "easeOut"
}}
>
{iconName}
</motion.span>
{title}
</h2>
<p>{subtitle}</p>
</div>
<motion.p
initial={{
opacity: 0,
y: 10
}}
animate={{
opacity: 1,
y: 0
}}
transition={{
duration: 0.4,
delay: 0.3,
ease: "easeInOut"
}}
>
{subtitle}
</motion.p>
</motion.div>
)
}
@@ -47,11 +115,40 @@ export interface Alert {
}
export function AlertsContainer({ alerts }: { alerts: Alert[]}) {
const displayAlerts = alerts.slice(-3);
return (
<div>
{alerts.slice(-3).map((alert, i) => {
return <div className={`alert alert-${alert.type}`} key={i}>{alert.message}</div>
})}
<div className={styles.alertContainer}>
<AnimatePresence mode="popLayout">
{displayAlerts.map((alert, i) => (
<motion.div
key={`${i}-${alert.message}`}
className={`${styles.alert} alert-${alert.type}`}
initial={{
opacity: 0,
y: -20,
scale: 0.95
}}
animate={{
opacity: 1,
y: 0,
scale: 1
}}
exit={{
opacity: 0,
y: -10,
scale: 0.95
}}
transition={{
duration: 0.3,
ease: "easeInOut"
}}
layout
>
{alert.message}
</motion.div>
))}
</AnimatePresence>
</div>
)
}