diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs index c22ec0902..4d24070cc 100644 --- a/frontend/src/app/main/ui/auth.cljs +++ b/frontend/src/app/main/ui/auth.cljs @@ -48,7 +48,8 @@ (not= section :auth-register-validate) (not= section :auth-register-success)) params (:query-params route) - error (:error params)] + error (:error params) + hide-image-auth? (cf/external-feature-flag "signup-01" "test")] (mf/with-effect [] (dom/set-html-title (tr "title.default"))) @@ -57,14 +58,17 @@ (when error (st/emit! (du/show-redirect-error error)))) - [:main {:class (stl/css :auth-section)} + [:main {:class (stl/css-case :auth-section (not hide-image-auth?) + :auth-section-hide-image hide-image-auth?)} (when show-login-icon [:h1 {:class (stl/css :logo-container)} [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]]) - [:div {:class (stl/css :login-illustration)} - i/login-illustration] + (when (not hide-image-auth?) + [:div {:class (stl/css :login-illustration)} + i/login-illustration]) - [:section {:class (stl/css :auth-content)} + [:section {:class (stl/css-case :auth-content (not hide-image-auth?) + :auth-content-hide-image hide-image-auth?)} (case section :auth-register diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss index 8f7e2087d..ff1a096a7 100644 --- a/frontend/src/app/main/ui/auth.scss +++ b/frontend/src/app/main/ui/auth.scss @@ -24,6 +24,24 @@ } } +// A-B text signup-01 +.auth-section-hide-image { + position: relative; + align-items: center; + background: var(--panel-background-color); + display: grid; + gap: $s-32; + height: 100%; + padding: $s-32; + width: 100%; + overflow: auto; + + @media (max-width: 992px) { + display: flex; + justify-content: center; + } +} + .logo-container { position: absolute; top: $s-20; @@ -65,6 +83,19 @@ width: 100%; } +// A-B text signup-01 +.auth-content-hide-image { + display: grid; + grid-template-rows: 1fr auto; + gap: $s-24; + height: fit-content; + margin: auto; + max-width: $s-412; + padding-block-end: $s-8; + position: relative; + width: 100%; +} + .logo-btn { svg { width: $s-120;