Merge branch 'main' into NCFRONT-72

src/app/styles/global-styles.scss

@@ -41,6 +41,10 @@
 	color: v.$white;
 	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
+
 	h1 {
 		font-size: 2rem;
 		font-weight: 700;
@@ -73,6 +77,10 @@
 			display: flex;
 			gap: 28px;
 			align-items: center;
+
+			@media (max-width: 440px) {
+				flex-direction: column;
+			}
 		}
 
 		.header-stat-item {
@@ -101,6 +109,10 @@
 	padding: 30px;
 	background: v.$bg-light;
 	min-height: 100vh;
+
+	@media (max-width: 440px) {
+		padding: 15px;
+	}
 }
 
 .main-containter {
@@ -121,6 +133,10 @@
 	&.auto {
 		width: auto;
 	}
+
+	@media (max-width: 440px) {
+		max-width: calc(100vw - var(--side-bar-width) - 30px);
+	}
 }
 
 .btn {
@@ -142,7 +158,12 @@
 	color: v.$white;
 	border: 2px solid transparent;
 
-	&:hover {
+	&:disabled {
+		background: linear-gradient(135deg, v.$p-color-disabled, v.$s-color-disabled);
+		cursor: default;
+	}
+
+	&:hover:not(:disabled) {
 		transform: translateY(-2px);
 		box-shadow: 0 8px 25px v.$shadow-1;
 	}
@@ -244,6 +265,11 @@
 		color: v.$text-p;
 		border-radius: 20px;
 		box-shadow: 0px 4px 20px v.$shadow-1;
+
+		&:has(.modal-window-view-file) {
+			padding: 0;
+			background: transparent;
+		}
 	}
 }
 
@@ -280,6 +306,13 @@
 		width: var(--side-bar-width);
 		transform: translateX(0);
 	}
+
+	.build-versions {
+		position: absolute;
+		bottom: 10px;
+		left: 10px;
+		color: #fffc;
+	}
 }
 
 .sidebar-close-button {
@@ -324,7 +357,7 @@
 }
 
 .sub-link {
-	padding: 12px 50px;
+	padding: 12px 12px 12px 32px;
 	font-size: 14px;
 	border-radius: 0;
 	margin-right: 0;
@@ -428,6 +461,13 @@
 		padding: 8px;
 		border-radius: 6px;
 	}
+
+	&-document {
+		color: v.$white;
+		background: v.$color-document;
+		padding: 8px;
+		border-radius: 6px;
+	}
 }
 
 .split-blocks {

src/app/styles/header.scss

@@ -14,11 +14,19 @@
 		padding: 20px 20px;
 	}
 
+	@media (max-width: 440px) {
+		padding: 10px 10px;
+	}
+
 	.header-action {
 		display: flex;
 		align-items: center;
 		gap: 15px;
 
+		@media (max-width: 440px) {
+			gap: 10px;
+		}
+
 		.icon-btn {
 			width: 40px;
 			height: 40px;
@@ -36,6 +44,11 @@
 				background: v.$bg-hover;
 				transform: translateY(-2px);
 			}
+
+			@media (max-width: 440px) {
+				width: 30px;
+				height: 30px;
+			}
 		}
 	}
 
@@ -68,12 +81,20 @@
 		@media (max-width: 490px) {
 			padding: 8px;
 		}
+
+		@media (max-width: 440px) {
+			padding: 8px;
+		}
 	}
 
 	.tokens-count {
 		font-weight: 700;
 		font-size: 14px;
 		letter-spacing: 0.5px;
+
+		@media (max-width: 440px) {
+			font-size: 12px;
+		}
 	}
 
 	.tokens-label {
@@ -192,6 +213,11 @@
 			cursor: pointer;
 			transition: all 0.3s;
 			text-transform: uppercase;
+
+			@media (max-width: 440px) {
+				width: 30px;
+				height: 30px;
+			}
 		}
 
 		.user-dropdown {

src/app/styles/module/login.module.scss

@@ -41,8 +41,35 @@
 
 .form-group {
 	margin-bottom: 18px;
+}
 
-	&-confrim-window {
+.form-switcher {
+	display: flex;
+	justify-content: center;
+	gap: 10px;
+	margin-bottom: 10px;
+
+	&-button {
+		padding: 5px 15px;
+		background: linear-gradient(135deg, #6366f1, #8b5cf6);
+		color: white;
+		border: none;
+		border-radius: 10px;
+		transition: all 0.3s;
+		opacity: 0.6;
+		cursor: pointer;
+
+		&.active {
+			opacity: 1;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+		}
+
+		&:hover:not(:disabled) {
+			transform: translateY(-2px);
+		}
 	}
 }
 
@@ -74,6 +101,10 @@
 	transition: all 0.3s;
 	background: #f9fafb;
 
+	&-hidden {
+		display: none;
+	}
+
 	&[type="password"]::-ms-reveal {
 		display: none;
 	}
@@ -141,11 +172,12 @@
 	margin-bottom: 18px;
 	margin: 20px 0 0 0;
 
-	&:hover {
+	&:hover:not(:disabled) {
 		transform: translateY(-2px);
 	}
 
 	&:disabled {
+		opacity: 0.5;
 		background: linear-gradient(135deg, #414291, #4b3975);
 
 		&:hover {

src/app/styles/payment-container.scss

@@ -34,13 +34,15 @@
 			padding: 16px;
 			text-align: center;
 			border: 1px solid #e2e8f0;
+			height: 100%;
 		}
 
 		.stat-value {
-			font-size: 1.6rem;
+			font-size: 1.2rem;
 			font-weight: 700;
 			color: #1e293b;
 			margin-bottom: 4px;
+			white-space: nowrap;
 		}
 
 		.stat-label {
@@ -214,6 +216,7 @@
 			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 			cursor: pointer;
 			overflow: visible;
+			max-width: 350px;
 
 			.plan-header {
 				text-align: center;

src/app/styles/settings.scss

@@ -7,7 +7,6 @@
 	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 	border: 1px solid #e2e8f0;
 	transition: all 0.3s ease;
-	overflow: hidden;
 }
 
 .form-section {

src/app/styles/variable.scss

@@ -12,6 +12,8 @@ $bg-darkening: #0000007a;
 $shadow-1: #0000001a;
 $white: #fff;
 $red: #dc2626;
+$p-color-disabled: #6365f18e;
+$s-color-disabled: #8a5cf663;
 
 $color-image: #f08c00;
 $color-video: #2f9e44;