Commit graph

77 commits

Author SHA1 Message Date
Deluan Quintão
08a71320ea
fix(ui): make toggle switches visible in Gruvbox Dark theme (#5063) (#5064)
The secondary color (#3c3836) matches the panel/table cell background,
making checked MuiSwitch thumbs invisible. Add MuiSwitch override using
Gruvbox cyan (#458588), consistent with existing interactive elements.
2026-02-18 15:38:20 -05:00
Paul Becker
f00af7f983
feat(ui): add Dracula theme (#5023)
Signed-off-by: Paul Becker <p@becker.kiwi>
2026-02-12 16:42:34 -05:00
Boris Rorsvort
4f3845bbe3
fix(ui): Nautiline theme font path (#4983)
* fix: Nautiline theme font path

* refactor font path
2026-02-04 17:24:30 -05:00
Boris Rorsvort
37aa54fe06
feat(ui): Add Nautiline like theme (#4909)
* wip

* add main file

* fixes

* linting

* refactor

* fix player

* fix lint

* fix pr comments

* Add font locally

* fix: quickfix
2026-01-20 12:11:47 -05:00
Deluan
ebbe62bbbd fix(ui): update delete button color in AMusic theme
Signed-off-by: Deluan <deluan@navidrome.org>
2025-12-14 13:51:01 -05:00
dragonish
42c85a18e2
fix(ui) Improve player buttons in AMusic theme (#4797)
* fix(ui): improve the lyric button of the AMusic theme

* fix(amusic): update styles for music player panel SVG and disabled button states

Signed-off-by: Deluan <deluan@navidrome.org>

---------

Signed-off-by: Deluan <deluan@navidrome.org>
Co-authored-by: Deluan <deluan@navidrome.org>
2025-12-13 13:04:29 -05:00
Deluan
9f0d3f3cf4 fix(ui): sync body background color with theme
Set document.body.style.backgroundColor to match the current theme's background
color whenever the theme changes. This fixes the white background that appeared
during pull-to-refresh gestures on mobile or overscroll on desktop, where the
browser reveals the area behind the app content.

The background color is determined by the theme's palette.background.default
value if defined, otherwise falls back to Material-UI defaults (#303030 for
dark themes, #fafafa for light themes).

Signed-off-by: Deluan <deluan@navidrome.org>
2025-12-02 16:14:32 -05:00
Stephan Wahlen
2b30ed1520
fix(ui): Amusic theme improvements (#4731)
* fix low contrast in "delete missing files" button

* make login screen a bit nicer

* style modal similar to rest of ui

* Add custom styles for Ra Pagination

* Refactor styles in amusic.js

Removed albumSubtitle color and updated styles for albumPlayButton and albumArtistName

* Add NDDeleteLibraryButton and NDDeleteUserButton styles

low contrast

* low contrast text on delete buttons

* playbutton color back to pink without background
2025-11-28 08:52:26 -05:00
Xavier Araque
ee51bd9281
feat(ui): add SquiddiesGlass Theme (#4632)
* feat: Add SquiddiesGlass Theme

* feat: fix commnets by gemini-code-assist in PR

* feat: fix Prettier format

* feat: fix play button, and text mobile

* feat: fix play button, and text mobile, prettier

* feat: fix chip, title artist

* fix: loading albbun, play button color

* prettier

Signed-off-by: Deluan <deluan@navidrome.org>

---------

Signed-off-by: Deluan <deluan@navidrome.org>
Co-authored-by: Xavier Araque <francisco.araque@toolfactory.net>
Co-authored-by: Deluan <deluan@navidrome.org>
2025-11-22 13:41:59 -05:00
Stephan Wahlen
2451e9e7ae
feat(ui): add AMusic (Apple Music inspired) theme (#4723)
* first show at AMuisc Theme

* prettier

* fix Duplicate key 'MuiButton'

* fix file name

* Update amusic.js

* Add styles for NDAlbumGridView in amusic.js

* Fix MuiToolbar background property in amusic.js

* Fix syntax error in amusic.js background property

* run prettier

* fix banded table styling and more

* more styling to player

- fix some appearances of green in queue
- match queue styling to rest of theme
- round albumart in player and prevent rotation

* fix queue panel background and border

to make it stand out more against the background

* fix stray comma

and lint+prettier

* queue hover still green

and player preview image not rounded properly

* Update amusic.css.js

* more mobile color fixes

* artist page

* prettier

* rounded art in albumgridview

* small tweaks to colors and radiuses

* artist and album heading

* external links colors

* unify font colors + albumgrid corner radius

* get rid of queue hover green

* unify colors in player

same red shades as primary

* mobile player floating panel background shade of green

* unify border colors

and attempt to get album cover corner radius working

* final touches

* Update amusic.css.js

* fix invisible button color fir muibutton

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* fix css syntax on player queue color overrides

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* remove unused MuiTableHead

* sort theme list in index.js alphabetically

* remove unused properties

* Revert "fix css syntax on player queue color overrides"

This reverts commit 503bba321d958aed5251667c58214822ceb70f59.

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2025-11-22 11:23:02 -05:00
Deluan
9b3bdc8a8b fix(ui): adjust margins for bulk actions buttons in Spotify-ish and Ligera
Signed-off-by: Deluan <deluan@navidrome.org>
2025-11-13 18:30:44 -05:00
Deluan
f939ad84f3 fix(ui): increase contrast of button text in the Dark theme
Signed-off-by: Deluan <deluan@navidrome.org>
2025-11-12 16:17:41 -05:00
Deluan Quintão
69527085db
fix(ui): resolve transparent dropdown background in Ligera theme (#4665)
Fixed the multi-library selector dropdown background in the Ligera theme by changing the palette.background.paper value from 'inherit' to bLight['500'] ('#ffffff'). This ensures the dropdown has a solid white background that properly overlays content, making the library selection options clearly readable.

Closes #4502
2025-11-08 12:47:02 -05:00
deluan
0bdd3e6f8b fix(ui): fix Ligera theme's RaPaginationActions contrast 2025-10-30 16:34:31 -04:00
Konstantin Morenko
465846c1bc
fix(ui): fix color of MuiIconButton in Gruvbox Dark theme (#4585)
* Fixed color of MuiIconButton in gruvboxDark.js

* Update ui/src/themes/gruvboxDark.js

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2025-10-29 09:14:40 -04:00
Deluan
aee2a1f8be fix(ui): artist buttons in spotify-ish
Signed-off-by: Deluan <deluan@navidrome.org>
2025-06-09 17:56:59 -04:00
Deluan Quintão
7d1f5ddf06
fix(ui): playlist details overflow in spotify-based themes (#4184)
* test: ensure playlist details width

* fix(test): simplify expectation for minWidth in NDPlaylistDetails

Signed-off-by: Deluan <deluan@navidrome.org>

* fix(test): test all themes

Signed-off-by: Deluan <deluan@navidrome.org>

---------

Signed-off-by: Deluan <deluan@navidrome.org>
2025-06-08 14:21:40 -04:00
Deluan Quintão
fcdd30ba8f
build(ui): migrate from CRA/Jest to Vite/Vitest (#3311)
* feat: create vite project

* feat: it's alive!

* feat: `make dev` working!

* feat: replace custom serviceWorker with vite plugin

* test: replace Jest with Vitest

* fix: run prettier

* fix: skip eslint for now.

* chore: remove ui.old folder

* refactor: replace lodash.pick with simple destructuring

* fix: eslint errors (wip)

* fix: eslint errors (wip)

* fix: display-name eslint errors (wip)

* fix: no-console eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: build

* fix: pwa manifest

* refactor: pwa manifest

* refactor: simplify PORT configuration

* refactor: rename simple JS files

* test: cover playlistUtils

* fix: react-image-lightbox

* feat(ui): add sourcemaps to help debug issues
2024-09-28 11:54:36 -04:00
gruneforth
b0e7941abe
fix(ui): fix Nuclear Theme (#3291)
* Add Nuclear Theme

* Fix login screen color & Softened "link" coloring

---------

Co-authored-by: grune <grune@grunk.me>
2024-09-19 17:13:44 -04:00
Kendall Garner
3e1fa20413
fix background color for nord theme (#3124) 2024-06-29 18:50:33 -04:00
gruneforth
1802015737
Add Nuclear Theme (#3098) 2024-06-29 17:04:30 -04:00
edthu
2fdc1677f7
Add Catppuccin Macchiato Theme (#3014)
* Added Catppuccin Macchiato theme

* fixed index.js formatting
2024-05-11 13:08:51 -04:00
Tim
8f9ed1b994
Handling long playlist comments (#2973)
Closes #1737

* wrapping playlist comment in a <Collapse> element

* Extract common collapsible logic into a component

---------

Co-authored-by: Deluan <deluan@navidrome.org>
2024-04-25 20:28:25 -04:00
Caio Cotts
86757663d6 Reformat code with Prettier's new rules. 2023-12-18 15:12:24 -05:00
Lukas H
ac7f94e620
Fix text being unreadable with Ligera theme (#2517)
Change MuiFormGroup color to make it readable.
2023-09-10 12:28:21 -04:00
Deluan
a3d78e95f2 Fix Monokai theme. Closes #2353 2023-05-17 15:36:30 -04:00
Kendall Garner
f8dfb3ad86
Clearer lyrics in Nord theme (#2146) 2023-02-04 13:02:15 -05:00
vlfldr
a1a5b2fc30
Fix invisible checkboxes in Gruvbox theme (#2135)
* Added Gruvbox Dark color theme

* Correct formatting by running prettier

* Fixed invisible checkboxes and tweaked colors in Gruvbox theme
2023-02-01 13:33:55 -05:00
Deluan
230f2fdc02 Reduce spacing between album buttons, to avoid breaking the toolbar in two 2023-01-24 18:36:47 -05:00
vlfldr
8ae0bcb459
Add Gruvbox Dark color theme (#2092)
* Added Gruvbox Dark color theme

* Correct formatting by running prettier
2023-01-18 13:23:36 -05:00
Deluan Quintão
334ccac643
Spotify-ish Improvement (#2012)
* spotify-improvement

* fixing the issue of applying styles to filter fields too

* Remove scrollbar styling.

Maybe we should simulate macOS's scrollbar behaviour, with something like this: https://gist.github.com/spemer/a0e218bbb45433bd611e68446523a00b

Co-authored-by: Rishabh Malhotra <rishabhmalhotraa01@gmail.com>
2022-11-27 12:13:00 -05:00
Renere
6a6fa3e3b5
Nord Theme - Make links have a different colour (#1900) 2022-10-01 22:23:33 -04:00
Renere
22507c9789
Add Nord Theme. Closes #1158 and supersedes #1159 (#1899).
* Re-add tpbnick's Nord theme

* Run Prettier formatter on Nord theme

* Update themes index

* Fix button margins

* Modernise the look of switches

* Adjust margins and padding

* Fix sidebar's background colour not applying to all of sidebar when scrolling down

* Adjust App Bar box shadow

* Adjust roundedness

* Adjust shadows

* Adjust outlined inputs

* Add transitions to items in sidebar when hovered / losing hover

* Adjust border radiuses

* Adjust pagination buttons

* Add big play button from Spotify theme

* Remove playlist background gradient

* Adjust colour of MuiChip elelments

* Adjust table borders

* Remove duplicate MuiTableRow key

* Attempt to make switches in both the playlist section and settings section visable against background & the toggle. Not ideal.

* Style the player

* Format CSS to Prettier standards

* Fix mobile player style

* Make play button in album grid view blue

* Make main view background lighter
2022-10-01 12:01:21 -04:00
William Lohan
4209e14208
Add theme Electric Purple (#1889)
* add theme file

add theme file electricPurple.js

* import theme file 

import theme file  electricPurple

* add electricPurple.css.js
2022-09-30 19:54:00 -04:00
Matt Doyle
5987cd0c08
Fixes a coloring glitch with the Monokai theme "unauthorized" popup (#1670)
* Fixes the coloring on the Monokai theme auth popup

* Indentation fix
2022-03-26 22:41:29 -04:00
Matt Doyle
e7cf74d863
Adds a Monokai theme (#1669)
* Adds a new Monokai theme

* Deletes a commented-out line
2022-03-26 21:14:13 -04:00
Steve Richter
8c707b4e0c
Handle invalid theme in ui state (#1504) 2022-01-05 18:47:14 -05:00
Dnouv
1d742cf8c7
Artist page improvements (#1391)
* Seperate mobile desktop components

* Fix err

* Rename classes and fix some styles

* Add lastFM button and remove console log

* Add Mbiz Icon

* render bio as dangerouslySetInnerHTML and remove unused css classes

* Add Fav and Stars

* Remove unstandardised class selector

* Remove ext link from m view

* Fix naming and simplify rounded styling

* Refactor ArtistShow:

- Extracted DesktopArtistDetails to its own file
- Removed album count as it was incorrect, it is not considering compilations
- Show bio and image from Native API, if it is available, before calling `getArtistInfo`

Co-authored-by: Deluan <deluan@navidrome.org>
2021-10-15 21:02:11 -04:00
Dnouv
482c2dec0c
Artist Detail Page (first cut) (#1287)
* Configure fetching from API and route

* pretty

* Remove errors

* Remove errors

* Remove errors

* Complete page for Desktop view

* Fix error

* Add xs Artist page

* Remove unused import

* Add styles for theme

* Change route path

* Remove artId useEffect array

* Remove array

* Fix cover load err

* Add redirect on err

* Remove route

* What's in a name? consistency :)

* Fix err

* Fix UI changes

* Fetch album from resource

* Renaming done

* Review changes

* Some touch-up

* Small refactor, to make naming and structure more consistent with AlbumShow

* Make artist's album list similar to original implementation

* Reuse AlbumGridView, to avoid duplication

* Add feature flag to enable new Artist Page, default false

* Better biography styling. Small refactorings,

* Don't encode quotes and other symbols

* Moved AlbumShow to correct folder

Co-authored-by: Deluan <deluan@navidrome.org>
2021-09-26 15:32:40 -04:00
Samarjeet
2e921cd793
Fix sidebar scroll height (#1338)
* Fix sidebar scroll height

* Prettier

Co-authored-by: Deluan <deluan@navidrome.org>
2021-09-09 09:33:38 -04:00
Deluan
4ea0f235e1 Fix scrollbar colour for Dark/ExtraDark theme. Fixes #1216 2021-06-29 12:29:00 -04:00
Deluan
a1551074bb Add a hacky way to style the react-player. 2021-06-25 18:19:57 -04:00
Deluan Quintão
5631493cc4
Upgrade Web UI to Create-React-App 4 and React 17 (#1105)
* Upgrade to CRA 4.0.3

* Try to fix tests. No lucky

* Fix new ESLint errors

* Fix JS tests and remove unwanted dependency. (#1106)

* Fix tests

* Fix lint

* Remove React v16 workaround (fixed in v17)

* Force eslint to break on warnings

* Lint now needs to be called explicitly in the pipeline

Co-authored-by: Yash Jipkate <34203227+YashJipkate@users.noreply.github.com>
2021-05-25 09:58:06 -04:00
Aldrin Jenson
cf8ee251ee
Option to toggle fields in songs, albums & artists (#923)
* Add toggleColumns

- Add logic for toggling columns
- Add MenuComponent + useSelectedFields hook

* Refactoring

* eslint-fixes

* Typo

* skip menu in albumGridView

* add omittedFields

* Add toggling for playlists and albumSong

* Refactoring

* defaultProps - fix

* Add toggling for PlaylistSongs

* remove accidental console log

* Refactoring for future compatibility

* Hide ToggleMenu in albumGridView

* Add TopBarComponent in ToggleFieldsMenu

* Add defaultOff for useSelectedFields

* Fix edge case

* eslint fix

* Refactoring

* Add propType for forwardRef

* Fix issues

* add translation for grid and table

* add translation for grid and table

* Ignore menuBtn for spotify-ish and Ligera themes

* hide bpm by default in playlistSongs

* Add memoization

* Default album view must be Grid

Co-authored-by: Deluan <deluan@navidrome.org>
2021-05-24 11:09:06 -04:00
Dnouv
74300adbc8
Fix Ligera Error (#1117)
* Fix Ligera Error

* Run make setup
2021-05-12 10:21:56 -04:00
Deluan
fa9083ddec Upgrade prettier to 2.3.0
Some reformatting was needed... :/
2021-05-11 18:13:03 -04:00
Samarjeet
d85db8ffff
Fix Spotify-ish playlist title is cut off (#1094) 2021-05-06 18:33:54 -04:00
Samarjeet
d41137ad8e
[Spotify-ish] Login consistent with other themes (#1073) 2021-05-01 08:48:12 -04:00
Samarjeet
771c91d2dd
[Spotify-ish] Indicate active page number (#1068) 2021-04-28 08:57:08 -04:00
Deluan
0d409e37e2 Fix aspect ratio of login icon 2021-04-26 12:35:49 -04:00