From 2d8e65c1602fb9f21838394dd43d8da9b06efbe2 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 6 Dec 2022 02:09:52 +0530
Subject: [PATCH] fix: ui of calendar item (#5879)

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

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 apps/web/pages/settings/my-account/calendars.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index e206e79fcb..4bd8d73ed3 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -110,7 +110,7 @@ const CalendarsView = () => {
                 {t("check_for_conflicts")}
               </h4>
               <p className="pb-2 text-sm leading-5 text-gray-600">{t("select_calendars")}</p>
-              <List>
+              <List className="flex flex-col gap-6" noBorderTreatment>
                 {data.connectedCalendars.map((item) => (
                   <Fragment key={item.credentialId}>
                     {item.error && item.error.message && (
@@ -137,7 +137,7 @@ const CalendarsView = () => {
                       />
                     )}
                     {item?.error === undefined && item.calendars && (
-                      <ListItem className="flex-col">
+                      <ListItem className="flex-col rounded-md">
                         <div className="flex w-full flex-1 items-center space-x-3 p-4 rtl:space-x-reverse">
                           {
                             // eslint-disable-next-line @next/next/no-img-element
@@ -164,7 +164,7 @@ const CalendarsView = () => {
                             <DisconnectIntegration
                               trashIcon
                               credentialId={item.credentialId}
-                              buttonProps={{ size: "icon", color: "secondary" }}
+                              buttonProps={{ className: "border border-gray-300" }}
                             />
                           </div>
                         </div>
@@ -172,7 +172,7 @@ const CalendarsView = () => {
                           <p className="px-2 pt-4 text-sm text-neutral-500">
                             {t("toggle_calendars_conflict")}
                           </p>
-                          <ul className="space-y-2 px-2 pt-4">
+                          <ul className="space-y-2 p-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
                                 key={cal.externalId}