proposal: stlye "try logging in" page like regular login page

frontend/javascripts/components/brain_spinner.tsx

@@ -4,7 +4,7 @@ import { AsyncButton } from "components/async_clickables";
 import { switchToOrganization } from "admin/admin_rest_api";
 import messages from "messages";
 import { Link } from "react-router-dom";
-import { Button, Col, Row } from "antd";
+import { Button, Card, Col, Row } from "antd";
 import LoginForm from "admin/auth/login_form";
 
 type Props = {
@@ -98,21 +98,13 @@ export function BrainSpinnerWithError({
 
 export function CoverWithLogin({ onLoggedIn }: { onLoggedIn: () => void }) {
   return (
-    <div className="cover-whole-screen">
-      <Row
-        justify="center"
-        style={{
-          padding: 50,
-        }}
-        align="middle"
-      >
-        <Col xs={22} sm={20} md={16} lg={12} xl={8}>
-          <span style={{ margin: "0 auto", display: "table" }}>
-            <h3>Try logging in to view the dataset.</h3>
-            <LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
-          </span>
-        </Col>
-      </Row>
-    </div>
+    <Row justify="center" align="middle" className="login-view">
+      <Col xs={22} sm={20} md={16} lg={12} xl={8}>
+        <Card className="login-content">
+          <h3>Try logging in to view the dataset.</h3>
+          <LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
+        </Card>
+      </Col>
+    </Row>
   );
 }

frontend/stylesheets/main.less

@@ -616,11 +616,12 @@ button.narrow {
     min-height: calc(100vh - var(--navbar-height));
     background: var(--background-blue-neurons);
   }
-
+  
   .login-content {
     max-width: 600px;
     padding: 80px;
-
+    margin: 0 auto;
+
     @media @smartphones {
       padding: 20px;
       margin: 20px;