From 6f1c1d9378536bd212032c84e0f35e074cca0941 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Tue, 16 Apr 2024 10:26:11 +0200
Subject: [PATCH] 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>
---
 .../ActivityLibrary/ActivityCard.tsx          |  2 +-
 .../ActivityLibrary/ActivityGrid.tsx          |  9 ++--
 .../ActivityLibrary/ActivityLibraryCard.tsx   | 14 ------
 .../ActivityLibrary/CreateActivityCard.tsx    | 11 +++--
 .../CreateNewActivity/CreateNewActivity.tsx   |  4 +-
 .../components/RetroDrawerTemplateCard.tsx    | 47 ++++++++++---------
 6 files changed, 38 insertions(+), 49 deletions(-)
 delete mode 100644 packages/client/components/ActivityLibrary/ActivityLibraryCard.tsx

diff --git a/packages/client/components/ActivityLibrary/ActivityCard.tsx b/packages/client/components/ActivityLibrary/ActivityCard.tsx
index e0ccdbdf51d..724e791960b 100644
--- 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
index f9db6c34480..5892e37aca8 100644
--- 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
deleted file mode 100644
index 55055d77d94..00000000000
--- a/packages/client/components/ActivityLibrary/ActivityLibraryCard.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import clsx from 'clsx'
-import React from 'react'
-import {ActivityCard, ActivityCardProps} from './ActivityCard'
-
-export const ActivityLibraryCard = (props: ActivityCardProps) => {
-  const {className, ...rest} = props
-
-  return (
-    <ActivityCard
-      className={clsx('focus-within:ring-2 focus-within:ring-primary hover:shadow-md', className)}
-      {...rest}
-    />
-  )
-}
diff --git a/packages/client/components/ActivityLibrary/CreateActivityCard.tsx b/packages/client/components/ActivityLibrary/CreateActivityCard.tsx
index 38a2b7b9744..fbe52650e94 100644
--- 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
index 2207adf83b2..8017e115b63 100644
--- 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
index c732b060bdf..4d668edeab1 100644
--- 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>
   )
 }