fix sign load

client/src/app/pages/guest/sign/sign.component.html

@@ -1,4 +1,5 @@
-<div class="auth-wrapper">
+
+<div class="auth-wrapper" >
 	<div class="auth__wrap">
 		<div class="auth__img">
 			<icon-spider
@@ -15,7 +16,7 @@
 					dark_mode
 				</span>
 				<span
-					class="material-icons"
+					class="material-icons auth__icon"
 					*ngIf="us.mode"
 					(click)="us.setMode()"
 				>

client/src/app/pages/guest/sign/sign.component.scss

@@ -1,217 +0,0 @@
-@use 'src/scss/utils/mixins' as mixins;
-@use 'src/scss/utils/media' as media;
-@use 'src/scss/utils/vars' as vars;
-
-:host {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
-}
-
-.auth-wrapper {
-	@include mixins.flexBox(flex, null, center, center, null);
-	background: var(--c-bg-primary);
-	flex-grow: 1;
-	padding: 20px;
-	transition: all 0.3s;
-}
-
-.auth {
-	max-width: 340px;
-	width: 100%;
-	padding: 30px;
-	border-radius: vars.$b-radius-card;
-	box-shadow: 0px 0px 6px var(--c-shadow);
-	background: var(--c-bg-secondary);
-	display: flex;
-	flex-flow: row wrap;
-	position: relative;
-
-	span {
-		position: absolute;
-		right: 25px;
-		top: 25px;
-		z-index: 9;
-		cursor: pointer;
-	}
-
-	@include media.bp-max(sm) {
-		padding: 25px;
-		flex-flow: column wrap;
-	}
-
-	&__title {
-		font-size: vars.$fs + 8px;
-		font-weight: vars.$ff-bold;
-		color: var(--c-text-primary);
-		text-align: center;
-		margin-bottom: 15px;
-
-		@include media.bp-max(sm) {
-			font-size: vars.$fs + 2px;
-		}
-	}
-
-	&__btn {
-		text-align: center;
-		margin-top: 30px;
-
-		.w-btn {
-			margin: 0;
-			width: 100%;
-		}
-	}
-
-	&__wrap {
-		display: flex;
-		flex-flow: row wrap;
-		align-items: center;
-		max-width: 880px;
-		width: 100%;
-
-		@include media.bp-max(sm) {
-			padding: 25px;
-			flex-flow: column wrap;
-		}
-	}
-
-	&__img {
-		flex: 0 0 50%;
-		max-width: 50%;
-		display: flex;
-		position: relative;
-		padding-right: 40px;
-
-		span {
-			left: 50%;
-			transform: translate(-78%);
-			position: absolute;
-			font-size: 320px;
-			position: absolute;
-			opacity: 0;
-			cursor: pointer;
-
-			@include media.bp-max(sm) {
-				font-size: 70px;
-				transform: translate(-50%);
-			}
-		}
-
-		img {
-			max-width: 260px;
-			width: 100%;
-			object-fit: cover;
-		}
-
-		svg {
-			max-width: 260px;
-			width: 100%;
-			height: 100%;
-		}
-
-		@include media.bp-max(sm) {
-			max-width: 60px;
-			margin: 0 auto;
-			flex: 0 0 100%;
-			padding: 0 0 30px 0;
-
-			svg {
-				height: 100%;
-				width: 100%;
-			}
-		}
-	}
-
-	&__form {
-		width: 95%;
-		flex: 0 0 50%;
-		max-width: 50%;
-		padding-left: 40px;
-		display: flex;
-		justify-content: flex-end;
-
-		@include media.bp-max(sm) {
-			flex: 0 0 100%;
-			max-width: 100%;
-			justify-content: center;
-			padding: 0;
-		}
-	}
-
-	@include media.bp-max(sm) {
-		.form__title {
-			font-size: vars.$fs - 2px;
-		}
-	}
-}
-
-wform {
-	flex: 1 0;
-
-	@include media.bp-max(sm) {
-		flex: 0 0 100%;
-		padding: 0;
-	}
-}
-
-.w-forms {
-	position: relative;
-
-	&__level {
-		top: 5px;
-		right: 5px;
-		position: absolute;
-		display: inline-block;
-		color: var(--c-text-secondary);
-		// font-size: calc(#{$fs} - 6px);
-		font-size: 22px;
-		letter-spacing: vars.$letter-spacing;
-		transition: vars.$transition;
-
-		&._sky {
-			color: vars.$c-info;
-		}
-
-		&._orange {
-			color: vars.$c-warn;
-		}
-
-		&._green {
-			color: vars.$c-success;
-		}
-	}
-
-	&__input {
-		padding-right: 35px;
-	}
-
-	&__input-block {
-		position: relative;
-	}
-
-	&__toggle {
-		display: flex;
-		position: absolute;
-		right: 10px;
-		top: 50%;
-		color: var(--c-placeholder);
-		transform: translateY(-50%);
-		cursor: pointer;
-
-		i {
-			font-size: 21px;
-		}
-	}
-
-	.icon-visibility {
-		color: var(--c-primary);
-	}
-}
-@media screen and (max-width: 768px) {
-	.auth__img {
-		display: none;
-	}
-}