Site Branding - Theme colors and logo config

[milospp]

VIVO GitHub issue
Linked Vivo PR

What does this pull request do?

This pull request allows administrators to customize institutional branding by defining institutional colors and updating the key color scheme of the current theme.

What's new?

1. Theme Color Customization
   Administrators can now change the following theme colors:
   • Primary Color
   • Secondary Color
   • Accent Color
2. Advanced Color Options
   Additional options for detailed customization:
   • Primary Lighter Color
   • Primary Darker Color
   • Link Color
   • Text Color
3. Logo Management
   • Option to upload a custom logo (max aspect ration 1:7).
   • Option to upload a smaller logo that is visible when screen is smaller (max aspect ration 1:3).

Additional Notes

This PR introduces ReferrerHelper.java
This util class easily retrieves the previous page from the request and uses it for the back button.
The traditional approach for handling the back button was to always navigate to the document.referrer or previously visited page. However, this strategy breaks when dealing with nested navigation flows.
Home -> Page 2 -> Page 3
when the user is on Page 3 and clicks the back button, they are correctly taken back to Page 2. But at that point, the referrer becomes Page 3 again. So if the user clicks back on Page 2, they are taken to Page 3—creating an infinite loop between Page 2 and Page 3.

Screenshoots

Regular Color Settings

Advanced Color Settings

Reset Color Option

How should this be tested?

General Testing

Ensure testing is conducted for every available theme.

Test 1: Theme Colors

1. Select a theme
2. Customize colors (Primary, Secondary, Accent)
3. Verify that the updated colors are applied across the site

Test 2: Logo Upload

1. Click Change LOGO
2. Upload a logo image
3. Crop and save the logo
   • Ensure cropping is restricted to a 1:1 or wider aspect ratio.
4. Verify that the new logo is displayed correctly.

Test 3: Logo Small Upload

1. Click Change Small LOGO
2. Upload a logo image
3. Crop and save the logo
   • Ensure cropping is restricted to a 1:1 or wider aspect ratio up to 1:3.
4. Verify that the new logo is displayed correctly only when screen is smaller (unless Regular logo is not uplated).

Test 4: Only one logo uploaded

1. If only a regular logo or only a smaller logo is uploaded, that logo will be applied to both wide and mobile views (test this by resizing the screen or zooming in).

Test 5: Logo Removal

1. Click Change LOGO
2. Click Remove Logo
3. Confirm that the default logo reappears.

[balmas]

See comments at vivo-project/VIVO#4040 (comment)

[litvinovg]

Why should the logo be cropped? Couldn't it just be uploaded as a file?

[litvinovg]

Hardcoding theme names/paths is not an option. It will be broken once theme is renamed for customization.

[milospp]

This part is removed when the theme's default color pallete is moved inside the theme folder

[balmas]

Please conversation history in vivo-project/VIVO#4040 for the details of my testing and subsequent changes.