feat: change spacing, message & fix location

RST-2559
empathyco · Dec 10, 2024 · ffa63b8 · ffa63b8
1 parent f648533
commit ffa63b8
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 24 deletions.
diff --git a/src/components/main.vue b/src/components/main.vue
@@ -4,10 +4,10 @@
     <LocationProvider location="results">
       <Results />
     </LocationProvider>
-    <LocationProvider v-if="showRelatedPrompts" location="related_prompts">
+    <LocationProvider v-if="showRelatedPrompts" :location="semanticsLocation">
       <CustomRelatedPrompts
         :related-prompt-list="relatedPrompts"
-        :class="x.noResults ? 'desktop:x-mt-24' : 'x-mt-24 desktop:x-mt-32'"
+        :class="x.noResults ? 'desktop:x-mt-24' : 'x-mt-48 desktop:x-mt-32'"
       />
     </LocationProvider>
     <LocationProvider v-if="!showRelatedPrompts" :location="semanticsLocation">

diff --git a/src/components/related-prompts/custom-related-prompts.vue b/src/components/related-prompts/custom-related-prompts.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="x-mb-32 x-flex x-flex-col">
+  <div class="x-mb-64 x-flex x-flex-col">
     <i18n-t
-      class="x-no-results-message x-text1 x-flex x-flex-wrap x-items-center x-justify-center x-break-words x-bg-neutral-10 x-p-24 x-text-center x-text-neutral-90 desktop:x-text1-lg"
+      class="x-no-results-message x-text1 x-flex x-flex-wrap x-gap-4 x-items-center x-justify-center x-break-words x-bg-neutral-10 x-p-24 x-text-center x-text-neutral-90 desktop:x-text1-lg"
       keypath="relatedPrompts.title"
-      tag="span"
+      tag="p"
       scope="global"
     >
       <template #query>
-        <span class="x-title3 x-w-auto">{{ x.query.search }}</span>
+        <span class="x-title3 x-w-auto">"{{ x.query.search }}"</span>
+      </template>
+      <template #message>
+        <span class="x-w-auto">{{ $t('relatedPrompts.message') }}</span>
       </template>
     </i18n-t>
 
@@ -16,7 +19,7 @@
       <CustomQueryPreview
         v-if="selectedPrompt !== -1"
         :key="queriesPreviewInfo.length"
-        class="x-rounded-[12px] x-bg-neutral-10 x-px-16"
+        class="x-rounded-b-[12px] x-bg-neutral-10 x-px-16"
         :queries-preview-info="queriesPreviewInfo"
       ></CustomQueryPreview>
     </div>

diff --git a/src/components/related-prompts/related-prompts-tag-list.vue b/src/components/related-prompts/related-prompts-tag-list.vue
@@ -7,28 +7,30 @@
   >
     <div
       ref="slidingPanelContent"
-      class="x-flex x-gap-8 x-font-main desktop:x-mx-0 desktop:x-mb-0"
+      class="x-flex x-gap-16 x-font-main desktop:x-mx-0 desktop:x-mb-0"
       :class="{ 'x-w-[calc(100%)]': selectedIndex !== -1 }"
     >
       <div
         v-for="(suggestion, index) in relatedPrompts"
         :key="index"
         :style="{ animationDelay: `${index * 0.4 + 0.05}s` }"
-        class="x-text-neutral-80 x-flex x-h-[112px] x-flex-col x-rounded-[12px] x-bg-neutral-10 x-text-md x-font-[400] x-transition-all x-duration-500 x-staggered-initial"
+        class="x-text-neutral-80 x-flex x-flex-col x-rounded-[12px] x-bg-neutral-10 x-text-md x-font-[400] x-transition-all x-duration-500 x-staggered-initial"
         :class="[
           { 'x-staggered-animation': isVisible },
           { 'x-hidden': shouldHideButton(index) },
-          isSelected(index) ? 'x-w-full' : 'x-w-[204px] desktop:x-w-[303px]',
+          isSelected(index)
+            ? 'x-w-full x-rounded-b-none'
+            : 'x-min-h-[112px] x-h-full x-w-[204px] desktop:x-w-[303px]',
         ]"
         data-test="related-prompt-item"
       >
         <!-- Suggestion -->
         <button
