Andras/BoundlessFlowCampus2K
3
6
Fork 0
Code Issues 143 Pull requests 14 Projects Releases Packages Wiki Activity Actions 2

707-update-css-files-frontend-features #916

Merged
a24julot merged 44 commits from 707-update-css-files-frontend-features into team_1_week_5 2026-05-12 14:55:32 +00:00
Conversation 7 Commits 44 Files changed 39 +380 -288
b24krila commented 2026-05-12 10:45:11 +00:00
Collaborator
Copy link

What is done:

I have updated our fronted features so that they follow our css standards to use hex colors, kebab-case for naming and bracket notation for referencing.

fixes outside of css.

I have made a function called tokebabcase inside of SMHITemperatureView.js because the image loading where leading to some problems with the naming

Known error

currently there is an error where suduko view is to big where the first row is cut in half and you cannot see the description but through talks with the issue coordinator we have decided that will be seperate issue. (if its not a "me problem" with old images or something along those lines.)

### What is done: I have updated our fronted features so that they follow our css standards to use hex colors, kebab-case for naming and bracket notation for referencing. ### fixes outside of css. I have made a function called tokebabcase inside of SMHITemperatureView.js because the image loading where leading to some problems with the naming ### Known error currently there is an error where suduko view is to big where the first row is cut in half and you cannot see the description but through talks with the issue coordinator we have decided that will be seperate issue. (if its not a "me problem" with old images or something along those lines.)
b24krila commented 2026-05-12 10:58:25 +00:00
Author
Collaborator
Copy link

Forgot to mention but i have alsos removed all inline css and instead opted to making module.css for those that were missing.

