From 9d0f99c5093efce49d6c77c2810fee2faffb9daa Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 22 Nov 2021 14:37:14 +0530
Subject: [PATCH] Fix checkbox in register flow

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 CONTRIBUTING.md                 |  2 +-
 src/app/templates/auth/Auth.jsx |  2 +-
 src/index.scss                  | 28 +++++++++++++++++++++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2f87d63c..14fc5761 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ All types of contributions are encouraged and valued. See the [Table of Contents
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
 > - Mention the project at local meetups and tell your friends/colleagues
-> - [Donate to us](https://liberapay.com/ajbura/donate)
+> - [Donate to us](https://cinny.in/#sponsor)
 
 <!-- omit in toc -->
 ## Table of Contents
diff --git a/src/app/templates/auth/Auth.jsx b/src/app/templates/auth/Auth.jsx
index 184d7024..af11d3f0 100644
--- a/src/app/templates/auth/Auth.jsx
+++ b/src/app/templates/auth/Auth.jsx
@@ -605,7 +605,7 @@ function Terms({ url, onSubmit }) {
           <div style={{ marginBottom: 'var(--sp-normal)' }} />
           <Text variant="b1">In order to complete registration, you need to agree to the terms and conditions.</Text>
           <div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}>
-            <input id="termsCheckbox" type="checkbox" required />
+            <input style={{ marginRight: '8px' }} id="termsCheckbox" type="checkbox" required />
             <Text variant="b1">
               {'I accept '}
               <a style={{ cursor: 'pointer' }} href={url} rel="noreferrer" target="_blank">Terms and Conditions</a>
diff --git a/src/index.scss b/src/index.scss
index 2aea8d73..583e20f1 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -296,11 +296,37 @@ input[type],
 input[type=text],
 input[type=username],
 input[type=password],
-input[type=email] {
+input[type=email],
+input[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
+input[type=checkbox] {
+  margin: 0;
+  padding: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  box-shadow: var(--bs-primary-border);
+  background-color: var(--bg-surface);
+  cursor: pointer;
+  @extend .flex--center;
+
+  &:checked {
+    background-color: var(--bg-primary);
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 6px;
+      border: 6px solid white;
+      border-width: 0 0 3px 3px;
+      transform: rotateZ(-45deg) translate(1px, -1px);
+    }
+  }
+}
+
 textarea {
   color: inherit;
   word-spacing: inherit;