3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 10:41:42 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add a/b testing for signup image

Browse source
This commit is contained in:
Alejandro Alonso 2024-07-31 13:04:12 +02:00
parent b4d91b5a48
commit 5ac6f04857
2 changed files with 40 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/app/main/ui/auth.cljs
View file

@ -48,7 +48,8 @@
(not= section :auth-register-validate) (not= section :auth-register-validate)
(not= section :auth-register-success)) (not= section :auth-register-success))
params (:query-params route) params (:query-params route)
error (:error params)] error (:error params)
hide-image-auth? (cf/external-feature-flag "signup-01" "test")]
(mf/with-effect [] (mf/with-effect []
(dom/set-html-title (tr "title.default"))) (dom/set-html-title (tr "title.default")))
@ -57,14 +58,17 @@
(when error (when error
(st/emit! (du/show-redirect-error 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 (when show-login-icon
[:h1 {:class (stl/css :logo-container)} [:h1 {:class (stl/css :logo-container)}
[:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]]) [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]])
(when (not hide-image-auth?)
[:div {:class (stl/css :login-illustration)} [:div {:class (stl/css :login-illustration)}
i/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 (case section
:auth-register :auth-register

31
frontend/src/app/main/ui/auth.scss
View file

@ -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 { .logo-container {
position: absolute; position: absolute;
top: $s-20; top: $s-20;
@ -65,6 +83,19 @@
width: 100%; 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 { .logo-btn {
svg { svg {
width: $s-120; width: $s-120;