fix: Sidebar in start custom activity (#9647)

ParabolInc · Apr 29, 2024 · a1658d8 · a1658d8
1 parent 052a729
commit a1658d8
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 55 deletions.
diff --git a/packages/client/components/ActivityLibrary/ActivityCard.tsx b/packages/client/components/ActivityLibrary/ActivityCard.tsx
@@ -38,7 +38,7 @@ export const ActivityCardImage = (props: PropsWithChildren<ActivityCardImageProp
     >
       <img className='object-contain' src={backgroundSrc} alt='' />
       <img
-        className='absolute top-0 left-0 z-10 h-full w-full object-contain p-10'
+        className='absolute top-0 left-0 h-full w-full object-contain p-10'
         src={src}
         alt='Card Illustration'
       />

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -88,72 +88,64 @@ const ActivityDetails = (props: Props) => {
   }`
 
   const isOwner = viewerLowestScope === 'TEAM'
-  const MOBILE_SETTINGS_HEIGHT = 208
 
   return (
-    <div className='flex h-full flex-col bg-white'>
-      <div className={clsx(`flex grow pb-[${MOBILE_SETTINGS_HEIGHT}px]`)}>
-        <div className='mt-4 grow'>
-          <div className='mb-14 ml-4 flex h-min w-max items-center'>
+    <div className='flex h-full w-full flex-col bg-white'>
+      <div className='flex grow'>
+        <div className='mt-4 w-full grow'>
+          <div className='mb-14 ml-4 flex h-min w-max items-center max-md:mb-6'>
             <div className='mr-4'>
               <Link to={categoryLink}>
                 <IconLabel icon={'arrow_back'} iconLarge />
               </Link>
             </div>
             <div className='w-max text-xl font-semibold'>Start Activity</div>
           </div>
-          <div className='mx-auto w-min'>
-            <div
-              className={clsx(
-                'flex w-full flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14',
-                isEditing && 'lg:flex-row lg:justify-center lg:pl-14'
-              )}
-            >
-              <ActivityCard
-                className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
-                theme={CATEGORY_THEMES[category as CategoryID]}
-                badge={null}
-                type={type}
-              >
-                <ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
-              </ActivityCard>
-              <div className='pb-20'>
-                <div className='mb-10 space-y-2 pl-14'>
-                  <div className='flex min-h-[40px] items-center'>
-                    <EditableTemplateName
-                      className='text-[32px] leading-9'
-                      name={activity.name}
-                      templateId={activity.id}
-                      isOwner={isOwner && isEditing}
-                    />
-                  </div>
-                  <TemplateDetails
-                    activityRef={activity}
-                    viewerRef={viewer}
-                    isEditing={isEditing}
-                    setIsEditing={setIsEditing}
+          <div className='mx-auto'>
+            <div className='flex flex-col justify-start pl-4 pr-4 md:pr-14 xl:flex-row xl:justify-center xl:pl-14'>
+              <div>
+                <ActivityCard
+                  className='mb-8 w-80 max-md:hidden sm:ml-14 xl:ml-0 xl:mb-0'
+                  theme={CATEGORY_THEMES[category as CategoryID]}
+                  badge={null}
+                  type={type}
+                >
+                  <ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
+                </ActivityCard>
+              </div>
+              <div className='mb-10 space-y-2 sm:pl-14'>
+                <div className='flex min-h-[40px] items-center'>
+                  <EditableTemplateName
+                    className='text-[32px] leading-9'
+                    name={activity.name}
+                    templateId={activity.id}
+                    isOwner={isOwner && isEditing}
                   />
                 </div>
+                <TemplateDetails
+                  activityRef={activity}
+                  viewerRef={viewer}
+                  isEditing={isEditing}
+                  setIsEditing={setIsEditing}
+                />
               </div>
             </div>
           </div>
         </div>
-        <div className='hidden lg:block'>
+        <div className='hidden w-[385px] shrink-0 lg:block'>
           <ActivityDetailsSidebar
             selectedTemplateRef={activity}
             teamsRef={teams}
-            isOpen={!isEditing}
             type={activity.type}
             preferredTeamId={preferredTeamId}
             viewerRef={viewer}
           />
         </div>
       </div>
-      <div className={`fixed min-h-[${MOBILE_SETTINGS_HEIGHT}px] bottom-0 w-full lg:hidden`}>
+      <div className={clsx('lg:hidden', isEditing && 'hidden')}>
         <ActivityDetailsSidebar
           selectedTemplateRef={activity}
           teamsRef={teams}
-          isOpen={!isEditing}
           type={activity.type}
           preferredTeamId={preferredTeamId}
           viewerRef={viewer}

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
@@ -210,7 +210,7 @@ export const TemplateDetails = (props: Props) => {
   return (
     <div className='space-y-6'>
       <ActivityDetailsBadges isEditing={isEditing} templateRef={activity} />
-      <div className='w-[480px]'>
+      <div className='max-w-[480px]'>
         <div className='mb-6'>
           {__typename === 'FixedActivity' && (
             <div className='text-base font-semibold text-slate-600'>Created by Parabol</div>
@@ -273,9 +273,9 @@ export const TemplateDetails = (props: Props) => {
         </div>
         {activityDescription}
       </div>
-      <IntegrationsTip>{integrationsTip}</IntegrationsTip>
+      <IntegrationsTip className='flex-wrap'>{integrationsTip}</IntegrationsTip>
 
-      <div className='-ml-14 pt-4'>
+      <div className='pt-4 sm:-ml-14'>
         {prompts && (
           <>
             <TemplatePromptList

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx
@@ -15,7 +15,7 @@ export const IntegrationsTip = (props: Props) => {
   const {className, children} = props
 
   return (
-    <div className={clsx('flex min-w-max items-center', className)}>
+    <div className={clsx('flex items-center', className)}>
       <div className='flex items-center gap-3'>
         <JiraSVG />
         <GitHubSVG />

diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
@@ -40,13 +40,12 @@ interface Props {
   selectedTemplateRef: ActivityDetailsSidebar_template$key
   teamsRef: ActivityDetailsSidebar_teams$key
   type: MeetingTypeEnum
-  isOpen: boolean
   preferredTeamId: string | null
   viewerRef: ActivityDetailsSidebar_viewer$key
 }
 
 const ActivityDetailsSidebar = (props: Props) => {
-  const {selectedTemplateRef, teamsRef, type, isOpen, preferredTeamId, viewerRef} = props
+  const {selectedTemplateRef, teamsRef, type, preferredTeamId, viewerRef} = props
   const [isMinimized, setIsMinimized] = useState(false)
   const isMobile = !useBreakpoint(Breakpoint.INVOICE)
   const selectedTemplate = useFragment(
@@ -252,14 +251,7 @@ const ActivityDetailsSidebar = (props: Props) => {
 
   return (
     <>
-      {isOpen && <div className='w-96' />}
-      <div
-        className={clsx(
-          'fixed bottom-0 flex  w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
-          isOpen ? 'translate-y-0' : 'translate-y-full lg:translate-x-0 lg:translate-y-0',
-          isOpen ? 'opacity-100' : 'opacity-0 lg:opacity-100'
-        )}
-      >
+      <div className='sticky bottom-0 flex w-full flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:min-h-screen lg:w-full lg:w-96 lg:border-l lg:pt-14'>
         <div className='flex-grow'>
           <div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
             Settings
@@ -311,7 +303,6 @@ const ActivityDetailsSidebar = (props: Props) => {
         <div className='z-10 flex h-fit w-full flex-col gap-2 pb-4'>
           {error && <StyledError>{error.message}</StyledError>}
           <NewMeetingActionsCurrentMeetings team={selectedTeam} />
-          {/* TODO: scheduling meeting does not work with one-on-one https://github.com/ParabolInc/parabol/issues/8820  */}
           <ScheduleMeetingButton
             handleStartActivity={handleStartActivity}
             mutationProps={mutationProps}