fix themed card text and control corners

Author: tifpham021

app/joinrequeststatus/page.tsx

@@ -293,7 +293,7 @@ export default async function JoinRequestStatusPage() {
                 <form action={submitJoinRequest}>
                   <button
                     type="submit"
-                    className="theme-control mt-1 h-10 bg-brand-text px-5 text-paragraph-1 font-semibold text-brand-foreground lg:h-11 lg:px-6"
+                    className="theme-control mt-1 h-10 rounded bg-brand-text px-5 text-paragraph-1 font-semibold text-brand-foreground lg:h-11 lg:px-6"
                   >
                     Submit a request
                   </button>

app/layout.tsx

@@ -8,7 +8,8 @@ import NotificationToastProvider from "@/components/notifications/NotificationTo
 import { getSlugFromHost } from "@/lib/clientAuthUtils";
 import { OrganizationsService } from "@/lib/services/OrganizationService";
 import { OrganizationConfigService } from "@/lib/services/OrganizationConfigService";
-import { getOrganizationThemeCssVariables } from "@/lib/theme";
+import { OrganizationConfigKey } from "@/lib/schema";
+import { getOrganizationThemeCssVariables, isCornerStyle } from "@/lib/theme";
 import { themeFontVariableClassNames } from "@/app/fonts";
 
 export default async function RootLayout({
@@ -24,13 +25,19 @@ export default async function RootLayout({
     : {};
   const themeVariables = getOrganizationThemeCssVariables(themeConfig);
   const hasConfiguredTheme = Object.keys(themeConfig).length > 0;
+  const configuredCornerStyle = themeConfig[OrganizationConfigKey.CornerStyle];
+  const cornerStyle =
+    configuredCornerStyle && isCornerStyle(configuredCornerStyle)
+      ? configuredCornerStyle
+      : undefined;
 
   return (
     <html
       lang="en"
       className={themeFontVariableClassNames}
       style={themeVariables as CSSProperties}
       data-organization-theme={hasConfiguredTheme ? "custom" : undefined}
+      data-corner-style={cornerStyle}
     >
       <body>
         <ActiveOrganizationSync />

app/media/page.tsx

@@ -24,7 +24,7 @@ function FilterSelect({
       <select
         aria-label={label}
         defaultValue=""
-        className={`theme-control h-11 min-w-52 appearance-none border px-4 pr-10 text-paragraph-2 ${
+        className={`theme-control h-11 min-w-52 appearance-none rounded-xl border px-4 pr-10 text-paragraph-2 ${
           isDark
             ? "border-grey-text-strong bg-grey-text-strong text-media-inverse"
             : "border-grey-stroke-strong bg-media-surface-soft text-grey-text-strong"

components/HoursTab.tsx

@@ -107,7 +107,7 @@ export default function HoursTab({ events }: HoursTabProps) {
         </p>
 
         <div className="flex items-center gap-6">
-          <div className="theme-control flex items-center gap-2 border border-page-text/20 px-4 py-2">
+          <div className="theme-control flex items-center gap-2 rounded-md border border-page-text/20 px-4 py-2">
             <input
               type="text"
               placeholder="Enter text to search"

components/MembersTable.tsx

@@ -574,7 +574,7 @@ export default function MembersTable({
 
       {/* Search bar + Settings button */}
       <div className="flex items-center gap-3">
-        <div className="theme-control flex h-10.5 flex-1 items-center overflow-hidden border border-grey-stroke-weak">
+        <div className="theme-control flex h-10.5 flex-1 items-center overflow-hidden rounded-md border border-grey-stroke-weak">
           <input
             type="text"
             placeholder="Enter text to search"
@@ -597,7 +597,7 @@ export default function MembersTable({
               setSettingsOpen(opening);
               if (opening) setPendingVisibility(new Set(visibleColumns));
             }}
-            className="theme-control flex h-10.5 shrink-0 cursor-pointer items-center gap-1 border border-brand-stroke-strong px-2 shadow-inner"
+            className="theme-control flex h-10.5 shrink-0 cursor-pointer items-center gap-1 rounded border border-brand-stroke-strong px-2 shadow-inner"
           >
             <span className="font-semibold text-desktop-paragraph-2 text-brand-text whitespace-nowrap px-1">
               Settings
@@ -828,7 +828,7 @@ export default function MembersTable({
               aria-label="Previous page"
               disabled={page <= 1}
               onClick={() => goToPage(page - 1)}
-              className="theme-control flex cursor-pointer items-center gap-1 border border-grey-stroke-weak px-3 py-1.5 text-mobile-paragraph-2 text-grey-text-weak focus:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+              className="theme-control flex cursor-pointer items-center gap-1 rounded border border-grey-stroke-weak px-3 py-1.5 text-mobile-paragraph-2 text-grey-text-weak focus:outline-none disabled:cursor-not-allowed disabled:opacity-40"
             >
               <BogIcon name="caret-left" size={12} weight="bold" />
               Previous
@@ -840,7 +840,7 @@ export default function MembersTable({
               aria-label="Next page"
               disabled={page >= totalPages}
               onClick={() => goToPage(page + 1)}
-              className="theme-control flex cursor-pointer items-center gap-1 border border-grey-stroke-weak px-3 py-1.5 text-mobile-paragraph-2 text-grey-text-weak focus:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+              className="theme-control flex cursor-pointer items-center gap-1 rounded border border-grey-stroke-weak px-3 py-1.5 text-mobile-paragraph-2 text-grey-text-weak focus:outline-none disabled:cursor-not-allowed disabled:opacity-40"
             >
               Next
               <BogIcon name="caret-right" size={12} weight="bold" />

components/RequestsPanel.tsx

@@ -363,7 +363,7 @@ export default function RequestsPanel({
               type="button"
               onClick={() => void refresh()}
               disabled={isRefreshing}
-              className="theme-control border border-grey-stroke-strong px-4 py-2 text-paragraph-2 text-grey-text-strong hover:bg-grey-fill-weaker disabled:opacity-50"
+              className="theme-control rounded border border-grey-stroke-strong px-4 py-2 text-paragraph-2 text-grey-text-strong hover:bg-grey-fill-weaker disabled:opacity-50"
             >
               Try again
             </button>

components/dashboard/DashboardLayoutBuilder.tsx

@@ -258,7 +258,7 @@ export default function DashboardLayoutBuilder({
               onClick={handleDiscard}
               disabled={!hasChanges}
               type="button"
-              className={`theme-control flex items-center gap-1 px-2 py-2 text-paragraph-2 font-semibold transition-colors ${
+              className={`theme-control flex items-center gap-1 rounded px-2 py-2 text-paragraph-2 font-semibold transition-colors ${
                 hasChanges
                   ? "text-brand-text hover:opacity-80"
                   : "text-grey-off-state"
@@ -278,7 +278,7 @@ export default function DashboardLayoutBuilder({
               onClick={handleSave}
               disabled={!hasChanges || isSaving}
               type="button"
-              className={`theme-control px-3 py-2 text-paragraph-2 font-semibold transition-colors ${
+              className={`theme-control rounded px-3 py-2 text-paragraph-2 font-semibold transition-colors ${
                 hasChanges
                   ? "bg-brand-text text-brand-foreground hover:opacity-90"
                   : "bg-grey-fill-weak text-white"

components/dashboard/widgets/NotificationsWidget.tsx

@@ -68,7 +68,7 @@ export default function NotificationsDashboardWidget() {
             </p>
             <button
               type="button"
-              className="theme-control bg-brand-text px-4 py-2 text-paragraph-2 font-semibold text-brand-foreground hover:opacity-90"
+              className="theme-control rounded bg-brand-text px-4 py-2 text-paragraph-2 font-semibold text-brand-foreground hover:opacity-90"
               onClick={() => void refreshNotifications()}
             >
               Retry

components/events/EventAdminActions.tsx

@@ -41,7 +41,7 @@ export default function EventAdminActions({
       <div className="flex items-center gap-3">
         <Link
           href={`/events/${eventId}/edit`}
-          className="theme-control inline-flex items-center border border-brand-stroke-strong bg-page-bg px-4 py-2 text-paragraph-2 font-semibold text-brand-text"
+          className="theme-control inline-flex items-center rounded border border-brand-stroke-strong bg-page-bg px-4 py-2 text-paragraph-2 font-semibold text-brand-text"
         >
           Edit
         </Link>

components/events/EventsPageClient.tsx

@@ -145,7 +145,7 @@ export default function EventsPageClient({
         {canCreateEvents ? (
           <Link
             href="/events/create"
-            className="theme-control inline-flex shrink-0 items-center justify-center bg-brand-text px-4 py-2 text-center text-paragraph-1 font-semibold text-brand-foreground hover:opacity-90"
+            className="theme-control inline-flex shrink-0 items-center justify-center rounded bg-brand-text px-4 py-2 text-center text-paragraph-1 font-semibold text-brand-foreground hover:opacity-90"
           >
             Create event
           </Link>
@@ -170,7 +170,7 @@ export default function EventsPageClient({
       <div className="mt-16 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <form
           onSubmit={handleSearchSubmit}
-          className="theme-control flex min-h-9 min-w-0 flex-1 items-stretch overflow-hidden border border-grey-stroke-weak bg-page-bg sm:max-w-xl"
+          className="theme-control flex min-h-9 min-w-0 flex-1 items-stretch overflow-hidden rounded-md border border-grey-stroke-weak bg-page-bg sm:max-w-xl"
         >
           <label className="flex min-w-0 flex-1 items-center px-3">
             <span className="sr-only">Search events</span>