From 563f913d2787a219ddfda2cf9c049b27d9ca1b75 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Fri, 24 Feb 2023 00:37:54 +0000
Subject: [PATCH 1/6] add CheckboxInput component

---
 .../src/components/forms/CheckboxInput.tsx    | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 components/dashboard/src/components/forms/CheckboxInput.tsx

diff --git a/components/dashboard/src/components/forms/CheckboxInput.tsx b/components/dashboard/src/components/forms/CheckboxInput.tsx
new file mode 100644
index 00000000000000..d4f2bc25f15e5c
--- /dev/null
+++ b/components/dashboard/src/components/forms/CheckboxInput.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { FC, useCallback } from "react";
+import { useId } from "../../hooks/useId";
+
+type Props = {
+    id?: string;
+    value: string;
+    checked: boolean;
+    label: string;
+    onChange: (checked: boolean) => void;
+};
+export const CheckboxInput: FC<Props> = ({ id, value, label, checked, onChange }) => {
+    const maybeId = useId();
+    const elementId = id || maybeId;
+
+    const handleChange = useCallback(
+        (e) => {
+            onChange(e.target.checked);
+        },
+        [onChange],
+    );
+
+    return (
+        <label className="flex space-x-2 justify-start items-center" htmlFor={elementId}>
+            <input
+                type="checkbox"
+                className="rounded"
+                value={value}
+                id={elementId}
+                checked={checked}
+                onChange={handleChange}
+            />
+            <span className="text-sm dark:text-gray-400 text-gray-600">{label}</span>
+        </label>
+    );
+};

From 10fb450c80c8e7350de6b41c1948e57274424fb0 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Fri, 24 Feb 2023 00:38:08 +0000
Subject: [PATCH 2/6] use CheckboxInput component

---
 .../dashboard/src/onboarding/StepOrgInfo.tsx  | 65 ++++++++-----------
 1 file changed, 27 insertions(+), 38 deletions(-)

diff --git a/components/dashboard/src/onboarding/StepOrgInfo.tsx b/components/dashboard/src/onboarding/StepOrgInfo.tsx
index fb6118ad35180f..b9d515a8631b34 100644
--- a/components/dashboard/src/onboarding/StepOrgInfo.tsx
+++ b/components/dashboard/src/onboarding/StepOrgInfo.tsx
@@ -6,6 +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 { SelectInputField } from "../components/forms/SelectInputField";
 import { TextInputField } from "../components/forms/TextInputField";
@@ -190,50 +191,38 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
             <InputField label="I'm exploring Gitpod..." />
             <div className="mt-4 ml-2 space-y-2">
                 {explorationReasonsOptions.map((o) => (
-                    <div key={o.value} className="flex space-x-2 justify-start items-center">
-                        <input
-                            type="checkbox"
-                            className="rounded"
-                            value={o.value}
-                            id={`explore_${o.value}`}
-                            checked={explorationReasons.includes(o.value)}
-                            onChange={(e) => {
-                                if (e.target.checked) {
-                                    addExplorationReason(o.value);
-                                } else {
-                                    removeExplorationReason(o.value);
-                                }
-                            }}
-                        />
-                        <label className="text-sm dark:text-gray-400 text-gray-600" htmlFor={`explore_${o.value}`}>
-                            {o.label}
-                        </label>
-                    </div>
+                    <CheckboxInput
+                        key={o.value}
+                        value={o.value}
+                        label={o.label}
+                        checked={explorationReasons.includes(o.value)}
+                        onChange={(checked) => {
+                            if (checked) {
+                                addExplorationReason(o.value);
+                            } else {
+                                removeExplorationReason(o.value);
+                            }
+                        }}
+                    />
                 ))}
             </div>
 
             <InputField label="I'm signing up for Gitpod to..." />
             <div className="mt-4 ml-2 space-y-2">
                 {signupGoalsOptions.map((o) => (
-                    <div key={o.value} className="flex space-x-2 justify-start items-center">
-                        <input
-                            type="checkbox"
-                            className="rounded"
-                            value={o.value}
-                            id={`goals_${o.value}`}
-                            checked={signupGoals.includes(o.value)}
-                            onChange={(e) => {
-                                if (e.target.checked) {
-                                    addSignupGoal(o.value);
-                                } else {
-                                    removeSignupGoal(o.value);
-                                }
-                            }}
-                        />
-                        <label className="text-sm dark:text-gray-400 text-gray-600" htmlFor={`goals_${o.value}`}>
-                            {o.label}
-                        </label>
-                    </div>
+                    <CheckboxInput
+                        key={o.value}
+                        value={o.value}
+                        label={o.label}
+                        checked={signupGoals.includes(o.value)}
+                        onChange={(checked) => {
+                            if (checked) {
+                                addSignupGoal(o.value);
+                            } else {
+                                removeSignupGoal(o.value);
+                            }
+                        }}
+                    />
                 ))}
             </div>
 

