From 8f5111d10057ebc513ede0e5121ec129c5e097e5 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 21 Aug 2025 20:59:38 +0800
Subject: [PATCH] Refactor: unify dialog styles across components

- Add unified .dialog-overlay and .dialog classes to tailwind.css
- Remove duplicated dialog styles from 9 Vue components
- Standardize z-index to 50 for all dialogs
- Preserve special cases: FeedFilters (z-index: 100), PhotoDialog (camera styles)
- Eliminate ~200 lines of duplicated CSS code
- Updated ContactNameDialog from using getter methods to direct CSS classes
- Improve maintainability with single source of truth for dialog styling
---
 src/assets/styles/tailwind.css       |  8 ++++++++
 src/components/ContactNameDialog.vue | 18 ++----------------
 src/components/FeedFilters.vue       | 22 ----------------------
 src/components/GiftedDialog.vue      | 24 ------------------------
 src/components/GiftedPrompts.vue     | 24 ------------------------
 src/components/ImageMethodDialog.vue | 26 --------------------------
 src/components/InviteDialog.vue      | 24 ------------------------
 src/components/OfferDialog.vue       | 25 -------------------------
 src/components/OnboardingDialog.vue  | 24 ------------------------
 src/components/PhotoDialog.vue       | 28 ----------------------------
 src/components/UserNameDialog.vue    | 24 ------------------------
 src/views/DIDView.vue                | 23 -----------------------
 12 files changed, 10 insertions(+), 260 deletions(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 60f6579d..404cf927 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -14,4 +14,12 @@
 		transform: translateX(100%);
 		background-color: #FFF !important;
 	}
+
+	.dialog-overlay {
+		@apply z-50 fixed inset-0 bg-black/50 flex justify-center items-center p-6;
+	}
+
+	.dialog {
+		@apply bg-white p-4 rounded-lg w-full max-w-lg;
+	}
 }
\ No newline at end of file
diff --git a/src/components/ContactNameDialog.vue b/src/components/ContactNameDialog.vue
index e0f715ea..3eb116cf 100644
--- a/src/components/ContactNameDialog.vue
+++ b/src/components/ContactNameDialog.vue
@@ -1,7 +1,7 @@
 <!-- similar to UserNameDialog -->
 <template>
-  <div v-if="visible" :class="overlayClasses">
-    <div :class="dialogClasses">
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
       <h1 :class="titleClasses">{{ title }}</h1>
       {{ message }}
       Note that their name is only stored on this device.
@@ -61,20 +61,6 @@ export default class ContactNameDialog extends Vue {
   title = "Contact Name";
   visible = false;
 
-  /**
-   * CSS classes for the modal overlay backdrop
-   */
-  get overlayClasses(): string {
-    return "z-index-50 fixed top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center p-6";
-  }
-
-  /**
-   * CSS classes for the modal dialog container
-   */
-  get dialogClasses(): string {
-    return "bg-white p-4 rounded-lg w-full max-w-[500px]";
-  }
-
   /**
    * CSS classes for the dialog title
    */
diff --git a/src/components/FeedFilters.vue b/src/components/FeedFilters.vue
index 956685e9..32c8919c 100644
--- a/src/components/FeedFilters.vue
+++ b/src/components/FeedFilters.vue
@@ -212,30 +212,8 @@ export default class FeedFilters extends Vue {
 </script>
 
 <style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
 #dialogFeedFilters.dialog-overlay {
   z-index: 100;
   overflow: scroll;
 }
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
 </style>
diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 0b9cd16a..fc393f53 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -665,27 +665,3 @@ export default class GiftedDialog extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/components/GiftedPrompts.vue b/src/components/GiftedPrompts.vue
index f4387472..8f5f72c9 100644
--- a/src/components/GiftedPrompts.vue
+++ b/src/components/GiftedPrompts.vue
@@ -291,27 +291,3 @@ export default class GivenPrompts extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/components/ImageMethodDialog.vue b/src/components/ImageMethodDialog.vue
index 0c4c5427..2ea02d5a 100644
--- a/src/components/ImageMethodDialog.vue
+++ b/src/components/ImageMethodDialog.vue
@@ -931,32 +931,6 @@ export default class ImageMethodDialog extends Vue {
 </script>
 
 <style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 700px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 /* Add styles for diagnostic panel */
 .diagnostic-panel {
   font-family: monospace;
diff --git a/src/components/InviteDialog.vue b/src/components/InviteDialog.vue
index ed640c6e..d10a6f5b 100644
--- a/src/components/InviteDialog.vue
+++ b/src/components/InviteDialog.vue
@@ -93,27 +93,3 @@ export default class InviteDialog extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/components/OfferDialog.vue b/src/components/OfferDialog.vue
index 81664088..a958bd06 100644
--- a/src/components/OfferDialog.vue
+++ b/src/components/OfferDialog.vue
@@ -312,28 +312,3 @@ export default class OfferDialog extends Vue {
   }
 }
 </script>
-
-<style scoped>
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 50;
-}
-
-.dialog {
-  background: white;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-}
-</style>
diff --git a/src/components/OnboardingDialog.vue b/src/components/OnboardingDialog.vue
index f6275f12..fe419d55 100644
--- a/src/components/OnboardingDialog.vue
+++ b/src/components/OnboardingDialog.vue
@@ -307,27 +307,3 @@ export default class OnboardingDialog extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 40;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/components/PhotoDialog.vue b/src/components/PhotoDialog.vue
index 590f60b3..4afc9170 100644
--- a/src/components/PhotoDialog.vue
+++ b/src/components/PhotoDialog.vue
@@ -628,34 +628,6 @@ export default class PhotoDialog extends Vue {
 </script>
 
 <style>
-/* Dialog overlay styling */
-.dialog-overlay {
-  z-index: 60;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-/* Dialog container styling */
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 700px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 /* Camera preview styling */
 .camera-preview {
   flex: 1;
diff --git a/src/components/UserNameDialog.vue b/src/components/UserNameDialog.vue
index dec1a84c..d71ee9fc 100644
--- a/src/components/UserNameDialog.vue
+++ b/src/components/UserNameDialog.vue
@@ -134,27 +134,3 @@ export default class UserNameDialog extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/views/DIDView.vue b/src/views/DIDView.vue
index a6212ece..56c97beb 100644
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -831,26 +831,3 @@ export default class DIDView extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
-- 
2.30.2