light theme fast fix, update card/notification on phone

MarkMelior · Mar 21, 2024 · 4161888 · 4161888
1 parent 3043308
commit 4161888
Show file tree

Hide file tree

Showing 27 changed files with 399 additions and 109 deletions.
diff --git a/src/entities/Notification/Notification.module.scss b/src/entities/Notification/Notification.module.scss
@@ -21,6 +21,12 @@
 	@include background(.3);
 	@apply rounded-xl;
 
+	[class="light"] & {
+		@include background(1);
+
+		backdrop-filter: none;
+	}
+
 	@media (max-width: theme('screens.sm')) {
 		width: calc(100% - 10px * 2);
 
@@ -47,7 +53,7 @@
 }
 
 .closing {
-	animation: fadeOut .3s ease-out forwards;
+	animation: fadeOut var(--animation-close-duration-notification) ease-out forwards;
 }
 
 @keyframes fadeOut {
@@ -62,8 +68,44 @@
 	}
 }
 
+.swipeLeft {
+	animation: swipeLeft var(--animation-close-duration-notification) ease-out forwards;
+}
+
+.swipeRight {
+	animation: swipeRight var(--animation-close-duration-notification) ease-out forwards;
+}
+
+@keyframes swipeLeft {
+	0% {
+		opacity: 1;
+		transform: translate(-50%, 0);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translate(-100%, 0);
+	}
+}
+
+@keyframes swipeRight {
+	0% {
+		opacity: 1;
+		transform: translate(-50%, 0);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translate(100%, 0);
+	}
+}
+
 .icon {
 	opacity: .5;
+
+	&svg *[fill] {
+		fill: var(--color-main-inverted);
+	}
 }
 
 .content {

diff --git a/src/entities/Notification/Notification.tsx b/src/entities/Notification/Notification.tsx
@@ -1,13 +1,15 @@
 'use client';
 
+import { BookmarkIcon } from '@/shared/assets/icon/Bookmark';
+import { CrossIcon } from '@/shared/assets/icon/Cross';
 import { Button } from '@/shared/ui/Button';
 import { Progress } from '@nextui-org/react';
 import cn from 'clsx';
 import { useTranslations } from 'next-intl';
-import Image from 'next/image';
 import {
 	CSSProperties,
 	FC,
+	TouchEvent,
 	memo,
 	useCallback,
 	useEffect,
@@ -18,26 +20,38 @@ import cls from './Notification.module.scss';
 interface NotificationProps {
 	message: string;
 	duration?: number;
+	animationCloseDuration?: number;
 	closable?: boolean;
 	onClose?: () => void;
 	onCancel?: () => void;
 	icon?: string;
 }
 
 export const Notification: FC<NotificationProps> = memo(
-	({ message, duration = 7000, closable = true, onClose, onCancel, icon }) => {
+	({
+		message,
+		duration = 7000,
+		animationCloseDuration = 300,
+		closable = true,
+		onClose,
+		onCancel,
+		icon,
+	}) => {
 		const t = useTranslations('Notification');
 		const [visible, setVisible] = useState(true);
 		const [closing, setClosing] = useState(false);
+		const [touchStartX, setTouchStartX] = useState(0);
+		const [touchEndX, setTouchEndX] = useState(0);
+		const [swipeClose, setSwipeClose] = useState(false);
 
 		const handleClose = useCallback(() => {
 			setClosing(true);
 			setTimeout(() => {
 				setVisible(false);
 				setClosing(false);
 				if (onClose) onClose();
-			}, 300); // Animation duration
-		}, [onClose]);
+			}, animationCloseDuration);
+		}, [animationCloseDuration, onClose]);
 
 		useEffect(() => {
 			const timer = setTimeout(() => {
@@ -52,7 +66,31 @@ export const Notification: FC<NotificationProps> = memo(
 				setVisible(false);
 				setClosing(false);
 				if (onCancel) onCancel();
-			}, 300); // Animation duration
+			}, animationCloseDuration);
+		};
+
+		const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => {
+			setTouchStartX(e.touches[0].clientX);
+		};
+
+		const handleTouchMove = (e: TouchEvent<HTMLDivElement>) => {
+			setTouchEndX(e.touches[0].clientX);
+		};
+
+		const handleTouchEnd = () => {
+			const deltaX = touchEndX - touchStartX;
+
+			// Set threshold for swipe action
+			const threshold = 100;
+
+			if (Math.abs(deltaX) > threshold) {
+				setSwipeClose(true);
+				setTimeout(() => {
+					setSwipeClose(false);
+					setVisible(false);
+					if (onClose) onClose();
+				}, animationCloseDuration);
+			}
 		};
 
 		if (!visible) {
@@ -63,12 +101,18 @@ export const Notification: FC<NotificationProps> = memo(
 			<article
 				className={cn(cls.wrapper, {
 					[cls.closing]: closing,
+					[cls.swipeLeft]: swipeClose && touchEndX < touchStartX && !closing,
+					[cls.swipeRight]: swipeClose && touchEndX > touchStartX && !closing,
 				})}
 				style={
 					{
 						'--animation-duration-notification': `${duration}ms`,
+						'--animation-close-duration-notification': `${animationCloseDuration}ms`,
 					} as CSSProperties
 				}
+				onTouchStart={handleTouchStart}
+				onTouchMove={handleTouchMove}
+				onTouchEnd={handleTouchEnd}
 			>
 				<Progress
 					className={cls.progress}
@@ -79,24 +123,20 @@ export const Notification: FC<NotificationProps> = memo(
 				/>
 				<div className={cls.content}>
 					{icon && (
-						<Image
-							width={20}
-							height={20}
-							src='/images/icons/bookmark-fill.svg'
-							alt={t('icon')}
-							className={`${cls.icon} noselect`}
-						/>
+						// <Image
+						// 	width={20}
+						// 	height={20}
+						// 	src='/images/icons/bookmark-fill.svg'
+						// 	alt={t('icon')}
+						// 	className={`${cls.icon} noselect`}
+						// />
+						<BookmarkIcon className={`${cls.icon} noselect`} />
 					)}
 					<p>{message}</p>
 				</div>
 				{closable && (
 					<Button slice className='rounded-lg py-0 px-0' onClick={handleClose}>
-						<Image
-							src='/images/icons/cross.svg'
-							alt={t('icon-cross')}
-							width={12}
-							height={12}
-						/>
+						<CrossIcon />
 					</Button>
 				)}
 				{onCancel && <Button onClick={handleCancel}>{t('close')}</Button>}

diff --git a/src/shared/assets/icon/ArrowUp.jsx b/src/shared/assets/icon/ArrowUp.jsx
@@ -0,0 +1,20 @@
+export const ArrowUpIcon = ({
+	color = 'var(--color-main-inverted)',
+	...props
+}) => (
+	<svg
+		width='20'
+		height='20'
+		viewBox='0 0 20 20'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M10 4.16669L15 9.16669M10 4.16669L5 9.16669M10 4.16669V15.8334'
+			stroke={color}
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);
diff --git a/src/shared/assets/icon/Bookmark.jsx b/src/shared/assets/icon/Bookmark.jsx
@@ -0,0 +1,30 @@
+export const BookmarkIcon = ({
+	color = 'var(--color-main-inverted)',
+	...props
+}) => (
+	<svg
+		width='20'
+		height='21'
+		viewBox='0 0 20 21'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<g clipPath='url(#clip0_1201_1103)'>
+			<path
+				d='M3.33325 4.66669C3.33325 4.00365 3.59664 3.36776 4.06549 2.89892C4.53433 2.43008 5.17021 2.16669 5.83325 2.16669H14.1666C14.8296 2.16669 15.4655 2.43008 15.9344 2.89892C16.4032 3.36776 16.6666 4.00365 16.6666 4.66669V18.0234C16.6666 19.04 15.5166 19.6317 14.6899 19.0409L9.99992 15.6909L5.30992 19.0409C4.48242 19.6325 3.33325 19.0409 3.33325 18.0242V4.66669Z'
+				fill={color}
+			/>
+		</g>
+		<defs>
+			<clipPath id='clip0_1201_1103'>
+				<rect
+					width='20'
+					height='20'
+					fill={color}
+					transform='translate(0 0.5)'
+				/>
+			</clipPath>
+		</defs>
+	</svg>
+);
diff --git a/src/shared/assets/icon/Cross.jsx b/src/shared/assets/icon/Cross.jsx
@@ -0,0 +1,19 @@
+export const CrossIcon = ({
+	color = 'var(--color-main-inverted)',
+	...props
+}) => (
+	<svg
+		width='11'
+		height='11'
+		viewBox='0 0 11 11'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M1 1L5.5 5.5M10 10L5.5 5.5M5.5 5.5L10 1M5.5 5.5L1 10'
+			stroke={color}
+			strokeLinecap='round'
+		/>
+	</svg>
+);
diff --git a/src/shared/assets/icon/Gmail.jsx b/src/shared/assets/icon/Gmail.jsx
@@ -0,0 +1,18 @@
+export const GmailIcon = ({
+	color = 'var(--color-main-inverted)',
+	...props
+}) => (
+	<svg
+		width='24'
+		height='25'
+		viewBox='0 0 24 25'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M23 6.68558V19.0453C23 19.8486 22.329 20.4991 21.5003 20.4991H17.9996V12.2599L12 16.623L6.00042 12.2599V20.5H2.49967C2.30265 20.5 2.10757 20.4624 1.92556 20.3893C1.74355 20.3161 1.57819 20.209 1.43892 20.0739C1.29965 19.9388 1.1892 19.7784 1.11389 19.6019C1.03858 19.4255 0.99988 19.2363 1 19.0453V6.68558C1 4.88791 3.11658 3.86156 4.59975 4.94034L6.00042 5.95958L12 10.3209L17.9996 5.9578L19.4003 4.94034C20.8825 3.86245 23 4.88791 23 6.68558Z'
+			fill={color}
+		/>
+	</svg>
+);
diff --git a/src/shared/assets/icon/Telegram.jsx b/src/shared/assets/icon/Telegram.jsx
@@ -0,0 +1,18 @@
+export const TelegramIcon = ({
+	color = 'var(--color-main-inverted)',
+	...props
+}) => (
+	<svg
+		width='24'
+		height='25'
+		viewBox='0 0 24 25'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M3.22615 11.4249L15.1395 6.47793C16.3155 5.96263 20.3036 4.31364 20.3036 4.31364C20.3036 4.31364 22.1443 3.59221 21.9909 5.34426C21.9398 6.06569 21.5307 8.59069 21.1217 11.3218L19.8435 19.4122C19.8435 19.4122 19.7412 20.5974 18.872 20.8035C18.0028 21.0096 16.5711 20.0821 16.3155 19.8759C16.111 19.7213 12.4807 17.4025 11.1513 16.2688C10.7934 15.9596 10.3844 15.3412 11.2025 14.6198C13.0431 12.9193 15.2417 10.8065 16.5711 9.46672C17.1847 8.84835 17.7982 7.40549 15.2417 9.15753L8.03238 14.053C8.03238 14.053 7.2143 14.5683 5.6804 14.1045C4.14649 13.6407 2.35694 13.0223 2.35694 13.0223C2.35694 13.0223 1.12981 12.2494 3.22615 11.4249V11.4249Z'
+			fill={color}
+		/>
+	</svg>
+);
diff --git a/src/shared/ui/Blackhole/Blackhole.module.scss b/src/shared/ui/Blackhole/Blackhole.module.scss
@@ -15,6 +15,10 @@
 	transition: all .5s ease;
 	animation: fadeInBlackhole 1s ease-out forwards;
 
+	[class="light"] & {
+		display: none;
+	}
+
 	@media (max-width: theme('screens.md')) {
 		height: 600px;
 	}

diff --git a/src/shared/ui/Button/Button.module.scss b/src/shared/ui/Button/Button.module.scss
@@ -312,18 +312,29 @@
 	box-shadow: inset -3px -4px 8px 0 rgb(255, 255, 255, 10%),
 		0 2px 32px 0 rgb(176, 74, 255, 30%);
 
+	&:hover {
+		color: #caa9ff;
+		border: solid 1px #9442ffaf;
+		box-shadow: inset 0 0 6px #bf97ff70;
+	}
+
+	[class="light"] & {
+		border: solid 1px #caa2ffaf;
+		box-shadow: none;
+
+		&:hover {
+			color: #a369ff;
+			border: solid 1px#af72ffaf;
+			box-shadow: none;
+		}
+	}
+
 	/* stylelint-disable-next-line no-descending-specificity */
 	img,
 	svg {
 		opacity: 1;
 		transition: all 0.2s ease;
 	}
-
-	&:hover {
-		color: #caa9ff;
-		border: solid 1px #9442ffaf;
-		box-shadow: inset 0 0 6px #bf97ff70;
-	}
 }
 
 .squareItem {

diff --git a/src/shared/ui/Card/Card/Card.module.scss b/src/shared/ui/Card/Card/Card.module.scss
@@ -120,6 +120,10 @@
 
 	svg {
 		width: 18px;
+
+		@media (max-width: theme('screens.sm')) {
+			width: 14px;
+		}
 	}
 }