From 61790c2e486111d8cfa11ff06b174dec502c73af Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Fri, 24 Feb 2023 01:20:31 +0000
Subject: [PATCH 3/6] wip

---
 .../src/components/forms/CheckboxInput.tsx    | 29 ++++++++++++++++---
 .../src/components/forms/InputField.tsx       |  3 +-
 .../src/components/forms/InputFieldHint.tsx   | 11 +++++++
 .../dashboard/src/onboarding/StepOrgInfo.tsx  |  2 ++
 4 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 components/dashboard/src/components/forms/InputFieldHint.tsx

diff --git a/components/dashboard/src/components/forms/CheckboxInput.tsx b/components/dashboard/src/components/forms/CheckboxInput.tsx
index d4f2bc25f15e5c..afea4fdcbc4968 100644
--- a/components/dashboard/src/components/forms/CheckboxInput.tsx
+++ b/components/dashboard/src/components/forms/CheckboxInput.tsx
@@ -4,17 +4,21 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import classNames from "classnames";
 import { FC, useCallback } from "react";
 import { useId } from "../../hooks/useId";
+import { InputFieldHint } from "./InputFieldHint";
 
 type Props = {
     id?: string;
     value: string;
     checked: boolean;
+    disabled?: boolean;
     label: string;
+    hint?: string;
     onChange: (checked: boolean) => void;
 };
-export const CheckboxInput: FC<Props> = ({ id, value, label, checked, onChange }) => {
+export const CheckboxInput: FC<Props> = ({ id, value, label, hint, checked, disabled = false, onChange }) => {
     const maybeId = useId();
     const elementId = id || maybeId;
 
@@ -26,16 +30,33 @@ export const CheckboxInput: FC<Props> = ({ id, value, label, checked, onChange }
     );
 
     return (
-        <label className="flex space-x-2 justify-start items-center" htmlFor={elementId}>
+        <label className="flex space-x-2 justify-start items-start" htmlFor={elementId}>
             <input
                 type="checkbox"
-                className="rounded"
+                // 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",
+                    { "bg-gray-600 dark:bg-gray-900": checked },
+                )}
                 value={value}
                 id={elementId}
                 checked={checked}
+                disabled={disabled}
                 onChange={handleChange}
             />
-            <span className="text-sm dark:text-gray-400 text-gray-600">{label}</span>
+            <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",
+                        disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-600 dark:text-gray-100",
+                    )}
+                >
+                    {label}
+                </span>
+
+                {hint && <InputFieldHint>{hint}</InputFieldHint>}
+            </div>
         </label>
     );
 };
diff --git a/components/dashboard/src/components/forms/InputField.tsx b/components/dashboard/src/components/forms/InputField.tsx
index 71948045ab9891..5eb59da3775df4 100644
--- a/components/dashboard/src/components/forms/InputField.tsx
+++ b/components/dashboard/src/components/forms/InputField.tsx
@@ -6,6 +6,7 @@
 
 import classNames from "classnames";
 import { FunctionComponent, memo, ReactNode } from "react";
+import { InputFieldHint } from "./InputFieldHint";
 
 type Props = {
     label?: ReactNode;
@@ -31,7 +32,7 @@ export const InputField: FunctionComponent<Props> = memo(({ label, id, hint, err
             )}
             {children}
             {error && <span className="text-red-500 text-sm">{error}</span>}
-            {hint && <span className="text-gray-500 text-sm">{hint}</span>}
+            {hint && <InputFieldHint>{hint}</InputFieldHint>}
         </div>
     );
 });
