chore: Improve Activity Library focus and hover states (#9626)

Signed-off-by: Matt Krick <matt.krick@gmail.com> Co-authored-by: Matt Krick <matt.krick@gmail.com> Co-authored-by: Dale Bumblis <135627447+dbumblis-parabol@users.noreply.github.com>
ParabolInc · Apr 16, 2024 · 6f1c1d9 · 6f1c1d9
1 parent 8552d43
commit 6f1c1d9
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 49 deletions.
diff --git a/packages/client/components/ActivityLibrary/ActivityCard.tsx b/packages/client/components/ActivityLibrary/ActivityCard.tsx
@@ -94,7 +94,7 @@ export const ActivityCard = (props: ActivityCardProps) => {
 
   return (
     <div
-      className='flex w-full flex-col'
+      className='flex w-full flex-col rounded-xl p-2'
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >

diff --git a/packages/client/components/ActivityLibrary/ActivityGrid.tsx b/packages/client/components/ActivityLibrary/ActivityGrid.tsx
@@ -1,9 +1,8 @@
 import React from 'react'
 import {Link} from 'react-router-dom'
 import {ActivityBadge} from './ActivityBadge'
-import {ActivityCardImage} from './ActivityCard'
+import {ActivityCard, ActivityCardImage} from './ActivityCard'
 import {Template} from './ActivityLibrary'
-import {ActivityLibraryCard} from './ActivityLibraryCard'
 import {ActivityLibraryCardDescription} from './ActivityLibraryCardDescription'
 import {CATEGORY_THEMES, CategoryID} from './Categories'
 
@@ -23,9 +22,9 @@ const ActivityGrid = ({templates, selectedCategory}: ActivityGridProps) => {
               pathname: `/activity-library/details/${template.id}`,
               state: {prevCategory: selectedCategory}
             }}
-            className='flex focus:rounded-md focus:outline-primary'
+            className='flex rounded-2xl hover:bg-slate-100 focus:outline-sky-500'
           >
-            <ActivityLibraryCard
+            <ActivityCard
               className='group aspect-[256/160] flex-1'
               key={template.id}
               theme={CATEGORY_THEMES[template.category as CategoryID]}
@@ -47,7 +46,7 @@ const ActivityGrid = ({templates, selectedCategory}: ActivityGridProps) => {
                 className='hidden group-hover/card:flex'
                 templateRef={template}
               />
-            </ActivityLibraryCard>
+            </ActivityCard>
           </Link>
         )
       })}

diff --git a/packages/client/components/ActivityLibrary/ActivityLibraryCard.tsx b/packages/client/components/ActivityLibrary/ActivityLibraryCard.tsx
diff --git a/packages/client/components/ActivityLibrary/CreateActivityCard.tsx b/packages/client/components/ActivityLibrary/CreateActivityCard.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import React from 'react'
 import {Link} from 'react-router-dom'
 import {ActivityBadge} from './ActivityBadge'
