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

Create a Figma design for Add cards menu #868

New issue
Closed
opened 2026-05-11 08:14:41 +00:00 by a22erigr · 5 comments
a22erigr commented 2026-05-11 08:14:41 +00:00
Collaborator
Copy link

Description

In the parent issue #843 the general design of the website is created. In this issue you should design how the Add new cards menu should look.
The design should be aligned with material design philosophy. Pls use https://www.figma.com/community/file/1035203688168086460/material-3-design-kit
(Ai mockup for insperation bild bild)

What should be done

  • Create the design for both add new cars
    • Light mode
    • Dark mode
  • How should the main and secondary colors be used?
  • Can or should we use material design icons
  • How should the hover effects and select effects look like
  • How should the buttons look like
  • How should the preview look like #860
## Description In the parent issue #843 the general design of the website is created. In this issue you should design how the Add new cards menu should look. The design should be aligned with material design philosophy. Pls use https://www.figma.com/community/file/1035203688168086460/material-3-design-kit (Ai mockup for insperation ![bild](/attachments/86cf5464-dc1d-4cba-b81f-c8d28c0ba044) ![bild](/attachments/dfbffbcd-d10e-4490-9513-26751815689c)) ## What should be done + Create the design for both add new cars + Light mode + Dark mode + How should the main and secondary colors be used? + Can or should we use material design icons + How should the hover effects and select effects look like + How should the buttons look like + How should the preview look like #860
bild.png
75 KiB
bild.png
76 KiB
b24idalu commented 2026-05-12 10:37:59 +00:00
Collaborator
Copy link

Colorcodes used:

  • From emerald theme:
    • #2b3b11
    • #4c6322
    • #9ab30c
    • #e7f5ab
  • Backgrounds:
    • Darkmode: #141714 bg
    • Darkmode: #1B1F1B cardsview bg
    • Darkmode: #20251F preview bg
    • Lightmode: #F6F8F0 bg
    • Lightmode: #E6EBD7 preview bg
Colorcodes used: - From emerald theme: - #2b3b11 - #4c6322 - #9ab30c - #e7f5ab - Backgrounds: - Darkmode: #141714 bg - Darkmode: #1B1F1B cardsview bg - Darkmode: #20251F preview bg - Lightmode: #F6F8F0 bg - Lightmode: #E6EBD7 preview bg
a22erigr commented 2026-05-12 11:23:55 +00:00
Author
Collaborator
Copy link

Feedback from the top bild

  • The search bar should be a bit more square
  • add a "bar" to visualy show select card. (Se image )
  • The height of "preview" and the list of views should have the same height (se image)
    If anything is unclear please send a message
Feedback from the top ![bild](/attachments/e69644e4-6245-4438-b68c-251fc3a9c5bf) + The search bar should be a bit more square + add a "bar" to visualy show select card. (Se image ) + The height of "preview" and the list of views should have the same height (se image) If anything is unclear please send a message
bild.png
397 KiB
bild.png
397 KiB
bild.png
b24idalu commented 2026-05-12 11:48:51 +00:00
Collaborator
Copy link

image
image

With changes, also moved the preview modal a bit to the left to have equal space left and right of the preview-field.

![image](/attachments/65163863-4d54-4974-a007-79c462201252) ![image](/attachments/245b1ebb-9b1f-4393-86c3-9821329cb06f) With changes, also moved the preview modal a bit to the left to have equal space left and right of the preview-field.
image.png
116 KiB
image.png
153 KiB
a22erigr commented 2026-05-12 12:10:35 +00:00
Author
Collaborator
Copy link

The project top things this design very good and is ready to be used as a guide for implementation.

The project top things this design very good and is ready to be used as a guide for implementation.
a22erigr commented 2026-05-12 12:11:07 +00:00
Author
Collaborator
Copy link

The icon design solves issue #40

The icon design solves issue #40
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
#1236-edit-mode-txt
#1229-generic-themed-buttons
Add-an-option-to-set-no-image-to-image-view-1227
#1242-prog-bar-colors-fix
#1239-Remove-Vertical-Scroll
Image-view-error-1230
Make-the-card-title-and-header-of-card-uniform-1233
both_teams_week_8
team_2_week_7
team_1_week_7
temp_branch_week_7
team_2_week_6
team_1_week_6
team_2_week_5
team_1_week_5
temp_branch_week_5
team_2_week_4
team_1_week_4
week_4_temp_branch
temp-branch-week-3
team_2_week_3
team_1_week_3
team_2_week_2
team_1_week_2
temp-week-2-merge-branch
team_2_week_1
team_1_week_1
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

  
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
b24idalu
2 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#868
No description provided.