feat: minor adjustments in archetype design (#304)

EMP-771

public/snippet-script.js

@@ -48,7 +48,7 @@ const instance = popFromURLParameters('instance') || 'empathy';
 const env = getEnv();
 const scope = popFromURLParameters('scope') || 'desktop';
 const lang = popFromURLParameters('lang') || 'en';
-const device = popFromURLParameters('device') || 'mobile';
+const device = popFromURLParameters('device') || undefined;
 const uiLang = popFromURLParameters('uiLang') || lang;
 const currency = popFromURLParameters('currency') || 'EUR';
 const consent = popFromURLParameters('consent') !== 'false';

src/components/column-picker.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="x-flex x-items-center x-gap-8">
-    <span class="x-title4 x-uppercase">{{ $t('columnPicker.message') }}</span>
+    <span class="x-title4">{{ $t('columnPicker.message') }}</span>
     <BaseColumnPickerList
       :columns="values"
-      buttonClass="x-button-sm x-button-square x-button-tight x-text-neutral-25
-      selected:x-text-neutral-90"
+      buttonClass="x-button-sm x-button-circle x-button-ghost x-text-neutral-90"
     >
       <template #divider>
-        <span class="x-button-group-divider x-text-neutral-25" />
+        <span class="x-button-group-divider x-mx-8 x-text-neutral-25" />
       </template>
       <template #default="{ column }">
         <component :is="icons[column]" class="x-icon-lg" />

src/components/mobile/mobile-open-aside.vue

@@ -2,7 +2,7 @@
   <BaseIdModalOpen
     data-test="toggle-facets-button"
     modalId="aside-modal"
-    class="x-button-lead x-rounded-full x-p-12 x-px-16"
+    class="x-button-lead x-rounded-full x-px-16"
   >
     <FiltersIcon class="x-icon-lg" />
     <span>{{ $t('toggleAside.showAside') }}</span>

src/components/my-history/custom-my-history.vue

@@ -38,15 +38,7 @@
         </template>
       </MyHistory>
 
-      <div v-else class="x-flex x-flex-1 x-flex-col x-items-center">
-        <NoHistoryIcon
-          class="x-flex-no-shrink"
-          :class="{ 'x-grayscale': !$x.isHistoryQueriesEnabled }"
-        />
-        <p class="x-title3 x-py-16 x-text-neutral-75">
-          {{ $t('myHistory.noHistory') }}
-        </p>
-      </div>
+      <div v-else />
     </BaseIdModalClose>
   </div>
 </template>
@@ -60,15 +52,13 @@
   } from '@empathyco/x-components';
   import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';
   import { defineComponent } from 'vue';
