Andrea/Login page #483
Andrea/Login page #483
Conversation
| line-height: 28px; | ||
| letter-spacing: -0.24px; | ||
| margin-bottom: 24px; | ||
| width: 295px; |
There was a problem hiding this comment.
Zbog ovog title izlazi iz boxa pa nije centriran. Opcenito izbjegavat uvk stavljat fixan width na tekstualne elemente.
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| padding: 24px; |
There was a problem hiding this comment.
Razmak izmedu naslova i forme je prevelik. Treba sve zajedno bit 48 px, a sam input ima toliku gornju marginu (uz neke paddinge s naslova bude previse). Pogledat zasto title ima donju marginu od 24 px cini mi se da je tu dio problema. I title container ima isto suvisne margine
| if (!email) { | ||
| setEmailError('Hej, trebaš ispuniti sva polja.'); | ||
| isValid = false; | ||
| } else { | ||
| setEmailError(''); | ||
| } | ||
|
|
There was a problem hiding this comment.
Doda bi i validaciju formata maila, tj. da ima i @ i tocke itd. Koristi regex: https://stackoverflow.com/questions/46155/how-can-i-validate-an-email-address-in-javascript
| justify-content: space-between; | ||
| padding: 0px 24px; | ||
| gap: 12px; | ||
| margin-top: 330px; |
There was a problem hiding this comment.
ideja je da kad si na mobitelu inputi budu gore, a botuni budu priljepljeni za dno ekrana, tj da nema scrolla ukoliko je moguce. Staticki razmak koji je definiran u figmi ustavri ovisi o visini ekrana. Tu bi recimo solucija bila da kad je na mobitelu neka visina pagea bude tocno 100vh pa u flexbox stavit justify content space between izmedu containera za input i ocntainera za botune.
| .blackDiv { | ||
| color: $primary-background; | ||
| height: 116px; | ||
| display: flex; | ||
| justify-content: left; | ||
| align-items: center; | ||
| padding-left: 24px; | ||
| padding-top: 60px; | ||
|
|
||
| @media (min-width: $breakpoint-tablet) { | ||
| justify-content: center; | ||
| padding-bottom: 40px; | ||
| } | ||
| } |
There was a problem hiding this comment.
Ovako, ova crna pozadina bi trebala biti primijenjena na cijeli page jer kad pogledas desktop takoder postoje margine ogo glavnog bijelog boxa po cijeloj stranici. arhitektura bi trebala biti
wrapper
page name
container
i onda za container recimo
margin 24px da se udalji od rubova
There was a problem hiding this comment.
msm da je done
| <Button variant='orange' onClick={handleLogin}> | ||
| Prijavi se | ||
| </Button> |
There was a problem hiding this comment.
Jesi probala istrazit kako napravit da se botun digne iznad tipkovnice na mobitelu?
There was a problem hiding this comment.
ovo san pokusala, ali nisan uspila moran jos istrazit
There was a problem hiding this comment.
nasla od ovog lika i prilagodila malo za uredjaje koji ne podrzavaju visualViewport https://github.com/straxico/use-detect-keyboard-open/blob/main/src/index.js
| margin: 0 auto; | ||
| min-width: 500px; | ||
| padding-top: 48px; | ||
| gap: 48px; |
There was a problem hiding this comment.
cijeli content na desktopu treba bit sirok 422px. znaci ustvari width se fixa na 422 i maknu se sve margine/paddingsi
ovo je dosta bitno jer se korisnik switchat medu pagevima pa se lako primijetit razlike u sirini kojih bi se tribali drzat na svakom pageu konstantno
apps/app/src/assets/icons/Group.svg
Outdated
There was a problem hiding this comment.
Preimenuj u nesto smisleno i stavi malo pocetno slovo. recimo close ili nesto slicno
There was a problem hiding this comment.
Btw tek san sad primjetia, ikonica oka na inputu se wiggla kad se switcha iz skriveno i neskriveno. samo to isto prilagodi da ostane na mistu kad se toggla
Login Page
#475
Link na figmu https://www.figma.com/design/AQTy6Y8Ka4uSdA5MwQlySJ/App-Dev-Handoff-(original)?node-id=19-3860&p=f&m=dev