From eccb5426108c859f9030a73a575a83f9961bd38b Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 14 Dec 2021 13:58:28 +0800
Subject: [PATCH] AuthPage: css fixes

- The graphic was meant to be 50% of the card width, but was squished.
- Try to reduce scrolling by making everything fit in a 100% zoom on a 1080p screen.
---
 ui/component/common/card.jsx |  2 +-
 ui/component/page/view.jsx   |  1 +
 ui/scss/component/_main.scss | 32 +++++++++++++++++++++-----------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/ui/component/common/card.jsx b/ui/component/common/card.jsx
index 1fb606cdb..8e274a08c 100644
--- a/ui/component/common/card.jsx
+++ b/ui/component/common/card.jsx
@@ -63,7 +63,7 @@ export default function Card(props: Props) {
         }
       }}
     >
-      <div>
+      <div className="card__first-pane">
         {(title || subtitle) && (
           <div
             className={classnames('card__header--between', {
diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx
index a78c397c3..8adc51889 100644
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@@ -117,6 +117,7 @@ function Page(props: Props) {
         className={classnames('main-wrapper__inner', {
           'main-wrapper__inner--filepage': isOnFilePage,
           'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode,
+          'main-wrapper__inner--auth': authPage,
         })}
       >
         {getSideNavElem()}
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 817ba4f83..0b9a7cca9 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -42,6 +42,15 @@
   padding-top: 0;
 }
 
+.main-wrapper__inner--auth {
+  min-height: unset;
+  padding: 0;
+
+  .main--auth-page {
+    margin-top: 0;
+  }
+}
+
 .main {
   position: relative;
   width: calc(100% - var(--side-nav-width) - var(--spacing-l));
@@ -425,27 +434,28 @@
 .main__sign-up--graphic {
   max-width: 47rem;
 
+  .card__first-pane {
+    width: 50%;
+    @media (max-width: $breakpoint-small) {
+      width: 100%;
+    }
+  }
+
   .card__second-pane {
     width: 50%;
+    @media (max-width: $breakpoint-small) {
+      width: 100%;
+    }
+
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--color-login-graphic-background);
-
-    @media (max-width: $breakpoint-small) {
-      width: 100%;
-    }
-
-    .signup-image {
-      @media (max-width: $breakpoint-small) {
-        width: 50%;
-      }
-    }
   }
 
   .card__title {
-    font-size: var(--font-heading);
+    font-size: var(--font-title);
     font-weight: var(--font-weight-bold);
   }