Update PreferencesPage.vue

src/components/PreferencesPage.vue

@@ -1,40 +1,122 @@
 <template>
-    <div class="flex">
+    <div class="pp-pref-cards">
-        <button @click="$router.go(-1) || $router.push('/')">
+        <div efy_card>
-            <font-awesome-icon icon="chevron-left" /><span class="ml-1.5" v-t="'actions.back'" />
+            <h2>Quick</h2>
-        </button>
-    </div>
-    <h1 v-t="'titles.preferences'" class="font-bold text-center" />
-    <hr />
-    <label for="ddlTheme" class="pref">
-        <strong v-t="'actions.theme'" />
-        <select id="ddlTheme" v-model="selectedTheme" class="select w-auto" @change="onChange($event)">
-            <option v-t="'actions.auto'" value="auto" />
-            <option v-t="'actions.dark'" value="dark" />
-            <option v-t="'actions.light'" value="light" />
-        </select>
-    </label>
             <label class="pref" for="ddlLanguageSelection">
                 <strong v-t="'actions.language_selection'" />
-        <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
+                <select
-            <option v-for="language in languages" :key="language.code" :value="language.code" v-text="language.name" />
+                    id="ddlLanguageSelection"
+                    v-model="selectedLanguage"
+                    class="select w-auto"
+                    @change="onChange($event)"
+                >
+                    <option
+                        v-for="language in languages"
+                        :key="language.code"
+                        :value="language.code"
+                        v-text="language.name"
+                    />
                 </select>
             </label>
             <label class="pref" for="ddlCountrySelection">
                 <strong v-t="'actions.country_selection'" />
-        <select id="ddlCountrySelection" v-model="countrySelected" class="select w-50" @change="onChange($event)">
+                <select id="ddlCountrySelection" v-model="countrySelected" class="select" @change="onChange($event)">
-            <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
+                    <option
+                        v-for="country in countryMap"
+                        :key="country.code"
+                        :value="country.code"
+                        v-text="country.name"
+                    />
                 </select>
             </label>
             <label class="pref" for="ddlDefaultHomepage">
                 <strong v-t="'actions.default_homepage'" />
-        <select id="ddlDefaultHomepage" v-model="defaultHomepage" class="select w-auto" @change="onChange($event)">
+                <select
+                    id="ddlDefaultHomepage"
+                    v-model="defaultHomepage"
+                    class="select w-auto"
+                    @change="onChange($event)"
+                >
                     <option v-t="'titles.trending'" value="trending" />
                     <option v-t="'titles.feed'" value="feed" />
                 </select>
             </label>
 
-    <h2 class="text-center" v-t="'titles.player'" />
+            <label class="pref" for="ddlInstanceSelection">
+                <strong v-text="`${$t('actions.instance_selection')}:`" />
+                <select
+                    id="ddlInstanceSelection"
+                    v-model="selectedInstance"
+                    class="select w-auto"
+                    @change="onChange($event)"
+                >
+                    <option
+                        v-for="instance in instances"
+                        :key="instance.name"
+                        :value="instance.api_url"
+                        v-text="instance.name"
+                    />
+                </select>
+            </label>
+            <label class="pref" for="chkAuthInstance">
+                <strong v-text="`${$t('actions.different_auth_instance')}:`" />
+                <input
+                    id="chkAuthInstance"
+                    v-model="authInstance"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
+            </label>
+            <template v-if="authInstance">
+                <label class="pref" for="ddlAuthInstanceSelection">
+                    <strong v-text="`${$t('actions.instance_auth_selection')}:`" />
+                    <select
+                        id="ddlAuthInstanceSelection"
+                        v-model="selectedAuthInstance"
+                        class="select w-auto"
+                        @change="onChange($event)"
+                    >
+                        <option
+                            v-for="instance in instances"
+                            :key="instance.name"
+                            :value="instance.api_url"
+                            v-text="instance.name"
+                        />
+                    </select>
+                </label>
+            </template>
+            <br />
+
+            <p v-t="'info.preferences_note'" />
+            <button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" />
+            <button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" />
+            <label for="fileSelector" class="btn" v-t="'actions.restore_preferences'" @click="restorePreferences()" />
+            <input class="hidden" id="fileSelector" ref="fileSelector" type="file" @change="restorePreferences()" />
+
+            <!-- options that are visible only when logged in -->
+            <div v-if="this.authenticated">
+                <label class="pp-delete-account pref" for="txtDeleteAccountPassword" efy_card>
+                    <h6 v-t="'actions.delete_account'" />
+                    <input
+                        id="txtDeleteAccountPassword"
+                        ref="txtDeleteAccountPassword"
+                        v-model="password"
+                        v-on:keyup.enter="deleteAccount"
+                        :placeholder="$t('login.password')"
+                        :aria-label="$t('login.password')"
+                        class="input w-auto mr-2"
+                        type="password"
+                    />
+                    <a class="btn w-full" @click="deleteAccount" v-t="'actions.delete_account'" />
+                </label>
+                <button class="btn w-full" @click="logout" v-t="'actions.logout'" />
+                <button class="btn w-full" @click="invalidateSession" v-t="'actions.invalidate_session'" />
+            </div>
+        </div>
+
+        <div efy_card>
+            <h2 v-t="'titles.player'" />
             <label class="pref" for="chkAutoPlayVideo">
                 <strong v-t="'actions.autoplay_video'" />
                 <input
