diff --git a/changes/changelog.d/buttons.enhancement b/changes/changelog.d/buttons.enhancement
new file mode 100644
index 0000000000000000000000000000000000000000..a7a079d249f6e5e862e50c68d4d90f8136decf74
--- /dev/null
+++ b/changes/changelog.d/buttons.enhancement
@@ -0,0 +1 @@
+The buttons displaying an icon now always show a little divider between the icon and the text. (!620)
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 9e16a556fdf36be448cda10a48a5e63a0d465a18..3bcbec9958d12d5e4cf8e142b9dc7e97049b6162 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -1,5 +1,5 @@
<template>
- <span :class="['ui', {'tiny': discrete}, {'buttons': !dropdownOnly && !iconOnly}]">
+ <span :title="title" :class="['ui', {'tiny': discrete}, {'icon': !discrete}, {'buttons': !dropdownOnly && !iconOnly}]">
<button
v-if="!dropdownOnly"
:title="labels.playNow"
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index 7ba3f7fe4746667ebf6d872529df1d4e9b16c758..6ad18871d645ae8687e0ad66a437d81f24556280 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -1,5 +1,5 @@
<template>
- <button @click="$store.dispatch('favorites/toggle', track.id)" v-if="button" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'button']">
+ <button @click="$store.dispatch('favorites/toggle', track.id)" v-if="button" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']">
<i class="heart icon"></i>
<translate v-if="isFavorite" :translate-context="'Content/Track/Button.Message'">In favorites</translate>
<translate v-else :translate-context="'Content/Track/Button.Message'">Add to favorites</translate>
diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
index f57cfbbc39c933da26f131c6af6ab27725c8eb60..2bc508a91b7ea9706d3dee1a4304c5298812b96f 100644
--- a/front/src/components/library/Album.vue
+++ b/front/src/components/library/Album.vue
@@ -23,18 +23,18 @@
<translate :translate-context="'Content/*/Button.Label/Verb, Short'">Play all</translate>
</play-button>
- <a :href="wikipediaUrl" target="_blank" class="ui button">
+ <a :href="wikipediaUrl" target="_blank" class="ui icon labeled button">
<i class="wikipedia w icon"></i>
<translate :translate-context="'Content/*/Button.Label/Verb'">Search on Wikipedia</translate>
</a>
- <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
+ <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui icon labeled button">
<i class="external icon"></i>
<translate :translate-context="'Content/*/Button.Label/Verb'">View on MusicBrainz</translate>
</a>
<template v-if="publicLibraries.length > 0">
<button
@click="showEmbedModal = !showEmbedModal"
- class="ui button">
+ class="ui button icon labeled">
<i class="code icon"></i>
<translate :translate-context="'Content/*/Button.Label/Verb'">Embed</translate>
</button>
diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue
index a5c0a0f45e575aecedfa080a599d6aa338d9969a..084ef34c46629c7f83fdc373613cbd43b3da0deb 100644
--- a/front/src/components/library/Artist.vue
+++ b/front/src/components/library/Artist.vue
@@ -27,7 +27,7 @@
<translate :translate-context="'Content/Artist/Button.Label/Verb'">Play all albums</translate>
</play-button>
- <a :href="wikipediaUrl" target="_blank" class="ui button">
+ <a :href="wikipediaUrl" target="_blank" class="ui icon labeled button">
<i class="wikipedia w icon"></i>
<translate :translate-context="'Content/*/Button.Label/Verb'">Search on Wikipedia</translate>
</a>
diff --git a/front/src/components/library/Track.vue b/front/src/components/library/Track.vue
index 2772ec20865a8497145f3c4125c22b4e05a3c979..0d0e845650007bac8b143cf00d25c12d7faf4eef 100644
--- a/front/src/components/library/Track.vue
+++ b/front/src/components/library/Track.vue
@@ -43,22 +43,22 @@
<track-favorite-icon :track="track" :button="true"></track-favorite-icon>
<track-playlist-icon :button="true" v-if="$store.state.auth.authenticated" :track="track"></track-playlist-icon>
- <a :href="wikipediaUrl" target="_blank" class="ui button">
+ <a :href="wikipediaUrl" target="_blank" class="ui icon labeled button">
<i class="wikipedia w icon"></i>
<translate :translate-context="'Content/*/Link/Verb'">Search on Wikipedia</translate>
</a>
- <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
+ <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui icon labeled button">
<i class="external icon"></i>
<translate :translate-context="'Content/*/Link/Verb'">View on MusicBrainz</translate>
</a>
- <a v-if="upload" :href="downloadUrl" target="_blank" class="ui button">
+ <a v-if="upload" :href="downloadUrl" target="_blank" class="ui icon labeled button">
<i class="download icon"></i>
<translate :translate-context="'Content/Track/Link/Verb'">Download</translate>
</a>
<template v-if="publicLibraries.length > 0">
<button
@click="showEmbedModal = !showEmbedModal"
- class="ui button">
+ class="ui icon labeled button">
<i class="code icon"></i>
<translate :translate-context="'Content/Track/Button.Label/Verb'">Embed</translate>
</button>
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 2f543a752212d95220b35352fae803487c15ace3..b50d4a55081865a5796f3ed8781bb49643b5ff57 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -26,10 +26,11 @@
<label for="description"><translate :translate-context="'Content/Radio/Input.Label'">Description</translate></label>
<textarea rows="2" id="description" type="text" v-model="radioDesc" :placeholder="labels.placeholder.description" />
</div>
- <div class="inline field">
+ <div class="ui toggle checkbox">
<input id="public" type="checkbox" v-model="isPublic" />
<label for="public"><translate :translate-context="'Content/Radio/Checkbox.Label/Verb'">Display publicly</translate></label>
</div>
+ <div class="ui hidden divider"></div>
<button :disabled="!canSave" @click="save" :class="['ui', 'green', {loading: isLoading}, 'button']">
<translate :translate-context="'Content/Radio/Button.Label/Verb'">Save</translate>
</button>
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index 3777318f167b87109198ced8e211dab530aaf855..e5dd7373149fd64e3c0b28565786318a4d2820a0 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/front/src/components/playlists/TrackPlaylistIcon.vue
@@ -2,7 +2,7 @@
<button
@click="$store.commit('playlists/chooseTrack', track)"
v-if="button"
- :class="['ui', 'button']">
+ :class="['ui', 'icon', 'labeled', 'button']">
<i class="list icon"></i>
<translate :translate-context="'Sidebar/Player/Icon.Tooltip/Verb'">Add to playlist…</translate>
</button>
diff --git a/front/src/components/radios/Button.vue b/front/src/components/radios/Button.vue
index a33478c9d1e9e8932ffbb6781e3c5d7a8f4bdaa9..716cc66e19556d990e488a2d438c88fb5cd5fea6 100644
--- a/front/src/components/radios/Button.vue
+++ b/front/src/components/radios/Button.vue
@@ -1,9 +1,8 @@
<template>
- <button @click="toggleRadio" :class="['ui', 'blue', {'inverted': running}, 'button']">
+ <button @click="toggleRadio" :class="['ui', 'blue', {'inverted': running}, 'icon', 'labeled', 'button']">
<i class="ui feed icon"></i>
- <template v-if="running"><translate>Stop</translate></template>
- <template v-else><translate>Start</translate></template>
- radio
+ <template v-if="running"><translate>Stop radio</translate></template>
+ <template v-else><translate>Start radio</translate></template>
</button>
</template>
diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue
index ae0ae20960e36e4f076b1da6c50fc4b3b7a9fa58..fc87872e8ce5c9e5579bb418e6e02d40345d8a02 100644
--- a/front/src/components/radios/Card.vue
+++ b/front/src/components/radios/Card.vue
@@ -15,6 +15,7 @@
</div>
<div class="extra content">
<user-link v-if="radio.user" :user="radio.user" class="left floated" />
+ <div class="ui hidden divider"></div>
<radio-button class="right floated button" :type="type" :custom-radio-id="customRadioId"></radio-button>
<router-link
class="ui basic yellow button right floated"
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 5ed79ceef671ce84140f301511dcdc78964936c7..48432232ab814df695f1780c8fa9a2407edeb651 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -24,7 +24,7 @@
<div class="ui hidden divider"></div>
<play-button class="orange" :is-playable="playlist.is_playable" :tracks="tracks"><translate :translate-context="'Content/*/Button.Label/Verb, Short'">Play all</translate></play-button>
<button
- class="ui icon button"
+ class="ui icon labeled button"
v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
@click="edit = !edit">
<i class="pencil icon"></i>
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 88c5e892fbd632ca773aee9f2b58c2fa5ed18b17..c6cf51c52a562bbe2e5f20da85a5d8ba7fa2cfed 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -18,7 +18,7 @@
<div class="ui hidden divider"></div>
<radio-button type="custom" :custom-radio-id="radio.id"></radio-button>
<template v-if="$store.state.auth.username === radio.user.username">
- <router-link class="ui icon button" :to="{name: 'library.radios.edit', params: {id: radio.id}}" exact>
+ <router-link class="ui icon labeled button" :to="{name: 'library.radios.edit', params: {id: radio.id}}" exact>
<i class="pencil icon"></i>
Edit…
</router-link>