Andras/BoundlessFlowCampus2K

Fork 0

New card design #999

Merged

a22erigr merged 18 commits from #961-new-card-design into temp_branch_week_7

2026-05-20 10:38:41 +00:00

b24hugst commented

2026-05-18 14:09:04 +00:00

Collaborator

Design from issue: #961

Added a new triangle and remove-button that's always shown on every card. These switch color according to theme and dark/light mode.
Added a line that divides the header of the card from the content.
Made it so title is always shown despite scrolling down on card etc.
Removed so the whole card doesn't change color according to style.

I'm sorry for the 24 changed files. It's just that I really wanted the "Remove Button" to be handled from inside card.js, so I had to pass that click through to the views, and then dashboard.
So it's just parameters added. Although, let me know if there's a smoother or simpler way to do this.

Design from issue: #961 - Added a new triangle and remove-button that's always shown on every card. These switch color according to theme and dark/light mode. - Added a line that divides the header of the card from the content. - Made it so title is always shown despite scrolling down on card etc. - Removed so the whole card doesn't change color according to style. I'm sorry for the 24 changed files. It's just that I really wanted the "Remove Button" to be handled from inside card.js, so I had to pass that click through to the views, and then dashboard. So it's just parameters added. Although, let me know if there's a smoother or simpler way to do this.

2026-05-18 15-40-57.mp4

32 MiB

b24hugst added 4 commits

2026-05-18 14:09:05 +00:00

Add triangle to card 839a0c7b0f

Add triangle to card and make it change color according to light/mode and themes

Added remove button e8d1628d83

Remove button that changes color according to mode and theme. Although no functionality yet.

Update card layout a41514f951

Broke out tilte from children-box, added a dividing line and deleted the old removebutton and tooltip.

Added Removebutton functionality d8dcd85c1b

Added connections from card -> view -> dashboard so removeView function works.

b24hugst added the

needs review

label

2026-05-18 14:11:09 +00:00

c24danli commented

2026-05-19 07:25:02 +00:00

Collaborator

Looks good!
I will check with the other team members but i'm thinking if it would look better with the triangles a bit smaller and pushing the header line up a bit so the header takes up less space of the cards.
overall good job and as this is the final design, i would like feedback and input from more of the team.

This is not a code review we still have to do that.

Looks good! I will check with the other team members but i'm thinking if it would look better with the triangles a bit smaller and pushing the header line up a bit so the header takes up less space of the cards. overall good job and as this is the final design, i would like feedback and input from more of the team. ![image](/attachments/e00303b2-7934-4527-a11d-fdddb0afb96d) This is not a code review we still have to do that.

image.png

74 KiB

👍 1

a24julot added the

Team 1

label

2026-05-19 08:05:50 +00:00

a24julot commented

2026-05-19 08:06:43 +00:00

Collaborator

Adding to @c24danli 's comment, I think that the text-color should also apply to the headers and the border.

c24danli commented

2026-05-19 08:07:37 +00:00

Collaborator

Ok we have some feedback/samll changes before the code review.

triangle a bit smaller
header line higher up
the question mark is removed? or is it an old branch?
background color for dark theme to be same shade as above(see arrows)
title and header line to follow theme

Ok we have some feedback/samll changes before the code review. - triangle a bit smaller - header line higher up - the question mark is removed? or is it an old branch? - background color for dark theme to be same shade as above(see arrows) - title and header line to follow theme - ![image](/attachments/de964840-4e5a-48be-a6b1-555b028d80cf) - ![image](/attachments/9a235cf6-7a43-46cb-98db-483e92779c92)

image.png

31 KiB

image.png

5.8 KiB

👍 1

c24danli added

further-changes-needed

and removed

needs review

labels

2026-05-19 08:08:26 +00:00

b24hugst commented

2026-05-19 09:12:15 +00:00

Author

Collaborator

What does the circle imply? Should I place the tooltip question mark there or the removeView button there?

What does the circle imply? Should I place the tooltip question mark there or the removeView button there? ![image](/attachments/77665ea6-bb9d-4bfa-b004-f8fa0802772f)

image.png

1.1 KiB

c24danli commented

2026-05-19 10:14:16 +00:00

Collaborator

