fix: improve full name input styling to match radio buttons (#40727)

### Summary
This PR updates the styling of the user full name input field on the
onboarding screen to match the styling of the radio button groups,
creating a more consistent and polished UI.

### Problem
The full name input field in the onboarding form had inconsistent
styling compared to the radio button groups, which created a visually
disjointed user experience.

### Solution
- Created a styled version of `FormTextField` that matches the styling
of radio buttons
- Added proper spacing with a dedicated `InputSection` component
- Removed unnecessary vertical spacing elements
- Ensured consistent typography, sizing, and spacing across form
elements

### Changes
- Added `StyledFormTextField` with custom CSS to match radio button
styling:
  - Same font size and weight for labels
  - Consistent height, padding, and border-radius
  - Full width input field
- Created `InputSection` for consistent vertical spacing
- Replaced original `FormTextField` with the styled version
- Removed redundant `Space` components

### Screenshots
![Before](
<img width="1449" alt="Screenshot 2025-05-22 at 6 50 04 AM"
src="https://github.com/user-attachments/assets/54384e0d-4874-4550-8415-54b15a8e9b13"
/>
) | ![After](
<img width="1452" alt="Screenshot 2025-05-22 at 6 39 38 AM"
src="https://github.com/user-attachments/assets/01b8fd1e-0c47-4d8f-abe7-4f47a31366b6"
/>
)

## Automation

/ok-to-test tags="@tag.Sanity, @tag.Authentication"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/15205128744>
> Commit: 6e26d5ad7afef489697362b9202d7fd3be5b63a0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=15205128744&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Authentication`
> Spec:
> <hr>Fri, 23 May 2025 08:33:29 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a required full name field to the non-super user profiling form,
displayed when cloud billing is enabled.
- **Style**
- Improved input field appearance and adjusted vertical spacing for a
cleaner form layout.
- **Refactor**
- Streamlined form styling by introducing new styled components and
localizing spacing definitions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/ce/constants/messages.ts

@@ -1596,6 +1596,8 @@ export const WELCOME_FORM_PROFICIENCY_ERROR_MESSAGE = () =>
   "Please select a proficiency level";
 export const WELCOME_FORM_USE_CASE_ERROR_MESSAGE = () =>
   "Please select an use case";
+export const WELCOME_FORM_FULL_NAME_ERROR_MESSAGE = () =>
+  "Please enter your full name";
 
 export const WELCOME_FORM_EMAIL_ERROR_MESSAGE = () =>
   "Enter a valid email address.";

app/client/src/pages/setup/DetailsForm.tsx

@@ -23,7 +23,6 @@ import { proficiencyOptions, useCaseOptions } from "./constants";
 import { isAirgapped } from "ee/utils/airgapHelpers";
 import { setFirstTimeUserOnboardingTelemetryCalloutVisibility } from "utils/storage";
 import RadioButtonGroup from "components/editorComponents/RadioButtonGroup";
-import { Space } from "./NonSuperUserProfilingQuestions";
 import CsrfTokenInput from "../UserAuth/CsrfTokenInput";
 
 export interface DetailsFormValues {
@@ -78,6 +77,10 @@ const ButtonWrapper = styled.div`
   gap: ${(props) => props.theme.spaces[4]}px;
 `;
 
+const Space = styled.div`
+  height: 40px;
+`;
+
 export default function DetailsForm(
   props: SetupFormProps & {
     isFirstPage: boolean;

app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx

@@ -13,6 +13,7 @@ import {
   WELCOME_FORM_PROFICIENCY_ERROR_MESSAGE,
   WELCOME_FORM_USE_CASE_ERROR_MESSAGE,
   WELCOME_FORM_FULL_NAME,
+  WELCOME_FORM_FULL_NAME_ERROR_MESSAGE,
 } from "ee/constants/messages";
 import { connect } from "react-redux";
 import type { DefaultRootState } from "react-redux";
@@ -33,6 +34,30 @@ const StyledButton = styled(Button)`
   width: 160px;
 `;
 
+const StyledFormTextField = styled(FormTextField)`
+  .ads-v2-input__input {
+    height: 36px;
+    border-radius: var(--ads-v2-border-radius);
+    padding: var(--ads-v2-spaces-3);
+    font-size: var(--ads-font-size-4);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .ads-v2-input__label {
+    font-size: var(--ads-font-size-4);
+    font-weight: var(--ads-font-weight-bold-xl);
+    color: var(--ads-v2-color-gray-700);
+    margin-bottom: 0.5rem;
+  }
+`;
+
+const InputSection = styled.div`
+  margin-bottom: ${(props) => props.theme.spaces[12]}px;
+  margin-top: ${(props) => props.theme.spaces[10]}px;
+  max-width: 505px;
+`;
+
 interface UserFormProps {
   onGetStarted?: (proficiency?: string, useCase?: string) => void;
 }
@@ -40,18 +65,15 @@ interface UserFormProps {
 interface NonSuperUserFormData {
   proficiency?: string;
   useCase?: string;
+  fullName?: string;
 }
 
 export const Space = styled.div`
-  height: 40px;
+  height: 20px;
 `;
 
-// TODO: Fix this the next time the file is edited
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const validate = (values: any) => {
-  // TODO: Fix this the next time the file is edited
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const errors: any = {};
+const validate = (values: NonSuperUserFormData) => {
+  const errors: Partial<NonSuperUserFormData> = {};
 
   if (!values.proficiency) {
     errors.proficiency = createMessage(WELCOME_FORM_PROFICIENCY_ERROR_MESSAGE);
@@ -61,6 +83,10 @@ const validate = (values: any) => {
     errors.useCase = createMessage(WELCOME_FORM_USE_CASE_ERROR_MESSAGE);
   }
 
+  if (!values.fullName) {
+    errors.fullName = createMessage(WELCOME_FORM_FULL_NAME_ERROR_MESSAGE);
+  }
+
   return errors;
 };
 
@@ -76,17 +102,16 @@ function NonSuperUserProfilingQuestions(
   return (
     <form onSubmit={props.handleSubmit(onSubmit)}>
       {isCloudBillingEnabled && (
-        <>
-          <Space />
-          <FormTextField
+        <InputSection>
+          <StyledFormTextField
             data-testid="t--user-full-name"
             label={createMessage(WELCOME_FORM_FULL_NAME)}
             name="fullName"
             placeholder="Enter your full name"
           />
-          <Space />
-        </>
+        </InputSection>
       )}
+      <Space />
       <Field
         component={RadioButtonGroup}
         label={createMessage(WELCOME_FORM_NON_SUPER_USER_PROFICIENCY_LEVEL)}