-          class="x-flex x-flex-row x-items-start x-justify-between x-gap-12 x-px-16 x-pt-8 x-text-start x-transition-all x-duration-500"
-          :class="isSelected(index) ? 'x-w-full' : 'x-w-[204px] x-grow desktop:x-w-[303px]'"
+          class="x-flex x-flex-row x-items-start x-justify-between x-gap-12 x-p-16 x-text-start x-transition-all x-duration-500"
+          :class="[isSelected(index) ? 'x-w-full' : 'x-w-[204px] x-grow desktop:x-w-[303px]']"
           @click="toggleSuggestion(index)"
         >
-          <div class="x-flex x-min-h-[32px]">
+          <div class="x-flex">
             <span
               class="x-typewritter-initial"
               :class="[{ 'x-typewritter-animation': isVisible }]"
@@ -40,16 +42,14 @@
               {{ suggestion.suggestionText }}
             </span>
           </div>
-          <div class="x-mr-8 x-mt-8">
-            <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
-            <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
-          </div>
+          <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
+          <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
         </button>
 
         <!-- Next queries -->
         <div
           v-if="isSelected(index)"
-          class="x-no-scrollbar x-mt-8 x-flex x-w-full x-gap-12 x-overflow-y-hidden x-overflow-x-scroll x-px-16"
+          class="x-no-scrollbar x-pb-16 x-flex x-w-full x-gap-12 x-overflow-y-hidden x-overflow-x-scroll x-px-16"
         >
           <button
             v-for="(query, queryIndex) in suggestion.nextQueries"

diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts
@@ -130,5 +130,6 @@ export interface Messages {
   }
   relatedPrompts: {
     title: string
+    message: string
   }
 }
diff --git a/src/i18n/messages/de.messages.json b/src/i18n/messages/de.messages.json
@@ -128,7 +128,8 @@
       "reject": "Nein, ich bleibe hier"
     },
     "relatedPrompts": {
-      "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:"
+      "title": "Sind Sie an {query} interessiert?",
+      "message": "Entdecken Sie diese Vorschläge:"
     }
   },
   "mobile": {

diff --git a/src/i18n/messages/en.messages.json b/src/i18n/messages/en.messages.json
@@ -128,7 +128,8 @@
       "reject": "No, I'll stay here"
     },
     "relatedPrompts": {
-      "title": "Are you interested in \"{query}\"? Explore this suggestions:"
+      "title": "Are you interested in {query}?",
+      "message": "Explore this suggestions:"
     }
   },
   "mobile": {

diff --git a/src/i18n/messages/es.messages.json b/src/i18n/messages/es.messages.json
@@ -128,7 +128,8 @@
       "reject": "No, me quedaré aquí"
     },
     "relatedPrompts": {
-      "title": "¿Estás interesado en \"{query}\"? Explora estas sugerencias:"
+      "title": "¿Estás interesado en {query}?",
+      "message": "Explora estas sugerencias:"
     }
   },
   "mobile": {

diff --git a/src/i18n/messages/fr.messages.json b/src/i18n/messages/fr.messages.json
@@ -128,7 +128,8 @@
       "reject": "Non, je reste ici"
     },
     "relatedPrompts": {
-      "title": "Êtes-vous intéressé par «{query}»? Explorez ces suggestions:"
+      "title": "Êtes-vous intéressé par {query}?",
+      "message": "Explorez ces suggestions:"
     }
   },
   "mobile": {

diff --git a/src/i18n/messages/it.messages.json b/src/i18n/messages/it.messages.json
@@ -128,7 +128,8 @@
       "reject": "No, rimango qui"
     },
     "relatedPrompts": {
-      "title": "Ti interessa \"{query}\"? Esplora questi suggerimenti:"
+      "title": "Ti interessa {query}?",
+      "message": "Esplora questi suggerimenti:"
     }
   },
   "mobile": {

diff --git a/src/i18n/messages/pt.messages.json b/src/i18n/messages/pt.messages.json
@@ -128,7 +128,8 @@
       "reject": "Não, vou ficar aqui"
     },
     "relatedPrompts": {
-      "title": "Você está interessado em \"{query}\"? Explore estas sugestões:"
+      "title": "Você está interessado em {query}?",
+      "message": "Explore estas sugestões:"
     }
   },
   "mobile": {