From 9d3a2d630bec0a073c43976c65162981767d226a Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Sun, 27 Mar 2022 20:22:19 +0200
Subject: [PATCH] changed checkboxes to use check icons instead of changing
 background color closes #2776

---
 frontend/src/styles/core.scss | 24 +++++++++++++++---------
 frontend/static/index.html    | 30 +++++++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
index 528584326..103ebc8dd 100644
--- a/frontend/src/styles/core.scss
+++ b/frontend/src/styles/core.scss
@@ -97,20 +97,26 @@ label.checkbox {
     width: 0;
     height: 0;
     display: none;
+    user-select: none;
 
     & ~ .customTextCheckbox {
-      width: 12px;
-      height: 12px;
+      width: 1.25rem;
+      height: 1.25rem;
       background: rgba(0, 0, 0, 0.1);
-      border-radius: 2px;
-      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
-      display: inline-block;
-      margin: 0 0.5rem 0 0.25rem;
-      transition: 0.25s;
+      border-radius: calc(var(--roundness) / 2);
+      display: inline-grid;
+      // margin: 0 0.5rem 0 0;
+      user-select: none;
+      cursor: pointer;
+      & .check {
+        opacity: 0;
+        color: var(--main-color);
+        transition: 0.125s;
+      }
     }
 
-    &:checked ~ .customTextCheckbox {
-      background: var(--main-color);
+    &:checked ~ .customTextCheckbox .check {
+      opacity: 1;
     }
   }
 }
diff --git a/frontend/static/index.html b/frontend/static/index.html
index 1e2f06330..88a05ce67 100644
--- a/frontend/static/index.html
+++ b/frontend/static/index.html
@@ -391,7 +391,11 @@
         <div class="inputs">
           <label class="checkbox">
             <input type="checkbox" />
-            <div class="customTextCheckbox"></div>
+            <div class="customTextCheckbox">
+              <div class="check">
+                <i class="fas fa-fw fa-check"></i>
+              </div>
+            </div>
             Random
             <span>
               Randomize the above words, and control how many words are
@@ -411,7 +415,11 @@
           </div>
           <label class="checkbox typographyCheck">
             <input type="checkbox" checked />
-            <div class="customTextCheckbox customTextTypographyCheckbox"></div>
+            <div class="customTextCheckbox customTextTypographyCheckbox">
+              <div class="check">
+                <i class="fas fa-fw fa-check"></i>
+              </div>
+            </div>
             Remove Fancy Typography
             <span>
               Standardises typography symbols (for example “ and ” become ")
@@ -419,7 +427,11 @@
           </label>
           <label class="checkbox delimiterCheck">
             <input type="checkbox" />
-            <div class="customTextCheckbox customTextDelimiterCheckbox"></div>
+            <div class="customTextCheckbox customTextDelimiterCheckbox">
+              <div class="check">
+                <i class="fas fa-fw fa-check"></i>
+              </div>
+            </div>
             Pipe Delimiter
             <span>
               Change how words are separated. Using the pipe delimiter allows
@@ -661,7 +673,11 @@
         <input type="text" class="text" />
         <label class="checkbox">
           <input type="checkbox" />
-          <div class="customTextCheckbox"></div>
+          <div class="customTextCheckbox">
+            <div class="check">
+              <i class="fas fa-fw fa-check"></i>
+            </div>
+          </div>
           Change preset to current settings
         </label>
         <div class="button"><i class="fas fa-plus"></i></div>
@@ -4405,7 +4421,11 @@
                 <div>
                   <label id="rememberMe" class="checkbox">
                     <input type="checkbox" checked />
-                    <div class="customTextCheckbox"></div>
+                    <div class="customTextCheckbox">
+                      <div class="check">
+                        <i class="fas fa-fw fa-check"></i>
+                      </div>
+                    </div>
                     Remember me
                   </label>
                 </div>