fix: Auth page in settings design fixed (calcom#27294)

* fixed text issue

* matched style of api keys page

* o auth design fixed

---------

Co-authored-by: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Romit <romitgabani@icloud.com>
Co-authored-by: Romit <85230081+romitg2@users.noreply.github.com>

Author: 4 people

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -1105,4 +1105,4 @@ const EventTypesPage = ({ userEventGroupsData, user }: Props) => {
 
 export const SearchContext: React.Context<SearchContextType | undefined> = SearchContextInternal;
 
-export default EventTypesPage;
+export default EventTypesPage;

apps/web/modules/settings/developer/oauth-clients-view.tsx

@@ -112,30 +112,35 @@ const OAuthClientsView = () => {
     <SettingsHeader
       title={t("oauth_clients")}
       description={t("oauth_clients_description")}
-      CTA={newOAuthClientButton}>
-      {oAuthClients && oAuthClients.length > 0 ? (
-        <OAuthClientsList
-          clients={oAuthClients.map((client) => ({
-            clientId: client.clientId,
-            name: client.name,
-            purpose: client.purpose,
-            redirectUri: client.redirectUri,
-            websiteUrl: client.websiteUrl,
-            logo: client.logo,
-            status: client.status,
-            rejectionReason: client.rejectionReason,
-            clientType: client.clientType,
-          }))}
-          onSelectClient={(client) => setSelectedClient(client)}
-        />
-      ) : (
-        <EmptyScreen
-          Icon="key"
-          headline={t("no_oauth_clients")}
-          description={t("no_oauth_clients_description")}
-          buttonRaw={newOAuthClientButton}
-        />
-      )}
+      CTA={newOAuthClientButton}
+      borderInShellHeader={true}>
+      <div>
+        {oAuthClients && oAuthClients.length > 0 ? (
+          <div className="border-subtle rounded-b-lg border border-t-0">
+            <OAuthClientsList
+              clients={oAuthClients.map((client) => ({
+                clientId: client.clientId,
+                name: client.name,
+                purpose: client.purpose,
+                redirectUri: client.redirectUri,
+                websiteUrl: client.websiteUrl,
+                logo: client.logo,
+                status: client.status,
+                rejectionReason: client.rejectionReason,
+                clientType: client.clientType,
+              }))}
+              onSelectClient={(client) => setSelectedClient(client)}
+            />
+          </div>
+        ) : (
+          <EmptyScreen
+            Icon="key"
+            headline={t("no_oauth_clients")}
+            description={t("no_oauth_clients_description")}
+            className="rounded-b-lg rounded-t-none border-t-0"
+            buttonRaw={newOAuthClientButton}
+          />
+        )}</div>
 
       {submittedClient ? (
         <OAuthClientPreviewDialog

apps/web/modules/settings/oauth/OAuthClientsList.tsx

@@ -34,7 +34,7 @@ export const OAuthClientsList = ({
   const { t } = useLocale();
 
   return (
-    <div className="border-subtle rounded-lg border" data-testid="oauth-clients-list">
+    <div data-testid="oauth-clients-list">
       {clients.map((client, index) => (
         <div
           key={client.clientId}