Distinguish destructive actions

src/renderer/App.js

@@ -130,7 +130,7 @@ export default defineComponent({
 
     externalLinkOpeningPromptNames: function () {
       return [
-        this.$t('Yes'),
+        this.$t('Yes, Open Link'),
         this.$t('No')
       ]
     },

src/renderer/components/data-settings/data-settings.js

@@ -39,7 +39,8 @@ export default defineComponent({
         'youtubenew',
         'youtube',
         'youtubeold',
-        'newpipe'
+        'newpipe',
+        'close'
       ],
 
       shouldExportPlaylistForOlderVersions: false,
@@ -70,7 +71,8 @@ export default defineComponent({
         `${exportYouTube} (.csv)`,
         `${exportYouTube} (.json)`,
         `${exportYouTube} (.opml)`,
-        `${exportNewPipe} (.json)`
+        `${exportNewPipe} (.json)`,
+        this.$t('Close')
       ]
     },
     primaryProfile: function () {

src/renderer/components/data-settings/data-settings.vue

@@ -67,7 +67,6 @@
       :label="$t('Settings.Data Settings.Select Export Type')"
       :option-names="exportSubscriptionsPromptNames"
       :option-values="subscriptionsPromptValues"
-      :show-close="true"
       @click="exportSubscriptions"
     />
   </ft-settings-section>

src/renderer/components/experimental-settings/experimental-settings.js

@@ -37,7 +37,7 @@ export default defineComponent({
     handleReplaceHttpCache: function (value) {
       this.showRestartPrompt = false
 
-      if (value === null || value === 'no') {
+      if (value === null || value === 'cancel') {
         this.replaceHttpCache = !this.replaceHttpCache
         return
       }

src/renderer/components/experimental-settings/experimental-settings.vue

@@ -19,8 +19,8 @@
     <ft-prompt
       v-if="showRestartPrompt"
       :label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')"
-      :option-names="[$t('Yes'), $t('No')]"
-      :option-values="['yes', 'no']"
+      :option-names="[$t('Yes, Restart'), $t('Cancel')]"
+      :option-values="['restart', 'cancel']"
       @click="handleReplaceHttpCache"
     />
   </ft-settings-section>

src/renderer/components/ft-button/ft-button.css

@@ -7,7 +7,6 @@
   block-size: fit-content;
   box-sizing: border-box;
   cursor: pointer;
-  display: inline-block;
   align-items: center;
   justify-content: center;
   text-align: center;
@@ -17,6 +16,8 @@
   white-space: nowrap;
   font-weight: 500;
   vertical-align: middle;
+  display: flex;
+  gap: 10px;
   margin: 5px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
 }

src/renderer/components/ft-button/ft-button.js

@@ -18,6 +18,10 @@ export default defineComponent({
     id: {
       type: String,
       default: ''
+    },
+    icon: {
+      type: Array,
+      default: null
     }
   },
   emits: ['click'],

src/renderer/components/ft-button/ft-button.vue

@@ -10,6 +10,10 @@
     @click="click"
   >
     <slot>
+      <font-awesome-icon
+        v-if="icon"
+        :icon="icon"
+      />
       {{ label }}
     </slot>
   </button>

src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue

@@ -25,6 +25,8 @@
       />
       <ft-button
         :label="$t('User Playlists.Cancel')"
+        :text-color="null"
+        :background-color="null"
         @click="hideCreatePlaylistPrompt"
       />
     </ft-flex-box>

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -74,6 +74,20 @@
     }
   }
 
+  &.destructive {
+    background-color: var(--destructive-color);
+    color: var(--destructive-text-color);
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--destructive-hover-color);
+    }
+
+    &:active {
+      background-color: var(--destructive-active-color);
+    }
+  }
+
   &.favorite, &.favorite:hover, &.favorite:focus-visible {
     color: var(--favorite-icon-color);
   }

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue

@@ -73,6 +73,8 @@
         />
         <ft-button
           :label="$t('User Playlists.Cancel')"
+          :text-color="null"
+          :background-color="null"
           @click="hide"
         />
       </ft-flex-box>

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js

@@ -34,8 +34,8 @@ export default defineComponent({
       subscriptions: [],
       selectedLength: 0,
       deletePromptValues: [
-        'yes',
-        'no'
+        'delete',
+        'cancel'
       ]
     }
   },
@@ -61,8 +61,8 @@ export default defineComponent({
     },
     deletePromptNames: function () {
       return [
-        this.$t('Yes'),
-        this.$t('No')
+        this.$t('Yes, Delete'),
+        this.$t('Cancel')
       ]
     },
     locale: function () {
@@ -109,7 +109,7 @@ export default defineComponent({
     },
 
     handleDeletePromptClick: function (value) {
-      if (value !== 'no' && value !== null) {
+      if (value !== 'cancel' && value !== null) {
         if (this.isMainProfile) {
           const channelsToRemove = this.subscriptions.filter((channel) => channel.selected)
           this.subscriptions = this.subscriptions.filter((channel) => !channel.selected)

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue

@@ -30,8 +30,8 @@
         />
         <ft-button
           :label="$t('Profile.Delete Selected')"
-          text-color="var(--text-with-main-color)"
-          background-color="var(--primary-color)"
+          text-color="var(--destructive-text-color)"
+          background-color="var(--destructive-color)"
           @click="displayDeletePrompt"
         />
       </ft-flex-box>
@@ -41,6 +41,7 @@
       :label="deletePromptMessage"
       :option-names="deletePromptNames"
       :option-values="deletePromptValues"
+      :is-first-option-destructive="true"
       @click="handleDeletePromptClick"
     />
   </div>

src/renderer/components/ft-profile-edit/ft-profile-edit.js

@@ -42,8 +42,8 @@ export default defineComponent({
       profileBgColor: '',
       profileTextColor: '',
       deletePromptValues: [
-        'yes',
-        'no'
+        'delete',
+        'cancel'
       ]
     }
   },
@@ -70,8 +70,8 @@ export default defineComponent({
     },
     deletePromptNames: function () {
       return [
-        this.$t('Yes'),
-        this.$t('No')
+        this.$t('Yes, Delete'),
+        this.$t('Cancel')
       ]
     },
     editOrCreateProfileLabel: function () {
@@ -101,7 +101,7 @@ export default defineComponent({
     },
 
     handleDeletePrompt: function (response) {
-      if (response === 'yes') {
+      if (response === 'delete') {
         this.deleteProfile()
       } else {
         this.showDeletePrompt = false

src/renderer/components/ft-profile-edit/ft-profile-edit.vue

@@ -83,8 +83,9 @@
                   <ft-button
                     v-if="!isMainProfile"
                     :label="$t('Profile.Delete Profile')"
-                    text-color="var(--text-with-main-color)"
-                    background-color="var(--primary-color)"
+                    text-color="var(--destructive-text-color)"
+                    background-color="var(--destructive-color)"
+                    :icon="['fas', 'trash']"
                     @click="openDeletePrompt"
                   />
                 </template>
@@ -99,6 +100,7 @@
       :label="deletePromptLabel"
       :option-names="deletePromptNames"
       :option-values="deletePromptValues"
+      :is-first-option-destructive="true"
       @click="handleDeletePrompt"
     />
   </div>

src/renderer/components/ft-prompt/ft-prompt.js

@@ -29,11 +29,11 @@ export default defineComponent({
       type: Array,
       default: () => { return [] }
     },
-    showClose: {
+    autosize: {
       type: Boolean,
       default: false
     },
-    autosize: {
+    isFirstOptionDestructive: {
       type: Boolean,
       default: false
     },
@@ -52,7 +52,7 @@ export default defineComponent({
   computed: {
     sanitizedLabel: function() {
       return sanitizeForHtmlId(this.label)
-    }
+    },
   },
   mounted: function () {
     this.lastActiveElement = document.activeElement
@@ -72,6 +72,24 @@ export default defineComponent({
     nextTick(() => this.lastActiveElement?.focus())
   },
   methods: {
+    optionButtonTextColor: function(index) {
+      if (index === 0 && this.isFirstOptionDestructive) {
+        return 'var(--destructive-text-color)'
+      } else if (index < this.optionNames.length - 1) {
+        return 'var(--text-with-accent-color)'
+      } else {
+        return null
+      }
+    },
+    optionButtonBackgroundColor: function(index) {
+      if (index === 0 && this.isFirstOptionDestructive) {
+        return 'var(--destructive-color)'
+      } else if (index < this.optionNames.length - 1) {
+        return 'var(--accent-color)'
+      } else {
+        return null
+      }
+    },
     click: function (value) {
       this.$emit('click', value)
     },

src/renderer/components/ft-prompt/ft-prompt.vue

@@ -36,17 +36,11 @@
               :id="'prompt-' + sanitizedLabel + '-' + index"
               :key="index"
               :label="option"
+              :text-color="optionButtonTextColor(index)"
+              :background-color="optionButtonBackgroundColor(index)"
+              :icon="index === 0 && isFirstOptionDestructive ? ['fas', 'trash'] : null"
               @click="click(optionValues[index])"
             />
-            <ft-button
-              v-if="showClose"
-              :id="'prompt-' + sanitizedLabel + '-close'"
-              :label="$t('Close')"
-              :tabindex="0"
-              text-color="'var(--accent-color)'"
-              background-color="'var(--text-with-accent-color)'"
-              @click="hide"
-            />
           </ft-flex-box>
         </slot>
       </ft-card>

src/renderer/components/playlist-info/playlist-info.vue

@@ -155,14 +155,14 @@
           v-if="!editMode && isUserPlaylist && videoCount > 0"
           :title="$t('User Playlists.Remove Watched Videos')"
           :icon="['fas', 'eye-slash']"
-          theme="primary"
+          theme="destructive"
           @click="showRemoveVideosOnWatchPrompt = true"
         />
         <ft-icon-button
           v-if="deletePlaylistButtonVisible"
           :title="$t('User Playlists.Delete Playlist')"
           :icon="['fas', 'trash']"
-          theme="primary"
+          theme="destructive"
           @click="showDeletePlaylistPrompt = true"
         />
         <ft-share-button
@@ -179,13 +179,15 @@
         :label="$t('User Playlists.Are you sure you want to delete this playlist? This cannot be undone')"
         :option-names="deletePlaylistPromptNames"
         :option-values="deletePlaylistPromptValues"
+        :is-first-option-destructive="true"
         @click="handleDeletePlaylistPromptAnswer"
       />
       <ft-prompt
         v-if="showRemoveVideosOnWatchPrompt"
         :label="$t('User Playlists.Are you sure you want to remove all watched videos from this playlist? This cannot be undone')"
         :option-names="deletePlaylistPromptNames"
         :option-values="deletePlaylistPromptValues"
+        :is-first-option-destructive="true"
         @click="handleRemoveVideosOnWatchPromptAnswer"
       />
     </div>

src/renderer/components/privacy-settings/privacy-settings.js

@@ -24,8 +24,8 @@ export default defineComponent({
       showRemoveSubscriptionsPrompt: false,
       showRemovePlaylistsPrompt: false,
       promptValues: [
-        'yes',
-        'no'
+        'delete',
+        'cancel'
       ]
     }
   },
@@ -48,16 +48,16 @@ export default defineComponent({
     },
     promptNames: function () {
       return [
-        this.$t('Yes'),
-        this.$t('No')
+        this.$t('Yes, Delete'),
+        this.$t('Cancel')
       ]
     }
   },
   methods: {
     handleSearchCache: function (option) {
       this.showSearchCachePrompt = false
 
-      if (option === 'yes') {
+      if (option === 'delete') {
         this.clearSessionSearchHistory()
         showToast(this.$t('Settings.Privacy Settings.Search cache has been cleared'))
       }
@@ -74,7 +74,7 @@ export default defineComponent({
     handleRemoveHistory: function (option) {
       this.showRemoveHistoryPrompt = false
 
-      if (option === 'yes') {
+      if (option === 'delete') {
         this.removeAllHistory()
         showToast(this.$t('Settings.Privacy Settings.Watch history has been cleared'))
       }
@@ -85,7 +85,7 @@ export default defineComponent({
 
       this.updateActiveProfile(MAIN_PROFILE_ID)
 
-      if (option !== 'yes') { return }
+      if (option !== 'delete') { return }
 
       this.profileList.forEach((profile) => {
         if (profile._id === MAIN_PROFILE_ID) {