From 43d494d43cdc0e0af14a3a991b4e2834c92550c0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 18:51:06 -0500
Subject: [PATCH] Improve legacy Checkbox styles

---
 app/soapbox/components/ui/form-group/form-group.tsx | 2 +-
 app/styles/forms.scss                               | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index e90448e8c..454e8f307 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -10,7 +10,7 @@ interface IFormGroup {
   errors?: string[]
 }
 
-/** Input element with label and hint. */
+/** Input container with label. Renders the child. */
 const FormGroup: React.FC<IFormGroup> = (props) => {
   const { children, errors = [], labelText, hintText } = props;
   const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []);
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 82bda6714..d93ba0b03 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -65,10 +65,9 @@ code {
       position: relative;
 
       .label_input > label {
-        @apply text-black dark:text-white;
+        @apply text-sm font-medium text-gray-700 dark:text-gray-400;
         font-family: inherit;
         font-size: 14px;
-        padding-top: 5px;
         display: block;
         width: auto;
       }
@@ -84,7 +83,7 @@ code {
 
       input[type="checkbox"] {
         position: absolute;
-        top: 3px;
+        top: 1px;
         left: 0;
       }