Andras/BoundlessFlowCampus2K

Fork 0

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

Merged

a22erigr merged 10 commits from 946-Implement-the-new-settings-page-design into team_2_week_6

2026-05-19 13:23:32 +00:00

a24vinla commented

2026-05-19 09:02:06 +00:00

Collaborator

This PR is for issue #946, and includes the new Settings design, based on Figma design examples provided in issue #863.

What has been done

frontend/src/app/theme.css
- Added light/dark mode fields that don't change with current style (only black/white)
- Implemented themes to button primary and hover
- Removed theme primary button colour
frontend/src/components/LanguageSelect/LanguageSelect.js
- Removed header, it messed up design in settings page
frontend/src/components/Stylings/StyleSelect.module.css
- Items now align centeraly
- Buttons are a bit bigger
frontend/src/locales/en.json and frontend/src/locales/sv.json
- Added sub-header and date localization strings
frontend/src/pages/settings/
- Created new folder for settings page
frontend/src/pages/settings/Settings.js
- Redesigned page according to design in issue #863
- A whole lot changed, but most important is that background and most text now only changes with dark/light mode, only small details change with style
- Added material design icons
frontend/src/pages/settings/Settings.module.css
- Removed animation when hovering sections
- Increased width
- Added a lot of styling to specific tags
frontend/src/pages/settings/materialDesign/index.js
- Exports all material design icons as react components, allowing us to change icon colour
frontend/src/pages/settings/materialDesign/
- All new svg's
- I have changed .xml "fill" attribute to currentColor in all svg's

Thoughts

I have not changed the base style button colours, these still look very bad.
I have not changed any theme colours. Most of the style colours provided by HiS look pretty bad and we should look into changing them.
We should probably look into updating the theme.css file, as we no longer want to change background colour/text, only details, when we change styles
The different options are not final, purely based on the options that were included in the design example
The icons chosen could probably be improved at some point, not all settings had clear-cut icons avaliable

This PR is for issue #946, and includes the new Settings design, based on Figma design examples provided in issue #863. ## What has been done + frontend/src/app/theme.css + Added light/dark mode fields that don't change with current style (only black/white) + Implemented themes to button primary and hover + Removed theme primary button colour + frontend/src/components/LanguageSelect/LanguageSelect.js + Removed header, it messed up design in settings page + frontend/src/components/Stylings/StyleSelect.module.css + Items now align centeraly + Buttons are a bit bigger + frontend/src/locales/en.json and frontend/src/locales/sv.json + Added sub-header and date localization strings + frontend/src/pages/settings/ + Created new folder for settings page + frontend/src/pages/settings/Settings.js + Redesigned page according to design in issue #863 + A whole lot changed, but most important is that background and most text now only changes with dark/light mode, only small details change with style + Added material design icons + frontend/src/pages/settings/Settings.module.css + Removed animation when hovering sections + Increased width + Added a lot of styling to specific tags + frontend/src/pages/settings/materialDesign/index.js + Exports all material design icons as react components, allowing us to change icon colour + frontend/src/pages/settings/materialDesign/ + All new svg's + I have changed .xml "fill" attribute to currentColor in all svg's ## Thoughts + I have not changed the base style button colours, these still look very bad. + I have not changed any theme colours. Most of the style colours provided by HiS look pretty bad and we should look into changing them. + We should probably look into updating the theme.css file, as we no longer want to change background colour/text, only details, when we change styles + The different options are not final, purely based on the options that were included in the design example + The icons chosen could probably be improved at some point, not all settings had clear-cut icons avaliable

a24vinla added the

needs review

unassigned

labels

2026-05-19 09:02:06 +00:00

a24vinla added 9 commits

2026-05-19 09:02:06 +00:00

Added subtitle to localization 33e79e01a3

Made a separate folder for settings page and fixed export/imports cb8123816a

Updated settings page 7657642596

Changed style select to look better with new settings d59b5c3bb6

Removed header from language select component 1671172cc4

Added material design icons, also restructured layout ab081dce23

Icons still do not work in dark mode

All icons now have currentColor as fill b3c69acf3c

Icons are now exported as ReactComponents, allowing us to change svg fill color af86ddd569

Changed width from px to rem 8b2da4552e

a22erigr

2026-05-19 09:59:17 +00:00

added the
Under-review
label
requested review from b25marem

a24julot removed the

needs review

label

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

b25marem commented

2026-05-19 10:53:24 +00:00

Collaborator

Review on #946

Whats done

Reviewed and tested the new settings page design implementation.

Tested on Windows using Chrome

App starts
- The app compiled and started with warnings.
- Tested the Settings page on desktop view.
- Tested dark mode and light mode.
- Tested language switching between English and Swedish.
- Tested responsive/mobile view using Chrome DevTools.
- Checked that icons, buttons, sections and layout render correctly.
- No major layout issues were found.

Inspected following files

frontend/src/app/theme.css
- CSS standard
  - CSS variables are used properly and the new light/dark mode fields are clear.
  - Formatting and spacing mostly follow the CSS standard.
- Naming convention
  - Naming is mostly clear and follows project style.
- General code quality
  - The green primary button color feels quite strong in dark mode, which aligns with the author's own notes regarding future theme/color improvements.
frontend/src/components/LanguageSelect/LanguageSelect.js
- Naming convention
  - File and component naming follow the React convention.
