docs: polish tenant type docs

docs/docs/recipes/custom-domain/README.mdx

@@ -2,11 +2,11 @@
 sidebar_position: 9
 ---
 
-import CloudOnlyNotification from '../../fragments/_cloud_only_notification.mdx';
+import Availability from '@components/Availability';
 
 # 🌍 Custom domain
 
-<CloudOnlyNotification feature="custom domain" />
+<Availability cloud oss={false} />
 
 You can use your own domain name for your Logto tenant. This feature lets you present a consistent brand by having your own domain name on the sign-in and registration pages, as well as via the Management API.
 

docs/docs/recipes/tenant-type/README.mdx

@@ -2,45 +2,34 @@
 sidebar_position: 13
 ---
 
-import CloudOnlyNotification from '../../fragments/_cloud_only_notification.mdx';
+import Availability from '@components/Availability';
 
 # 🏷️ Tenant type
 
-<CloudOnlyNotification feature="tenant type" />
+<Availability cloud oss={false} />
 
 ## Type of tenants
 
 There are two types of tenants in Logto Cloud.
 
 ### Development
 
-The dev environment is mainly used for testing and should not be used in the production environment. It has all the premium and paid features of the Pro plan, it's free forever to test but has some [limitations](#limitation), and no subscription is required.
+The development tenant (dev tenant) is primarily intended for testing purposes and should not be utilized in a production environment. These tenants allow access to premium and paid features available in paid plans, free of charge and without requiring a subscription. However, there are certain [limitations](#limitations-of-development-tenants) that apply to development tenants.
 
 ### Production
 
-Production is where end-users access the live software and might need a paid subscription. You can subscribe to the free, hobby, or pro plan to access a production tenant.
+The production teant is where end-users access the live app and you might need a paid subscription. You can subscribe to the free, hobby, or pro plan to create a production tenant.
 
 :::note
 Please be aware that you can only specify your tenant types during creation; it is not possible to modify the tenant type once it has been created.
 :::
 
-With the new type of tenant differentiation, you can better manage your projects across different environments for efficiency and, at the same time, enjoy the full value of Logto.
+With this tenant differentiation, you can better manage your projects across different environments for efficiency and, at the same time, enjoy the full value of Logto.
 
-## Legacy migration
+## Limitations of development tenants
 
-For existing users who use the “environment tag” feature, we will be phasing out these tags and introducing a more robust system for differentiating between tenants.
+While you can use paid features for free in development tenants, there are a few limitations:
 
-Moving forward, we will have two distinct tenant types: **Development** and **Production**. The development tenant offers enhanced features for testing and exploring different values of Logto. However, please note that there may be some restrictions on this type of tenant (Please refer to the following section).
-
-To ensure a seamless transition and uninterrupted functionality, all early-created tenants will be migrated to the Production tenant type along with your previous subscription.
-
-## Development tenant privilege and limitation
-
-### Privilege
-
-1. The development tenant includes all Pro plan features, no paywall, and no feature quota limitation.
-2. The development tenant doesn’t have a bill or billing history section. It offers unlimited access and free usage of all features.
-
-### Limitation
-
-- When signing in, you will see a banner indicating that this sign-in experience is specifically meant for development purposes.
+- A banner appears during the sign-in experience, indicating that the tenant is in development mode.
+- Development tenants may have quota limits on specific features. These limits are explained on the feature details page, if applicable.
+- Logto may update the development tenant's quota limits, and we will try our best to notify you in advance.

src/components/Availability/index.tsx

@@ -25,10 +25,10 @@ const getDisplayText = (status: boolean | ComingSoon | MinorVersion) => {
   }
 
   if (typeof status === 'boolean') {
-    return status ? 'Yes-green' : 'N/A-gray';
+    return status ? '✓ available-4EA254' : 'not applicable-78767F';
   }
 
-  return `v${status.major}.${status.minor}-green`;
+  return `since v${status.major}.${status.minor}-4EA254`;
 };
 
 /**
@@ -38,18 +38,11 @@ const getDisplayText = (status: boolean | ComingSoon | MinorVersion) => {
 const Availability = ({ cloud, oss }: Props) => {
   return (
     <div className={styles.availability}>
-      {cloud && (
-        <img
-          alt="Cloud availability"
-          src={`https://img.shields.io/badge/Cloud-${getDisplayText(cloud)}`}
-        />
-      )}
-      {oss && (
-        <img
-          alt="OSS availability"
-          src={`https://img.shields.io/badge/OSS-${getDisplayText(oss)}`}
-        />
-      )}
+      <img
+        alt="Cloud availability"
+        src={`https://img.shields.io/badge/Cloud-${getDisplayText(cloud)}`}
+      />
+      <img alt="OSS availability" src={`https://img.shields.io/badge/OSS-${getDisplayText(oss)}`} />
     </div>
   );
 };