Update announcement notification style and hover behavior retry

packages/web/src/components/notification/Notification/AnnouncementNotification.module.css

@@ -6,9 +6,6 @@
 .readMore {
   all: unset;
   color: var(--secondary);
-  font-size: var(--font-m);
-  font-weight: var(--font-medium);
-  margin-left: var(--unit-1);
 }
 
 .readMore:hover {

packages/web/src/components/notification/Notification/AnnouncementNotification.tsx

@@ -5,13 +5,15 @@ import {
   AnnouncementNotification as AnnouncementNotificationType
 } from '@audius/common'
 import { MarkdownViewer } from '@audius/stems'
+import cn from 'classnames'
 import { useDispatch } from 'react-redux'
 
 import { make, useRecord } from 'common/store/analytics/actions'
 import { openNotificationModal } from 'store/application/ui/notifications/notificationsUISlice'
 
 import styles from './AnnouncementNotification.module.css'
 import { NotificationBody } from './components/NotificationBody'
+import notificationBodyStyles from './components/NotificationBody.module.css'
 import { NotificationFooter } from './components/NotificationFooter'
 import { NotificationHeader } from './components/NotificationHeader'
 import { NotificationTile } from './components/NotificationTile'
@@ -49,7 +51,8 @@ export const AnnouncementNotification = (
   return (
     <NotificationTile
       notification={notification}
-      onClick={handleClick}
+      onClick={longDescription ? handleClick : undefined}
+      disabled={!longDescription}
       disableClosePanel
     >
       <NotificationHeader icon={<IconAnnouncement />}>
@@ -58,10 +61,13 @@ export const AnnouncementNotification = (
         </NotificationTitle>
       </NotificationHeader>
       <NotificationBody className={styles.body}>
-        <MarkdownViewer markdown={shortDescription} />
+        <MarkdownViewer
+          markdown={shortDescription}
+          className={cn(styles.description, notificationBodyStyles.root)}
+        />
         {longDescription ? (
           <button
-            className={styles.readMore}
+            className={cn(notificationBodyStyles.root, styles.readMore)}
             onClick={handleOpenNotificationModal}
           >
             {messages.readMore}

packages/web/src/components/notification/Notification/components/NotificationTile.module.css

@@ -7,7 +7,7 @@
   transition: all 0.12s ease-in-out;
 }
 
-.root:hover {
+.active:hover {
   box-shadow: 0px 0px 1px -2px rgba(133, 129, 153, 0.1),
     0px 1px 0px -2px #e3e3e3, 1px 2px 5px rgba(133, 129, 153, 0.25);
   transform: scale3d(1.015, 1.015, 1.015);

packages/web/src/components/notification/Notification/components/NotificationTile.tsx

@@ -17,7 +17,7 @@ type NotificationTileProps = {
   notification: Notification
   children: ReactNode
   onClick?: ReactEventHandler
-  // When `true` disable :active transforms
+  // When `true` disable :active and :hover transforms
   disabled?: boolean
   // When `true` do not close notification panel onClick
   disableClosePanel?: boolean

packages/web/src/components/notification/NotificationPage.tsx

@@ -28,9 +28,7 @@ const {
 const messages = {
   documentTitle: 'Notifications',
   description: 'View your notifications on Audius',
-  title: 'NOTIFICATIONS',
-  empty: 'There’s Nothing Here Yet!',
-  readMore: 'Read More'
+  title: 'NOTIFICATIONS'
 }
 
 // The threshold of distance from the bottom of the scroll container in the

packages/web/src/components/notification/NotificationPanel.tsx

@@ -49,9 +49,7 @@ const getScrollParent = () => {
 }
 
 const messages = {
-  title: 'Notifications',
-  empty: 'There’s Nothing Here Yet!',
-  readMore: 'Read More'
+  title: 'Notifications'
 }
 
 type NotificationPanelProps = {