Clean up create custom activity card

ParabolInc · Mar 7, 2024 · a7b318c · a7b318c
1 parent 867db39
commit a7b318c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/packages/client/components/ActivityLibrary/ActivityLibrary.tsx b/packages/client/components/ActivityLibrary/ActivityLibrary.tsx
@@ -255,7 +255,7 @@ export const ActivityLibrary = (props: Props) => {
     )
   }, [searchQuery, filteredTemplates, categoryId])
 
-  const sortedTemplates = useMemo(() => {
+  const sectionedTemplates = useMemo(() => {
     // Show the teams on search as well, because you can search by team name
     if (categoryId === CUSTOM_CATEGORY_ID || searchQuery.length > 0) {
       return mapTeamCategories(templatesToRender)
@@ -282,8 +282,6 @@ export const ActivityLibrary = (props: Props) => {
     return <Redirect to={`/activity-library/category/${QUICK_START_CATEGORY_ID}`} />
   }
 
-  const selectedCategory = categoryId as CategoryID | typeof QUICK_START_CATEGORY_ID
-
   return (
     <div className='flex h-full w-full flex-col bg-white'>
       <div className='mx-2 flex'>
@@ -317,7 +315,7 @@ export const ActivityLibrary = (props: Props) => {
             )}
             <Link
               className='rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white hover:bg-sky-600'
-              to={`/activity-library/new-activity/${selectedCategory}`}
+              to={`/activity-library/new-activity/${categoryId}`}
             >
               Create custom activity
             </Link>
@@ -342,7 +340,7 @@ export const ActivityLibrary = (props: Props) => {
                 <Link
                   className={clsx(
                     'flex-shrink-0 cursor-pointer rounded-full py-2 px-4 text-sm text-slate-800',
-                    category === selectedCategory && searchQuery.length === 0
+                    category === categoryId && searchQuery.length === 0
                       ? [
                           `${CategoryIDToColorClass[category]}`,
                           'font-semibold text-white focus:text-white'
@@ -385,9 +383,9 @@ export const ActivityLibrary = (props: Props) => {
             </div>
           ) : (
             <>
-              {sortedTemplates ? (
+              {sectionedTemplates ? (
                 <>
-                  {Object.entries(sortedTemplates).map(
+                  {Object.entries(sectionedTemplates).map(
                     ([subCategory, subCategoryTemplates]) =>
                       subCategoryTemplates.length > 0 && (
                         <Fragment key={subCategory}>
@@ -399,7 +397,7 @@ export const ActivityLibrary = (props: Props) => {
                           <div className='mt-1 grid auto-rows-fr grid-cols-[repeat(auto-fill,minmax(min(40%,256px),1fr))] gap-4 px-4 md:mt-4'>
                             <ActivityGrid
                               templates={subCategoryTemplates}
-                              selectedCategory={selectedCategory}
+                              selectedCategory={categoryId}
                             />
                           </div>
                         </Fragment>
@@ -411,7 +409,7 @@ export const ActivityLibrary = (props: Props) => {
                   <div className='grid auto-rows-fr grid-cols-[repeat(auto-fill,minmax(min(40%,256px),1fr))] gap-4 p-4'>
                     <ActivityGrid
                       templates={templatesToRender as Template[]}
-                      selectedCategory={selectedCategory}
+                      selectedCategory={categoryId}
                     />
                   </div>
                 </>

diff --git a/packages/client/components/ActivityLibrary/Categories.ts b/packages/client/components/ActivityLibrary/Categories.ts
@@ -51,14 +51,14 @@ export const CATEGORY_THEMES: Record<AllCategoryID, CardTheme> = {
 
 export const CATEGORY_ID_TO_NAME: Record<AllCategoryID, string> = {
   [QUICK_START_CATEGORY_ID]: 'Quick Start',
+  [CUSTOM_CATEGORY_ID]: 'Custom',
   retrospective: 'Retrospective',
   estimation: 'Estimation',
   standup: 'Standup',
   feedback: 'Feedback',
   strategy: 'Strategy',
   premortem: 'Pre-Mortem',
-  postmortem: 'Post-Mortem',
-  [CUSTOM_CATEGORY_ID]: 'Custom'
+  postmortem: 'Post-Mortem'
 }
 
 export const MEETING_TYPE_TO_CATEGORY: Record<MeetingTypeEnum, CategoryID> = {

diff --git a/packages/client/components/ActivityLibrary/CreateActivityCard.tsx b/packages/client/components/ActivityLibrary/CreateActivityCard.tsx
@@ -19,9 +19,9 @@ const CreateActivityCard = (props: Props) => {
       <ActivityLibraryCard
         className={'flex-1 cursor-pointer'}
         theme={CATEGORY_THEMES[category]}
-        badge={<ActivityBadge className='mx-2 bg-gold-300 text-grape-700'>Premium</ActivityBadge>}
+        badge={<ActivityBadge className='m-2 bg-gold-300 text-grape-700'>Premium</ActivityBadge>}
       >
-        <div className='flex flex-1 flex-col items-center justify-center text-center font-semibold md:mx-10'>
+        <div className='flex h-full w-full flex-col items-center justify-center pb-2 font-semibold'>
           <div className='h-12 w-12'>
             <AddIcon className='h-full w-full text-slate-700' />
           </div>