- General code quality
  - There is an ESLint warning because translate is assigned but never used.
frontend/src/components/Stylings/StyleSelect.module.css
- CSS standard
  - CSS mostly follows the project standard.
  - Formatting and spacing look okay.
  - Some rule sets are missing descriptive comments according to the CSS convention.
- General code quality
  - Button size and alignment changes work well with the new settings design.
frontend/src/locales/en.json
- Printed text uses and follows localization standards
  - New settings texts are added correctly.
frontend/src/locales/sv.json
- Printed text uses and follows localization standards
  - Swedish texts are added correctly overall.
frontend/src/pages/settings/Settings.js
- Indentation/code styling
  - Indentation looks okay and follows the current style.
- Naming convention
  - Component and folder naming follow the convention.
- Printed text uses and follows localization standards
  - Most visible text uses localization, but some hardcoded strings still exist, for example Seasonal themes and Dark mode.
- Comments
  - Comments are short and understandable.
- General code quality
  - LoginLogout is imported but not used, which creates an ESLint warning.
frontend/src/pages/settings/Settings.module.css
- CSS standard
  - CSS mostly follows the project standard with kebab-case class names and bracket notation usage in JSX.
  - Formatting and spacing look mostly okay.
  - Some rule sets are missing descriptive comments according to the CSS convention.
- General code quality
  - Mobile layout works well overall.
frontend/src/pages/settings/materialDesign/index.js
- Naming convention
  - Exports are clear and use PascalCase for React components.
- General code quality
  - Icon exports are simple and easy to understand.
package.json
- Dependencies
  - No new unapproved dependencies were noticed during the review.

What needs to be done

frontend/src/components/LanguageSelect/LanguageSelect.js
- Remove the unused translate variable to fix the ESLint warning.
frontend/src/pages/settings/Settings.js
- Remove the unused LoginLogout import.
- Move hardcoded visible text such as Seasonal themes and Dark mode to localization files.
Footer/UI text
- Some footer/placeholders are still shown in English when Swedish is selected and should be localized if they are part of this scope.

Conclusion

The implementation works well overall and the Settings page is stable on desktop, mobile view, light mode, dark mode and language switching.
The PR is close to ready and overall follows the project's coding and CSS conventions well. Small cleanup is recommended before merge because of unused imports, hardcoded text and minor localization inconsistencies.

# Review on #946 ## Whats done Reviewed and tested the new settings page design implementation. ### Tested on Windows using Chrome * App starts * The app compiled and started with warnings. * Tested the Settings page on desktop view. * Tested dark mode and light mode. * Tested language switching between English and Swedish. * Tested responsive/mobile view using Chrome DevTools. * Checked that icons, buttons, sections and layout render correctly. * No major layout issues were found. ### Inspected following files * frontend/src/app/theme.css * CSS standard * CSS variables are used properly and the new light/dark mode fields are clear. * Formatting and spacing mostly follow the CSS standard. * Naming convention * Naming is mostly clear and follows project style. * General code quality * The green primary button color feels quite strong in dark mode, which aligns with the author's own notes regarding future theme/color improvements. * frontend/src/components/LanguageSelect/LanguageSelect.js * Naming convention * File and component naming follow the React convention. * General code quality * There is an ESLint warning because `translate` is assigned but never used. * frontend/src/components/Stylings/StyleSelect.module.css * CSS standard * CSS mostly follows the project standard. * Formatting and spacing look okay. * Some rule sets are missing descriptive comments according to the CSS convention. * General code quality * Button size and alignment changes work well with the new settings design. * frontend/src/locales/en.json * Printed text uses and follows localization standards * New settings texts are added correctly. * frontend/src/locales/sv.json * Printed text uses and follows localization standards * Swedish texts are added correctly overall. * frontend/src/pages/settings/Settings.js * Indentation/code styling * Indentation looks okay and follows the current style. * Naming convention * Component and folder naming follow the convention. * Printed text uses and follows localization standards * Most visible text uses localization, but some hardcoded strings still exist, for example `Seasonal themes` and `Dark mode`. * Comments * Comments are short and understandable. * General code quality * `LoginLogout` is imported but not used, which creates an ESLint warning. * frontend/src/pages/settings/Settings.module.css * CSS standard * CSS mostly follows the project standard with kebab-case class names and bracket notation usage in JSX. * Formatting and spacing look mostly okay. * Some rule sets are missing descriptive comments according to the CSS convention. * General code quality * Mobile layout works well overall. * frontend/src/pages/settings/materialDesign/index.js * Naming convention * Exports are clear and use PascalCase for React components. * General code quality * Icon exports are simple and easy to understand. * package.json * Dependencies * No new unapproved dependencies were noticed during the review. ## What needs to be done * frontend/src/components/LanguageSelect/LanguageSelect.js * Remove the unused `translate` variable to fix the ESLint warning. * frontend/src/pages/settings/Settings.js * Remove the unused `LoginLogout` import. * Move hardcoded visible text such as `Seasonal themes` and `Dark mode` to localization files. * Footer/UI text * Some footer/placeholders are still shown in English when Swedish is selected and should be localized if they are part of this scope. ## Conclusion * The implementation works well overall and the Settings page is stable on desktop, mobile view, light mode, dark mode and language switching. * The PR is close to ready and overall follows the project's coding and CSS conventions well. Small cleanup is recommended before merge because of unused imports, hardcoded text and minor localization inconsistencies.