Increase border-radius on auth pages (#31333)

* Increase border-radius on auth pages

Bring this into line with some of the other radii in the app

* Update snapshots

* Update playwright snapshots

res/css/views/auth/_AuthBody.pcss

@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
     font-size: $font-12px;
     color: $authpage-secondary-color;
     background-color: $background;
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 var(--cpd-space-6x) var(--cpd-space-6x) 0;
     padding: 25px 60px;
     box-sizing: border-box;
 

res/css/views/auth/_AuthPage.pcss

@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_AuthPage_modal {
     display: flex;
     margin: 100px auto auto;
-    border-radius: 4px;
+    border-radius: var(--cpd-space-6x);
     background-color: $authpage-modal-bg-color;
 
     @media only screen and (max-height: 768px) {

src/components/views/auth/AuthPage.tsx

@@ -69,7 +69,7 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
         const modalContentStyle: React.CSSProperties = {
             display: "flex",
             zIndex: 1,
-            borderRadius: "8px",
+            borderRadius: "inherit",
         };
 
         let modalBlur;

test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap

@@ -123,7 +123,7 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
       <main
         aria-live="polite"
         class="mx_AuthPage_modalContent"
-        style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
+        style="display: flex; z-index: 1; border-radius: inherit; background: rgba(255, 255, 255, 0.59);"
         tabindex="-1"
       >
         <div
@@ -243,7 +243,7 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
       <main
         aria-live="polite"
         class="mx_AuthPage_modalContent"
-        style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
+        style="display: flex; z-index: 1; border-radius: inherit; background: rgba(255, 255, 255, 0.59);"
         tabindex="-1"
       >
         <div

test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
       <main
         aria-live="polite"
         class="mx_AuthPage_modalContent"
-        style="display: flex; z-index: 1; border-radius: 8px;"
+        style="display: flex; z-index: 1; border-radius: inherit;"
         tabindex="-1"
       >
         <div
@@ -180,7 +180,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
       <main
         aria-live="polite"
         class="mx_AuthPage_modalContent"
-        style="display: flex; z-index: 1; border-radius: 8px;"
+        style="display: flex; z-index: 1; border-radius: inherit;"
         tabindex="-1"
       >
         <div

test/unit-tests/components/views/auth/__snapshots__/AuthPage-test.tsx.snap

@@ -16,7 +16,7 @@ exports[`<AuthPage /> should match snapshot 1`] = `
       <main
         aria-live="polite"
         class="mx_AuthPage_modalContent"
-        style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
+        style="display: flex; z-index: 1; border-radius: inherit; background: rgba(255, 255, 255, 0.59);"
         tabindex="-1"
       />
     </div>