-  import NoHistoryIcon from './no-history-icon.vue';
 
   export default defineComponent({
     components: {
       BaseIdModalClose,
       CrossTinyIcon,
       HistoryIcon,
       MyHistory,
-      NoHistoryIcon,
       HistoryQuery
     },
     setup() {

src/components/my-history/my-history-aside.vue

@@ -3,25 +3,19 @@
     class="x-scroll x-flex x-min-h-0 x-flex-1 x-flex-col x-bg-neutral-0 desktop:x-overflow-hidden"
   >
     <div
-      class="x-sticky x-top-0 x-z-10 x-flex x-flex-row x-items-center x-gap-16 x-bg-neutral-90 x-p-16 desktop:x-p-32"
+      class="x-sticky x-top-0 x-z-10 x-flex x-flex-row x-items-center x-gap-16 x-bg-lead-75 x-p-16 desktop:x-p-32"
     >
       <BaseIdModalClose
         class="x-button-circle x-button-ghost hover:x-button-lead desktop:x-order-1 desktop:x-ml-auto"
         modalId="my-history-aside"
       >
-        <ArrowLeftIcon v-if="isTabletOrLess" class="x-icon-lg x-text-neutral-0" />
-        <CrossIcon v-else class="x-icon-lg x-text-neutral-0" />
+        <CrossIcon class="x-icon-lg x-text-neutral-0" />
       </BaseIdModalClose>
       <h1 class="desktop:x-title-md x-title2 x-title2-sm x-text-neutral-0">
         {{ $t('myHistory.title') }}
       </h1>
     </div>
 
-    <div class="x-flex x-justify-end x-bg-neutral-90 x-px-16 desktop:x-justify-center">
-      <MyHistoryIcon v-if="$x.isHistoryQueriesEnabled" class="x-w-256" />
-      <MyHistoryIconBw v-else class="x-w-256" />
-    </div>
-
     <div
       class="x-flex x-flex-col x-divide-y-1 x-divide-neutral-10 desktop:x-flex-1 desktop:x-overflow-auto desktop:x-scroll"
     >
@@ -54,23 +48,18 @@
 </template>
 
 <script lang="ts">
-  import { ArrowLeftIcon, BaseIdModalClose, CrossIcon } from '@empathyco/x-components';
+  import { BaseIdModalClose, CrossIcon } from '@empathyco/x-components';
   import { HistoryQueriesSwitch } from '@empathyco/x-components/history-queries';
   import { defineComponent, onMounted } from 'vue';
   import { useDevice } from '../../composables/use-device.composable';
   import CustomMyHistory from './custom-my-history.vue';
-  import MyHistoryIconBw from './my-history-icon-bw.vue';
-  import MyHistoryIcon from './my-history-icon.vue';
 
   export default defineComponent({
     components: {
-      ArrowLeftIcon,
       CrossIcon,
       BaseIdModalClose,
       CustomMyHistory,
-      HistoryQueriesSwitch,
-      MyHistoryIcon,
-      MyHistoryIconBw
+      HistoryQueriesSwitch
     },
     setup() {
       const { isTabletOrLess } = useDevice();

src/components/my-history/my-history-confirm-disable-modal.vue

@@ -6,18 +6,21 @@
     :eventsToCloseModal="eventsToCloseModal"
   >
     <div
-      class="x-my-history-confirm-disable-modal-content x-flex x-max-w-[322px] x-flex-col x-gap-16 x-bg-neutral-0"
+      class="x-my-history-confirm-disable-modal-content x-flex x-max-w-[322px] x-flex-col x-gap-16 x-bg-neutral-0 x-text-center"
       :class="isTabletOrLess ? 'x-rounded-lg x-p-24 x-pb-8' : 'x-p-56'"
     >
       <h1 class="x-title3">{{ $t('myHistory.confirmDisableModal.title') }}</h1>
-      <span class="x-text1 x-text1-lg x-text-neutral-75">
+      <span class="x-text1 x-text-neutral-75">
         {{ $t('myHistory.confirmDisableModal.message') }}
       </span>
-      <div class="x-flex x-justify-end desktop:x-justify-center">
-        <BaseEventButton class="x-button-ghost x-button" :events="dismissEvents">
+      <div class="x-flex x-justify-end x-gap-24 desktop:x-justify-center">
+        <BaseEventButton
+          class="x-button-lead x-button-outlined x-button x-rounded-full"
+          :events="dismissEvents"
+        >
           {{ $t('myHistory.confirmDisableModal.dismiss') }}
         </BaseEventButton>
-        <BaseEventButton class="x-button-lead x-button-ghost x-button" :events="confirmEvents">
+        <BaseEventButton class="x-button-lead x-button x-rounded-full" :events="confirmEvents">
           {{ $t('myHistory.confirmDisableModal.confirm') }}
         </BaseEventButton>
       </div>

src/components/pre-search/custom-query-preview.vue

@@ -13,7 +13,7 @@
         <template #header>
           <BaseEventButton
             :events="getEvent(query)"
-            class="x-button-neutral x-button-tight x-button max-desktop:x-px-16"
+            class="x-button-lead x-button-tight x-button max-desktop:x-px-16"
           >
             {{ query }}
             ({{ totalResults }})

src/components/results/custom-recommendations.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     v-if="$x.recommendations.length > 0"
-    class="x-flex x-flex-col x-items-start x-gap-24 x-pb-32 desktop:x-items-center"
+    class="x-flex x-flex-col x-items-start x-gap-16 x-pb-32 desktop:x-items-center desktop:x-gap-24"
   >
-    <h1 class="x-title1 x-title1-sm desktop:x-title1-md">
+    <h1 class="x-title1 x-title1-sm x-text-neutral-90 desktop:x-title1-md">
       {{ $t('recommendations.title') }}
     </h1>
     <Recommendations v-if="!$x.totalResults">

src/components/search-box.vue

@@ -18,7 +18,7 @@
       v-if="isDesktopOrGreater || !$x.query.searchBox"
       class="x-input-group-button-primary"
     >
-      <SearchIcon class="x-icon-lg" />
+      <SearchIcon class="x-icon-md" />
     </SearchButton>
 
     <ClearSearchInput v-else class="x-input-group-button-primary">

src/components/search/no-results-message.vue

@@ -1,22 +1,27 @@
 <template>
   <i18n
     v-if="$x.noResults"
-    class="x-no-results-message x-text1 x-flex x-flex-col x-items-center x-gap-8 x-break-words x-bg-neutral-10 x-p-24 x-text-center desktop:x-text1-lg"
+    class="x-no-results-message x-text1 x-mt-24 x-flex x-items-center x-break-words x-bg-neutral-10 x-py-8 x-text-center desktop:x-flex-wrap desktop:x-justify-center desktop:x-gap-8 desktop:x-text1-lg desktop:x-py-24"
     path="noResults.message"
+    :class="{ 'x-flex-col': isTabletOrLess }"
   >
     <template #query>
-      <span class="x-font-bold">
-        {{ $x.query.search }}
-      </span>
+      <span class="x-w-auto x-font-bold">"{{ $x.query.search }}"</span>
+      <div class="x-basis-full"></div>
     </template>
   </i18n>
 </template>
 
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
+  import { useDevice } from '../../composables/use-device.composable';
 
   @Component
-  export default class NoResultsMessage extends Vue {}
+  export default class NoResultsMessage extends Vue {
+    protected get isTabletOrLess(): boolean {
+      return useDevice().isTabletOrLess.value;
+    }
+  }
 </script>
 
 <style lang="scss">

src/components/search/results/custom-next-query-preview.vue

@@ -12,7 +12,10 @@
     </i18n>
     <CustomSlidingPanel>
       <template #header>
-        <NextQuery :suggestion="nextQuery" class="x-button-tight x-button max-desktop:x-px-16">
+        <NextQuery
+          :suggestion="nextQuery"
+          class="x-button-lead x-button-tight x-button max-desktop:x-px-16"
+        >
           {{ $t('nextQueryPreview.query', { query: suggestion.query }) }}
           {{ $t('nextQueryPreview.totalResults', { totalResults }) }}
           <ArrowRightIcon class="x-icon-lg" />

src/components/search/results/partial-results.vue

@@ -5,7 +5,7 @@
         <template #header>
           <PartialQueryButton
             :query="partialResult.query"
-            class="x-button-tight x-button max-desktop:x-px-16"
+            class="x-button-lead x-button-tight x-button max-desktop:x-px-16"
           >
             {{ $t('partialResults.query', { query: partialResult.query }) }}
             {{ $t('partialResults.totalResults', { totalResults: partialResult.totalResults }) }}

src/components/search/spellcheck-message.vue

@@ -2,30 +2,36 @@
   <Spellcheck
     v-if="$x.totalResults > 0"
     #default="{ query }"
-    class="x-flex x-flex-col x-items-center x-gap-8 x-bg-neutral-10 x-p-24 x-text-center"
+    class="x-flex x-flex-wrap x-items-center x-justify-center x-gap-8 x-bg-neutral-10 x-p-24 x-text-center desktop:x-flex-col"
   >
     <p>
       <i18n class="x-text1 x-break-words desktop:x-text1-lg" path="spellcheck.message" tag="span">
         <template #query>
-          <span class="x-font-bold x-text-auxiliary-50">
-            {{ query }}
-          </span>
+          <span class="x-w-auto x-font-bold">"{{ query }}".</span>
+          <div v-if="isTabletOrLess" class="x-basis-full"></div>
         </template>
       </i18n>
-      <SpellcheckButton class="x-button-lead x-button-link x-button x-pl-2" />
+      <SpellcheckButton
+        class="x-button-lead x-button-link x-button x-text1 x-pl-2 x-font-bold desktop:x-text1-lg"
+      />
     </p>
   </Spellcheck>
 </template>
 
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
   import { Spellcheck, SpellcheckButton } from '@empathyco/x-components/search';
+  import { useDevice } from '../../composables/use-device.composable';
 
   @Component({
     components: {
       Spellcheck,
       SpellcheckButton
     }
   })
-  export default class SpellcheckMessage extends Vue {}
+  export default class SpellcheckMessage extends Vue {
+    protected get isTabletOrLess(): boolean {
+      return useDevice().isTabletOrLess.value;
+    }
+  }
 </script>

src/i18n/messages/en.messages.json

@@ -103,7 +103,7 @@
       "addToCart": "ADD TO CART"
     },
     "spellcheck": {
-      "message": "No results found for '{query}'. We show you results for"
+      "message": "No results found for {query} We show you results for"
     },
     "noResults": {
       "message": "Sorry but there are no results for {query}You may be interested in these products"

src/i18n/messages/es.messages.json

@@ -103,7 +103,7 @@
       "addToCart": "AÑADIR AL CARRITO"
     },
     "spellcheck": {
-      "message": "No se han encontrado resultados para '{query}'. Aquí tienes resultados para"
+      "message": "No se han encontrado resultados para {query} Aquí tienes resultados para"
     },
     "noResults": {
       "message": "No se han encontrado resultados para {query}Quizás te interesen estos productos"

src/i18n/messages/fr.messages.json

@@ -103,7 +103,7 @@
       "addToCart": "AJOUTER AU PANIER"
     },
     "spellcheck": {
-      "message": "Aucun résultat trouvé pour '{query}'. Nous vous montrons les résultats pour"
+      "message": "Aucun résultat trouvé pour {query} Nous vous montrons les résultats pour"
     },
     "noResults": {
       "message": "Désolé mais il n'y a pas de résultats pour {query}Vous pourriez être intéressé par ces produits"

src/i18n/messages/it.messages.json

@@ -103,7 +103,7 @@
       "addToCart": "AGGIUNGI AL CARRELLO"
     },
     "spellcheck": {
-      "message": "Nessun risultato trovato per '{query}'. Ecco i risultati per"
+      "message": "Nessun risultato trovato per {query} Ecco i risultati per"
     },
     "noResults": {
       "message": "Ci dispiace ma non abbiamo trovato alcun risultato per {query}Potresti essere interessato in questi prodotti"

src/i18n/messages/pt.messages.json

@@ -103,7 +103,7 @@
       "addToCart": "ADICIONAR AO CARRINHO"
     },
     "spellcheck": {
-      "message": "Sem resultados encontrados para '{query}'. Aqui estão os resultados para"
+      "message": "Sem resultados encontrados para {query} Aqui estão os resultados para"
     },
     "noResults": {
       "message": "Não encontramos resultados para{query} Talvez você pode se interessar por esses produtos"