From 022ebb2d96edb192ddebcf2cca760c281c97761f Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 29 Aug 2023 16:32:30 +0700
Subject: [PATCH 1/2] Add some style for register page

---
 javascript-practice/src/styles/_main.scss     |  1 +
 .../src/styles/abstracts/_variables.scss      |  2 +
 .../src/styles/components/_icons.scss         | 58 +++++++++++++++++++
 .../src/styles/components/_loader.scss        | 10 ++--
 .../src/styles/components/_popup-form.scss    |  9 ++-
 .../src/styles/pages/_login-register.scss     | 23 +++-----
 6 files changed, 83 insertions(+), 20 deletions(-)
 create mode 100644 javascript-practice/src/styles/components/_icons.scss

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;

From 561ae6b49701156c1f99fe671dfce9d8d7640672 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 29 Aug 2023 16:38:48 +0700
Subject: [PATCH 2/2] Add link style in register.html

---
 javascript-practice/src/pages/register.html | 1 +
 1 file changed, 1 insertion(+)

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 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../styles/_main.scss" />
     <title>Register - Money Lover</title>
   </head>
   <body>