feat: improve cards styles (#1565)

* improve cards styles

* fix conversation header image

Author: annarhughes

components/resources/ResourceConversationHeader.tsx

@@ -58,7 +58,7 @@ export const ResourceConversationHeader = (props: ResourceConversationHeaderProp
           </Box>
         </Box>
       }
-      imageSrc={header_image ? header_image.filename : illustrationCourses}
+      imageSrc={header_image?.filename || illustrationCourses}
       progressStatus={resourceProgress}
     >
       <Button

components/storyblok/StoryblokResourceConversationPage.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { SignUpBanner } from '@/components/banner/SignUpBanner';
 import ResourceFeedbackForm from '@/components/forms/ResourceFeedbackForm';
 import { LANGUAGES, PROGRESS_STATUS, RESOURCE_CATEGORIES } from '@/lib/constants/enums';
 import { RESOURCE_CONVERSATION_VIEWED } from '@/lib/constants/events';
@@ -161,7 +160,6 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
           userId,
         )}
       />
-      {!isLoggedIn && <SignUpBanner />}
     </Box>
   );
 };

components/storyblok/StoryblokResourceSingleVideoPage.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { SignUpBanner } from '@/components/banner/SignUpBanner';
 import ResourceFeedbackForm from '@/components/forms/ResourceFeedbackForm';
 import {
   LANGUAGES,
@@ -197,8 +196,6 @@ const StoryblokResourceSingleVideoPage = (props: StoryblokResourceSingleVideoPag
         relatedExercises={related_exercises}
         userContentPartners={getContentPartners}
       />
-
-      {!isLoggedIn && <SignUpBanner />}
     </Box>
   );
 };

components/storyblok/StoryblokTeamMemberCard.tsx

@@ -20,7 +20,6 @@ const cardStyle = {
   alignSelf: 'flex-start',
   width: '100%',
   maxWidth: 550,
-  backgroundColor: 'background.default',
 } as const;
 
 const cardContentStyle = {
@@ -40,6 +39,13 @@ const cardHeaderStyle = {
   ' p': {
     mx: '0 !important',
   },
+  ':hover': {
+    a: {
+      ':after': {
+        background: 'linear-gradient(90deg,rgba(254, 246, 242, 0) 0%, rgba(249, 237, 237, 1) 100%)',
+      },
+    },
+  },
 } as const;
 
 const imageContainerStyle = {
@@ -89,7 +95,14 @@ const iconStyles = {
 const expandButtonContainerStyles = {
   textAlign: 'right',
   mt: 'auto',
-};
+} as const;
+
+const websiteHeaderLinkStyle = {
+  textDecoration: 'none',
+  ':hover': {
+    textDecoration: 'underline',
+  },
+} as const;
 
 export interface StoryblokTeamMemberCardProps {
   _uid: string;
@@ -191,9 +204,14 @@ const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
               </Box>
             )}
             {show_short_bio && website?.url && (
-              <Box sx={{ ...iconRowStyles, ...fadeOut }}>
+              <Box sx={{ ...iconRowStyles }}>
                 <LinkIcon color="error" sx={iconStyles} />
-                <Link variant="body2" href={website.url} sx={{ textDecoration: 'none' }}>
+                <Link
+                  id="website-link"
+                  variant="body2"
+                  href={website.url}
+                  sx={{ ...websiteHeaderLinkStyle, ...fadeOut }}
+                >
                   {websiteTitle}
                 </Link>
               </Box>

styles/theme.ts

@@ -327,25 +327,22 @@ theme = createTheme(theme, {
     MuiCard: {
       styleOverrides: {
         root: {
-          backgroundColor: theme.palette.common.white,
+          backgroundColor: theme.palette.background.default,
           boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.12);',
           marginTop: 20,
 
-          '&:hover': { backgroundColor: theme.palette.common.white },
-
           [theme.breakpoints.up('md')]: {
             marginTop: 0,
           },
         },
       },
     },
+
     MuiCardContent: {
       styleOverrides: {
         root: {
-          backgroundColor: theme.palette.background.default,
           padding: 24,
           paddingTop: 30,
-          '&:hover': { backgroundColor: theme.palette.common.white },
 
           [theme.breakpoints.up('md')]: {
             padding: 40,
@@ -360,9 +357,11 @@ theme = createTheme(theme, {
     MuiCardActionArea: {
       styleOverrides: {
         root: {
+          backgroundColor: theme.palette.background.default,
+          '&:hover': { backgroundColor: theme.palette.common.white },
+          '.Mui-disabled &:hover': { backgroundColor: theme.palette.common.white },
           '& .MuiTouchRipple-root span': {
-            backgroundColor: theme.palette.primary.main,
-            opacity: 0.4,
+            display: 'none',
           },
         },
         focusHighlight: {