Adjusting styles and adding CheckboxInputField

Author: selfcontained

components/dashboard/src/components/forms/CheckboxInput.tsx

@@ -5,11 +5,25 @@
  */
 
 import classNames from "classnames";
-import { FC, useCallback } from "react";
+import { FC, ReactNode, useCallback } from "react";
 import { useId } from "../../hooks/useId";
+import { InputField } from "./InputField";
 import { InputFieldHint } from "./InputFieldHint";
 
-type Props = {
+type CheckboxInputFieldProps = {
+    label: string;
+    error?: ReactNode;
+    className?: string;
+};
+export const CheckboxInputField: FC<CheckboxInputFieldProps> = ({ label, error, className, children }) => {
+    return (
+        <InputField label={label} className={className} error={error}>
+            <div className="space-y-2 ml-2">{children}</div>
+        </InputField>
+    );
+};
+
+type CheckboxInputProps = {
     id?: string;
     value: string;
     checked: boolean;
@@ -18,7 +32,15 @@ type Props = {
     hint?: string;
     onChange: (checked: boolean) => void;
 };
-export const CheckboxInput: FC<Props> = ({ id, value, label, hint, checked, disabled = false, onChange }) => {
+export const CheckboxInput: FC<CheckboxInputProps> = ({
+    id,
+    value,
+    label,
+    hint,
+    checked,
+    disabled = false,
+    onChange,
+}) => {
     const maybeId = useId();
     const elementId = id || maybeId;
 
@@ -33,9 +55,10 @@ export const CheckboxInput: FC<Props> = ({ id, value, label, hint, checked, disa
         <label className="flex space-x-2 justify-start items-start" htmlFor={elementId}>
             <input
                 type="checkbox"
-                // className="rounded border-2 mt-0.5 text-gray-600"
                 className={classNames(
-                    "h-4 w-4 focus:ring-0 mt-0.5 rounded cursor-pointer bg-transparent border-2 dark:filter-invert border-gray-600 dark:border-gray-900 focus:border-gray-900 dark:focus:border-gray-800",
+                    "h-4 w-4 mt-0.5 rounded cursor-pointer border-2 dark:filter-invert",
+                    "focus:ring-2 focus:border-gray-900 ring-blue-400 dark:focus:border-gray-800",
+                    "border-gray-600 dark:border-gray-900 bg-transparent",
                     { "bg-gray-600 dark:bg-gray-900": checked },
                 )}
                 value={value}
@@ -46,16 +69,15 @@ export const CheckboxInput: FC<Props> = ({ id, value, label, hint, checked, disa
             />
             <div className="flex flex-col">
                 <span
-                    // className="text-gray-600 dark:text-gray-400 text-sm"
                     className={classNames(
-                        "text-md font-semibold cursor-pointer tracking-wide",
+                        "text-sm font-semibold cursor-pointer",
                         disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-600 dark:text-gray-100",
                     )}
                 >
                     {label}
                 </span>
 
-                {hint && <InputFieldHint>{hint}</InputFieldHint>}
+                {hint && <InputFieldHint disabled={disabled}>{hint}</InputFieldHint>}
             </div>
         </label>
     );

components/dashboard/src/components/forms/InputField.tsx

@@ -22,7 +22,7 @@ export const InputField: FunctionComponent<Props> = memo(({ label, id, hint, err
             {label && (
                 <label
                     className={classNames(
-                        "text-sm font-semibold dark:text-gray-400",
+                        "text-md font-bold dark:text-gray-400",
                         error ? "text-red-600" : "text-gray-600",
                     )}
                     htmlFor={id}

components/dashboard/src/components/forms/InputFieldHint.tsx

@@ -4,8 +4,21 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import classNames from "classnames";
 import { FC } from "react";
 
-export const InputFieldHint: FC = ({ children }) => {
-    return <span className="text-gray-500 dark:text-gray-400 text-sm">{children}</span>;
+type Props = {
+    disabled?: boolean;
+};
+export const InputFieldHint: FC<Props> = ({ disabled = false, children }) => {
+    return (
+        <span
+            className={classNames(
+                "text-sm",
+                disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-500 dark:text-gray-400",
+            )}
+        >
+            {children}
+        </span>
+    );
 };

components/dashboard/src/onboarding/StepOrgInfo.tsx

@@ -6,8 +6,7 @@
 
 import { User } from "@gitpod/gitpod-protocol";
 import { FC, useCallback, useMemo, useState } from "react";
-import { CheckboxInput } from "../components/forms/CheckboxInput";
-import { InputField } from "../components/forms/InputField";
+import { CheckboxInput, CheckboxInputField } from "../components/forms/CheckboxInput";
 import { SelectInputField } from "../components/forms/SelectInputField";
 import { TextInputField } from "../components/forms/TextInputField";
 import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutation";
@@ -188,8 +187,7 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                 onBlur={websiteError.onBlur}
             />
 
-            <InputField label="I'm exploring Gitpod..." />
-            <div className="mt-4 ml-2 space-y-2">
+            <CheckboxInputField label="I'm exploring Gitpod...">
                 {explorationReasonsOptions.map((o) => (
                     <CheckboxInput
                         key={o.value}
@@ -205,17 +203,14 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                         }}
                     />
                 ))}
-            </div>
+            </CheckboxInputField>
 
-            <InputField label="I'm signing up for Gitpod to..." />
-            <div className="mt-4 ml-2 space-y-2">
+            <CheckboxInputField label="I'm signing up for Gitpod to...">
                 {signupGoalsOptions.map((o) => (
                     <CheckboxInput
                         key={o.value}
                         value={o.value}
                         label={o.label}
-                        disabled
-                        hint="this is just a test"
                         checked={signupGoals.includes(o.value)}
                         onChange={(checked) => {
                             if (checked) {
@@ -226,7 +221,7 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                         }}
                     />
                 ))}
-            </div>
+            </CheckboxInputField>
 
             {signupGoals.includes(SIGNUP_GOALS_OTHER) && (
                 <TextInputField value={signupGoalsOther} placeholder="Please specify" onChange={setSignupGoalsOther} />