style: unified accent color and changed its name to primary-color; style: back button; style: added btn css component

src/components/pages/Artist.vue

@@ -19,7 +19,7 @@
 			<button
 				v-for="(item, name) in body"
 				:key="name"
-				class="selective"
+				class="btn btn-primary"
 				:class="{ active: name === currentTab }"
 				:href="'#artist_' + name"
 				@click="changeTab(name)"

src/components/pages/Charts.vue

@@ -35,8 +35,8 @@
 			</div>
 		</div>
 		<div v-else id="charts_table">
-			<button @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
-			<button @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
+			<button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
+			<button class="btn btn-primary" @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
 				{{ $t('charts.download') }}
 			</button>
 			<table class="table table--charts">

src/components/pages/Favorites.vue

@@ -25,7 +25,7 @@
 			</div>
 		</div>
 
-		<button v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
+		<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
 			{{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
 		</button>
 

src/components/pages/Settings.vue

@@ -9,7 +9,9 @@
 				<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
 			</i18n>
 
-			<button id="settings_btn_logout" @click="logout">{{ $t('settings.login.logout') }}</button>
+			<button class="btn btn-primary" id="settings_btn_logout" @click="logout">
+				{{ $t('settings.login.logout') }}
+			</button>
 
 			<select v-if="accounts.length" id="family_account" v-model="accountNum" @change="changeAccount">
 				<option v-for="(account, i) in accounts" :key="account" :value="i.toString()">{{ account.BLOG_NAME }}</option>
@@ -29,7 +31,7 @@
 					ref="loginInput"
 					placeholder="ARL"
 				/>
-				<button id="settings_btn_copyArl" class="only_icon" @click="copyARLtoClipboard">
+				<button id="settings_btn_copyArl" class="btn btn-primary btn-only-icon ml-2" @click="copyARLtoClipboard">
 					<i class="material-icons">assignment</i>
 				</button>
 			</div>
@@ -39,7 +41,7 @@
 			<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
 				{{ $t('settings.login.login') }}
 			</a>
-			<button id="settings_btn_updateArl" @click="login" style="width: 100%">
+			<button class="btn btn-primary" id="settings_btn_updateArl" @click="login" style="width: 100%">
 				{{ $t('settings.login.arl.update') }}
 			</button>
 		</div>
@@ -78,7 +80,12 @@
 			</h3>
 			<div class="inline-flex">
 				<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
-				<button id="select_downloads_folder" v-if="clientMode" class="only_icon" @click="selectDownloadFolder">
+				<button
+					id="select_downloads_folder"
+					v-if="clientMode"
+					class="btn btn-primary btn-only-icon ml-2"
+					@click="selectDownloadFolder"
+				>
 					<i class="material-icons">folder</i>
 				</button>
 			</div>
@@ -611,8 +618,8 @@
 		</div>
 
 		<footer>
-			<button @click="resetSettings">{{ $t('settings.reset') }}</button>
-			<button @click="saveSettings">{{ $t('settings.save') }}</button>
+			<button class="btn btn-primary mr-2" @click="resetSettings">{{ $t('settings.reset') }}</button>
+			<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
 		</footer>
 	</div>
 </template>

src/components/pages/Tracklist.vue

@@ -134,11 +134,11 @@
 		</table>
 		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
 		<footer>
-			<button @click.stop="addToQueue" :data-link="link">
+			<button class="btn btn-primary mr-2" @click.stop="addToQueue" :data-link="link">
 				{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
 			</button>
-			<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
-				{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
+			<button class="btn btn-primary flex items-center" @click.stop="addToQueue" :data-link="selectedLinks()">
+				{{ $t('tracklist.downloadSelection') }}<i class="material-icons ml-2">file_download</i>
 			</button>
 		</footer>
 	</div>