Forgot to mention but i have alsos removed all inline css and instead opted to making module.css for those that were missing.
a22erigr 2026-05-12 11:29:38 +00:00
a24vinla reviewed 2026-05-12 12:14:09 +00:00
frontend/src/features/smhi/SMHITemperatureView.module.css
@ -1,4 +1,4 @@
.tempBackground {
.temp-background {
background-image:
var(--bg-symbol), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
a24vinla commented 2026-05-12 12:14:09 +00:00
Collaborator
Copy link

Does linear-gradient require rgba?

Does linear-gradient require rgba?
b24krila commented 2026-05-12 13:13:16 +00:00
Author
Collaborator
Copy link

it does not require rgba for example instead of this we could technically use alpha hex which means we add 2 more hex for the transparency setting.

just from the example you pointed this would be the way to write it and it should work the exakt same way:

linear-gradient(#00000080, #00000080)

it does not require rgba for example instead of this we could technically use alpha hex which means we add 2 more hex for the transparency setting. just from the example you pointed this would be the way to write it and it should work the exakt same way: `linear-gradient(#00000080, #00000080)`
a24vinla reviewed 2026-05-12 12:14:57 +00:00
frontend/src/features/smhi/SMHITemperatureView.module.css Outdated
@ -27,3 +33,3 @@
}
/*Weather Symbols*/
.Clearsky {
.clearsky {
a24vinla commented 2026-05-12 12:14:57 +00:00
Collaborator
Copy link

Should be clear-sky

Should be clear-sky
a24vinla commented 2026-05-12 12:31:24 +00:00
Collaborator
Copy link

Review on #707

Whats done

I have gone through each file and checked that they follow the newly set standards. Since this PR involved 39 changed files with very similar changes, I have kept the file specific comments short.

Tested on Windows 11 using Chrome

  • App starts!

Inspected following files

  • frontend/src/features/Graphs/WeatherGraph.js
    • No need to change anything
  • frontend/src/features/Graphs/WeatherGraph.module.css
    • No need to change anything
  • frontend/src/features/addCardModal/AddCardModal.js
    • No need to change anything
  • frontend/src/features/addCardModal/AddCardModal.module.css
    • No need to change anything
  • frontend/src/features/booking/BookingView.js
    • No need to change anything
  • frontend/src/features/booking/BookingView.module.css
    • No need to change anything
  • frontend/src/features/clock/ClockView.js
    • No need to change anything
  • frontend/src/features/energy/all/EnergyAllView.js
    • No need to change anything
  • frontend/src/features/energy/all/EnergyAllView.module.css
    • No need to change anything
  • frontend/src/features/energy/sensor/EnergyView.js
    • No need to change anything
  • frontend/src/features/energy/sensor/EnergyView.module.css
    • No need to change anything
  • frontend/src/features/login/LoginModal.js
    • No need to change anything
  • frontend/src/features/login/LoginModal.module.css
    • Should box shadow on line 31 be changed to hex?
  • frontend/src/features/map/MapView.js
    • No need to change anything
  • frontend/src/features/map/MapView.module.css
    • No need to change anything
  • frontend/src/features/parking/ParkingView.js
    • Should colours be change to hex on line 47?
  • frontend/src/features/parking/ParkingView.module.css
    • No need to change anything
  • frontend/src/features/schedule/ScheduleView.js
    • No need to change anything
  • frontend/src/features/smhi/SMHIForecastView.js
    • No need to change anything
  • frontend/src/features/smhi/SMHIForecastView.module.css
    • No need to change anything
  • frontend/src/features/smhi/SMHITemperatureView.js
    • No need to change anything
  • frontend/src/features/smhi/SMHITemperatureView.module.css
    • Possible change to hex on line 3, but I am not sure its possible without rgba
    • Change clearsky to clear-sky on line 35
  • frontend/src/features/sudoku/SudokuModal.js
    • No need to change anything
  • frontend/src/features/sudoku/SudokuModal.module.css
    • No need to change anything
  • frontend/src/features/sudoku/SudokuView.js
    • No need to change anything
  • frontend/src/features/temperature/all/TemperatureAllView.js
    • No need to change anything
  • frontend/src/features/temperature/all/TemperatureAllView.module.css
    • No need to change anything
  • frontend/src/features/temperature/default/TemperatureView.js
    • No need to change anything
  • frontend/src/features/temperature/default/TemperatureView.module.css
    • No need to change anything
  • frontend/src/features/temperature/month/TemperatureMonthView.js
    • No need to change anything
  • frontend/src/features/temperature/month/TemperatureMonthView.module.css
    • No need to change anything
  • frontend/src/features/temperature/time-series/TemperatureTimeSeriesView.js
    • No need to change anything
  • frontend/src/features/temperature/time-series/TemperatureTimeSeriesView.module.css
    • No need to change anything
  • frontend/src/features/temperature/week/TemperatureWeekView.js
    • No need to change anything
  • frontend/src/features/temperature/week/TemperatureWeekView.module.css
    • no-data and week-stats are duplicates of each other. This is OK if we expect further customization to the two, otherwise we could use the same class for both
  • frontend/src/features/temperature/year/TemperatureYearView.js
    • No need to change anything
  • frontend/src/features/temperature/year/TemperatureYearView.module.css
    • No need to change anything
  • frontend/src/features/text/Text.module.css
    • No need to change anything
  • frontend/src/features/text/TextView.js
    • No need to change anything

What needs to be done

I can't be bothered to write anything more, check above!

Conclusion

Well done, a necessary change. Some small things that should be fixed, but some might be uncessesary.

I also think Text.module.css should be changed to TextView.module.css

# Review on #707 ## Whats done I have gone through each file and checked that they follow the newly set standards. Since this PR involved 39 changed files with very similar changes, I have kept the file specific comments short. ### Tested on Windows 11 using Chrome + App starts! ### Inspected following files + frontend/src/features/Graphs/WeatherGraph.js + No need to change anything + frontend/src/features/Graphs/WeatherGraph.module.css + No need to change anything + frontend/src/features/addCardModal/AddCardModal.js + No need to change anything + frontend/src/features/addCardModal/AddCardModal.module.css + No need to change anything + frontend/src/features/booking/BookingView.js + No need to change anything + frontend/src/features/booking/BookingView.module.css + No need to change anything + frontend/src/features/clock/ClockView.js + No need to change anything + frontend/src/features/energy/all/EnergyAllView.js + No need to change anything + frontend/src/features/energy/all/EnergyAllView.module.css + No need to change anything + frontend/src/features/energy/sensor/EnergyView.js + No need to change anything + frontend/src/features/energy/sensor/EnergyView.module.css + No need to change anything + frontend/src/features/login/LoginModal.js + No need to change anything + frontend/src/features/login/LoginModal.module.css + Should box shadow on line 31 be changed to hex? + frontend/src/features/map/MapView.js + No need to change anything + frontend/src/features/map/MapView.module.css + No need to change anything + frontend/src/features/parking/ParkingView.js + Should colours be change to hex on line 47? + frontend/src/features/parking/ParkingView.module.css + No need to change anything + frontend/src/features/schedule/ScheduleView.js + No need to change anything + frontend/src/features/smhi/SMHIForecastView.js + No need to change anything + frontend/src/features/smhi/SMHIForecastView.module.css + No need to change anything + frontend/src/features/smhi/SMHITemperatureView.js + No need to change anything + frontend/src/features/smhi/SMHITemperatureView.module.css + Possible change to hex on line 3, but I am not sure its possible without rgba + Change clearsky to clear-sky on line 35 + frontend/src/features/sudoku/SudokuModal.js + No need to change anything + frontend/src/features/sudoku/SudokuModal.module.css + No need to change anything + frontend/src/features/sudoku/SudokuView.js + No need to change anything + frontend/src/features/temperature/all/TemperatureAllView.js + No need to change anything + frontend/src/features/temperature/all/TemperatureAllView.module.css + No need to change anything + frontend/src/features/temperature/default/TemperatureView.js + No need to change anything + frontend/src/features/temperature/default/TemperatureView.module.css + No need to change anything + frontend/src/features/temperature/month/TemperatureMonthView.js + No need to change anything + frontend/src/features/temperature/month/TemperatureMonthView.module.css + No need to change anything + frontend/src/features/temperature/time-series/TemperatureTimeSeriesView.js + No need to change anything + frontend/src/features/temperature/time-series/TemperatureTimeSeriesView.module.css + No need to change anything + frontend/src/features/temperature/week/TemperatureWeekView.js + No need to change anything + frontend/src/features/temperature/week/TemperatureWeekView.module.css + no-data and week-stats are duplicates of each other. This is OK if we expect further customization to the two, otherwise we could use the same class for both + frontend/src/features/temperature/year/TemperatureYearView.js + No need to change anything + frontend/src/features/temperature/year/TemperatureYearView.module.css + No need to change anything + frontend/src/features/text/Text.module.css + No need to change anything + frontend/src/features/text/TextView.js + No need to change anything ## What needs to be done I can't be bothered to write anything more, check above! ## Conclusion Well done, a necessary change. Some small things that should be fixed, but some might be uncessesary. I also think _Text.module.css_ should be changed to _TextView.module.css_
b24krila commented 2026-05-12 13:31:11 +00:00
Author
Collaborator
Copy link

After Review:

I have changed the name of Text.module.css to TextView.module.css

I have changed to hex in ParkingView.js

I have changed from clearsky to clear-sky in SMHITemperatureView.module.css

Conclusion

I have chosen to keep rgba as its a clearer way of handling transparency then alpha hexs and this has been updated into our css wiki.

Otherwise everything should have been fixed based on the review.

### After Review: I have changed the name of Text.module.css to TextView.module.css I have changed to hex in ParkingView.js I have changed from clearsky to clear-sky in SMHITemperatureView.module.css ### Conclusion I have chosen to keep rgba as its a clearer way of handling transparency then alpha hexs and this has been updated into our css wiki. Otherwise everything should have been fixed based on the review.
a24vinla approved these changes 2026-05-12 13:49:59 +00:00
a24vinla left a comment
Collaborator
Copy link

All issues have been fixed, well done!

All issues have been fixed, well done!
a24julot commented 2026-05-12 14:55:24 +00:00
Collaborator
Copy link

Good job, I will merge this.

Good job, I will merge this.
a24julot merged commit a43d2f2772 into team_1_week_5 2026-05-12 14:55:32 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
a24vinla
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
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!916
No description provided.