Create FIgma design for login "page" #864

New issue

Closed

opened 2026-05-11 08:01:29 +00:00 by a22erigr · 10 comments

a22erigr commented 2026-05-11 08:01:29 +00:00

Collaborator

Copy link

Description

In the parent issue #843 the general design of the website is created. In this issue we should create a design for our login "page"
Please follow material designs when creating the design. A plugin to give you material designs components can be found here https://www.figma.com/community/make
General vibe (Ai mockup)

What should be done

• Design in figma using Material designa philosophy login page
  • Dark mode
  • Light mode
• How should we use theam colors, or should we even use them in the login "page"
• How should the buttons look
• If possible how should the hover/klicks look

## Description In the parent issue #843 the general design of the website is created. In this issue we should create a design for our login "page" Please follow material designs when creating the design. A plugin to give you material designs components can be found here https://www.figma.com/community/make General vibe (Ai mockup)  ## What should be done + Design in figma using Material designa philosophy login page + Dark mode + Light mode + How should we use theam colors, or should we even use them in the login "page" + How should the buttons look + If possible how should the hover/klicks look

bild.png

43 KiB

a22erigr added the

design

unassigned

labels 2026-05-11 08:05:47 +00:00

b24jonel was assigned by a24julot 2026-05-11 10:10:39 +00:00

b24erika commented 2026-05-11 11:12:58 +00:00

Collaborator

Copy link

Here is a visual representation of the login "page" with figma using material design.

Here is a visual representation of the login "page" with figma using material design.

bild.png

284 KiB

bild.png

255 KiB

a22erigr commented 2026-05-11 11:15:24 +00:00

Author

Collaborator

Copy link

https://webaim.org/resources/contrastchecker/
May be problematic in dark mode

 https://webaim.org/resources/contrastchecker/ May be problematic in dark mode

bild.png

106 KiB

a22erigr commented 2026-05-11 11:33:00 +00:00

Author

Collaborator

Copy link

