From bef6d18fdf395ebceb3bdc931e82af17cdff78ac Mon Sep 17 00:00:00 2001
From: Amir Fakhrullah <amirfakhrullah96@gmail.com>
Date: Tue, 14 Feb 2023 04:57:33 +0800
Subject: [PATCH] [CAL-1030] fix flickering border issue in menu layout for
 mobile (#7036)

* fix flickering border issue in menu layout for mobile

* transfer styles changes to the DropdownMenuItem

* remove button border for Remove button

* fix: use dropdownItem

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 apps/web/pages/event-types/index.tsx | 66 ++++++++++++----------------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index de9cc5b01a..f005d34f5b 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -455,37 +455,30 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     <DropdownMenuPortal>
                       <DropdownMenuContent>
                         <DropdownMenuItem className="outline-none">
-                          <Link href={calLink} target="_blank">
-                            <Button
-                              color="minimal"
-                              StartIcon={FiExternalLink}
-                              className="w-full rounded-none">
-                              {t("preview")}
-                            </Button>
-                          </Link>
+                          <DropdownItem
+                            href={calLink}
+                            target="_blank"
+                            StartIcon={FiExternalLink}
+                            className="w-full rounded-none">
+                            {t("preview")}
+                          </DropdownItem>
                         </DropdownMenuItem>
                         <DropdownMenuItem className="outline-none">
-                          <Button
-                            type="button"
-                            color="minimal"
-                            className="w-full rounded-none text-left"
+                          <DropdownItem
                             data-testid={"event-type-duplicate-" + type.id}
-                            StartIcon={FiClipboard}
                             onClick={() => {
                               navigator.clipboard.writeText(calLink);
                               showToast(t("link_copied"), "success");
-                            }}>
+                            }}
+                            StartIcon={FiClipboard}
+                            className="w-full rounded-none text-left">
                             {t("copy_link")}
-                          </Button>
+                          </DropdownItem>
                         </DropdownMenuItem>
                         {isNativeShare ? (
                           <DropdownMenuItem className="outline-none">
-                            <Button
-                              type="button"
-                              color="minimal"
-                              className="w-full rounded-none"
+                            <DropdownItem
                               data-testid={"event-type-duplicate-" + type.id}
-                              StartIcon={FiUpload}
                               onClick={() => {
                                 navigator
                                   .share({
@@ -495,44 +488,41 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                   })
                                   .then(() => showToast(t("link_shared"), "success"))
                                   .catch(() => showToast(t("failed"), "error"));
-                              }}>
+                              }}
+                              StartIcon={FiUpload}
+                              className="w-full rounded-none">
                               {t("share")}
-                            </Button>
+                            </DropdownItem>
                           </DropdownMenuItem>
                         ) : null}
                         <DropdownMenuItem className="outline-none">
-                          <Button
-                            type="button"
+                          <DropdownItem
                             onClick={() => router.push("/event-types/" + type.id)}
-                            color="minimal"
-                            className="w-full rounded-none"
-                            StartIcon={FiEdit}>
+                            StartIcon={FiEdit}
+                            className="w-full rounded-none">
                             {t("edit")}
-                          </Button>
+                          </DropdownItem>
                         </DropdownMenuItem>
                         <DropdownMenuItem className="outline-none">
-                          <Button
-                            type="button"
-                            color="minimal"
-                            className="w-full rounded-none"
-                            data-testid={"event-type-duplicate-" + type.id}
+                          <DropdownItem
+                            onClick={() => openDuplicateModal(type, group)}
                             StartIcon={FiCopy}
-                            onClick={() => openDuplicateModal(type, group)}>
+                            data-testid={"event-type-duplicate-" + type.id}>
                             {t("duplicate")}
-                          </Button>
+                          </DropdownItem>
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem className="outline-none">
-                          <Button
+                          <DropdownItem
+                            color="destructive"
                             onClick={() => {
                               setDeleteDialogOpen(true);
                               setDeleteDialogTypeId(type.id);
                             }}
-                            color="destructive"
                             StartIcon={FiTrash}
                             className="w-full rounded-none">
                             {t("delete")}
-                          </Button>
+                          </DropdownItem>
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenuPortal>