diff --git a/frontend/resources/images/icons/login-illustration.svg b/frontend/resources/images/icons/login-illustration.svg index 21b0c18ad..a10e27fd9 100644 --- a/frontend/resources/images/icons/login-illustration.svg +++ b/frontend/resources/images/icons/login-illustration.svg @@ -1,3 +1,666 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs index b770c5f1e..37f539872 100644 --- a/frontend/src/app/main/ui/auth.cljs +++ b/frontend/src/app/main/ui/auth.cljs @@ -64,25 +64,28 @@ (when show-illustration? [:div {:class (stl/css :login-illustration)} i/login-illustration]) + [:section {:class (stl/css :auth-content)} - (case section - :auth-register - [:& register-page {:params params}] + [:* + [:a {:href "#/" :class (stl/css :logo-btn)}i/logo] + (case section + :auth-register + [:& register-page {:params params}] - :auth-register-validate - [:& register-validate-page {:params params}] + :auth-register-validate + [:& register-validate-page {:params params}] - :auth-register-success - [:& register-success-page {:params params}] + :auth-register-success + [:& register-success-page {:params params}] - :auth-login - [:& login-page {:params params}] + :auth-login + [:& login-page {:params params}] - :auth-recovery-request - [:& recovery-request-page] + :auth-recovery-request + [:& recovery-request-page] - :auth-recovery - [:& recovery-page {:params params}]) + :auth-recovery + [:& recovery-page {:params params}])] (when (contains? #{:auth-login :auth-register} section) [:& terms-login])]] diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss index 02758220e..7a9b9aa19 100644 --- a/frontend/src/app/main/ui/auth.scss +++ b/frontend/src/app/main/ui/auth.scss @@ -11,7 +11,7 @@ background: $db-primary; display: grid; gap: $s-32; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(5, 1fr); height: 100%; padding: $s-32; width: 100%; @@ -25,32 +25,48 @@ display: flex; justify-content: center; } +} - .login-illustration { - display: flex; - justify-content: center; - grid-column: 1 / 3; +.login-illustration { + display: flex; + justify-content: center; + grid-column: 1 / 4; + width: 40vw; + justify-self: center; - svg { - width: $s-688; - fill: $df-primary; - height: auto; - } - - @media (max-width: 992px) { - display: none; - } + svg { + width: 100%; + fill: $df-primary; + height: auto; } - .auth-content { - align-items: center; - display: flex; - height: fit-content; - justify-content: center; - max-width: $s-412; - padding-bottom: $s-8; - position: relative; - width: 100%; + @media (max-width: 992px) { + display: none; + } +} + +.auth-content { + grid-column: 4 / 6; + display: flex; + flex-direction: column; + height: fit-content; + max-width: $s-412; + padding-bottom: $s-8; + position: relative; + width: 100%; +} + +.logo-btn { + display: flex; + justify-content: flex-start; + margin-bottom: $s-52; + width: $s-120; + + svg { + width: $s-120; + height: $s-40; + fill: $df-primary; + stroke: $df-primary; } }