design checkbox

frontend/src/app/components/auth/login/login.component.html

@@ -55,14 +55,17 @@
         } }
       </div>
       <div class="checkbox">
-        <input
+        <label class="container"
-          type="checkbox"
+          >Remember me
-          id="checkbox"
+          <input
-          name="checkbox"
+            type="checkbox"
-          #checkbox
+            id="checkbox"
-          [(ngModel)]="authData.checkbox"
+            name="checkbox"
-        />
+            #checkbox
-        <label for="checkbox">Remember me</label>
+            [(ngModel)]="authData.checkbox"
+          />
+          <span class="checkmark"></span>
+        </label>
       </div>
       <app-btn-large
         [value]="'Log in'"

frontend/src/app/components/auth/login/login.component.scss

@@ -1,6 +1,7 @@
 @import "./../../../../assets/style/colors.scss";
 @import "./../../../../assets/style/form.scss";
 @import "./../../../../assets/style/auth-layout.scss";
+@import "./../../../../assets/style/checkbox.scss";
 
 section {
   background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
@@ -11,25 +12,6 @@ section {
   position: relative;
 }
 
-.checkbox {
-  display: flex;
-  align-items: center;
-  width: 90%;
-  height: 24px;
-  margin-bottom: 24px;
-  input {
-    width: 16px;
-    height: 16px;
-    margin: 12px;
-  }
-  label {
-    width: fit-content;
-    font-size: 16px;
-    font-weight: 400;
-    color: $black;
-  }
-}
-
 .footer {
   margin-top: 36px;
   a {

frontend/src/app/components/auth/register/register.component.html

@@ -86,18 +86,18 @@
         }
       </div>
       <div class="checkbox">
-        <input
+        <label class="container"
-          type="checkbox"
+          >I agree to the&nbsp;
-          id="checkbox"
+          <a routerLink="/privacy-policy" target="_blank">Privacy policy</a>.
-          name="checkbox"
+          <input
-          #checkbox
+            type="checkbox"
-          [(ngModel)]="authData.privacyPolicy"
+            id="checkbox"
-        />
+            name="checkbox"
-        <label for="checkbox"
+            #checkbox
-          >I agree to the
+            [(ngModel)]="authData.privacyPolicy"
-          <a routerLink="/privacy-policy" target="_blank">Privacy policy</a
+          />
-          >.</label
+          <span class="checkmark"></span>
-        >
+        </label>
       </div>
       <app-btn-large
         [value]="'Get Started'"

frontend/src/app/components/auth/register/register.component.scss

@@ -1,37 +1,9 @@
 @import "./../../../../assets/style/colors.scss";
 @import "./../../../../assets/style/form.scss";
 @import "./../../../../assets/style/auth-layout.scss";
+@import "./../../../../assets/style/checkbox.scss";
 
 section {
   background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
     url(./../../../../assets/img/backgrounds/register.png);
 }
-
-.checkbox {
-  display: flex;
-  align-items: center;
-  width: 90%;
-  height: 24px;
-  margin-bottom: 24px;
-  input {
-    width: 16px;
-    height: 16px;
-    margin: 12px;
-  }
-  label {
-    width: fit-content;
-    font-size: 16px;
-    font-weight: 400;
-    color: $black;
-    a {
-      font-size: 16px;
-      font-weight: 400;
-      color: $blue;
-      text-decoration: none;
-      cursor: pointer;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}

frontend/src/assets/style/checkbox.scss

@@ -0,0 +1,78 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 24px;
+  height: 22px;
+  width: 80%;
+}
+
+.container {
+  color: $black;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  a {
+    font-size: 16px;
+    font-weight: 400;
+    color: $blue;
+    text-decoration: none;
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 22px;
+  width: 22px;
+  box-shadow: 1px 1px 3px rgba($black, 0.3);
+  background-color: rgba($black, 0.1);
+  transition: background-color 300ms ease-in-out;
+}
+
+.container:hover input ~ .checkmark {
+  box-shadow: 1px 1px 3px rgba($black, 0.5);
+  background-color: rgba($black, 0.3);
+}
+
+.container input:checked ~ .checkmark {
+  background-color: $blue;
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.container .checkmark:after {
+  left: 7.5px;
+  top: 3px;
+  width: 5px;
+  height: 10px;
+  border: solid $white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}