From dceb4057f2df620465cbf5ad31f36aebfe19843d Mon Sep 17 00:00:00 2001
From: cqb13 <cqb13.main@gmail.com>
Date: Fri, 17 Feb 2023 13:51:13 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=B3=20Checkbox=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/popup.html |  8 ++++----
 styles/popup.css  | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/layout/popup.html b/layout/popup.html
index 0dca03d..f7e09e9 100644
--- a/layout/popup.html
+++ b/layout/popup.html
@@ -40,10 +40,10 @@ <h1>Custom Chrome Tab</h1>
         <p>Background Color</p>
         <input type="color" id="background-color-block" value="#6992c9" class="picker-color">
       </section>
-      <label>
-        <input type="checkbox" id="gradient-switch">
-        Gradient
-      </label>
+      <div class='CheckBox'>
+        <input type='checkbox' id="gradient-switch"/>
+        <label>Gradient</label>
+      </div>
       <section id="gradient" class="hidden">
         <p>Background Color 1</p>
         <input type="color" id="gradient1" value="#f9f9f9" class="picker-color">
diff --git a/styles/popup.css b/styles/popup.css
index 453e29a..e5f9187 100644
--- a/styles/popup.css
+++ b/styles/popup.css
@@ -10,7 +10,7 @@ body {
 }
 
 h1 {
-  font-size: 30px;
+  font-size: 1.5rem;
   margin-bottom: 10px;
   margin-top: 5px;
 }
@@ -122,6 +122,38 @@ main {
   gap: 10px;
 }
 
+.CheckBox {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  margin: 5px auto 5px auto;
+}
+
+input[type="checkbox"] {
+  cursor: pointer;
+  -webkit-appearance: none;
+  width: 25px;
+  height: 25px;
+  margin: auto;
+  transition: 0.25s;
+  border: 2px solid #496bbe;
+  border-radius: 5px;
+}
+
+input[type="checkbox"]:checked {
+  background: #496bbe;
+  scale: 1.1;
+}
+
+
+.CheckBox label {
+  margin-left: 5px;
+  font-size: 1.4rem;
+}
+
 .button {
   width: 80%;
   margin: 0 auto;