Fix checkbox in register flow

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2f87d63c757bae8ccd970cb2266258747bbea0f5..14fc57618cd8cb09438400fe856352b47af5e4b5 100644 (file)
--- 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 184d7024925440dd57c8faeae138ab4185d1a68d..af11d3f0f503b80114172a459a64e3fa23dd45f7 100644 (file)
--- 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 2aea8d733979547d6a758a6544ff658956bdd40e..583e20f1d83a888ea0d2807ec13bb57574777bff 100644 (file)
--- 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;