[data-style='ruby'] {
--color1: #3e1d40;
--color2: #69165e;
--color3: #b1236e;
--color4: #e9d5e4;

[data-style='ruby'] { --color1: #3e1d40; --color2: #69165e; --color3: #b1236e; --color4: #e9d5e4;

a22erigr commented 2026-05-11 11:33:16 +00:00

Author

Collaborator

Copy link


bild.png

46 KiB

a22erigr commented 2026-05-11 11:39:18 +00:00

Author

Collaborator

Copy link

Light mode looks great. I have some concerns regarding contrast in dark mode. If possible can you come with a new exampel focusing on accessibility for dark mode. If possible make i have the same "look" as in light-mode

Light mode looks great. I have some concerns regarding contrast in dark mode. If possible can you come with a new exampel focusing on accessibility for dark mode. If possible make i have the same "look" as in light-mode

a22erigr commented 2026-05-11 11:40:08 +00:00

Author

Collaborator

Copy link

What i am trying to say is just change the colors / logo so i has a greater contrast

What i am trying to say is just change the colors / logo so i has a greater contrast

b24jonel was unassigned by a22erigr 2026-05-11 11:41:07 +00:00

b24erika was assigned by a22erigr 2026-05-11 11:41:13 +00:00

a22erigr commented 2026-05-11 11:42:42 +00:00

Author

Collaborator

Copy link

If possible add a new button for guests . It should be possible to sign in to the website as a guest

If possible add a new button for guests . It should be possible to sign in to the website as a guest

a22erigr referenced this issue 2026-05-11 11:47:56 +00:00

Implement new login "page" #885

b24erika commented 2026-05-11 12:08:33 +00:00

Collaborator

Copy link

Hex value that passes the tests based on accesability is #E9D5E4 (color4), the guest button is added.

Hex value that passes the [tests](https://webaim.org/resources/contrastchecker/) based on accesability is #E9D5E4 (color4), the guest button is added.

bild.png

166 KiB

bild.png

135 KiB

a22erigr referenced this issue 2026-05-11 12:14:47 +00:00

Create a figma design for settings page #863

a24julot commented 2026-05-11 12:44:24 +00:00

Collaborator

Copy link

Here are the school's logos in different colors: https://share.mediaflow.com/sv/?A6DFRWLOLN

Here are the school's logos in different colors: https://share.mediaflow.com/sv/?A6DFRWLOLN

a22erigr removed the

unassigned

label 2026-05-12 09:50:19 +00:00

c24carso referenced this issue from a commit 2026-05-12 09:56:14 +00:00

#885 Redesign login page to match Figma design

c24carso referenced this issue 2026-05-12 09:59:18 +00:00

#885 Redesign login page to match Figma design #912

a22erigr referenced this issue 2026-05-12 10:03:14 +00:00

#885 Redesign login page to match Figma design #912

a22erigr commented 2026-05-15 07:44:55 +00:00

Author

Collaborator

Copy link

Has been merged in #912

Has been merged in #912

a22erigr closed this issue 2026-05-15 07:44:56 +00:00

b25marem referenced this issue from a commit 2026-05-15 08:56:05 +00:00

#885 Redesign login page to match Figma design

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

#964-Implement-Meue-Service

#1057-navbar-color-change

team_1_week_7

909-Save-PDFs

1072-update-support-page

#1073-remove-bottom-border

team_2_week_7

1052-UnixRebuild.sh-run-in-paralell

#1021-Missing-icons-in-add-new-cards-menu

1044-&-987-Create-script-expansion

write-in-wiki-about-the-playwrite-#1043

#1069-search-for-swedish-cards

1032-Better-and-X-for-the-cards

991-frontend-sign-up

#1033-fix-button-translate-view

#1030-landscape-view-bug

#1055-Add-Todolists/Translation-Tooltip-in-correct-file

1061-Rebuild-script-improvements

#1045-fix-shmi-temp-view

1064-todo-checkbox-enable-all-time

#1001-cleanup-middleware

1012-update-the-boundlessflowCampus2k-readme

765-fix-visible-rows-edit-mode

#1047-fonts-uniform-in-views

vasttrafik-clean

#934-solar-panel-mockup-v2

#900-logger-middleware-new

#1046-Fix-broken-localization-in-settings

#1039-dependencies-with-mid-vulnerabilities

#900-logger-for-middleware

#989

1008-localization-on-views-part-1

715_Create_tests_roomBooking

temp_branch_week_7

#1027-move-footer-down

1037-missing-login-functionality

1023-The-clock-pulsates-after-each-second

#1015-button-visibility

1029-fix-preview

#1027-fix-footer-bug

#961-new-card-design

fix-manage-toolbar-button

team_2_week_6

team_1_week_6

541-implement-vasttrafik-card

1006-update-css-in-frontend-pages

748_change_creation_endpoint_roomBooking

#977-Translator-API

#845-new-energy-endpoints

#937-Personal-to-do-list

#935-clock-view-expansion

991-login-and-signup

635-Sub-compose-files-re-branch

988-different-passwords-for-databases

#920-change-password

#934-solar-panel-mockup

946-Implement-the-new-settings-page-design

#967-implement-new-main-design

945-change-position-empty-card

#996-dependencies-with-high-vulnerabilities

1000_Fix-pg_cron-sql-setup-for-postgres-image

955-fix-mapview-responsiveness

982-enhance-toggle-toolbar

#861-localization-change-all-printed-text-Part-2

938-fix-view-button-mobile

#924-implement-new-add-card-menu

Add---remove-orphans-to-the-rebuild-script-#983

UnixRebuildDebug.sh

835-loginService-JWT-v2

962-new-button-temperatureView-sensors

#893-Create-test-in-frontend-for-responsiveness

933-water-sensor-mockup

#305-fileService

#949-fix-cards-in-alphabetical-order

#954-mobile-card-stack-bug

894-tempservice-class-diagram

934-solar-panel-mockup

Temp-Main-Week-5

915-Windows-deployment-script

835-loginService-JWT

#908-new-logo

#952-Center-Temperature-graph

team_2_week_5

#658-Options-dependenacy

team_1_week_5

873-implement-logger-for-tempservice

#921-login-logout-in-settings

#786-parkingApiMockup-unit-tests-are-broken

919-dark-mode-settings

#442-temp-month-and-year-styling

issue-836-add-card-placeholders

905-enhance-color-themes-settings

#922-Implement-a-fucntion-to-delete-a-account-

707-update-css-files-frontend-features

Remove-sudo-from-MD-installation-#877

#920-possibility-to-change-password

#47-Testing-SMHI

#885-new-login-page

#861-Localization-change-all-printed-text

#899-Implement-logger-for-energyService

#859-Create-Smooth-Transition-For-Dashboard

889-turn-off-season-themes

879-season-themes-functinality

737-Parking-restructure-re-branch

#876-logger-loginService

Enhance-logging-deploy-#838

#724-restructuring-of-roombooking-service-code

853-change-hamburger-menu-to-buttons

#752-implement-automatically-cards-update

866-views-get-scrollbars-eaven-when-they-fit

727-calculate-average-temperature-and-store-the-result

847-enhance-settings

803-update-css-files-frontend-components

798-add-card-horizontal-fix

731-Service-creation-script

837-temperature-error-messages-team1

662-solution-file-is-not-up-to-date

603-sort-cards-alphabetically

741-improve-text-view-card

#797-Restructuring-energy-service

840-move-logo-navbar

807-fix-button-layout

833-change-temperature-error-messages

#429-select-year-temperature

772-fix-localization-context

#799-Fix-mobile-preview-header

color-tech-test

#659-grid-cell-dimensions

#789-Socials-Page

Change-title-Description-#815

779-fix-scaling-map-view

Old-Navbar-On-Refresh-#770

#804-fix-preview-size

#778-default-card-sizes

800-enhance-toolbar-phone

#768-404-error-in-temp-sensor

#787-tempSesnorMockupTests-outdated-unit-tests

766-fix-preview-for-clock-view

788-footer-links-fix

776-hide-toolbar-button

643-Create-titles-for-all-cards

749-create-job-api

#762-refactor-the-function-GetLayoutNameAndID(int-userID)

#607-auto-view-registry

780-add-card-descriptions

767-error-add-no-card-selected

741-textview-card-improvements

fixes/solution-room-booking

#769-add-energy-view

temp_branch_week_5

team_2_week_4

#654-flashes-on-refresh

team_1_week_4

#691-move-ITempService-to-a-separate-file

#733-smhi-forecast-design

#709-unit-tests-for-layoutService

#730-energy-view

745-text-footer-fix

Deployment-script-#701

743-fix-position-logo-phone

722-fix-year-month-api-connection

#723-clcok-view

708-hamburger-position

#690-Implement-password-hashing

#703-missing-required-packages-in-install-scripts

#732-footer-centered

729-textview-cant-make-new-rows

#541-Västtrafik-card

#697-remove-mqtt-from-roombooking

#702-auto-update-temperature

693-fix-temperature-graph-preview-centering

649-Footer-not-moving-with-grid

673-fix-respond-remove-phone

feature/501-implement-loginservice-api

#620-update-prettier-config

#664-Logo-change-depending-on-device

663-responsive-add-card-modal

#672-centering-spans

#661-remove-header-zoomed-in-phone

week_4_temp_branch

667-fix-resize-textview

657-Code-cleanup-after-merge

#659-Grid-cells-should-have-the-same-dimensions-when-zooming-in/out

#628-Fix-team-2-tmp-service-V4

API-Calls-gets-resent-alot

#652-fix-scrollbars-on-cards

602-new-file-structure

#640-hamburger-bug

temp-branch-week-3

#628-Fix-team-2-tmp-service-V2

#477-Update-Electricity-Data

team_2_week_3

team_1_week_3

#459-TempratureGraph-Fix-and-APIhook

625-increase-size-URL-schedule

#628-Fix-team-2-tmp-service

#369-implement-hamburger-menu

#585-Implement-Mobile-toolbar

feature/expand-parking-#254

570-Add-weather-symbols

#630-add-max-sizes-view-config

#608-fix-tempreture-graph

544-fix-tooltip-styling

#610-reset-modal-background-not-displaying

539-add-card-modal

#578-Implement-navbar-to-be-responsive

616-fix-tooltip

#617-values-for-month-week-year

613-fix-logo-chrome-edge

#573-add-enough-grid-rows

#605-new-custom-button

#377-Implement-Sudoku-View

567-installation-script-missing-dotnet-dependency

#351-roombooking-functionality-and-restructuring

#552-Settings-Skeleton-page

551-add-new-logo

#484-weekly-aggregated-temperature

#507-breakout-danger-modal

AddNewView-Faulty-Parameter-564

#547-fix-schedule-card-resize

531-break-out-new-card-functionality

533-config-tooltip

525-fix-booking-card

#538-Footer-scale-bug

516-grid-background-update

527-stay-edit-mode-refresh

506-mode-and-style-bug

513-cards-button-panel

521-footer-is-too-far-up

483-temperature-latest-return-error

#377-sudoko-view

#500-fix-card-enlargement

fixes/parking-service-#478

forecastview-weather-fix

#499-Missing-unit-tests-for-tempService

#508-break-out-toggle-from-dashboard-with-css

#380-new-cards-with-doNotCompact-grid-setting

Remove-dropshadow-arrows-#510

#497-reset-layout-btn-in-edit-mode

Fix-empsensorMockup-WorkWhithMiddleware

#494-fix-map-view-scaling

#493-Optimize-build-script

492-standards-card-errors

team_2_week_2

team_1_week_2

#376-SMHI-forecast-view-design

#19-dynamic-table-database

469-bigger-resize-closing-buttons

#126-ElectricityDataMockup

#406-tempSensorMockup-fix

#452-Grid-background-does-not-expand-with-grid

#458-Cleanup-exports

#464-Saving-card-content

#335-empty-card

428-text-card-to-notes

#311-fix-outlines-when-moving-cards

263-show-grid-when-in-grid-mode

424-create-seperate-css-files-for-components

Change-tab-icon-to-new-logo-#446

feature/room-booking-#43

modalCard

#339-Big-card-for-all-temperature-sensors

#386-Xunit-tests-for-for-parkingApiMockup-roomBookingMockup

hotfix/parking-api-dependecy-issue-build-#378

#279-Grid-layout-breakout

392-edit-language-standards-all-files

#369-Implement-hamburger-menu-in-the-navbar-

#289-fix-interactivity-with-cards

#399-tempSensorMockupTest-stopped-working-after-weekly-merge

#341-add-cards-to-error-views

374-card-scales-when-moved-bug

#375-Change-background

#345-update-logo-homepage

#319-Add-test-directories-to-all-C#-dirs

Fix-tempSensor-fel-HTTP500

TEMP-Testing-script

#315-build-script-fix-team-2

#312-fix-btn-css-team-2-fix

#313-404-routing-fix-team-2

temp-week-2-merge-branch

team_2_week_1

feature/#127-parking-api-databas-connection

team_1_week_1

#295-fixed-bugs-on-cards

#266-make-a-footer

#219-&-#208-Build-script-optimization

#20-aggregated-temp-for-month-year

#228-parking-frontend

199-research-grid-opening-closing-cards

#221-User-tables-for-future-database

#161-Integrate-Jest-testing-framework-to-project

fixes-issues-132

#107-Create-front-end-component-for-dynamically-changing-graph

#173-Save-User-Settings

#202-local-server-solution

No results found.

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

  

bug-only-on-server-for-mobile-not-webpage

  

Bug-Report-After-Merge

  

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

  

further-changes-needed

  

future-problem-not-fixint-this-period

  

help wanted

Need some help

  

invalid

Something is wrong

  

last-week-issue-to-fix

  

library

  

low-priority

  

needs input

Issue needs input from product owner or customer

  

needs review

issue is in need of review

  

not-implemented.

  

project documentation

  

question

More information is needed

  

research

  

reviewed

This Issue has been reviewed

  

Script

  

security

use this for security-related issues

  

SQL

  

style

  

Team 1

Team 1 is responsible for this issue

  

Team 2

Team 2 is responsible for this issue

  

team leaders

  

test-creation

  

testing

  

topLevel

Reserved for top-level, project-wide issues.

  

unassigned

  

Under-review

  

wontfix

This won't be fixed

No labels

_CRITICAL_

API

app

backEnd

Blocked-waiting-for-further-changes

bug

bug-only-on-server-for-mobile-not-webpage

Bug-Report-After-Merge

cleanup

close

design

duplicate

enhancement

feature request

frontEnd

further-changes-needed

future-problem-not-fixint-this-period

help wanted

invalid

last-week-issue-to-fix

library

low-priority

needs input

needs review

not-implemented.

project documentation

question

research

reviewed

Script

security

SQL

style

Team 1

Team 2

team leaders

test-creation

testing

topLevel

unassigned

Under-review

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

b24erika

3 participants

Notifications

Subscribe

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#864

No description provided.