sorry it was meant to be the "?" on the branches we have it to see the description of the view

👍 1

b24hugst added 3 commits

2026-05-19 13:45:54 +00:00

Update 082cd30103

Smaller triangle, line higher up, tool-tip re-added and title/line following theme.

tooltip readded 22650df445

Update Dashboard.module.css 9ab1a83011

fixed position of questionmark

b24hugst added 1 commit

2026-05-19 13:50:43 +00:00

Merge branch 'team_1_week_6' into #961-new-card-design 0aacb4670f

b24hugst commented

2026-05-19 13:51:08 +00:00

Author

Collaborator

It now looks better according to the feedback so you're welcome to check it again.

b24hugst added

needs review

and removed

further-changes-needed

labels

2026-05-19 13:51:21 +00:00

c24danli commented

2026-05-19 13:55:55 +00:00

Collaborator

Good job! it looks good visually, we will now do a more official code review.

a22erigr

2026-05-19 14:06:05 +00:00

added the
Under-review
label
requested review from c24danli

a24julot removed the

needs review

label

2026-05-19 14:08:33 +00:00

c24danli commented

2026-05-19 14:53:07 +00:00

Collaborator

Tested on Windows using Chrome

App starts yes

Inspected following files

frontend/src/components/Card/Card.js
- Indentation/code styling
  - ok
- CSS standard [Use this section for CSS files]
  - Does not follow standard
    new changes calls css styles

<div className={`${styles.card} ${className || ''}`}>
			<button className={`${styles.removebutton}`} onClick={onButtonClick}>
				✕
			</button>
			{title && <h3 className={styles.title}>{title}</h3>}
			<div className={`${styles.line}`}></div>
			<div className={styles.overflow}>
				<div className={styles.children}>{children}</div>

Instead of

{${styles['card']}

Naming convention
- ok
Printed text uses and follows localization standards
- ok/ not relevant to this issue
Comments
- ok
General code quality
- its ok, not sure why we need to drill the close function all the way down, we had it without before or were there a problem with how it worked?

What needs to be done

frontend/src/components/Card/Card.js
- change how css styles are used, Good:<div className={styles['overflow']}>, Bad:<div className={${styles.card} }>

Conclusion

small changes for how css is used before merge
the close function works so could be merged but some clarity to why the change was made could be good

### Tested on Windows using Chrome + App starts yes ### Inspected following files + frontend/src/components/Card/Card.js + Indentation/code styling + ok + CSS standard [Use this section for CSS files] + Does not follow standard new changes calls css styles ```JS <div className={`${styles.card} ${className || ''}`}> <button className={`${styles.removebutton}`} onClick={onButtonClick}> ✕ </button> {title && <h3 className={styles.title}>{title}</h3>} <div className={`${styles.line}`}></div> <div className={styles.overflow}> <div className={styles.children}>{children}</div> ``` Instead of ```JS {${styles['card']} ``` + Naming convention + ok + Printed text uses and follows localization standards + ok/ not relevant to this issue + Comments + ok + General code quality + its ok, not sure why we need to drill the close function all the way down, we had it without before or were there a problem with how it worked? ## What needs to be done + frontend/src/components/Card/Card.js + change how css styles are used, Good:<div className={styles['overflow']}>, Bad:<div className={${styles.card} }> ## Conclusion + small changes for how css is used before merge + the close function works so could be merged but some clarity to why the change was made could be good

c24danli requested changes

2026-05-19 15:01:22 +00:00

c24danli left a comment

Collaborator

look above

b24hugst added 1 commit

2026-05-20 07:38:22 +00:00

Reverted to old removebutton 858cbe869c

Reverted back to old removebutton functionality where the button is placed in dashboard.js. So no paramters in views are needed. Also made the button change color according to theme and style.

b24hugst added 1 commit

2026-05-20 07:39:11 +00:00

Merge branch 'team_1_week_6' into #961-new-card-design e86087bd9a

b24hugst added 1 commit

2026-05-20 07:44:13 +00:00

Fixed css 617c99b21d

a22erigr requested review from c24danli

2026-05-20 07:44:53 +00:00

b24hugst added 1 commit

2026-05-20 08:14:05 +00:00

Update TemperatureGraphView.js d2425035b4

b24hugst added 1 commit