edit styles, add vk-button and initial setup for vk auth

package-lock.json

@@ -1,17 +1,18 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "no-copy-frontend",
-			"version": "0.1.0",
+			"version": "0.2.0",
 			"dependencies": {
 				"@tailwindcss/postcss": "^4.1.17",
 				"@tanstack/match-sorter-utils": "^8.19.4",
 				"@tanstack/react-query": "^5.90.11",
 				"@tanstack/react-table": "^8.21.3",
+				"@vkid/sdk": "^2.6.2",
 				"clsx": "^2.1.1",
 				"jose": "^6.1.2",
 				"next": "^16.0.7",
@@ -2953,6 +2954,15 @@
 				"win32"
 			]
 		},
+		"node_modules/@vkid/sdk": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/@vkid/sdk/-/sdk-2.6.2.tgz",
+			"integrity": "sha512-TCaGh6BvQNY8Atru0KJXdGuwm70y9WS2xBOLNripHjYMEcft0BMIiLKUvJ7pAeJOtk/15MvPaUIEmBS2Vt0NBg==",
+			"license": "MIT",
+			"dependencies": {
+				"crypto-js": "^4.1.1"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -3491,6 +3501,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/crypto-js": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+			"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+			"license": "MIT"
+		},
 		"node_modules/csstype": {
 			"version": "3.2.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",
@@ -13,6 +13,7 @@
 		"@tanstack/match-sorter-utils": "^8.19.4",
 		"@tanstack/react-query": "^5.90.11",
 		"@tanstack/react-table": "^8.21.3",
+		"@vkid/sdk": "^2.6.2",
 		"clsx": "^2.1.1",
 		"jose": "^6.1.2",
 		"next": "^16.0.7",

src/app/[locale]/login/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import LoginForm from '@/app/ui/login-form';
 import LanguageSwitcher from '@/app/components/LanguageSwitcher';
 import { useTranslations } from 'next-intl';
+import VKLogin from '@/app/components/VKLogin';
 
 export const metadata: Metadata = {
 	title: 'Login',
@@ -32,6 +33,9 @@ export default function Page() {
 						{t('or-log-in-via')}
 					</span>
 				</div>
+				<div>
+					<VKLogin />
+				</div>
 				<div className={`${styles['register-link']}`}>
 					<p>{t('no-account')}?
 						<Link href="register"> {t('register')}</Link>

src/app/components/VKLogin.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { useEffect, useRef } from 'react';
+import * as VKID from '@vkid/sdk';
+
+export default function VKLogin() {
+
+	const vkButton = useRef<HTMLDivElement>(null)
+
+	function clickHandler() {
+		alert('Кнопка пока не подключена к бизнес аккаунту!');
+/* 		VKID.Auth.login()
+			.then(vkidOnSuccess)
+			.catch(console.error); */
+	}
+
+/* 	function vkidOnSuccess(data: any) {
+		console.log('vkidOnSuccess');
+		console.log(data);
+	} */
+
+/* 	useEffect(() => {
+		VKID.Config.init({
+			app: 54389559,
+			redirectUrl: 'http://localhost',
+			responseMode: VKID.ConfigResponseMode.Callback,
+			source: VKID.ConfigSource.LOWCODE,
+			scope: 'email'
+		});
+	}, []); */
+
+	return (
+		<button id="VKIDSDKAuthButton" className="VkIdWebSdk__button VkIdWebSdk__button_reset">
+			<div className="VkIdWebSdk__button_container">
+				<div className="VkIdWebSdk__button_icon">
+					<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<path fillRule="evenodd" clipRule="evenodd" d="M4.54648 4.54648C3 6.09295 3 8.58197 3 13.56V14.44C3 19.418 3 21.907 4.54648 23.4535C6.09295 25 8.58197 25 13.56 25H14.44C19.418 25 21.907 25 23.4535 23.4535C25 21.907 25
+           19.418 25 14.44V13.56C25 8.58197 25 6.09295 23.4535 4.54648C21.907 3 19.418 3 14.44 3H13.56C8.58197 3 6.09295 3 4.54648 4.54648ZM6.79999 10.15C6.91798 15.8728 9.92951 19.31 14.8932 19.31H15.1812V16.05C16.989 16.2332 18.3371
+           17.5682 18.8875 19.31H21.4939C20.7869 16.7044 18.9535 15.2604 17.8141 14.71C18.9526 14.0293 20.5641 12.3893 20.9436 10.15H18.5722C18.0747 11.971 16.5945 13.6233 15.1803 13.78V10.15H12.7711V16.5C11.305 16.1337 9.39237 14.3538 9.314 10.15H6.79999Z" fill="white" />
+					</svg>
+				</div>
+				<div className="VkIdWebSdk__button_text" onClick={clickHandler}>
+					Войти с VK ID
+				</div>
+			</div>
+		</button>
+	)
+}

src/app/components/dropDownList.tsx

@@ -30,7 +30,7 @@ export default function DropDownList({ children, value, callBack }: DropDownList
 					callBack(childValue || "");
 					setIsOpen(false);
 				},
-				className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 text-[#6366f1]`,
+				className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 text-[#6366f1] cursor-pointer select-none`,
 				key: index
 			});
 		}

src/app/styles/VKLogin.scss

@@ -0,0 +1,52 @@
+.VkIdWebSdk__button_reset {
+	border: none;
+	margin: 0;
+	padding: 0;
+	width: auto;
+	overflow: visible;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	-webkit-font-smoothing: inherit;
+	-moz-osx-font-smoothing: inherit;
+}
+
+.VkIdWebSdk__button {
+	background: #0077ff;
+	cursor: pointer;
+	transition: all .1s ease-out;
+}
+
+.VkIdWebSdk__button:hover {
+	opacity: 0.8;
+}
+
+.VkIdWebSdk__button:active {
+	opacity: .7;
+	transform: scale(.97);
+}
+
+.VkIdWebSdk__button {
+	border-radius: 8px;
+	width: 100%;
+	min-height: 44px;
+}
+
+.VkIdWebSdk__button_container {
+	display: flex;
+	align-items: center;
+	padding: 12px 10px;
+}
+
+.VkIdWebSdk__button_icon+.VkIdWebSdk__button_text {
+	margin-left: -28px;
+}
+
+.VkIdWebSdk__button_text {
+	display: flex;
+	font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	flex: 1;
+	justify-content: center;
+	color: #ffffff;
+}

src/app/styles/global-styles.scss

@@ -5,6 +5,7 @@
 @use './reports.scss';
 @use './marking-pages.scss';
 @use './privacy-and-terms-pages.scss';
+@use './VKLogin.scss';
 
 .btn {
 	padding: 12px 24px;

src/app/styles/marking-pages.scss

@@ -186,7 +186,7 @@
 	}
 
 	th {
-		background: linear-gradient(135deg, #6366f1, #8b5cf6);
+		background: linear-gradient(180deg, #6366f1, #8b5cf6);
 		color: white;
 		padding: 15px;
 		text-align: left;

src/app/ui/header/notificationsButton.tsx

@@ -65,7 +65,7 @@ export default function NotificationsButton() {
 								<div className="notification-item">
 									<div className="notification-icon">✅</div>
 									<div className="notification-content">
-										<div className="notification-title">🪙 Токены добавлены</div>
+										<div className="notification-title">Токены добавлены</div>
 										<div className="notification-text">На ваш баланс добавлено 100 токенов. Теперь вы можете защитить ещё больше файлов!</div>
 										<div className="notification-time">4 дн назад</div>
 									</div>