@@ -51,9 +133,19 @@
             </label>
             <label class="pref" for="ddlDefaultQuality">
                 <strong v-t="'actions.default_quality'" />
-        <select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
+                <select
+                    id="ddlDefaultQuality"
+                    v-model="defaultQuality"
+                    class="select w-auto"
+                    @change="onChange($event)"
+                >
                     <option v-t="'actions.auto'" value="0" />
-            <option v-for="resolution in resolutions" :key="resolution" :value="resolution" v-text="`${resolution}p`" />
+                    <option
+                        v-for="resolution in resolutions"
+                        :key="resolution"
+                        :value="resolution"
+                        v-text="`${resolution}p`"
+                    />
                 </select>
             </label>
             <label class="pref" for="txtBufferingGoal">
@@ -61,7 +153,7 @@
                 <input
                     id="txtBufferingGoal"
                     v-model="bufferingGoal"
-            class="input w-24"
+                    class="input w-auto"
                     type="text"
                     @change="onChange($event)"
                 />
@@ -122,7 +214,13 @@
             </label>
             <label class="pref" for="chkDisableLBRY">
                 <strong v-t="'actions.disable_lbry'" />
-        <input id="chkDisableLBRY" v-model="disableLBRY" class="checkbox" type="checkbox" @change="onChange($event)" />
+                <input
+                    id="chkDisableLBRY"
+                    v-model="disableLBRY"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
             </label>
             <label class="pref" for="chkEnableLBRYProxy">
                 <strong v-t="'actions.enable_lbry_proxy'" />
@@ -134,10 +232,14 @@
                     @change="onChange($event)"
                 />
             </label>
+        </div>
 
-    <h2 class="text-center">SponsorBlock</h2>
+        <div efy_card>
-    <p class="text-center">
+            <h2>SponsorBlock</h2>
-        <span v-t="'actions.uses_api_from'" /><a class="link" href="https://sponsor.ajay.app/">sponsor.ajay.app</a>
+            <p>
+                <span v-t="'actions.uses_api_from'" /><a class="link" href="https://sponsor.ajay.app/"
+                    >sponsor.ajay.app</a
+                >
             </p>
             <label class="pref" for="chkEnableSponsorblock">
                 <strong v-t="'actions.enable_sponsorblock'" />
@@ -151,19 +253,43 @@
             </label>
             <label class="pref" for="chkSkipSponsors">
                 <strong v-t="'actions.skip_sponsors'" />
-        <input id="chkSkipSponsors" v-model="skipSponsor" class="checkbox" type="checkbox" @change="onChange($event)" />
+                <input
+                    id="chkSkipSponsors"
+                    v-model="skipSponsor"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
             </label>
             <label class="pref" for="chkSkipIntro">
                 <strong v-t="'actions.skip_intro'" />
-        <input id="chkSkipIntro" v-model="skipIntro" class="checkbox" type="checkbox" @change="onChange($event)" />
+                <input
+                    id="chkSkipIntro"
+                    v-model="skipIntro"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
             </label>
             <label class="pref" for="chkSkipOutro">
                 <strong v-t="'actions.skip_outro'" />
-        <input id="chkSkipOutro" v-model="skipOutro" class="checkbox" type="checkbox" @change="onChange($event)" />
+                <input
+                    id="chkSkipOutro"
+                    v-model="skipOutro"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
             </label>
             <label class="pref" for="chkSkipPreview">
                 <strong v-t="'actions.skip_preview'" />
