MM-63800 Add label tag for create account checkbox (#30799)

* added proper label tag for checkbox

* fix linting issues

* updated cursor on checkbox label

* remove uneccessary class on span

* resolve lint error

* Update screenshots

---------

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>

webapp/channels/src/components/widgets/inputs/check/check.scss

@@ -7,7 +7,12 @@
     margin-top: 24px;
     margin-bottom: 32px;
 
+    label {
+        cursor: pointer;
+    }
+
     .text {
+        padding-top: 2px;
         margin-left: 8px;
         color: rgba(var(--center-channel-color-rgb), 0.75);
         font-size: 12px;
@@ -17,6 +22,7 @@
 
         .header {
             display: block;
+            margin-bottom: 8px;
             color: var(--center-channel-color);
         }
     }

webapp/channels/src/components/widgets/inputs/check/index.tsx

@@ -21,11 +21,17 @@ function CheckInput(props: Props) {
         <div className='check-input'>
             <input
                 {...rest}
+                id={id}
                 aria-label={ariaLabel}
                 data-testid={id}
                 type='checkbox'
             />
-            <span className='text'>{text}</span>
+            <label
+                className='text'
+                htmlFor={id}
+            >
+                <span>{text}</span>
+            </label>
         </div>
     );
 }