Tweak design

Tool: gitpod/catfood.gitpod.cloud

Author: filiptronicek

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

@@ -16,16 +16,18 @@ type Props = {
     topMargin?: boolean;
     className?: string;
     disabled?: boolean;
+    labelHidden?: boolean;
 };
 
 export const InputField: FunctionComponent<Props> = memo(
-    ({ label, id, hint, error, topMargin = true, className, children, disabled = false }) => {
+    ({ label, id, hint, error, topMargin = true, className, children, disabled = false, labelHidden = false }) => {
         return (
             <div className={cn("flex flex-col space-y-2", { "mt-4": topMargin }, className)}>
                 {label && (
                     <label
                         className={cn(
                             "text-md font-semibold",
+                            { "sr-only": labelHidden },
                             disabled
                                 ? "text-gray-400 dark:text-gray-400"
                                 : error

components/dashboard/src/teams/TeamOnboarding.tsx

@@ -24,12 +24,13 @@ import { Textarea } from "@podkit/forms/TextArea";
 import Modal, { ModalFooter, ModalBody, ModalHeader } from "../components/Modal";
 import { Button } from "@podkit/buttons/Button";
 import { SwitchInputField } from "@podkit/switch/Switch";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@podkit/select/Select";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@podkit/dropdown/DropDown";
 
 const sampleMarkdown = `“With Gitpod, you'll boost your productivity and streamline your workflow, giving you the freedom to work how you want while helping our team meet its efficiency goals.”
 
 **Hannah Cole** - CTO Acme, Inc.
 `;
+const gitpodWelcomeSubheading = `Gitpod’s sandboxed, ephemeral development environments enable you to use your existing tools without worrying about vulnerabilities impacting their local machines.`;
 
 export default function TeamOnboardingPage() {
     useDocumentTitle("Organization Settings - Onboarding");
@@ -121,41 +122,43 @@ export default function TeamOnboardingPage() {
                         members once they sign up and join your organization.
                     </Subheading>
 
+                    <InputField
+                        label="Enabled"
+                        hint={<>Enable showing the message to new organization members.</>}
+                        id="show-welcome-message"
+                    >
+                        <SwitchInputField
+                            id="show-welcome-message"
+                            checked={showWelcomeMessage}
+                            disabled={!isOwner || updateTeamSettings.isLoading}
+                            onCheckedChange={setShowWelcomeMessage}
+                            label=""
+                        />
+                    </InputField>
+
                     <span className="text-pk-content-secondary text-sm">
                         Here's a preview of the welcome message that will be shown to your organization members:
                     </span>
                     <WelcomeMessagePreview
                         welcomeMessage={welcomeMessage}
                         setWelcomeMessageEditorOpen={setWelcomeMessageEditorOpen}
                         avatarURL={avatarURL}
+                        disabled={!showWelcomeMessage}
                     />
 
-                    <Modal onClose={() => setWelcomeMessageEditorOpen(false)} visible={welcomeMessageEditorOpen}>
+                    <Modal
+                        onClose={() => setWelcomeMessageEditorOpen(false)}
+                        visible={welcomeMessageEditorOpen}
+                        containerClassName="min-[576px]:max-w-[650px]"
+                    >
                         <ModalHeader>Edit welcome message</ModalHeader>
                         <ModalBody>
-                            <InputField
-                                label="Enabled"
-                                hint={<>Enable showing the message to new organization members.</>}
-                                id="show-welcome-message"
-                            >
-                                <SwitchInputField
-                                    id="show-welcome-message"
-                                    checked={showWelcomeMessage}
-                                    disabled={!isOwner || updateTeamSettings.isLoading}
-                                    onCheckedChange={setShowWelcomeMessage}
-                                    label=""
-                                />
-                            </InputField>
-
-                            <OrgMemberSelect
-                                avatarURL={avatarURL}
-                                setAvatarURL={setAvatarURL}
-                                disabled={!showWelcomeMessage}
-                            />
                             <WelcomeMessageEditor
                                 welcomeMessage={welcomeMessage}
                                 setWelcomeMessage={setWelcomeMessage}
                                 disabled={!showWelcomeMessage}
+                                avatarURL={avatarURL}
+                                setAvatarURL={setAvatarURL}
                             />
                         </ModalBody>
                         <ModalFooter>
@@ -176,28 +179,27 @@ export default function TeamOnboardingPage() {
 type WelcomeMessagePreviewProps = {
     welcomeMessage: string;
     avatarURL: string | undefined;
+    disabled?: boolean;
     setWelcomeMessageEditorOpen: (open: boolean) => void;
 };
 const WelcomeMessagePreview = ({
     welcomeMessage,
     avatarURL,
+    disabled,
     setWelcomeMessageEditorOpen,
 }: WelcomeMessagePreviewProps) => {
     return (
         <div className="max-w-2xl mx-auto">
             <div className="flex justify-between gap-2 items-center">
                 <Heading2 className="py-6">Welcome to Gitpod</Heading2>
-                <Button variant="secondary" onClick={() => setWelcomeMessageEditorOpen(true)}>
+                <Button variant="secondary" onClick={() => setWelcomeMessageEditorOpen(true)} disabled={disabled}>
                     Edit
                 </Button>
             </div>
-            <Subheading>
-                Gitpod’s sandboxed, ephemeral development environments enable you to use your existing tools without
-                worrying about vulnerabilities impacting their local machines.
-            </Subheading>
+            <Subheading>{gitpodWelcomeSubheading}</Subheading>
             {/* todo: sanitize md */}
             <div className="p-8 my-4 bg-pk-surface-secondary text-pk-content-primary rounded-xl flex flex-col gap-5 items-center justify-center">
-                <img src={avatarURL} alt="" className="w-12 h-12 rounded-full" />
+                {avatarURL && <img src={avatarURL} alt="" className="w-12 h-12 rounded-full" />}
                 <MDEditor.Markdown
                     source={welcomeMessage}
                     className="md-preview space-y-4 text-center bg-pk-surface-secondary"
@@ -211,18 +213,33 @@ type WelcomeMessageEditorProps = {
     welcomeMessage: string;
     setWelcomeMessage: (welcomeMessage: string) => void;
     disabled?: boolean;
+    avatarURL: string | undefined;
+    setAvatarURL: (avatarURL: string | undefined) => void;
 };
-const WelcomeMessageEditor = ({ welcomeMessage, setWelcomeMessage, disabled }: WelcomeMessageEditorProps) => {
+const WelcomeMessageEditor = ({
+    welcomeMessage,
+    setWelcomeMessage,
+    disabled,
+    avatarURL,
+    setAvatarURL,
+}: WelcomeMessageEditorProps) => {
     return (
-        <InputField label="Welcome message" error={undefined} className="mb-4">
-            <Textarea
-                className="bg-pk-surface-secondary text-pk-content-primary w-full p-4 rounded-xl min-h-[400px]"
-                value={welcomeMessage}
-                placeholder="Write a welcome message to your organization members. Markdown formatting is supported."
-                onChange={(e) => setWelcomeMessage(e.target.value)}
-                disabled={disabled}
-            />
-        </InputField>
+        <div className="space-y-4">
+            <TextInput readOnly value="Welcome to Gitpod" className="cursor-default"></TextInput>
+            <Textarea value={gitpodWelcomeSubheading} readOnly className="cursor-default resize-none" />
+            <div className="w-full flex justify-center">
+                <OrgMemberInput avatarURL={avatarURL} setAvatarURL={setAvatarURL} disabled={disabled} />
+            </div>
+            <InputField label="Welcome message" error={undefined} className="mb-4" labelHidden>
+                <Textarea
+                    className="bg-pk-surface-secondary text-pk-content-primary w-full p-4 rounded-xl min-h-[150px]"
+                    value={welcomeMessage}
+                    placeholder="Write a welcome message to your organization members. Markdown formatting is supported."
+                    onChange={(e) => setWelcomeMessage(e.target.value)}
+                    disabled={disabled}
+                />
+            </InputField>
+        </div>
     );
 };
 
@@ -231,35 +248,39 @@ type OrgMemberSelectProps = {
     setAvatarURL: (avatarURL: string | undefined) => void;
     disabled?: boolean;
 };
-const OrgMemberSelect = ({ avatarURL, setAvatarURL, disabled }: OrgMemberSelectProps) => {
+const OrgMemberInput = ({ avatarURL, setAvatarURL, disabled }: OrgMemberSelectProps) => {
     const { data: members } = useListOrganizationMembers();
 
     return (
-        <InputField label="Show an avatar on the welcome message" error={undefined} className="mb-4">
-            <Select value={avatarURL} onValueChange={setAvatarURL} disabled={disabled}>
-                <SelectTrigger>
-                    <SelectValue placeholder="No member" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup>
-                        <SelectItem value="disabled">No member</SelectItem>
-                    </SelectGroup>
-                    <SelectGroup>
-                        {members?.map((member) => (
-                            <SelectItem key={member.userId} value={member.avatarUrl || member.userId}>
-                                <div className="flex items-center gap-2">
-                                    <img
-                                        src={member.avatarUrl}
-                                        className="w-4 h-4 rounded-full"
-                                        alt={member.fullName}
-                                    />
-                                    {member.fullName}
-                                </div>
-                            </SelectItem>
-                        ))}
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
-        </InputField>
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <div className="flex flex-col justify-center items-center gap-2">
+                    {avatarURL ? (
+                        <img src={avatarURL} alt="" className="w-16 h-16 rounded-full" />
+                    ) : (
+                        <div className="w-16 h-16 rounded-full bg-[#EA71DE]" />
+                    )}
+                    <Button variant="secondary" size="sm">
+                        Change Photo
+                    </Button>
+                </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuItem key="disabled" onClick={() => setAvatarURL(undefined)}>
+                    <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full bg-pk-surface-tertiary" />
+                        Disable image
+                    </div>
+                </DropdownMenuItem>
+                {members?.map((member) => (
+                    <DropdownMenuItem key={member.userId} onClick={() => setAvatarURL(member.avatarUrl)}>
+                        <div className="flex items-center gap-2">
+                            <img src={member.avatarUrl} alt={member.fullName} className="w-4 h-4 rounded-full" />
+                            {member.fullName}
+                        </div>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
     );
 };