chore: replace svg with png, add opacity animation to floating bar

src/components/FloatingBar/FloatingBar.css

@@ -12,6 +12,12 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  opacity: 0;
+  transition: all 0.5s ease 0s;
+}
+
+.FloatingBar--visible {
+  opacity: 1;
 }
 
 .FloatingBar__ProposalSectionActions {
@@ -27,8 +33,14 @@
   line-height: 24px;
   font-weight: var(--weight-semi-bold);
   text-transform: uppercase;
-  display: flex;
   gap: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.FloatingBar__ReactionsImg {
+  height: 24px;
+  width: 36px;
 }
 
 .FloatingBar__JoinDiscussion {

src/components/FloatingBar/FloatingBar.tsx

@@ -10,10 +10,11 @@ import useProposalComments from '../../hooks/useProposalComments'
 import Link from '../Common/Typography/Link'
 import Forum from '../Icon/Forum'
 import Open from '../Icon/Open'
-import Reactions from '../Icon/Reactions'
 
 import './FloatingBar.css'
 
+const reactions = require('../../images/reactions.png').default
+
 interface FloatingBarProps {
   isVisible: boolean
   showViewReactions: boolean
@@ -35,14 +36,14 @@ const FloatingBar: React.FC<FloatingBarProps> = ({
 }) => {
   const t = useFormatMessage()
   const { comments, isLoadingComments } = useProposalComments(proposalId)
-  if (!isVisible) return null
+
   return (
-    <div className="FloatingBar">
+    <div className={classNames('FloatingBar', isVisible && 'FloatingBar--visible')}>
       <div className="FloatingBar__ProposalSectionActions">
         {showViewReactions && (
           <Link onClick={scrollToReactions} className={'FloatingBar__Action'}>
             {t('component.floating_bar.view_reactions_label')}
-            <Reactions />
+            <img src={reactions} className="FloatingBar__ReactionsImg" />
           </Link>
         )}
         <Link onClick={scrollToComments} className={'FloatingBar__Action'}>