From fe2cbe87745d2fec5ffcb1e9941043069548ff69 Mon Sep 17 00:00:00 2001
From: blackcoffeexbt <87530449+blackcoffeexbt@users.noreply.github.com>
Date: Tue, 19 Jul 2022 11:28:49 +0100
Subject: [PATCH] Jukebox improvements (#759)

* Improved styling of Spotify redirect URI clipboard copy text

* Jukebox extension - Moved links to Spotify into buttons to make set up steps more obvious

* Jukebox extension - Tweaks to titles of set up steps to clarify

* Prettified jukebox template
---
 .../jukebox/templates/jukebox/index.html      | 70 ++++++++++++-------
 1 file changed, 45 insertions(+), 25 deletions(-)

diff --git a/lnbits/extensions/jukebox/templates/jukebox/index.html b/lnbits/extensions/jukebox/templates/jukebox/index.html
index 9b4efbd5c..a67767fb8 100644
--- a/lnbits/extensions/jukebox/templates/jukebox/index.html
+++ b/lnbits/extensions/jukebox/templates/jukebox/index.html
@@ -117,7 +117,7 @@
       >
         <q-step
           :name="1"
-          title="Pick wallet, price"
+          title="1. Pick Wallet and Price"
           icon="account_balance_wallet"
           :done="step > 1"
         >
@@ -170,16 +170,25 @@
           <br />
         </q-step>
 
-        <q-step :name="2" title="Add api keys" icon="vpn_key" :done="step > 2">
+        <q-step
+          :name="2"
+          title="2. Add API keys"
+          icon="vpn_key"
+          :done="step > 2"
+        >
           <img src="/jukebox/static/spotapi.gif" />
           To use this extension you need a Spotify client ID and client secret.
-          You get these by creating an app in the Spotify developers dashboard
-          <a
+          You get these by creating an app in the Spotify Developer Dashboard
+          <br />
+          <br />
+          <q-btn
+            type="a"
             target="_blank"
-            style="color: #43a047"
+            color="primary"
             href="https://developer.spotify.com/dashboard/applications"
-            >here</a
-          >.
+            >Open the Spotify Developer Dashboard</q-btn
+          >
+
           <q-input
             filled
             class="q-pb-md q-pt-md"
@@ -231,28 +240,39 @@
           <br />
         </q-step>
 
-        <q-step :name="3" title="Add Redirect URI" icon="link" :done="step > 3">
+        <q-step
+          :name="3"
+          title="3. Add Redirect URI"
+          icon="link"
+          :done="step > 3"
+        >
           <img src="/jukebox/static/spotapi1.gif" />
-          In the app go to edit-settings, set the redirect URI to this link
+          <p>
+            In the app go to edit-settings, set the redirect URI to this link
+          </p>
+          <q-card
+            class="cursor-pointer word-break"
+            @click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')"
+          >
+            <q-card-section style="word-break: break-all">
+              {% raw %}{{ locationcb }}{{ jukeboxDialog.data.sp_id }}{% endraw
+              %}
+            </q-card-section>
+            <q-tooltip> Click to copy URL </q-tooltip>
+          </q-card>
           <br />
           <q-btn
-            dense
-            outline
-            unelevated
-            color="primary"
-            size="xs"
-            @click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')"
-            >{% raw %}{{ locationcb }}{{ jukeboxDialog.data.sp_id }}{% endraw
-            %}<q-tooltip> Click to copy URL </q-tooltip>
-          </q-btn>
-          <br />
-          Settings can be found
-          <a
+            type="a"
             target="_blank"
-            style="color: #43a047"
+            color="primary"
             href="https://developer.spotify.com/dashboard/applications"
-            >here</a
-          >.
+            >Open the Spotify Application Settings</q-btn
+          >
+          <br /><br />
+          <p>
+            After adding the redirect URI, click the "Authorise access" button
+            below.
+          </p>
 
           <div class="row q-mt-md">
             <div class="col-4">
@@ -281,7 +301,7 @@
 
         <q-step
           :name="4"
-          title="Select playlists"
+          title="4. Select Device and Playlists"
           icon="queue_music"
           active-color="primary"
           :done="step > 4"