feat: improve recent domains section spacing and text truncation (#40970)
### 📝 Summary This PR improves the visual design and user experience of the recent domains section on the signup page with better spacing, text truncation, and simplified domain validation to account for dev and app subdomains. ### 🎨 Changes Made #### **SignUp Component (`app/client/src/pages/UserAuth/SignUp.tsx`)** - **Reduced top margin**: Changed from `mt-12` to `mt-8` for better visual balance - **Improved spacing**: Added conditional bottom margin logic - removed margin from the last domain item to prevent extra spacing - **Enhanced text display**: Added `max-w-[180px] line-clamp-1` classes to organization names and domain text to: - Limit maximum width to 180px - Truncate long text to single line with ellipsis - Prevent layout breaking with long domain names #### **Domain Validation (`app/client/src/utils/multiOrgDomains.ts`)** - **Simplified validation**: Removed redundant regex check `(/^[a-z0-9-]+\.appsmith\.com$/i.test(domain))` from `isValidAppsmithDomain` function to account for dev and app subdomains - **Cleaner logic**: Validation now relies on the existing prefix checks and `.appsmith.com` suffix validation /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/15727210490> > Commit: 5f976b05a7f02396afb05b2740cb2564253ca74e > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=15727210490&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Sanity, @tag.Authentication` > Spec: > <hr>Thu, 19 Jun 2025 00:18:50 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 - **Style** - Improved spacing and layout in the recent domains section for a cleaner appearance. - Organization name and domain text now truncate with ellipsis if too long, ensuring single-line display. - **Bug Fixes** - Updated domain validation to be less restrictive, allowing a wider range of subdomain formats. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
93f4a85b6b
commit
ad36f76920
|
|
@ -97,7 +97,7 @@ const validate = (values: SignupFormValues) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const recentDomainsSection = recentDomains.length > 0 && (
|
const recentDomainsSection = recentDomains.length > 0 && (
|
||||||
<div className="mt-12">
|
<div className="mt-8">
|
||||||
<div className="mb-2">
|
<div className="mb-2">
|
||||||
<Text kind="body-m">{createMessage(YOU_VE_ALREADY_SIGNED_INTO)}</Text>
|
<Text kind="body-m">{createMessage(YOU_VE_ALREADY_SIGNED_INTO)}</Text>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -112,9 +112,13 @@ const recentDomainsSection = recentDomains.length > 0 && (
|
||||||
|
|
||||||
const avatarLetter = String.fromCharCode(65 + (index % 26));
|
const avatarLetter = String.fromCharCode(65 + (index % 26));
|
||||||
|
|
||||||
|
const isLastItem = index === recentDomains.length - 1;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex items-center justify-between p-1 mb-3"
|
className={`flex items-center justify-between p-1 ${
|
||||||
|
isLastItem ? "mb-0" : "mb-3"
|
||||||
|
}`}
|
||||||
key={domain}
|
key={domain}
|
||||||
>
|
>
|
||||||
<div className="flex items-center space-x-3">
|
<div className="flex items-center space-x-3">
|
||||||
|
|
@ -122,10 +126,10 @@ const recentDomainsSection = recentDomains.length > 0 && (
|
||||||
{avatarLetter}
|
{avatarLetter}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<span className="text-md font-semibold text-gray-700">
|
<span className="text-md font-semibold text-gray-700 max-w-[180px] line-clamp-1">
|
||||||
{orgName}
|
{orgName}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs font-light text-gray-500">
|
<span className="text-xs font-light text-gray-500 max-w-[180px] line-clamp-1">
|
||||||
{domain}
|
{domain}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,7 @@ function isValidAppsmithDomain(domain: string): boolean {
|
||||||
domain.endsWith(".appsmith.com") &&
|
domain.endsWith(".appsmith.com") &&
|
||||||
!domain.startsWith("login.") &&
|
!domain.startsWith("login.") &&
|
||||||
!domain.startsWith("release.") &&
|
!domain.startsWith("release.") &&
|
||||||
!domain.startsWith("dev.") &&
|
!domain.startsWith("dev.")
|
||||||
/^[a-z0-9-]+\.appsmith\.com$/i.test(domain)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user