Meenu/helpcenter page whatsapp button alignment issue (#6338)

* auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * fix: hotfix button alignment * empty: 🚀 to redeploy and trigger build * fix: removed border for button --------- Co-authored-by: meenu-deriv <[email protected]>
binary-com · Dec 26, 2023 · ebed4af · ebed4af · vercel · Dec 26, 2023
1 parent a2cbfed
commit ebed4af
Showing 1 changed file with 12 additions and 15 deletions.
diff --git a/src/pages/help-centre/components/_didnt-find-answer.tsx b/src/pages/help-centre/components/_didnt-find-answer.tsx
@@ -38,40 +38,42 @@ const Text = styled(Header)`
     }
 `
 const WhatsAppButton = styled.button`
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
     background-color: var(--color-green-3);
-    border: 2px solid var(--color-green-3);
     color: var(--color-white);
     font-size: 14px;
     border-radius: 4px;
-    height: fit-content;
+    height: 44px;
     padding: 10px 16px;
     font-weight: bold;
-    margin-left: 16px;
-    width: inherit;
 
     &:hover {
         background-color: var(--color-red);
-        border: 2px solid var(--color-red);
         color: var(--color-white);
     }
 `
 const ChatButton = styled(Button)`
+    block-size: 44px;
     @media ${device.tabletL} {
         width: 100%;
     }
 `
 const ButtonWrapper = styled.div`
+    display: flex;
+    gap: 16px;
+    align-items: start;
     @media ${device.tablet} {
+        align-items: center;
         display: flex;
         width: 100%;
         padding: 16px;
     }
 `
 
-const WhatsAppIcon = styled.img`
-    margin: -3px 8px -3px 0;
-`
-
 const DidntFindYourAnswerBanner = () => {
     const [is_livechat_interactive, LC_API] = useLivechat()
 
@@ -92,12 +94,7 @@ const DidntFindYourAnswerBanner = () => {
                     </ChatButton>
 
                     <WhatsAppButton onClick={openWhatsappUrl}>
-                        <WhatsAppIcon
-                            src={WhatsAppSVG}
-                            alt="whatsapp-icon"
-                            height="16"
-                            width="16"
-                        />
+                        <img src={WhatsAppSVG} alt="whatsapp-icon" height="16" width="16" />
                         <Localize translate_text="_t_WhatsApp_t_" />
                     </WhatsAppButton>
                 </ButtonWrapper>