From 07800c77c5248984b0924177859d391a449e43ed Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sat, 3 Aug 2024 10:19:15 +0200
Subject: [PATCH] design checkbox

---
 .../auth/login/login.component.html           | 19 +++--
 .../auth/login/login.component.scss           | 20 +----
 .../auth/register/register.component.html     | 24 +++---
 .../auth/register/register.component.scss     | 30 +------
 frontend/src/assets/style/checkbox.scss       | 78 +++++++++++++++++++
 5 files changed, 103 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/assets/style/checkbox.scss

diff --git a/frontend/src/app/components/auth/login/login.component.html b/frontend/src/app/components/auth/login/login.component.html
index f4d9a41..bb4f16e 100644
--- a/frontend/src/app/components/auth/login/login.component.html
+++ b/frontend/src/app/components/auth/login/login.component.html
@@ -55,14 +55,17 @@
         } }
       </div>
       <div class="checkbox">
-        <input
-          type="checkbox"
-          id="checkbox"
-          name="checkbox"
-          #checkbox
-          [(ngModel)]="authData.checkbox"
-        />
-        <label for="checkbox">Remember me</label>
+        <label class="container"
+          >Remember me
+          <input
+            type="checkbox"
+            id="checkbox"
+            name="checkbox"
+            #checkbox
+            [(ngModel)]="authData.checkbox"
+          />
+          <span class="checkmark"></span>
+        </label>
       </div>
       <app-btn-large
         [value]="'Log in'"
diff --git a/frontend/src/app/components/auth/login/login.component.scss b/frontend/src/app/components/auth/login/login.component.scss
index 8664db2..ef86837 100644
--- a/frontend/src/app/components/auth/login/login.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/auth/register/register.component.html b/frontend/src/app/components/auth/register/register.component.html
index f597c7c..b1b5c16 100644
--- a/frontend/src/app/components/auth/register/register.component.html
+++ b/frontend/src/app/components/auth/register/register.component.html
@@ -86,18 +86,18 @@
         }
       </div>
       <div class="checkbox">
-        <input
-          type="checkbox"
-          id="checkbox"
-          name="checkbox"
-          #checkbox
-          [(ngModel)]="authData.privacyPolicy"
-        />
-        <label for="checkbox"
-          >I agree to the
-          <a routerLink="/privacy-policy" target="_blank">Privacy policy</a
-          >.</label
-        >
+        <label class="container"
+          >I agree to the&nbsp;
+          <a routerLink="/privacy-policy" target="_blank">Privacy policy</a>.
+          <input
+            type="checkbox"
+            id="checkbox"
+            name="checkbox"
+            #checkbox
+            [(ngModel)]="authData.privacyPolicy"
+          />
+          <span class="checkmark"></span>
+        </label>
       </div>
       <app-btn-large
         [value]="'Get Started'"
diff --git a/frontend/src/app/components/auth/register/register.component.scss b/frontend/src/app/components/auth/register/register.component.scss
index 5243467..34b492c 100644
--- a/frontend/src/app/components/auth/register/register.component.scss
+++ b/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;
-      }
-    }
-  }
-}
diff --git a/frontend/src/assets/style/checkbox.scss b/frontend/src/assets/style/checkbox.scss
new file mode 100644
index 0000000..38134a5
--- /dev/null
+++ b/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);
+}