fix: button overlaps on mobile checkout (#826)

* fix: button overlaps on mobile checkout * fix: button overlaps on mobile checkout * fix: button overlaps on mobile checkout
plentymarkets · Nov 26, 2024 · 39f2d0e · 39f2d0e
1 parent 4f9e122
commit 39f2d0e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/apps/web/assets/icons/paths/pen.ts b/apps/web/assets/icons/paths/pen.ts
@@ -0,0 +1,2 @@
+export const penPath =
+  'M31.25 7.003c0-0 0-0.001 0-0.001 0-0.346-0.14-0.659-0.365-0.886l-5-5c-0.227-0.226-0.539-0.366-0.885-0.366s-0.658 0.14-0.885 0.366v0l-20.999 20.999c-0.146 0.146-0.256 0.329-0.316 0.532l-0.002 0.009-2 7c-0.030 0.102-0.048 0.22-0.048 0.342 0 0.691 0.559 1.251 1.25 1.252h0c0.126-0 0.248-0.019 0.363-0.053l-0.009 0.002 6.788-2c0.206-0.063 0.383-0.17 0.527-0.311l-0 0 21.211-21c0.229-0.226 0.37-0.539 0.371-0.886v-0zM8.133 26.891l-4.307 1.268 1.287-4.504 14.891-14.891 3.219 3.187zM25 10.191l-3.228-3.196 3.228-3.228 3.229 3.228z';
diff --git a/apps/web/components/ContactInformation/ContactInformation.vue b/apps/web/components/ContactInformation/ContactInformation.vue
@@ -1,12 +1,16 @@
 <template>
   <div data-testid="contact-information" class="md:px-4 py-6">
     <div class="flex justify-between items-center">
-      <h2 class="text-neutral-900 text-lg font-bold mb-4">{{ $t('contactInfo.heading') }}</h2>
-      <UiButton v-if="!disabled && cart.customerEmail && !isAuthorized" variant="secondary" @click="open">
-        {{ $t('contactInfo.edit') }}
+      <h2 class="text-neutral-900 text-lg font-bold">{{ $t('contactInfo.heading') }}</h2>
+      <UiButton v-if="!disabled && cart.customerEmail && !isAuthorized" @click="open" variant="secondary">
+        <SfIconBase v-if="isMobile" viewBox="0 0 34 40" class="w-6 h-6 pt-[3px]">
+          <path :d="penPath" />
+        </SfIconBase>
+        <template v-else>{{ $t('contactInfo.edit') }}</template>
       </UiButton>
     </div>
-    <p v-if="cart.customerEmail" class="mt-2 md:w-[520px]">{{ cart.customerEmail }}</p>
+
+    <p v-if="cart.customerEmail" class="mt-4 md:w-[520px]">{{ cart.customerEmail }}</p>
     <div v-else class="w-full md:max-w-[520px]">
       <p>{{ $t('contactInfo.description') }}</p>
       <UiButton v-if="!disabled" class="mt-4 w-full md:w-auto" variant="secondary" @click="open">
@@ -38,14 +42,18 @@
 </template>
 
 <script lang="ts" setup>
-import { SfIconClose, useDisclosure } from '@storefront-ui/vue';
+import { SfIconBase, SfIconClose, useDisclosure } from '@storefront-ui/vue';
 import { type ContactInformationProps } from './types';
 
 const { disabled = false } = defineProps<ContactInformationProps>();
 
+const viewport = useViewport();
 const { data: sessionData, loginAsGuest, getSession, isAuthorized } = useCustomer();
 const { isOpen, open, close } = useDisclosure();
+import { penPath } from '~/assets/icons/paths/pen';
 const cart = ref({ customerEmail: sessionData.value?.user?.email ?? sessionData.value?.user?.guestMail ?? '' });
+const isMobile = computed(() => viewport.isLessThan('md'));
+
 const saveContactInformation = async (email: string) => {
   cart.value.customerEmail = email;
   await loginAsGuest(email);

diff --git a/apps/web/components/ui/Review/Review.vue b/apps/web/components/ui/Review/Review.vue
@@ -21,9 +21,7 @@
           class="fill-primary-700 cursor-pointer"
           data-testid="edit-review-button"
         >
-          <path
-            d="M31.25 7.003c0-0 0-0.001 0-0.001 0-0.346-0.14-0.659-0.365-0.886l-5-5c-0.227-0.226-0.539-0.366-0.885-0.366s-0.658 0.14-0.885 0.366v0l-20.999 20.999c-0.146 0.146-0.256 0.329-0.316 0.532l-0.002 0.009-2 7c-0.030 0.102-0.048 0.22-0.048 0.342 0 0.691 0.559 1.251 1.25 1.252h0c0.126-0 0.248-0.019 0.363-0.053l-0.009 0.002 6.788-2c0.206-0.063 0.383-0.17 0.527-0.311l-0 0 21.211-21c0.229-0.226 0.37-0.539 0.371-0.886v-0zM8.133 26.891l-4.307 1.268 1.287-4.504 14.891-14.891 3.219 3.187zM25 10.191l-3.228-3.196 3.228-3.228 3.229 3.228z"
-          />
+          <path :d="penPath" />
         </SfIconBase>
         <SfIconDelete
           @click="openReviewModal(defaults.DEFAULT_REVIEW_MODAL_TYPES.deleteReview, reviewItem)"
@@ -83,9 +81,7 @@
                 class="fill-primary-700 cursor-pointer"
                 data-testid="edit-reply-button"
               >
-                <path
-                  d="M31.25 7.003c0-0 0-0.001 0-0.001 0-0.346-0.14-0.659-0.365-0.886l-5-5c-0.227-0.226-0.539-0.366-0.885-0.366s-0.658 0.14-0.885 0.366v0l-20.999 20.999c-0.146 0.146-0.256 0.329-0.316 0.532l-0.002 0.009-2 7c-0.030 0.102-0.048 0.22-0.048 0.342 0 0.691 0.559 1.251 1.25 1.252h0c0.126-0 0.248-0.019 0.363-0.053l-0.009 0.002 6.788-2c0.206-0.063 0.383-0.17 0.527-0.311l-0 0 21.211-21c0.229-0.226 0.37-0.539 0.371-0.886v-0zM8.133 26.891l-4.307 1.268 1.287-4.504 14.891-14.891 3.219 3.187zM25 10.191l-3.228-3.196 3.228-3.228 3.229 3.228z"
-                />
+                <path :d="penPath" />
               </SfIconBase>
               <SfIconDelete
                 @click="openReviewModal(defaults.DEFAULT_REVIEW_MODAL_TYPES.deleteReply, reply)"
@@ -129,6 +125,7 @@ import {
 import type { ReviewProps } from './types';
 import { type ReviewItem, reviewGetters, productGetters } from '@plentymarkets/shop-api';
 import { defaults } from '~/composables';
+import { penPath } from '~/assets/icons/paths/pen';
 
 const props = defineProps<ReviewProps>();
 const { t } = useI18n();

diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
@@ -34,6 +34,7 @@ Each client supports two PWA instances. With this change, you can designate the
 
 ### 🩹 Fixed
 
+- Resolved an issue where the checkout layout button was overlapping the adjacent text.
 - Added a missing href attribute to the Cookiebar anchor.
 - Cookiebar usability in landscape mode.
 - Order property tooltip was under input fields.