Andras/BoundlessFlowCampus2K
4
7
Fork 0
Code Issues 90 Pull requests 7 Projects Releases Packages Wiki Activity Actions

#885 Redesign login page to match Figma design #912

Merged
a22erigr merged 3 commits from #885-new-login-page into team_2_week_5 2026-05-12 12:57:47 +00:00
Conversation 4 Commits 3 Files changed 4 +229 -114
c24carso commented 2026-05-12 09:59:18 +00:00
Collaborator
Copy link

Redesigned the login page to follow the Figma design from #864. Added floating label inputs, password visibility toggle with SVG icons, "Continue as Guest" button and "Sign up" link. Light and dark mode supported using light-dark() for color switching. Updated CSS to follow the new kebab-case.
Screenshot 2026-05-12 115630Screenshot 2026-05-12 115646

Redesigned the login page to follow the Figma design from #864. Added floating label inputs, password visibility toggle with SVG icons, "Continue as Guest" button and "Sign up" link. Light and dark mode supported using light-dark() for color switching. Updated CSS to follow the new kebab-case. ![Screenshot 2026-05-12 115630](/attachments/536da596-0c50-4c6e-a9de-39a151bcb03f)![Screenshot 2026-05-12 115646](/attachments/f2cb959f-e48a-40a2-ae5e-dfc89920263b)
Screenshot 2026-05-12 115630.png
21 KiB
Screenshot 2026-05-12 115646.png
22 KiB 
Redesigned the login page to follow the Figma design from #864. Added floating label inputs, password visibility toggle with SVG icons, "Continue as Guest" button, and "Sign up" link. Light and dark mode supported using light-dark() for color switching. Updated CSS to follow the new kebab-case.
a22erigr commented 2026-05-12 10:03:14 +00:00
Collaborator
Copy link

#864

https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/864
c24elipe commented 2026-05-12 11:04:44 +00:00
Collaborator
Copy link

Review on issue 885, PR 912

Whats done

Tested on Arch Linux, and Firefox

  • The application was compiled to see it works.
  • Prettier was ran on the files changed by the PR. Nothing changed by this.
  • The fronted was opend in Firefox and the following was found.

image
image

Inspected following files

  • frontend/src/features/login/LoginModal.module.css:

    • Indentation/code styling:
      • Follows prettier.
    • Naming convention:
      • The naming conventions are followed.
    • Comments:
      • Comments are percent and in all the right places.
    • General code quality:
      • No problems here.

  • frontend/src/features/login/LoginModal.js:

    • Indentation/code styling:
      • Follows prettier.
    • Naming convention
      • The naming convention is followed.
    • Comments:
      • The are here and are good.
    • General code quality:
      • One minor thing is that short hands, which are not allowed according to the convention, are used on line 82 ("onClick={() => setShowPassword((prev) => !prev)}"). But again this is a supper minor thing.

  • General look comparison with figma:

    • The Design:

    • The web application
      image
      image

    • Some differences are seen in the dark mode. The highlight / text colours and and background colours are a bit different.

What needs to be done

Maybe, if it deemed worth it, the variable "prev" should be updated to not use a short hand name.

Another maybe issue is the differences between design and application dark-mode. The highlight and background colour is a bit different from what is in the design. I have a harder time reading the implementation.

Conclusion

Looks good over all. If the problem above is a none issue, this pr is good to merge.

# Review on issue 885, PR 912 ## Whats done ### Tested on Arch Linux, and Firefox * The application was compiled to see it works. * Prettier was ran on the files changed by the PR. Nothing changed by this. * The fronted was opend in Firefox and the following was found. ![image](/attachments/0483845f-7fd4-4c84-b8fc-e067712b5acd) ![image](/attachments/8a0820b9-8ab7-417f-9d21-e1fca50ea58d) ### Inspected following files * **frontend/src/features/login/LoginModal.module.css**: * **Indentation/code styling**: * Follows prettier. * **Naming convention**: * The naming conventions are followed. * **Comments**: * Comments are percent and in all the right places. * **General code quality**: * No problems here. * **frontend/src/features/login/LoginModal.js**: * **Indentation/code styling**: * Follows prettier. * **Naming convention** * The naming convention is followed. * **Comments**: * The are here and are good. * **General code quality**: * One minor thing is that short hands, which are not allowed according to the convention, are used on line 82 ("_onClick={() => setShowPassword((prev) => !prev)}_"). But again this is a supper minor thing. * General look comparison with figma: * The Design: ![](https://git.webug.se/attachments/324349af-c3c6-44a1-b0e4-c38ca8a95eb5) ![](https://git.webug.se/attachments/7c0f132e-fec8-473a-80ab-f08f1e1448bf) * The web application ![image](/attachments/3ff18ce7-781b-4c5a-819c-baf2a1bdb51b) ![image](/attachments/5c744573-e13d-46be-aced-5a23b21872b0) * Some differences are seen in the dark mode. The highlight / text colours and and background colours are a bit different. ## What needs to be done Maybe, if it deemed worth it, the variable "**prev**" should be updated to not use a short hand name. Another maybe issue is the differences between design and application dark-mode. The highlight and background colour is a bit different from what is in the design. I have a harder time reading the implementation. ## Conclusion Looks good over all. If the problem above is a none issue, this pr is good to merge.
image.png
28 KiB
image.png
29 KiB
image.png
29 KiB
image.png
26 KiB
image.png
26 KiB
image.png 
Should match the figma dark mode design more closely now.
c24carso commented 2026-05-12 12:23:02 +00:00
Author
Collaborator
Copy link

Made the colors match dark mode design more closely.
Screenshot 2026-05-12 142111

Made the colors match dark mode design more closely. ![Screenshot 2026-05-12 142111](/attachments/eccaebe5-d4c6-4a60-ab4e-1341bb12da0c)
Screenshot 2026-05-12 142111.png
26 KiB
a22erigr commented 2026-05-12 12:57:42 +00:00
Collaborator
Copy link

Have looked at the changes and in my opinion it can be merged

Have looked at the changes and in my opinion it can be merged
a22erigr merged commit 2e3324b614 into team_2_week_5 2026-05-12 12:57:47 +00:00
c24danli deleted branch #885-new-login-page 2026-05-21 12:54:14 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
c24elipe
Labels
Clear labels   
_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  
API

   
app

   
backEnd

   
Blocked, waiting for further changes

   
bug

Something is not working

  
cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  
close

Issue to close

  
design

   
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
feature request

   
frontEnd

   
help wanted

Need some help

  
invalid

Something is wrong

  
low priority

   
needs input

Issue needs input from product owner or customer

  
needs review

issue is in need of review

  
project documentation

   
question

More information is needed

  
research

   
reviewed

This Issue has been reviewed

  
script

   
security

use this for security-related issues

  
SQL

  
style

   
testing

   
topLevel

Reserved for top-level, project-wide issues.

  
wontfix

This won't be fixed

No labels
_CRITICAL_
API
app
backEnd
Blocked, waiting for further changes
bug
cleanup
close
design
duplicate
enhancement
feature request
frontEnd
help wanted
invalid
low priority
needs input
needs review
project documentation
question
research
reviewed
script
security
SQL
style
testing
topLevel
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Andras/BoundlessFlowCampus2K!912
No description provided.