From 3826fb31c1a170abaccd8eec54b34f3d044be3d1 Mon Sep 17 00:00:00 2001
From: janithjay <janithjayashan018@gmail.com>
Date: Thu, 23 Jul 2026 18:37:43 +0530
Subject: [PATCH] fix: resolve B2B components styling and layout issues

---
 packages/i18n/src/models/i18n.ts              |   7 ++
 packages/i18n/src/translations/en-US.ts       |   8 ++
 .../BaseCreateOrganization.styles.ts          |  44 +++++++-
 .../BaseCreateOrganization.tsx                | 105 ++++++++++++------
 .../BaseOrganizationList.styles.ts            |  14 ++-
 .../OrganizationList/BaseOrganizationList.tsx |  24 +++-
 .../BaseOrganizationProfile.styles.ts         |  27 ++++-
 .../BaseOrganizationProfile.tsx               |  28 ++++-
 8 files changed, 213 insertions(+), 44 deletions(-)

diff --git a/packages/i18n/src/models/i18n.ts b/packages/i18n/src/models/i18n.ts
index a3f8340a6..53c190230 100644
--- a/packages/i18n/src/models/i18n.ts
+++ b/packages/i18n/src/models/i18n.ts
@@ -56,7 +56,9 @@ export interface I18nTranslations {
   'elements.fields.email.label': string;
   'elements.fields.email.placeholder': string;
   'elements.fields.organization.name.label': string;
+  'elements.fields.organization.name.placeholder'?: string;
   'elements.fields.organization.handle.label': string;
+  'elements.fields.organization.handle.placeholder'?: string;
   'elements.fields.organization.description.label': string;
   'elements.fields.organization.select.label': string;
   'elements.fields.organization.select.placeholder': string;
@@ -135,7 +137,10 @@ export interface I18nTranslations {
   'organization.switcher.loading.more': string;
   'organization.switcher.no.organizations': string;
   'organization.switcher.error.prefix': string;
+  'organization.list.heading'?: string;
+  'organization.list.subheading'?: string;
   'organization.profile.heading': string;
+  'organization.profile.subheading'?: string;
   'organization.profile.loading': string;
   'organization.profile.error': string;
 
@@ -144,6 +149,8 @@ export interface I18nTranslations {
   /* |---------------------------------------------------------------| */
 
   'organization.create.heading': string;
+  'organization.create.subheading'?: string;
+  'organization.create.description.placeholder'?: string;
   'organization.create.buttons.create_organization.text': string;
   'organization.create.buttons.create_organization.loading.text': string;
   'organization.create.buttons.cancel.text': string;
diff --git a/packages/i18n/src/translations/en-US.ts b/packages/i18n/src/translations/en-US.ts
index dd12f1a11..6bbdc63e0 100644
--- a/packages/i18n/src/translations/en-US.ts
+++ b/packages/i18n/src/translations/en-US.ts
@@ -59,7 +59,9 @@ const translations: I18nTranslations = {
   'elements.fields.email.label': 'Email',
   'elements.fields.email.placeholder': 'Enter your email',
   'elements.fields.organization.name.label': 'Organization Name',
+  'elements.fields.organization.name.placeholder': 'Organization Name',
   'elements.fields.organization.handle.label': 'Organization Handle',
+  'elements.fields.organization.handle.placeholder': 'my-organization',
   'elements.fields.organization.description.label': 'Organization Description',
   'elements.fields.organization.select.label': 'Select Organization',
   'elements.fields.organization.select.placeholder': 'Choose an organization',
@@ -139,11 +141,17 @@ const translations: I18nTranslations = {
   'organization.switcher.no.organizations': 'No organizations found',
   'organization.switcher.error.prefix': 'Error:',
 
+  'organization.list.heading': 'Organizations List',
+  'organization.list.subheading': 'View list of organizations.',
+
   'organization.profile.heading': 'Organization Profile',
+  'organization.profile.subheading': 'Manage your organization details.',
   'organization.profile.loading': 'Loading organization...',
   'organization.profile.error': 'Failed to load organization',
 
   'organization.create.heading': 'Create Organization',
+  'organization.create.subheading': 'Set up a new organization workspace.',
+  'organization.create.description.placeholder': 'Enter organization description',
   'organization.create.buttons.create_organization.text': 'Create Organization',
   'organization.create.buttons.create_organization.loading.text': 'Creating...',
   'organization.create.buttons.cancel.text': 'Cancel',
diff --git a/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts b/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
index 605a8f0aa..7021d0c96 100644
--- a/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
+++ b/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
@@ -47,6 +47,26 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
 
+    const headerContainer: string = css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+
+    const title: string = css`
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: ${theme.vars.colors.text.primary};
+      margin: 0 0 6px 0;
+      letter-spacing: -0.01em;
+    `;
+
+    const subtitle: string = css`
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.secondary};
+      margin: 0;
+    `;
+
     const form: string = css`
       display: flex;
       flex-direction: column;
@@ -63,13 +83,27 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
 
     const field: string = css`
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: ${theme.vars.spacing.unit} 0;
-      border-bottom: 1px solid ${theme.vars.colors.border};
       min-height: 32px;
     `;
 
+    const label: string = css`
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: ${theme.vars.colors.text.primary};
+      width: 200px;
+      min-width: 200px;
+      flex-shrink: 0;
+      text-align: left;
+      padding-right: calc(${theme.vars.spacing.unit} * 2);
+      padding-top: calc(${theme.vars.spacing.unit} * 0.75);
+      white-space: nowrap;
+      line-height: 1.4;
+    `;
+
     const fieldGroup: string = css`
+      flex: 1;
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 0.5);
@@ -87,6 +121,8 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
       min-height: 80px;
       resize: vertical;
       outline: none;
+      box-sizing: border-box;
+      transition: border-color 0.2s, box-shadow 0.2s;
       &:focus {
         border-color: ${theme.vars.colors.primary.main};
         box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;
@@ -153,12 +189,16 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
       fieldGroup,
       form,
       header,
+      headerContainer,
       infoContainer,
       input,
+      label,
       popup,
       root,
+      subtitle,
       textarea,
       textareaError,
+      title,
       value,
     };
   }, [
diff --git a/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx b/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
index c7f5d1d4c..325f806dd 100644
--- a/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
+++ b/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
@@ -28,6 +28,7 @@ import DialogPrimitive from '../../primitives/Dialog/Dialog';
 import FormControl from '../../primitives/FormControl/FormControl';
 import InputLabel from '../../primitives/InputLabel/InputLabel';
 import TextField from '../../primitives/TextField/TextField';
+import Typography from '../../primitives/Typography/Typography';
 
 const logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(
   '@asgardeo/react',
@@ -194,9 +195,24 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
     }
   };
 
+  const getTranslation = (key: string, fallback: string): string => {
+    const text: string = t(key);
+    return text && text !== key ? text : fallback;
+  };
+
   const createOrganizationContent: ReactElement = (
     <div className={cx(styles['root'], cardLayout && styles['card'], className)} style={style}>
       <div className={cx(styles['content'])}>
+        {mode !== 'popup' && (
+          <div className={cx(styles['headerContainer'])}>
+            <Typography variant="h5" component="h1" className={cx(styles['title'])}>
+              {getTranslation('organization.create.heading', title || 'Create organization')}
+            </Typography>
+            <Typography variant="body2" color="textSecondary" className={cx(styles['subtitle'])}>
+              {getTranslation('organization.create.subheading', 'Set up a new organization workspace.')}
+            </Typography>
+          </div>
+        )}
         <form id="create-organization-form" className={cx(styles['form'])} onSubmit={handleSubmit}>
           {error && (
             <AlertPrimitive variant="error" className={styles['errorAlert']}>
@@ -204,46 +220,65 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
               <AlertPrimitive.Description>{error}</AlertPrimitive.Description>
             </AlertPrimitive>
           )}
-          <div className={cx(styles['fieldGroup'])}>
-            <TextField
-              label={`${t('elements.fields.organization.name.label')}`}
-              placeholder={t('elements.fields.organization.name.placeholder')}
-              value={formData.name}
-              onChange={(e: ChangeEvent<HTMLInputElement>): void => handleNameChange(e.target.value)}
-              disabled={loading}
-              required
-              error={formErrors.name}
-              className={cx(styles['input'])}
-            />
-          </div>
-          <div className={cx(styles['fieldGroup'])}>
-            <TextField
-              label={`${t('elements.fields.organization.handle.label') || 'Organization Handle'}`}
-              placeholder={t('elements.fields.organization.handle.placeholder') || 'my-organization'}
-              value={formData.handle}
-              onChange={(e: ChangeEvent<HTMLInputElement>): void => handleInputChange('handle', e.target.value)}
-              disabled={loading}
-              required
-              error={formErrors.handle}
-              helperText="This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed."
-              className={cx(styles['input'])}
-            />
+
+          <div className={cx(styles['field'])}>
+            <InputLabel required className={cx(styles['label'])}>
+              {getTranslation('elements.fields.organization.name.label', 'Organization Name')}
+            </InputLabel>
+            <div className={cx(styles['fieldGroup'])}>
+              <TextField
+                placeholder={getTranslation('elements.fields.organization.name.placeholder', 'Organization Name')}
+                value={formData.name}
+                onChange={(e: ChangeEvent<HTMLInputElement>): void => handleNameChange(e.target.value)}
+                disabled={loading}
+                required
+                error={formErrors.name}
+                className={cx(styles['input'])}
+              />
+            </div>
           </div>
-          <div className={cx(styles['fieldGroup'])}>
-            <FormControl error={formErrors.description}>
-              <InputLabel required>{t('elements.fields.organization.description.label')}</InputLabel>
-              <textarea
-                className={cx(styles['textarea'], formErrors.description && styles['textareaError'])}
-                placeholder={t('organization.create.description.placeholder')}
-                value={formData.description}
-                onChange={(e: ChangeEvent<HTMLTextAreaElement>): void =>
-                  handleInputChange('description', e.target.value)
-                }
+
+          <div className={cx(styles['field'])}>
+            <InputLabel required className={cx(styles['label'])}>
+              {getTranslation('elements.fields.organization.handle.label', 'Organization Handle')}
+            </InputLabel>
+            <div className={cx(styles['fieldGroup'])}>
+              <TextField
+                placeholder={getTranslation('elements.fields.organization.handle.placeholder', 'my-organization')}
+                value={formData.handle}
+                onChange={(e: ChangeEvent<HTMLInputElement>): void => handleInputChange('handle', e.target.value)}
                 disabled={loading}
                 required
+                error={formErrors.handle}
+                helperText="This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed."
+                className={cx(styles['input'])}
               />
-            </FormControl>
+            </div>
           </div>
+
+          <div className={cx(styles['field'])}>
+            <InputLabel required className={cx(styles['label'])}>
+              {getTranslation('elements.fields.organization.description.label', 'Organization Description')}
+            </InputLabel>
+            <div className={cx(styles['fieldGroup'])}>
+              <FormControl error={formErrors.description}>
+                <textarea
+                  className={cx(styles['textarea'], formErrors.description && styles['textareaError'])}
+                  placeholder={getTranslation(
+                    'organization.create.description.placeholder',
+                    'Enter organization description',
+                  )}
+                  value={formData.description}
+                  onChange={(e: ChangeEvent<HTMLTextAreaElement>): void =>
+                    handleInputChange('description', e.target.value)
+                  }
+                  disabled={loading}
+                  required
+                />
+              </FormControl>
+            </div>
+          </div>
+
           {renderAdditionalFields && renderAdditionalFields()}
         </form>
         <div className={cx(styles['actions'])}>
diff --git a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
index a839f214d..edfaa4c76 100644
--- a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
+++ b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
@@ -46,15 +46,21 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
 
+    const headerContainer: string = css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+
     const headerInfo: string = css`
       flex: 1;
     `;
 
     const title: string = css`
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin: 0 0 8px 0;
+      font-size: 1.75rem;
+      font-weight: 700;
       color: ${theme.vars.colors.text.primary};
+      margin: 0 0 calc(${theme.vars.spacing.unit} * 0.5) 0;
     `;
 
     const subtitle: string = css`
@@ -239,7 +245,7 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
       errorContainer,
       errorMargin,
       header,
-      headerInfo,
+      headerContainer,
       listContainer,
       loadMoreButton,
       loadMoreMargin,
diff --git a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
index 94399004b..89cd6ac33 100644
--- a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
+++ b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
@@ -123,6 +123,11 @@ export interface BaseOrganizationListProps {
    */
   style?: CSSProperties;
 
+  /**
+   * Subtitle for the component
+   */
+  subheading?: string;
+
   /**
    * Title for the popup dialog (only used in popup mode)
    */
@@ -274,7 +279,8 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
   renderLoadMore,
   renderOrganization,
   style,
-  title = 'Organizations',
+  title,
+  subheading,
   showStatus,
   preferences,
 }: BaseOrganizationListProps): ReactElement => {
@@ -371,8 +377,24 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
     return emptyContent;
   }
 
+  const getTranslation = (key: string, fallback: string): string => {
+    const text: string = t(key);
+    return text && text !== key ? text : fallback;
+  };
+
   const organizationListContent: ReactElement = (
     <div className={cx(styles['root'], className)} style={style}>
+      {mode !== 'popup' && (
+        <div className={cx(styles['headerContainer'])}>
+          <Typography variant="h5" component="h1" className={cx(styles['title'])}>
+            {getTranslation('organization.list.heading', title || 'Organizations List')}
+          </Typography>
+          <Typography variant="body2" color="textSecondary" className={cx(styles['subtitle'])}>
+            {getTranslation('organization.list.subheading', subheading || 'View list of organizations.')}
+          </Typography>
+        </div>
+      )}
+
       {/* Header with total count and refresh button */}
       <div className={cx(styles['header'])}>
         <div className={cx(styles['headerInfo'])}>
diff --git a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
index 1205b4ece..6ae7f7bb4 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
+++ b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
@@ -92,6 +92,7 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
         color: ${theme.vars.colors.text.secondary};
         margin: 0;
         font-family: monospace;
+        text-align: left;
       `,
       header: css`
         display: flex;
@@ -100,6 +101,11 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
         margin-bottom: calc(${theme.vars.spacing.unit} * 3);
         padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       `,
+      headerContainer: css`
+        margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+        padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+        border-bottom: 1px solid ${theme.vars.colors.border};
+      `,
       infoContainer: css`
         display: flex;
         flex-direction: column;
@@ -109,18 +115,26 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
         font-size: 0.875rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
-        width: 120px;
+        width: 200px;
+        min-width: 200px;
         flex-shrink: 0;
         line-height: 28px;
+        text-align: left;
+        white-space: nowrap;
       `,
       name: css`
         font-size: 1.5rem;
         font-weight: 600;
         margin: 0 0 8px 0;
         color: ${theme.vars.colors.text.primary};
+        text-align: left;
       `,
       orgInfo: css`
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: left;
       `,
       permissionBadge: css`
         padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
@@ -160,6 +174,17 @@ const useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>
         text-transform: uppercase;
         letter-spacing: 0.5px;
       `,
+      subtitle: css`
+        font-size: 0.875rem;
+        color: ${theme.vars.colors.text.secondary};
+        margin: 0;
+      `,
+      title: css`
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: ${theme.vars.colors.text.primary};
+        margin: 0 0 calc(${theme.vars.spacing.unit} * 0.5) 0;
+      `,
       value: css`
         color: ${theme.vars.colors.text.primary};
         flex: 1;
diff --git a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
index 145322702..06f746816 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
+++ b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
@@ -21,12 +21,14 @@ import {cx} from '@emotion/css';
 import {FC, ReactElement, ReactNode, useState, useCallback} from 'react';
 import useStyles from './BaseOrganizationProfile.styles';
 import useTheme from '../../../contexts/Theme/useTheme';
+import useTranslation from '../../../hooks/useTranslation';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
 import CardPrimitive from '../../primitives/Card/Card';
 import DialogPrimitive from '../../primitives/Dialog/Dialog';
 import KeyValueInput from '../../primitives/KeyValueInput/KeyValueInput';
 import TextField from '../../primitives/TextField/TextField';
+import Typography from '../../primitives/Typography/Typography';
 
 export interface BaseOrganizationProfileProps {
   /**
@@ -111,6 +113,11 @@ export interface BaseOrganizationProfileProps {
    */
   saveButtonText?: string;
 
+  /**
+   * Custom subheading for the profile.
+   */
+  subheading?: string;
+
   /**
    * Custom title for the profile.
    */
@@ -187,7 +194,9 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
   className = '',
   cardLayout = true,
   organization,
-  title = 'Organization Profile',
+  preferences,
+  title,
+  subheading,
   mode = 'inline',
   editable = true,
   onOpenChange,
@@ -227,6 +236,7 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
   ],
 }: BaseOrganizationProfileProps): ReactElement => {
   const {theme, colorScheme} = useTheme();
+  const {t} = useTranslation(preferences?.i18n);
   const styles: Record<string, string> = useStyles(theme, colorScheme);
   const [editedOrganization, setEditedOrganization] = useState(organization);
   const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});
@@ -507,8 +517,24 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
     return fallback;
   }
 
+  const getTranslation = (key: string, fallback: string): string => {
+    const text: string = t(key);
+    return text && text !== key ? text : fallback;
+  };
+
   const profileContent: ReactElement = (
     <CardPrimitive className={cx(styles['root'], cardLayout && styles['card'], className)}>
+      {mode !== 'popup' && (
+        <div className={cx(styles['headerContainer'])}>
+          <Typography variant="h5" component="h1" className={cx(styles['title'])}>
+            {getTranslation('organization.profile.heading', title || 'Organization Profile')}
+          </Typography>
+          <Typography variant="body2" color="textSecondary" className={cx(styles['subtitle'])}>
+            {getTranslation('organization.profile.subheading', subheading || 'Manage your organization details.')}
+          </Typography>
+        </div>
+      )}
+
       <div className={cx(styles['header'])}>
         <Avatar name={getOrgInitials(organization.name)} size={80} alt={`${organization.name} logo`} />
         <div className={cx(styles['orgInfo'])}>