wip

Author: selfcontained

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>
     );
 };

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>
     );
 });

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>;
+};

components/dashboard/src/onboarding/StepOrgInfo.tsx

@@ -210,6 +210,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) {