(Re-)Center login forms [not urgent] (#7909)

* center login forms * add changelog entry * proposal: stlye "try logging in" page like regular login page --------- Co-authored-by: Tom Herold <[email protected]>
scalableminds · Jul 3, 2024 · 641c88d · 641c88d
1 parent 0a07571
commit 641c88d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 16 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -32,6 +32,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Fixed
 - Fixed a bug where the warning to zoom in to see the agglomerate mapping was shown to the user even when the 3D viewport was maximized and no volume data was shown. [#7865](https://github.com/scalableminds/webknossos/issues/7865) 
 - Fixed a bug that prevented saving new dataset settings. [#7903](https://github.com/scalableminds/webknossos/pull/7903)
+- Fixed that on large screens the login forms were not horizontally centered. [#7909](https://github.com/scalableminds/webknossos/pull/7909)
 - Fixed a bug where brushing on a fallback segmentation with active mapping and with segment index file would lead to failed saves. [#7833](https://github.com/scalableminds/webknossos/pull/7833)
 - Fixed a bug where the "Hide Meshes" / "Show Meshes" options of the context menu for segment groups were not available although at leas one mesh was set to visible / invisible. [#7890](https://github.com/scalableminds/webknossos/pull/7890)
 - Fixed a bug where sometimes old mismatching javascript code would be served after upgrades. [#7854](https://github.com/scalableminds/webknossos/pull/7854)

diff --git a/frontend/javascripts/admin/auth/login_view.tsx b/frontend/javascripts/admin/auth/login_view.tsx
@@ -30,7 +30,7 @@ function LoginView({ history, redirect }: Props) {
   return (
     <Row justify="center" align="middle" className="login-view">
       <Col xs={22} sm={20} md={16} lg={12} xl={8}>
-        <Card className="login-content">
+        <Card className="login-content" style={{ margin: "0 auto" }}>
           <h3>Login</h3>
           <LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
         </Card>

diff --git a/frontend/javascripts/components/brain_spinner.tsx b/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,19 +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}>
+    <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} />
-        </Col>
-      </Row>
-    </div>
+        </Card>
+      </Col>
+    </Row>
   );
 }
diff --git a/frontend/stylesheets/main.less b/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;