From 8b2fb32b41a715b3895a075ed29d7e9ab332a31a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 18 Apr 2024 10:53:49 -0500
Subject: [PATCH] Add themes for handling ft-prompt styling

This is a portal-compatible way of affecting prompt styling, as ':deep' does not work for portals.
---
 .../ft-playlist-add-video-prompt.css          | 10 -------
 .../ft-playlist-add-video-prompt.vue          |  1 +
 .../components/ft-prompt/ft-prompt.css        | 26 +++++++++++++++++++
 .../components/ft-prompt/ft-prompt.js         |  4 +++
 .../components/ft-prompt/ft-prompt.vue        |  4 ++-
 .../ft-search-filters/ft-search-filters.css   | 23 ----------------
 .../ft-search-filters/ft-search-filters.js    |  2 +-
 .../ft-search-filters/ft-search-filters.vue   |  1 +
 8 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
index 182490925..aa1855403 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
@@ -6,16 +6,6 @@
   text-align: center;
 }
 
-/* Style for `ft-prompt` */
-:deep(.promptCard) {
-  /* Currently only this prompt has enough content to make prompt too high */
-  max-block-size: 95%;
-
-  /* Some child(s) will grow vertically */
-  display: flex;
-  flex-direction: column;
-}
-
 .searchInputsRow {
   display: grid;
 
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
index 92dd08805..5a2d9416b 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
@@ -1,5 +1,6 @@
 <template>
   <ft-prompt
+    theme="flex-column"
     @click="hide"
   >
     <h2 class="heading">
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index 06312c5a8..5647f9450 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -17,6 +17,7 @@
 
 .promptCard {
   overflow-y: scroll;
+  max-block-size: 95%;
 }
 
 .promptCard.autosize {
@@ -34,6 +35,31 @@
   box-sizing: border-box;
 }
 
+.promptCard.flex-column {
+    /* Some child(ren) will grow vertically */
+    display: flex;
+    flex-direction: column;
+}
+
+.promptCard.slim {
+  max-inline-size: 70%;
+  inset-inline-start: 15%;
+  padding-block: 10px;
+}
+
 .center {
   text-align: center;
 }
+
+@media only screen and (width <= 680px) {
+  .promptCard.slim {
+    padding-block: 5px;
+  }
+}
+
+@media only screen and (width <= 500px) {
+  .promptCard.slim {
+    max-inline-size: 80%;
+    inset-inline-start: 10%;
+  }
+}
diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js
index c73e2cdcb..eff9ee645 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.js
+++ b/src/renderer/components/ft-prompt/ft-prompt.js
@@ -36,6 +36,10 @@ export default defineComponent({
     autosize: {
       type: Boolean,
       default: false
+    },
+    theme: {
+      type: String,
+      default: 'base'
     }
   },
   emits: ['click'],
diff --git a/src/renderer/components/ft-prompt/ft-prompt.vue b/src/renderer/components/ft-prompt/ft-prompt.vue
index 02d2ac015..d8c93b339 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.vue
+++ b/src/renderer/components/ft-prompt/ft-prompt.vue
@@ -9,7 +9,9 @@
     >
       <ft-card
         class="promptCard"
-        :class="{ autosize }"
+        :class="{ autosize, [theme]: true }"
+        role="dialog"
+        aria-modal="true"
         :aria-labelledby="('dialog-' + sanitizedLabel)"
       >
         <slot>
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 0e9f6a5d0..071a9b42c 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -4,16 +4,6 @@
   user-select: none;
 }
 
-/* Style for `ft-prompt` */
-:deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-  max-inline-size: 70%;
-  inset-inline-start: 15%;
-  padding-block: 10px;
-
-  /* Currently only this prompt has enough content to make prompt too high */
-  max-block-size: 95%;
-}
-
 .searchRadio {
   padding: 5px;
 }
@@ -29,11 +19,6 @@
 }
 
 @media only screen and (width <= 680px) {
-  /* Style for `ft-prompt` */
-  :deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-    padding-block: 5px;
-  }
-
   .searchRadio {
     border-inline-end: 0;
     padding-block-start: 0;
@@ -43,11 +28,3 @@
     flex-flow: column;
   }
 }
-
-@media only screen and (width <= 500px) {
-  /* Style for `ft-prompt` */
-  :deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-    max-inline-size: 80%;
-    inset-inline-start: 10%;
-  }
-}
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.js b/src/renderer/components/ft-search-filters/ft-search-filters.js
index a0a4b2def..6aa6312df 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.js
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.js
@@ -1,4 +1,4 @@
-import { defineComponent, nextTick } from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtRadioButton from '../ft-radio-button/ft-radio-button.vue'
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.vue b/src/renderer/components/ft-search-filters/ft-search-filters.vue
index dd418eb63..229b67ee2 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.vue
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.vue
@@ -1,5 +1,6 @@
 <template>
   <ft-prompt
+    theme="slim"
     @click="hideSearchFilters"
   >
     <div>