public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: ui inconsistency in calendar app (#7209) 

* fix: ui inconsistency in calendar app

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

* fix: remove border

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

* fix: ui bug

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

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
pull/7611/head
Udit Takkar 2023-03-09 04:46:26 +05:30 committed by GitHub
parent 736c30f134
commit c32aadf297
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/components/AppListCard.tsx
View File

@ -64,7 +64,7 @@ export default function AppListCard(props: AppListCardProps) {
return (
<div className={`${highlight ? "bg-yellow-100" : ""}`}>
<div className="flex gap-x-3 p-4">
<div className="flex gap-x-3 px-5 py-4">
{logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
<div className="flex grow flex-col gap-y-1 truncate">
<div className="flex items-center gap-x-2">

10
apps/web/components/apps/CalendarListContainer.tsx
View File

@ -88,7 +88,7 @@ function CalendarSwitch(props: {
}
);
return (
<div className="flex py-1">
<div className="flex flex-col py-1 sm:flex-row">
<Switch
key={props.externalId}
name="enabled"
@ -99,7 +99,7 @@ function CalendarSwitch(props: {
}}
/>
{!!props.destination && (
<span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
<span className="ml-8 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
<FiArrowLeft className="h-4 w-4" />
{t("adding_events_to")}
</span>
@ -184,8 +184,8 @@ function ConnectedCalendarsList(props: Props) {
<div className="border-t border-gray-200">
{!fromOnboarding && (
<>
<p className="px-4 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
<ul className="space-y-2 p-4">
<p className="px-5 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
<ul className="space-y-2 px-5 py-4">
{item.calendars.map((cal) => (
<CalendarSwitch
key={cal.externalId}
@ -264,7 +264,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
{!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
<>
{heading && (
<div className="flex flex-col gap-6 rounded-md border border-gray-200 p-7">
<div className="flex flex-col gap-6 rounded-md border p-7">
<ShellSubHeading
title={t("calendar")}
subtitle={t("installed_app_calendar_description")}

2
packages/ui/components/form/switch/Switch.tsx
View File

@ -52,7 +52,7 @@ const Switch = (
<Label.Root
htmlFor={id}
className={classNames(
"align-text-top text-sm font-medium text-gray-900 ltr:ml-3 rtl:mr-3 dark:text-white",
"align-text-top text-sm font-medium text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-white",
primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer "
)}>
{label}

4
packages/ui/components/navigation/tabs/VerticalTabItem.tsx
View File

@ -51,7 +51,7 @@ const VerticalTabItem = function ({
target={props.isExternalLink ? "_blank" : "_self"}
className={classNames(
props.textClassNames || "text-sm font-medium leading-none text-gray-600",
"min-h-8 group flex w-64 flex-row items-center rounded-md px-2 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
"min-h-8 group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
props.disabled && "pointer-events-none !opacity-30",
(isChild || !props.icon) && "ml-7 w-auto ltr:mr-5 rtl:ml-5",
!info ? "h-6" : "h-14",
@ -60,7 +60,7 @@ const VerticalTabItem = function ({
data-testid={`vertical-tab-${name}`}
aria-current={isCurrent ? "page" : undefined}>
{props.icon && (
<props.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] md:mt-0" />
<props.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-2 rtl:ml-2 md:mt-0" />
)}
<div className="h-fit">
<span className="flex items-center space-x-2 rtl:space-x-reverse">

2
packages/ui/components/navigation/tabs/VerticalTabs.tsx
View File

@ -18,7 +18,7 @@ const NavTabs = function ({ tabs, className = "", sticky, linkProps, itemClassna
return (
<nav
className={classNames(
`no-scrollbar flex flex-col space-y-1 overflow-scroll ${className}`,
`no-scrollbar flex flex-col space-y-0.5 overflow-scroll ${className}`,
sticky && "sticky top-0 -mt-7"
)}
aria-label="Tabs"