Distinguish destructive actions

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

@@ -19,8 +19,9 @@
     <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']"
+      :is-first-option-destructive="true"
       @click="handleReplaceHttpCache"
     />
   </ft-settings-section>

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

@@ -76,6 +76,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-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 () {

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

@@ -36,8 +36,8 @@ export default defineComponent({
       profileBgColor: '',
       profileTextColor: '',
       deletePromptValues: [
-        'yes',
-        'no'
+        'delete',
+        'cancel'
       ]
     }
   },
@@ -62,8 +62,8 @@ export default defineComponent({
     },
     deletePromptNames: function () {
       return [
-        this.$t('Yes'),
-        this.$t('No')
+        this.$t('Yes, Delete'),
+        this.$t('Cancel')
       ]
     }
   },
@@ -84,7 +84,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

@@ -84,8 +84,8 @@
           <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)"
             @click="openDeletePrompt"
           />
         </template>
@@ -96,6 +96,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

@@ -36,7 +36,11 @@ export default defineComponent({
     autosize: {
       type: Boolean,
       default: false
-    }
+    },
+    isFirstOptionDestructive: {
+      type: Boolean,
+      default: false
+    },
   },
   data: function () {
     return {

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

@@ -32,6 +32,8 @@
             :id="'prompt-' + sanitizedLabel + '-' + index"
             :key="index"
             :label="option"
+            :text-color="index === 0 && isFirstOptionDestructive ? 'var(--destructive-text-color)' : null"
+            :background-color="index === 0 && isFirstOptionDestructive ? 'var(--destructive-color)' : null"
             @click="$emit('click', optionValues[index])"
           />
           <ft-button

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

@@ -23,8 +23,8 @@ export default defineComponent({
       showRemoveHistoryPrompt: false,
       showRemoveSubscriptionsPrompt: false,
       promptValues: [
-        'yes',
-        'no'
+        'delete',
+        'cancel'
       ]
     }
   },
@@ -50,16 +50,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'))
       }
@@ -83,7 +83,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'))
       }
@@ -94,7 +94,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) {

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

@@ -43,20 +43,20 @@
     <ft-flex-box>
       <ft-button
         :label="$t('Settings.Privacy Settings.Clear Search Cache')"
-        text-color="var(--text-with-main-color)"
-        background-color="var(--primary-color)"
+        text-color="var(--destructive-text-color)"
+        background-color="var(--destructive-color)"
         @click="showSearchCachePrompt = true"
       />
       <ft-button
         :label="$t('Settings.Privacy Settings.Remove Watch History')"
-        text-color="var(--text-with-main-color)"
-        background-color="var(--primary-color)"
+        text-color="var(--destructive-text-color)"
+        background-color="var(--destructive-color)"
         @click="showRemoveHistoryPrompt = true"
       />
       <ft-button
         :label="$t('Settings.Privacy Settings.Remove All Subscriptions / Profiles')"
-        text-color="var(--text-with-main-color)"
-        background-color="var(--primary-color)"
+        text-color="var(--destructive-text-color)"
+        background-color="var(--destructive-color)"
         @click="showRemoveSubscriptionsPrompt = true"
       />
     </ft-flex-box>
@@ -65,20 +65,23 @@
       :label="$t('Settings.Privacy Settings.Are you sure you want to clear out your search cache?')"
       :option-names="promptNames"
       :option-values="promptValues"
+      :is-first-option-destructive="true"
       @click="handleSearchCache"
     />
     <ft-prompt
       v-if="showRemoveHistoryPrompt"
       :label="$t('Settings.Privacy Settings.Are you sure you want to remove your entire watch history?')"
       :option-names="promptNames"
       :option-values="promptValues"
+      :is-first-option-destructive="true"
       @click="handleRemoveHistory"
     />
     <ft-prompt
       v-if="showRemoveSubscriptionsPrompt"
       :label="removeSubscriptionsPromptMessage"
       :option-names="promptNames"
       :option-values="promptValues"
+      :is-first-option-destructive="true"
       @click="handleRemoveSubscriptions"
     />
   </ft-settings-section>

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

@@ -26,8 +26,8 @@ export default defineComponent({
       disableSmoothScrollingToggleValue: false,
       showRestartPrompt: false,
       restartPromptValues: [
-        'yes',
-        'no'
+        'restart',
+        'cancel'
       ],
       baseThemeValues: [
         'system',
@@ -88,8 +88,8 @@ export default defineComponent({
 
     restartPromptNames: function () {
       return [
-        this.$t('Yes'),
-        this.$t('No')
+        this.$t('Yes, Restart'),
+        this.$t('Cancel')
       ]
     },
 
@@ -146,7 +146,7 @@ export default defineComponent({
     handleSmoothScrolling: function (value) {
       this.showRestartPrompt = false
 
-      if (value === null || value === 'no') {
+      if (value === null || value === 'cancel') {
         this.disableSmoothScrollingToggleValue = !this.disableSmoothScrollingToggleValue
         return
       }

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

@@ -81,6 +81,7 @@
       :label="restartPromptMessage"
       :option-names="restartPromptNames"
       :option-values="restartPromptValues"
+      :is-first-option-destructive="true"
       @click="handleSmoothScrolling"
     />
   </ft-settings-section>

src/renderer/themes.css

@@ -7,6 +7,10 @@
 .pastelPink,
 .hotPink {
   --primary-input-color: rgba(0, 0, 0, 0.50);
+  --destructive-color: #7F0000;
+  --destructive-text-color: #FFFFFF;
+  --destructive-hover-color: #FF2F2F;
+  --destructive-active-color: #AD6060;
 }
 
 .system[data-system-theme*='light'], .light,

static/locales/en-US.yaml

@@ -939,3 +939,6 @@ Hashtag:
 Yes: Yes
 No: No
 Ok: Ok
+Yes, Delete: Yes, Delete
+Yes, Restart: Yes, Restart
+Cancel: Cancel