From 185674ecbe2e8ee9cb5003791c8163fbc927b31d Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Wed, 4 Jun 2025 03:10:10 +0200
Subject: [PATCH] Refactor InterestDetailsModal to separate mobile and desktop
 layouts

Remove conditional mobile styling from toolbar buttons and add dedicated
mobile action buttons section with improved card-based layout for better
mobile user experience.
---
 components/InterestDetailsModal.vue | 120 ++++++++++++++++++++++------
 1 file changed, 94 insertions(+), 26 deletions(-)

diff --git a/components/InterestDetailsModal.vue b/components/InterestDetailsModal.vue
index d803604..44d9cd3 100644
--- a/components/InterestDetailsModal.vue
+++ b/components/InterestDetailsModal.vue
@@ -15,7 +15,7 @@
           Interest Details
         </v-toolbar-title>
         <v-spacer></v-spacer>
-        <v-toolbar-items>
+        <v-toolbar-items v-if="!mobile">
           <v-btn
             @click="requestMoreInfoToSales"
             variant="text"
@@ -25,13 +25,9 @@
               isRequestingMoreInformation ||
               isSendingEOI
             "
-            :icon="mobile"
           >
-            <v-icon v-if="mobile">mdi-information-outline</v-icon>
-            <template v-else>
-              <v-icon start>mdi-information-outline</v-icon>
-              Info to Sales
-            </template>
+            <v-icon start>mdi-information-outline</v-icon>
+            Info to Sales
           </v-btn>
           <v-btn
             @click="requestMoreInformation"
@@ -42,13 +38,9 @@
               isRequestingMoreInformation ||
               isSendingEOI
             "
-            :icon="mobile"
           >
-            <v-icon v-if="mobile">mdi-email-outline</v-icon>
-            <template v-else>
-              <v-icon start>mdi-email-outline</v-icon>
-              Request Info
-            </template>
+            <v-icon start>mdi-email-outline</v-icon>
+            Request Info
           </v-btn>
           <v-btn
             @click="eoiSendToSales"
@@ -59,29 +51,21 @@
               isRequestingMoreInformation ||
               isSendingEOI
             "
-            :icon="mobile"
           >
-            <v-icon v-if="mobile">mdi-send</v-icon>
-            <template v-else>
-              <v-icon start>mdi-send</v-icon>
-              EOI to Sales
-            </template>
+            <v-icon start>mdi-send</v-icon>
+            EOI to Sales
           </v-btn>
           <v-btn
             variant="flat"
             color="success"
-            :size="mobile ? 'default' : 'large'"
+            size="large"
             @click="saveInterest"
             :loading="isSaving"
             :disabled="isSaving"
             class="ml-2"
-            :icon="mobile"
           >
-            <v-icon v-if="mobile">mdi-content-save</v-icon>
-            <template v-else>
-              <v-icon start>mdi-content-save</v-icon>
-              Save Changes
-            </template>
+            <v-icon start>mdi-content-save</v-icon>
+            Save Changes
           </v-btn>
         </v-toolbar-items>
       </v-toolbar>
@@ -156,6 +140,90 @@
           </v-col>
         </v-row>
 
+        <!-- Mobile Action Buttons -->
+        <v-card v-if="mobile" variant="flat" class="mb-6">
+          <v-card-title class="text-h6 d-flex align-center pb-4">
+            <v-icon class="mr-2" color="primary">mdi-gesture-tap</v-icon>
+            Actions
+          </v-card-title>
+          <v-card-text class="pt-2">
+            <v-row dense>
+              <v-col cols="6">
+                <v-btn
+                  @click="requestMoreInfoToSales"
+                  variant="outlined"
+                  color="primary"
+                  block
+                  :loading="isRequestingMoreInfo"
+                  :disabled="
+                    isRequestingMoreInfo ||
+                    isRequestingMoreInformation ||
+                    isSendingEOI
+                  "
+                  class="mb-2 d-flex flex-column"
+                  size="large"
+                >
+                  <v-icon size="large" class="mb-1">mdi-information-outline</v-icon>
+                  <span class="text-caption">Info to Sales</span>
+                </v-btn>
+              </v-col>
+              <v-col cols="6">
+                <v-btn
+                  @click="requestMoreInformation"
+                  variant="outlined"
+                  color="primary"
+                  block
+                  :loading="isRequestingMoreInformation"
+                  :disabled="
+                    isRequestingMoreInfo ||
+                    isRequestingMoreInformation ||
+                    isSendingEOI
+                  "
+                  class="mb-2 d-flex flex-column"
+                  size="large"
+                >
+                  <v-icon size="large" class="mb-1">mdi-email-outline</v-icon>
+                  <span class="text-caption">Request Info</span>
+                </v-btn>
+              </v-col>
+              <v-col cols="6">
+                <v-btn
+                  @click="eoiSendToSales"
+                  variant="outlined"
+                  color="primary"
+                  block
+                  :loading="isSendingEOI"
+                  :disabled="
+                    isRequestingMoreInfo ||
+                    isRequestingMoreInformation ||
+                    isSendingEOI
+                  "
+                  class="mb-2 d-flex flex-column"
+                  size="large"
+                >
+                  <v-icon size="large" class="mb-1">mdi-send</v-icon>
+                  <span class="text-caption">EOI to Sales</span>
+                </v-btn>
+              </v-col>
+              <v-col cols="6">
+                <v-btn
+                  @click="saveInterest"
+                  variant="flat"
+                  color="success"
+                  block
+                  :loading="isSaving"
+                  :disabled="isSaving"
+                  class="mb-2 d-flex flex-column"
+                  size="large"
+                >
+                  <v-icon size="large" class="mb-1">mdi-content-save</v-icon>
+                  <span class="text-caption">Save Changes</span>
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+
         <v-form @submit.prevent="saveInterest">
           <!-- Contact Information Section -->
           <v-card variant="flat" class="mb-6">