From d955be3ed515576ba7c81bf47ea1ce690f76c02f Mon Sep 17 00:00:00 2001
From: Nate <iamnbutler@gmail.com>
Date: Fri, 24 Sep 2021 17:20:33 -0400
Subject: [PATCH] Update custom checkbox style

---
 server/styles.css              | 12 ++++--------
 server/templates/community.hbs | 33 +++++++++++++++++++++++++++------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/server/styles.css b/server/styles.css
index 71b036caa75373d50622c648e7a1904620aa20fb..7fb6209947f25a350b6bd81e00eff24b9cc4f74c 100644
--- a/server/styles.css
+++ b/server/styles.css
@@ -100,7 +100,6 @@
   .checkbox__control {
     width: 1.5rem;
     height: 1.5rem;
-    border: 1px solid white;
   }
 
   .checkbox__control svg {
@@ -108,14 +107,11 @@
     transform-origin: center center;
   }
   
-  .checkbox__input {
-
-  }
-
-  .checkbox__input * {
-
+  .checkbox__brackets {
+    left: -1px;
+    top: -1px;
   }
-
+  
   .checkbox__input input {
     opacity: 0;
     width: 1.5rem;
diff --git a/server/templates/community.hbs b/server/templates/community.hbs
index 70ad8e66177800a4af1fcf332251a259cb7a0151..6ef8cdd93f9a4c4334ee58b76c578b292796bba2 100644
--- a/server/templates/community.hbs
+++ b/server/templates/community.hbs
@@ -8,8 +8,14 @@
     <form action="/signups" method="post" class="mt-10">
         <ul>
             <li class="flex flex-row mt-5 text-lg">
-                <span class="w-6 mt-2 mr-5 checkbox__input">
-                    <input class="absolute" type="checkbox" value=true name="wants_releases">
+                <span class="relative w-6 mt-2 mr-5 checkbox__input">
+                    <span class="absolute z-0 block checkbox__brackets">
+                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
+                        <path d="M8 0H0V32H8V31H1V1H8V0Z" fill="white"/>
+                        <path d="M24 31H31V1H24V0H32V32H24V31Z" fill="white"/>
+                        </svg>
+                    </span>
+                    <input class="absolute z-10" type="checkbox" value=true name="wants_releases">
                     <span class="flex items-center justify-center checkbox__control">
                         <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                             <path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>
@@ -27,8 +33,15 @@
                 </div>
             </li>
             <li class="flex flex-row mt-5 text-lg">
-                <span class="w-6 mt-2 mr-5 checkbox__input">
-                    <input class="absolute" type="checkbox" value=true name="wants_updates">
+                <span class="relative w-6 mt-2 mr-5 checkbox__input">
+                    <span class="absolute z-0 block checkbox__brackets">
+                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
+                        <path d="M8 0H0V32H8V31H1V1H8V0Z" fill="white"/>
+                        <path d="M24 31H31V1H24V0H32V32H24V31Z" fill="white"/>
+                        </svg>
+                    </span>
+
+                    <input class="absolute z-10" type="checkbox" value=true name="wants_updates">
                     <span class="flex items-center justify-center checkbox__control">
                         <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                             <path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>
@@ -46,8 +59,16 @@
                 </div>
             </li>
             <li class="flex flex-row mt-5 text-lg">
-                <span class="w-6 mt-2 mr-5 checkbox__input">
-                    <input class="absolute" type="checkbox" value=true name="wants_community">
+                <span class="relative w-6 mt-2 mr-5 checkbox__input">
+                    <span class="absolute z-0 block checkbox__brackets">
+                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
+                        <path d="M8 0H0V32H8V31H1V1H8V0Z" fill="white"/>
+                        <path d="M24 31H31V1H24V0H32V32H24V31Z" fill="white"/>
+                        </svg>
+                    </span>
+
+                    <input class="absolute z-10" type="checkbox" value=true name="wants_community">
+                    
                     <span class="flex items-center justify-center checkbox__control">
                         <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                             <path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>