-import {ActivityLibraryCard} from './ActivityLibraryCard'
+import {ActivityCard} from './ActivityCard'
 import {AllCategoryID, CATEGORY_ID_TO_NAME, CATEGORY_THEMES} from './Categories'
 
 interface Props {
@@ -15,8 +15,11 @@ const CreateActivityCard = (props: Props) => {
   const {category, className} = props
 
   return (
-    <Link className={clsx('flex', className)} to={`/activity-library/new-activity/${category}`}>
-      <ActivityLibraryCard
+    <Link
+      className={clsx('flex rounded-2xl hover:bg-slate-100 focus:outline-sky-500', className)}
+      to={`/activity-library/new-activity/${category}`}
+    >
+      <ActivityCard
         className={'flex-1 cursor-pointer'}
         theme={CATEGORY_THEMES[category]}
         badge={<ActivityBadge className='m-2 bg-gold-300 text-grape-700'>Premium</ActivityBadge>}
@@ -27,7 +30,7 @@ const CreateActivityCard = (props: Props) => {
           </div>
           Create Custom {category !== 'recommended' ? CATEGORY_ID_TO_NAME[category] : ''} Activity
         </div>
-      </ActivityLibraryCard>
+      </ActivityCard>
     </Link>
   )
 }

diff --git a/packages/client/components/ActivityLibrary/CreateNewActivity/CreateNewActivity.tsx b/packages/client/components/ActivityLibrary/CreateNewActivity/CreateNewActivity.tsx
@@ -245,11 +245,11 @@ export const CreateNewActivity = (props: Props) => {
             return (
               <RadioGroup.Item
                 key={activity.title}
-                className='group flex cursor-pointer flex-col items-start space-y-3 rounded-lg bg-transparent p-1 focus:outline-none'
+                className='group flex cursor-pointer flex-col items-start space-y-3 rounded-2xl bg-transparent p-1 pb-4 hover:bg-slate-100 focus:outline-sky-500 data-[state=checked]:ring-4 data-[state=checked]:ring-sky-500'
                 value={activity.type}
               >
                 <ActivityCard
-                  className='aspect-[320/190] w-80 group-data-[state=checked]:ring-4 group-data-[state=checked]:ring-sky-500 group-data-[state=checked]:ring-offset-4'
+                  className='aspect-[320/190] w-80'
                   theme={DEFAULT_CARD_THEME}
                   title={activity.title}
                   type={activity.type}

diff --git a/packages/client/components/RetroDrawerTemplateCard.tsx b/packages/client/components/RetroDrawerTemplateCard.tsx
@@ -7,8 +7,7 @@ import useMutationProps from '../hooks/useMutationProps'
 import UpdateMeetingTemplateMutation from '../mutations/UpdateMeetingTemplateMutation'
 import {CATEGORY_THEMES, CategoryID} from '././ActivityLibrary/Categories'
 import {ActivityBadge} from './ActivityLibrary/ActivityBadge'
-import {ActivityCardImage} from './ActivityLibrary/ActivityCard'
-import {ActivityLibraryCard} from './ActivityLibrary/ActivityLibraryCard'
+import {ActivityCard, ActivityCardImage} from './ActivityLibrary/ActivityCard'
 import {ActivityLibraryCardDescription} from './ActivityLibrary/ActivityLibraryCardDescription'
 
 interface Props {
@@ -49,27 +48,29 @@ const RetroDrawerTemplateCard = (props: Props) => {
 
   return (
     <form className='px-4 py-2' onClick={handleClick}>
-      <ActivityLibraryCard
-        className='group aspect-[256/160] flex-1 hover:cursor-pointer'
-        theme={CATEGORY_THEMES[template.category as CategoryID]}
-        title={template.name}
-        type='retrospective'
-        badge={
-          !template.isFree ? (
-            <ActivityBadge className='m-2 bg-gold-300 text-grape-700'>Premium</ActivityBadge>
-          ) : null
-        }
-      >
-        <ActivityCardImage
-          className='group-hover/card:hidden'
-          src={template.illustrationUrl}
-          category='retrospective'
-        />
-        <ActivityLibraryCardDescription
-          className='hidden group-hover/card:flex'
-          templateRef={template}
-        />
-      </ActivityLibraryCard>
+      <div className='flex hover:rounded-2xl hover:bg-slate-100 focus:rounded-2xl focus:outline-sky-500'>
+        <ActivityCard
+          className='group aspect-[256/160] flex-1 hover:cursor-pointer'
+          theme={CATEGORY_THEMES[template.category as CategoryID]}
+          title={template.name}
+          type='retrospective'
+          badge={
+            !template.isFree ? (
+              <ActivityBadge className='m-2 bg-gold-300 text-grape-700'>Premium</ActivityBadge>
+            ) : null
+          }
+        >
+          <ActivityCardImage
+            className='group-hover/card:hidden'
+            src={template.illustrationUrl}
+            category='retrospective'
+          />
+          <ActivityLibraryCardDescription
+            className='hidden group-hover/card:flex'
+            templateRef={template}
+          />
+        </ActivityCard>
+      </div>
     </form>
   )
 }