diff --git a/components/dashboard/src/components/forms/InputFieldHint.tsx b/components/dashboard/src/components/forms/InputFieldHint.tsx
new file mode 100644
index 00000000000000..9892989b0b9556
--- /dev/null
+++ b/components/dashboard/src/components/forms/InputFieldHint.tsx
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { FC } from "react";
+
+export const InputFieldHint: FC = ({ children }) => {
+    return <span className="text-gray-500 dark:text-gray-400 text-sm">{children}</span>;
+};
diff --git a/components/dashboard/src/onboarding/StepOrgInfo.tsx b/components/dashboard/src/onboarding/StepOrgInfo.tsx
index b9d515a8631b34..626168266cd83a 100644
--- a/components/dashboard/src/onboarding/StepOrgInfo.tsx
+++ b/components/dashboard/src/onboarding/StepOrgInfo.tsx
@@ -214,6 +214,8 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                         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) {

From c2afb98423039d437b9d53cfe89a40eecce8c4bd Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Fri, 24 Feb 2023 21:21:35 +0000
Subject: [PATCH 4/6] Adjusting styles and adding CheckboxInputField

---
 .../src/components/forms/CheckboxInput.tsx    | 38 +++++++++++++++----
 .../src/components/forms/InputField.tsx       |  2 +-
 .../src/components/forms/InputFieldHint.tsx   | 17 ++++++++-
 .../dashboard/src/onboarding/StepOrgInfo.tsx  | 15 +++-----
 4 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/components/dashboard/src/components/forms/CheckboxInput.tsx b/components/dashboard/src/components/forms/CheckboxInput.tsx
index afea4fdcbc4968..5e42de90fb4240 100644
--- a/components/dashboard/src/components/forms/CheckboxInput.tsx
+++ b/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>
     );
diff --git a/components/dashboard/src/components/forms/InputField.tsx b/components/dashboard/src/components/forms/InputField.tsx
index 5eb59da3775df4..64a0ec17eb6702 100644
--- a/components/dashboard/src/components/forms/InputField.tsx
+++ b/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}
diff --git a/components/dashboard/src/components/forms/InputFieldHint.tsx b/components/dashboard/src/components/forms/InputFieldHint.tsx
index 9892989b0b9556..2ec1333375b7d9 100644
--- a/components/dashboard/src/components/forms/InputFieldHint.tsx
+++ b/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>
+    );
 };
diff --git a/components/dashboard/src/onboarding/StepOrgInfo.tsx b/components/dashboard/src/onboarding/StepOrgInfo.tsx
index 626168266cd83a..1b23d7b66fa207 100644
--- a/components/dashboard/src/onboarding/StepOrgInfo.tsx
+++ b/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} />

From 31dabfc14f8882c61a5885f87af08b92a304d096 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Fri, 24 Feb 2023 21:26:23 +0000
Subject: [PATCH 5/6] renaming file for consistency

---
 .../forms/{CheckboxInput.tsx => CheckboxInputField.tsx}         | 0
 components/dashboard/src/onboarding/StepOrgInfo.tsx             | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename components/dashboard/src/components/forms/{CheckboxInput.tsx => CheckboxInputField.tsx} (100%)

diff --git a/components/dashboard/src/components/forms/CheckboxInput.tsx b/components/dashboard/src/components/forms/CheckboxInputField.tsx
similarity index 100%
rename from components/dashboard/src/components/forms/CheckboxInput.tsx
rename to components/dashboard/src/components/forms/CheckboxInputField.tsx
diff --git a/components/dashboard/src/onboarding/StepOrgInfo.tsx b/components/dashboard/src/onboarding/StepOrgInfo.tsx
index 1b23d7b66fa207..f9922424c5bcec 100644
--- a/components/dashboard/src/onboarding/StepOrgInfo.tsx
+++ b/components/dashboard/src/onboarding/StepOrgInfo.tsx
@@ -6,7 +6,7 @@
 
 import { User } from "@gitpod/gitpod-protocol";
 import { FC, useCallback, useMemo, useState } from "react";
-import { CheckboxInput, CheckboxInputField } from "../components/forms/CheckboxInput";
+import { CheckboxInput, CheckboxInputField } from "../components/forms/CheckboxInputField";
 import { SelectInputField } from "../components/forms/SelectInputField";
 import { TextInputField } from "../components/forms/TextInputField";
 import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutation";

From 1ff5885f8b7b7515f295b9708ed7adaee4d58619 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Fri, 24 Feb 2023 21:38:39 +0000
Subject: [PATCH 6/6] change back to semibold

---
 components/dashboard/src/components/forms/InputField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/src/components/forms/InputField.tsx b/components/dashboard/src/components/forms/InputField.tsx
index 64a0ec17eb6702..056b771750628a 100644
--- a/components/dashboard/src/components/forms/InputField.tsx
+++ b/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-md font-bold dark:text-gray-400",
+                        "text-md font-semibold dark:text-gray-400",
                         error ? "text-red-600" : "text-gray-600",
                     )}
                     htmlFor={id}