From 54aea97fabf03f4185515aae5f8e2b1bebf4fb84 Mon Sep 17 00:00:00 2001
From: Mehak Nasir <mehaknasir94@gmail.com>
Date: Fri, 28 May 2021 16:08:46 +0500
Subject: [PATCH] style: added icon buttons for fixing hover styling for topics
 delete/expand/collapse

---
 .../shared/discussion-topics/TopicItem.jsx    | 26 +++++++++++++++----
 .../app-config-form/apps/shared/messages.js   | 12 +++++++++
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
index 73fcc739c..3f345f43e 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Collapsible, Form, Card, Button,
+  Collapsible, Form, Card, Button, IconButton, Icon,
 } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useFormikContext } from 'formik';
@@ -102,17 +102,33 @@ const TopicItem = ({
             >
               <Collapsible.Visible whenClosed>
                 {getHeading(false)}
-                <div className="py-2 ml-auto">
-                  <ExpandMore />
+                <div className="ml-auto">
+                  <IconButton
+                    alt={intl.formatMessage(messages.expandAltText)}
+                    src={ExpandMore}
+                    iconAs={Icon}
+                    variant="dark"
+                  />
                 </div>
               </Collapsible.Visible>
               <Collapsible.Visible whenOpen>
                 {getHeading(true)}
                 <div className="pr-4 border-right">
-                  <Delete onClick={deleteDiscussionTopic} />
+                  <IconButton
+                    onClick={deleteDiscussionTopic}
+                    alt={intl.formatMessage(messages.deleteAltText)}
+                    src={Delete}
+                    iconAs={Icon}
+                    variant="dark"
+                  />
                 </div>
                 <div className="pl-4">
-                  <ExpandLess />
+                  <IconButton
+                    alt={intl.formatMessage(messages.collapseAltText)}
+                    src={ExpandLess}
+                    iconAs={Icon}
+                    variant="dark"
+                  />
                 </div>
               </Collapsible.Visible>
             </Collapsible.Trigger>
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js b/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js
index 4f4e35f02..99c5f08b2 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js
@@ -171,6 +171,18 @@ const messages = defineMessages({
     id: 'authoring.discussions.builtIn.blackoutDates.formattingError',
     defaultMessage: "There's a formatting error in your blackout dates.",
   },
+  deleteAltText: {
+    id: 'authoring.topics.delete',
+    defaultMessage: 'Delete Topic',
+  },
+  expandAltText: {
+    id: 'authoring.topics.expand',
+    defaultMessage: 'Expand',
+  },
+  collapseAltText: {
+    id: 'authoring.topics.collapse',
+    defaultMessage: 'Collapse',
+  },
 });
 
 export default messages;