-        <input id="chkSkipPreview" v-model="skipPreview" class="checkbox" type="checkbox" @change="onChange($event)" />
+                <input
+                    id="chkSkipPreview"
+                    v-model="skipPreview"
+                    class="checkbox"
+                    type="checkbox"
+                    @change="onChange($event)"
+                />
             </label>
             <label class="pref" for="chkSkipInteraction">
                 <strong v-t="'actions.skip_interaction'" />
@@ -207,87 +333,29 @@
             </label>
             <label class="pref" for="chkSkipFiller">
                 <strong v-t="'actions.skip_filler_tangent'" />
-        <input id="chkSkipFiller" v-model="skipFiller" class="checkbox" type="checkbox" @change="onChange($event)" />
-    </label>
-    <label class="pref" for="chkShowMarkers">
-        <strong v-t="'actions.show_markers'" />
-        <input id="chkShowMarkers" v-model="showMarkers" class="checkbox" type="checkbox" @change="onChange($event)" />
-    </label>
-
-    <h2 class="text-center" v-t="'titles.instance'" />
-    <label class="pref" for="ddlInstanceSelection">
-        <strong v-text="`${$t('actions.instance_selection')}:`" />
-        <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
-            <option
-                v-for="instance in instances"
-                :key="instance.name"
-                :value="instance.api_url"
-                v-text="instance.name"
-            />
-        </select>
-    </label>
-    <label class="pref" for="chkAuthInstance">
-        <strong v-text="`${$t('actions.different_auth_instance')}:`" />
                 <input
-            id="chkAuthInstance"
+                    id="chkSkipFiller"
-            v-model="authInstance"
+                    v-model="skipFiller"
                     class="checkbox"
                     type="checkbox"
                     @change="onChange($event)"
                 />
             </label>
-    <template v-if="authInstance">
+            <label class="pref" for="chkShowMarkers">
-        <label class="pref" for="ddlAuthInstanceSelection">
+                <strong v-t="'actions.show_markers'" />
-            <strong v-text="`${$t('actions.instance_auth_selection')}:`" />
-            <select
-                id="ddlAuthInstanceSelection"
-                v-model="selectedAuthInstance"
-                class="select w-auto"
-                @change="onChange($event)"
-            >
-                <option
-                    v-for="instance in instances"
-                    :key="instance.name"
-                    :value="instance.api_url"
-                    v-text="instance.name"
-                />
-            </select>
-        </label>
-    </template>
-    <br />
-
-    <!-- options that are visible only when logged in -->
-    <div v-if="this.authenticated">
-        <h2 class="text-center" v-t="'titles.account'"></h2>
-        <label class="pref" for="txtDeleteAccountPassword">
-            <strong v-t="'actions.delete_account'" />
-            <div class="flex items-center">
                 <input
-                    id="txtDeleteAccountPassword"
+                    id="chkShowMarkers"
-                    ref="txtDeleteAccountPassword"
+                    v-model="showMarkers"
-                    v-model="password"
+                    class="checkbox"
-                    v-on:keyup.enter="deleteAccount"
+                    type="checkbox"
-                    :placeholder="$t('login.password')"
+                    @change="onChange($event)"
-                    :aria-label="$t('login.password')"
-                    class="input w-auto mr-2"
-                    type="password"
                 />
-                <a class="btn w-auto" @click="deleteAccount" v-t="'actions.delete_account'" />
-            </div>
             </label>
-        <div class="pref">
-            <a class="btn w-auto" @click="logout" v-t="'actions.logout'" />
-            <a
-                class="btn w-auto"
-                style="margin-left: 0.5em"
-                @click="invalidateSession"
-                v-t="'actions.invalidate_session'"
-            />
         </div>
-        <br />
     </div>
+
     <h2 id="instancesList" v-t="'actions.instances_list'" />
-    <table class="table">
+    <table>
         <thead>
             <tr>
                 <th v-t="'preferences.instance_name'" />
@@ -313,13 +381,6 @@
             </tr>
         </tbody>
     </table>
-    <br />
-    <p v-t="'info.preferences_note'" />
-    <br />
-    <button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" />
-    <button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" />
-    <label for="fileSelector" class="btn" v-t="'actions.restore_preferences'" @click="restorePreferences()" />
-    <input class="hidden" id="fileSelector" ref="fileSelector" type="file" @change="restorePreferences()" />
 </template>
 
 <script>
@@ -616,6 +677,6 @@ export default {
 
 <style>
 .pref {
-    @apply flex justify-between items-center my-2 mx-[15vw] lt-md:mx-[2vw];
+    @apply flex justify-between items-center;
 }
 </style>