diff --git a/javascript-practice/src/pages/register.html b/javascript-practice/src/pages/register.html
index 43c9660..ec6c9a5 100644
--- a/javascript-practice/src/pages/register.html
+++ b/javascript-practice/src/pages/register.html
@@ -3,6 +3,7 @@
+
Register - Money Lover
diff --git a/javascript-practice/src/styles/_main.scss b/javascript-practice/src/styles/_main.scss
index 41c0039..2760566 100644
--- a/javascript-practice/src/styles/_main.scss
+++ b/javascript-practice/src/styles/_main.scss
@@ -9,6 +9,7 @@
@import './bases/typography';
// Components
+@import './components/icons';
@import './components/loader';
@import './components/popup-form';
diff --git a/javascript-practice/src/styles/abstracts/_variables.scss b/javascript-practice/src/styles/abstracts/_variables.scss
index ec800bc..5c69205 100644
--- a/javascript-practice/src/styles/abstracts/_variables.scss
+++ b/javascript-practice/src/styles/abstracts/_variables.scss
@@ -10,6 +10,8 @@ $secondary-light-text-color: #00000042;
$receive-money-color: #e51c23;
$deducted-money-color: #039be5;
$background-input-color: #f5f5f5;
+$dark-error-color: #ce1414;
+$light-error-color: #ffc3c3;
$gray: #dddddd;
$white: #ffffff;
diff --git a/javascript-practice/src/styles/components/_icons.scss b/javascript-practice/src/styles/components/_icons.scss
new file mode 100644
index 0000000..32aea79
--- /dev/null
+++ b/javascript-practice/src/styles/components/_icons.scss
@@ -0,0 +1,58 @@
+.mark {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ width: 40px;
+ height: 40px;
+ border: 2px solid #c4cbd2;
+ border-radius: 100px;
+
+ &::before,
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ }
+}
+
+.check:before {
+ top: 16px;
+ left: 15px;
+ margin: -5px 0 0 -6px;
+ height: 10px;
+ width: 20px;
+ border: solid #39ca74;
+ border-width: 0 0 3px 3px;
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+.error:before {
+ top: 6px;
+ left: 13px;
+ height: 10px;
+ width: 10px;
+ border: solid #c0392b;
+ border-width: 0 0 4px 4px;
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+.error:after {
+ top: 21px;
+ left: 13px;
+ height: 10px;
+ width: 10px;
+ border: solid #c0392b;
+ border-width: 0 0 4px 4px;
+ -webkit-transform: rotate(135deg);
+ -moz-transform: rotate(135deg);
+ -ms-transform: rotate(135deg);
+ -o-transform: rotate(135deg);
+ transform: rotate(135deg);
+}
diff --git a/javascript-practice/src/styles/components/_loader.scss b/javascript-practice/src/styles/components/_loader.scss
index db1a55e..7bdd7b3 100644
--- a/javascript-practice/src/styles/components/_loader.scss
+++ b/javascript-practice/src/styles/components/_loader.scss
@@ -13,11 +13,6 @@
opacity 0.75s,
visibility 0.75s;
- &--hidden {
- opacity: 0;
- visibility: hidden;
- }
-
&::after {
content: '';
width: 75px;
@@ -37,3 +32,8 @@
transform: rotate(1turn);
}
}
+
+.hidden {
+ opacity: 0;
+ visibility: hidden;
+}
diff --git a/javascript-practice/src/styles/components/_popup-form.scss b/javascript-practice/src/styles/components/_popup-form.scss
index 97687ae..9f58e09 100644
--- a/javascript-practice/src/styles/components/_popup-form.scss
+++ b/javascript-practice/src/styles/components/_popup-form.scss
@@ -38,7 +38,6 @@
&__redirect-btn {
color: $white;
font-size: $fs-md;
- background-color: $light-primary-color;
border: none;
border-radius: 10px;
padding: 15px 30px;
@@ -50,3 +49,11 @@
opacity: 1;
pointer-events: auto;
}
+
+.success .modal-box__redirect-btn {
+ background-color: $light-primary-color;
+}
+
+.error .modal-box__redirect-btn {
+ background-color: $dark-error-color;
+}
diff --git a/javascript-practice/src/styles/pages/_login-register.scss b/javascript-practice/src/styles/pages/_login-register.scss
index 01addff..96511fa 100644
--- a/javascript-practice/src/styles/pages/_login-register.scss
+++ b/javascript-practice/src/styles/pages/_login-register.scss
@@ -17,20 +17,6 @@
padding-top: 54px;
}
-.checkmark {
- display: inline-block;
-
- &:after {
- content: '';
- display: block;
- width: 11px;
- height: 22px;
- border: solid $primary-color;
- border-width: 0 10px 10px 0;
- transform: rotate(45deg);
- }
-}
-
.form {
@extend %margin-inline-auto;
@@ -57,6 +43,15 @@
line-height: 48px;
}
+ &__error-message {
+ font-size: $fs-md;
+ background-color: $light-error-color;
+ color: $dark-error-color;
+ padding: 15px 15px;
+ border-radius: 10px;
+ line-height: 22px;
+ }
+
&__description {
margin-top: 15px;
color: $secondary-text-color;